/* ============================================================
 * Apple Finance Reserve — 浅色主题覆盖层
 * 仅在 html:not(.dark) 下生效, 零影响深色模式
 * 设计语言: 苹果金融 App 的大数字 + 柔和圆角 + 极淡阴影
 * ============================================================ */

/* ---- Design Tokens ---- */
html:not(.dark) {
    --apple-bg: #FAFAFA;
    --apple-surface: #FFFFFF;
    --apple-surface-alt: #F2F2F7;  /* 次级卡片 / 输入框背景 */
    --apple-ink: #1D1D1F;
    --apple-ink-2: #3A3A3C;       /* 次级文字 */
    --apple-muted: #6E6E73;       /* 弱化文字 */
    --apple-hint: #8E8E93;        /* 更弱 / 占位 */
    --apple-border: #E5E5E7;      /* 主边框 */
    --apple-border-soft: #F0F0F2; /* 极轻分割 */

    /* Apple 语义色 (iOS 15+ 浅色值, 比 Tailwind 柔和) */
    --apple-blue: #0071E3;        /* 苹果官网蓝, 非 #0A84FF iOS 蓝 */
    --apple-green: #248A3D;       /* 深一度, 打印也清晰 */
    --apple-red: #D70015;
    --apple-orange: #B25000;
    --apple-purple: #8944AB;

    /* Shadow stack (Apple 多层极淡) */
    --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --apple-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
    --apple-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06);

    /* Spring / Apple easing */
    --apple-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
    --apple-duration: 200ms;
}

/* ---- Base ---- */
html:not(.dark) body {
    background: var(--apple-bg);
    color: var(--apple-ink);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03";  /* PJ 的风格替代字形 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* 中文字体单独处理 (PJ 不含中文) */
html:not(.dark) body,
html:not(.dark) button,
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    font-family: 'Plus Jakarta Sans', -apple-system, 'PingFang SC', 'Source Han Sans SC',
                 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}

/* ---- Typography Hierarchy ---- */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) .font-display {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', -apple-system, 'PingFang SC', sans-serif;
    font-variation-settings: "opsz" 28, "wdth" 100;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--apple-ink);
}

html:not(.dark) h1 { font-variation-settings: "opsz" 48, "wdth" 100; font-weight: 700; }
html:not(.dark) h2 { font-variation-settings: "opsz" 36, "wdth" 100; }

/* 数字等宽 — 金融刚需 */
html:not(.dark) .mono,
html:not(.dark) .tabular,
html:not(.dark) .tabular-nums,
html:not(.dark) [class*="font-mono"] {
    font-family: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-feature-settings: "tnum" 1, "zero" 1;  /* 等宽数字 + 斜线零 */
}

/* 全站数字自动 tabular (美元符/¥ 后紧跟数字) */
html:not(.dark) [class*="text-2xl"],
html:not(.dark) [class*="text-3xl"],
html:not(.dark) [class*="text-4xl"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ---- Cards & Surfaces ---- */
/* 覆盖 Tailwind bg-white 为 Apple card 外观 */
html:not(.dark) .bg-white {
    background: var(--apple-surface) !important;
    border: 1px solid var(--apple-border);
    box-shadow: var(--apple-shadow-sm);
}

/* gray-50 / gray-100 当次级面板 */
html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-gray-100 {
    background: var(--apple-surface-alt) !important;
}

/* 所有大容器圆角升级 */
html:not(.dark) .rounded-lg {
    border-radius: 14px;
}
html:not(.dark) .rounded-xl {
    border-radius: 18px;
}
html:not(.dark) .rounded {
    border-radius: 10px;
}

/* 顶部状态栏 (bg-gray-850 自定义) — 改为白卡带细边 */
html:not(.dark) #top-status-bar {
    background: var(--apple-surface) !important;
    border-bottom: 1px solid var(--apple-border);
    color: var(--apple-ink-2) !important;
    box-shadow: var(--apple-shadow-sm);
}
html:not(.dark) #top-status-bar .text-green-400 { color: var(--apple-green) !important; }
html:not(.dark) #top-status-bar .text-red-400 { color: var(--apple-red) !important; }
html:not(.dark) #top-status-bar .text-yellow-400 { color: var(--apple-orange) !important; }

/* 主 nav 栏 */
html:not(.dark) nav {
    background: var(--apple-surface) !important;
    border-bottom: 1px solid var(--apple-border) !important;
    box-shadow: none !important;
}

/* nav-card hover 变 Apple 柔和灰 */
html:not(.dark) .nav-card {
    color: var(--apple-ink-2);
    transition: all var(--apple-duration) var(--apple-ease);
}
html:not(.dark) .nav-card:hover {
    background: var(--apple-surface-alt) !important;
    transform: translateY(-1px);
}

/* ---- Buttons ---- */
/* 主 CTA 按钮 (蓝) */
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-blue-500 {
    background: var(--apple-blue) !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 113, 227, 0.2);
    border: none;
    transition: all var(--apple-duration) var(--apple-ease);
}
html:not(.dark) .bg-blue-600:hover,
html:not(.dark) .bg-blue-500:hover,
html:not(.dark) .hover\:bg-blue-700:hover {
    background: #0077ED !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25);
}

/* 次级灰按钮 */
html:not(.dark) .bg-gray-600,
html:not(.dark) .bg-gray-700 {
    background: var(--apple-surface-alt) !important;
    color: var(--apple-ink) !important;
    border: 1px solid var(--apple-border);
}
html:not(.dark) .hover\:bg-gray-600:hover,
html:not(.dark) .hover\:bg-gray-500:hover {
    background: #E8E8EA !important;
}

/* 红色危险按钮 */
html:not(.dark) .bg-red-600,
html:not(.dark) .bg-red-500 {
    background: var(--apple-red) !important;
    color: #FFFFFF !important;
}

/* 绿色成功 */
html:not(.dark) .bg-green-600,
html:not(.dark) .bg-green-500 {
    background: var(--apple-green) !important;
    color: #FFFFFF !important;
}

/* ---- Text Colors Semantic ---- */
html:not(.dark) .text-green-400,
html:not(.dark) .text-green-500,
html:not(.dark) .text-green-300 { color: var(--apple-green) !important; }

html:not(.dark) .text-red-400,
html:not(.dark) .text-red-500,
html:not(.dark) .text-red-300 { color: var(--apple-red) !important; }

html:not(.dark) .text-yellow-400,
html:not(.dark) .text-yellow-500,
html:not(.dark) .text-amber-400 { color: var(--apple-orange) !important; }

html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-500,
html:not(.dark) .text-blue-300 { color: var(--apple-blue) !important; }

html:not(.dark) .text-gray-500 { color: var(--apple-muted) !important; }
html:not(.dark) .text-gray-600 { color: var(--apple-ink-2) !important; }
html:not(.dark) .text-gray-900 { color: var(--apple-ink) !important; }

/* ---- Form Inputs ---- */
html:not(.dark) input[type="text"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="search"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) select,
html:not(.dark) textarea {
    background: var(--apple-surface-alt) !important;
    color: var(--apple-ink) !important;
    border: 1px solid var(--apple-border) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    transition: border-color var(--apple-duration), box-shadow var(--apple-duration);
}
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    outline: none !important;
    border-color: var(--apple-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

/* 顶部 account/strategy selector 更紧凑 */
html:not(.dark) #account-selector,
html:not(.dark) #strategy-selector {
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* ---- Tables ---- */
html:not(.dark) table {
    border-collapse: separate;
    border-spacing: 0;
}
html:not(.dark) thead tr,
html:not(.dark) .bg-gray-700 tr,
html:not(.dark) thead.bg-gray-700 {
    background: var(--apple-surface-alt) !important;
}
html:not(.dark) th {
    color: var(--apple-muted) !important;
    font-weight: 500 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--apple-border);
}
html:not(.dark) td {
    color: var(--apple-ink);
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--apple-border-soft);
    font-variant-numeric: tabular-nums;
}
html:not(.dark) tr:hover {
    background: var(--apple-surface-alt) !important;
}
html:not(.dark) tr:last-child td {
    border-bottom: none;
}

/* ---- Borders ---- */
html:not(.dark) .border-gray-300,
html:not(.dark) .border-gray-200,
html:not(.dark) .border-gray-400 {
    border-color: var(--apple-border) !important;
}

/* ---- KBD / keyboard hint ---- */
html:not(.dark) kbd {
    background: var(--apple-surface-alt) !important;
    color: var(--apple-ink) !important;
    border: 1px solid var(--apple-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Geist Mono', 'SF Mono', monospace;
    font-size: 11px;
}

/* ---- 快捷键帮助 Modal / Capital 抽屉 ---- */
html:not(.dark) #shortcuts-help-modal > div,
html:not(.dark) #capital-drawer {
    background: var(--apple-surface) !important;
    color: var(--apple-ink) !important;
    border-left: 1px solid var(--apple-border);
    box-shadow: var(--apple-shadow-lg);
}
html:not(.dark) #shortcuts-help-modal h3,
html:not(.dark) #capital-drawer h3 {
    color: var(--apple-ink) !important;
}
html:not(.dark) #shortcuts-help-modal {
    background: rgba(0, 0, 0, 0.3) !important;  /* 遮罩更柔和 */
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}
html:not(.dark) #capital-drawer-mask {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ---- Scrollbar ---- */
html:not(.dark) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html:not(.dark) ::-webkit-scrollbar-track {
    background: transparent;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #D1D1D6;
    border-radius: 5px;
    border: 2px solid var(--apple-bg);
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #C7C7CC;
}

/* ============================================================
 * Tinted 色卡 — Apple 风格
 *   浅色下, 实心彩色 gradient 卡 → 同色调淡色底 + 深色字 (像 Apple Health App 的 activity rings 区块)
 *   避免 "饱和大色块 + 白底" 的 web 2.0 广告感
 * ============================================================ */

/* 蓝 */
html:not(.dark) [class*="bg-gradient"][class*="from-blue-"],
html:not(.dark) [class*="bg-gradient"][class*="from-indigo-"],
html:not(.dark) [class*="bg-gradient"][class*="from-sky-"] {
    background: linear-gradient(135deg, #E8F1FF 0%, #D6E4F9 100%) !important;
    color: #003D82 !important;
    border: 1px solid #C7DBF7 !important;
    box-shadow: var(--apple-shadow-sm);
}
/* 绿 */
html:not(.dark) [class*="bg-gradient"][class*="from-green-"],
html:not(.dark) [class*="bg-gradient"][class*="from-emerald-"],
html:not(.dark) [class*="bg-gradient"][class*="from-teal-"] {
    background: linear-gradient(135deg, #E8F5EC 0%, #D4E9DA 100%) !important;
    color: #0D5F2C !important;
    border: 1px solid #C4DFCC !important;
    box-shadow: var(--apple-shadow-sm);
}
/* 紫 */
html:not(.dark) [class*="bg-gradient"][class*="from-purple-"],
html:not(.dark) [class*="bg-gradient"][class*="from-violet-"],
html:not(.dark) [class*="bg-gradient"][class*="from-fuchsia-"] {
    background: linear-gradient(135deg, #F3E8FF 0%, #E5D2F7 100%) !important;
    color: #4A148C !important;
    border: 1px solid #DDC6EF !important;
    box-shadow: var(--apple-shadow-sm);
}
/* 橙/琥珀 */
html:not(.dark) [class*="bg-gradient"][class*="from-orange-"],
html:not(.dark) [class*="bg-gradient"][class*="from-amber-"],
html:not(.dark) [class*="bg-gradient"][class*="from-yellow-"] {
    background: linear-gradient(135deg, #FFF4E0 0%, #FFE7C2 100%) !important;
    color: #7A3E00 !important;
    border: 1px solid #F7D59A !important;
    box-shadow: var(--apple-shadow-sm);
}
/* 红/粉 */
html:not(.dark) [class*="bg-gradient"][class*="from-red-"],
html:not(.dark) [class*="bg-gradient"][class*="from-pink-"],
html:not(.dark) [class*="bg-gradient"][class*="from-rose-"] {
    background: linear-gradient(135deg, #FFE6E6 0%, #FFCECE 100%) !important;
    color: #8B0000 !important;
    border: 1px solid #F5BFBF !important;
    box-shadow: var(--apple-shadow-sm);
}
/* 灰 */
html:not(.dark) [class*="bg-gradient"][class*="from-gray-"],
html:not(.dark) [class*="bg-gradient"][class*="from-slate-"],
html:not(.dark) [class*="bg-gradient"][class*="from-zinc-"] {
    background: linear-gradient(135deg, #F5F5F7 0%, #E8E8EB 100%) !important;
    color: var(--apple-ink) !important;
    border: 1px solid var(--apple-border) !important;
}

/* Tinted 卡片内部的 text-blue-100/text-green-100 等淡色标签 →
   浅色 tint 背景下必须清晰可读 — 不用 opacity, 直接指定同色系深色 */
html:not(.dark) [class*="bg-gradient"][class*="from-blue-"] [class*="text-blue-100"],
html:not(.dark) [class*="bg-gradient"][class*="from-blue-"] [class*="text-blue-200"],
html:not(.dark) [class*="bg-gradient"][class*="from-indigo-"] [class*="text-indigo-100"] {
    color: #0D47A1 !important;  /* 深蓝标签 */
    opacity: 1 !important;
    font-weight: 500;
}
html:not(.dark) [class*="bg-gradient"][class*="from-green-"] [class*="text-green-100"],
html:not(.dark) [class*="bg-gradient"][class*="from-green-"] [class*="text-green-200"],
html:not(.dark) [class*="bg-gradient"][class*="from-emerald-"] [class*="text-emerald-100"] {
    color: #1B5E20 !important;  /* 深绿标签 */
    opacity: 1 !important;
    font-weight: 500;
}
html:not(.dark) [class*="bg-gradient"][class*="from-purple-"] [class*="text-purple-100"],
html:not(.dark) [class*="bg-gradient"][class*="from-purple-"] [class*="text-purple-200"],
html:not(.dark) [class*="bg-gradient"][class*="from-violet-"] [class*="text-violet-100"] {
    color: #4A148C !important;  /* 深紫标签 */
    opacity: 1 !important;
    font-weight: 500;
}
html:not(.dark) [class*="bg-gradient"][class*="from-orange-"] [class*="text-orange-100"],
html:not(.dark) [class*="bg-gradient"][class*="from-orange-"] [class*="text-orange-200"],
html:not(.dark) [class*="bg-gradient"][class*="from-amber-"] [class*="text-amber-100"],
html:not(.dark) [class*="bg-gradient"][class*="from-yellow-"] [class*="text-yellow-100"] {
    color: #6B2C00 !important;  /* 深橙标签 */
    opacity: 1 !important;
    font-weight: 500;
}
html:not(.dark) [class*="bg-gradient"][class*="from-red-"] [class*="text-red-100"],
html:not(.dark) [class*="bg-gradient"][class*="from-red-"] [class*="text-red-200"],
html:not(.dark) [class*="bg-gradient"][class*="from-pink-"] [class*="text-pink-100"] {
    color: #7F0000 !important;  /* 深红标签 */
    opacity: 1 !important;
    font-weight: 500;
}

/* Tint 卡片内 text-white (主数字) 父已变 tint 深色, 继承即可; 小字 text-X-100 做副标 */
html:not(.dark) [class*="bg-gradient"] .text-gray-900,
html:not(.dark) [class*="bg-gradient"] .text-white {
    color: inherit !important;
}

/* Tinted 卡片内的 emoji opacity-20 原本在深色下几乎隐形, 浅色下 opacity 提高让 emoji 可见 */
html:not(.dark) [class*="bg-gradient"] .opacity-20 {
    opacity: 0.5 !important;
}
html:not(.dark) [class*="bg-gradient"] .opacity-30 {
    opacity: 0.6 !important;
}

/* ============================================================
 * Tinted 按钮 — 次级/非主 CTA 改 Apple SF Symbols 风格
 *   主 CTA (primary action, 通常一组里最重要的一个): 保留实心饱和色
 *   次要/批量操作: 淡色底 + 彩色字 (tint style)
 * ============================================================ */

/* 次级/批量操作按钮 — 绿色 tinted */
html:not(.dark) button.bg-green-600,
html:not(.dark) button.bg-green-500,
html:not(.dark) a.bg-green-600,
html:not(.dark) a.bg-green-500 {
    background: #E8F5EC !important;
    color: #0D5F2C !important;
    border: 1px solid #C4DFCC !important;
    box-shadow: none;
}
html:not(.dark) button.bg-green-600:hover,
html:not(.dark) a.bg-green-600:hover,
html:not(.dark) .hover\:bg-green-700:hover {
    background: #D9EEDF !important;
    border-color: #A8CFB2 !important;
}

/* 蓝色 tinted (非主 CTA - 跟在其他按钮一起时) */
html:not(.dark) button.bg-blue-600.ml-2,
html:not(.dark) button.bg-blue-500.ml-2,
html:not(.dark) button[class*="bg-blue-600"]:not(:first-of-type),
html:not(.dark) .btn-secondary.bg-blue-600 {
    background: #E8F1FF !important;
    color: #003D82 !important;
    border: 1px solid #C7DBF7 !important;
    box-shadow: none;
}

/* 红色 tinted (删除/清空) */
html:not(.dark) button.bg-red-600,
html:not(.dark) button.bg-red-500,
html:not(.dark) a.bg-red-600 {
    background: #FFE6E6 !important;
    color: #8B0000 !important;
    border: 1px solid #F5BFBF !important;
    box-shadow: none;
}
html:not(.dark) button.bg-red-600:hover,
html:not(.dark) .hover\:bg-red-700:hover {
    background: #FFD6D6 !important;
    border-color: #E8A8A8 !important;
}

/* ============================================================
 * 文字对比度加深 (浅色下灰灰的淡色文字要深一度才清晰)
 * ============================================================ */

/* text-gray-400 在浅色下改为 ink-2 确保可读 (深色下保持 Tailwind 原色, 经 migrate 加了 dark: 变体已 OK) */
html:not(.dark) .text-gray-400:not(.dark\:text-gray-400) {
    color: var(--apple-ink-2) !important;
}

/* 对蓝色提示文字加深 (原 text-blue-400 映射 apple-blue 在白底上还是淡) */
html:not(.dark) .text-blue-400 {
    color: #0040A0 !important;  /* 深蓝, 比 apple-blue 更深一度用于白底上的文字 */
}

/* ============================================================
 * Solid 饱和色卡容器 → Tinted (不是 gradient, 是单色实心)
 *   统计卡片 (白名单页的 总数/激活/白金), 操作按钮群, 等
 *   仅针对容器 div / td, 不伤 button 主 CTA (已单独规则处理)
 * ============================================================ */

/* 绿色实心 div/td 改 tint */
html:not(.dark) div.bg-green-600,
html:not(.dark) div.bg-green-700,
html:not(.dark) td.bg-green-600,
html:not(.dark) td.bg-green-700 {
    background: linear-gradient(135deg, #E8F5EC 0%, #D4E9DA 100%) !important;
    color: #0D5F2C !important;
    border: 1px solid #C4DFCC !important;
    box-shadow: var(--apple-shadow-sm);
}

/* 黄/橙实心 div */
html:not(.dark) div.bg-yellow-600,
html:not(.dark) div.bg-yellow-500,
html:not(.dark) div.bg-orange-600,
html:not(.dark) div.bg-orange-500,
html:not(.dark) div.bg-amber-600,
html:not(.dark) td.bg-yellow-600 {
    background: linear-gradient(135deg, #FFF4E0 0%, #FFE7C2 100%) !important;
    color: #7A3E00 !important;
    border: 1px solid #F7D59A !important;
    box-shadow: var(--apple-shadow-sm);
}

/* 红色实心 div */
html:not(.dark) div.bg-red-600,
html:not(.dark) div.bg-red-700,
html:not(.dark) td.bg-red-600 {
    background: linear-gradient(135deg, #FFE6E6 0%, #FFCECE 100%) !important;
    color: #8B0000 !important;
    border: 1px solid #F5BFBF !important;
    box-shadow: var(--apple-shadow-sm);
}

/* 蓝色实心 div (避开按钮 - button 有自己规则) */
html:not(.dark) div.bg-blue-600,
html:not(.dark) div.bg-blue-700,
html:not(.dark) td.bg-blue-600 {
    background: linear-gradient(135deg, #E8F1FF 0%, #D6E4F9 100%) !important;
    color: #003D82 !important;
    border: 1px solid #C7DBF7 !important;
    box-shadow: var(--apple-shadow-sm);
}

/* 紫色实心 div */
html:not(.dark) div.bg-purple-600,
html:not(.dark) div.bg-purple-700,
html:not(.dark) div.bg-violet-600,
html:not(.dark) td.bg-purple-600 {
    background: linear-gradient(135deg, #F3E8FF 0%, #E5D2F7 100%) !important;
    color: #4A148C !important;
    border: 1px solid #DDC6EF !important;
    box-shadow: var(--apple-shadow-sm);
}

/* 实心 tint 卡片内部的 text-*-100/200/300 淡色标签 → 继承父色 + 降透明度 */
html:not(.dark) div[class*="bg-green-"] [class*="text-green-200"],
html:not(.dark) div[class*="bg-green-"] [class*="text-green-300"],
html:not(.dark) div[class*="bg-yellow-"] [class*="text-yellow-200"],
html:not(.dark) div[class*="bg-yellow-"] [class*="text-yellow-300"],
html:not(.dark) div[class*="bg-orange-"] [class*="text-orange-200"],
html:not(.dark) div[class*="bg-red-"] [class*="text-red-200"],
html:not(.dark) div[class*="bg-red-"] [class*="text-red-300"],
html:not(.dark) div[class*="bg-blue-"] [class*="text-blue-200"],
html:not(.dark) div[class*="bg-blue-"] [class*="text-blue-300"],
html:not(.dark) div[class*="bg-purple-"] [class*="text-purple-200"] {
    color: inherit !important;
    opacity: 0.65;
}

/* 实心卡片内 dark:text-white 的大数字 → 继承深色父色 (已 tint 后父色是 ink) */
html:not(.dark) div[class*="bg-green-"] .text-gray-900,
html:not(.dark) div[class*="bg-yellow-"] .text-gray-900,
html:not(.dark) div[class*="bg-orange-"] .text-gray-900,
html:not(.dark) div[class*="bg-red-"] .text-gray-900,
html:not(.dark) div[class*="bg-blue-"] .text-gray-900,
html:not(.dark) div[class*="bg-purple-"] .text-gray-900 {
    color: inherit !important;
    font-weight: 700;
}

/* ============================================================
 * 小徽章/状态标签 (bg-orange-600 的 px-3 py-1 rounded-full) 保留饱和色
 *   这些是"提醒"状态不是卡片, 应突出显示 — 不改
 * ============================================================ */

/* 按钮 hover scale 在 Apple 风格下过度, 改用 translateY */
html:not(.dark) button[class*="hover:scale"]:hover,
html:not(.dark) a[class*="hover:scale"]:hover {
    transform: translateY(-1px) !important;
}

/* ============================================================
 * 蓝色提示框 (bg-blue-900/30 + border-blue-X/50) — 之前映射成 surface-alt 跟页面融合
 *   改: Apple info card 风格 — 淡蓝底 + 深蓝字 + 可见细蓝边
 * ============================================================ */
html:not(.dark) .bg-blue-900\/30,
html:not(.dark) [class*="bg-blue-900"][class*="bg-opacity"],
html:not(.dark) .bg-blue-800\/30 {
    background: #E8F1FF !important;
    color: #003D82 !important;
    border: 1px solid #B8D1F2 !important;
}
html:not(.dark) .bg-yellow-900\/30,
html:not(.dark) .bg-amber-900\/30 {
    background: #FFF4E0 !important;
    color: #6B2C00 !important;
    border: 1px solid #F7D59A !important;
}
html:not(.dark) .bg-red-900\/30 {
    background: #FFEBEE !important;
    color: #7F0000 !important;
    border: 1px solid #F5BFBF !important;
}
html:not(.dark) .bg-green-900\/30 {
    background: #E8F5EC !important;
    color: #1B5E20 !important;
    border: 1px solid #C4DFCC !important;
}

/* 提示框内部 text-blue-400/text-gray-400 文本对齐 */
html:not(.dark) .bg-blue-900\/30 .text-blue-400,
html:not(.dark) .bg-blue-900\/30 .text-blue-300,
html:not(.dark) .bg-blue-900\/30 .text-blue-200 {
    color: #003D82 !important;
}
html:not(.dark) .bg-blue-900\/30 .text-gray-300,
html:not(.dark) .bg-blue-900\/30 .text-gray-400 {
    color: #0040A0 !important;
    opacity: 0.85;
}

/* ============================================================
 * Apple Segmented Control — 整组 tab-btn (股票管理/资金分配)
 *   原: active 是实心蓝按钮 (bg-blue-600), inactive 是灰按钮 (bg-gray-50) - 2 个完全不同风格
 *   改: 都成 Apple segmented control 风格 - active 浅蓝 tint pill, inactive 透明 text-only
 * ============================================================ */

/* Active tab (.tab-btn.bg-blue-600) → 浅蓝 tint pill */
html:not(.dark) .tab-btn.bg-blue-600,
html:not(.dark) button.tab-btn.bg-blue-600,
html:not(.dark) .tab-btn[class*="bg-blue-600"] {
    background: #E8F1FF !important;
    color: #0071E3 !important;
    border: 1px solid #C7DBF7 !important;
    box-shadow: 0 1px 3px rgba(0, 113, 227, 0.08), 0 0 0 1px rgba(0, 113, 227, 0.03) !important;
    font-weight: 600 !important;
    transition: all var(--apple-duration) var(--apple-ease);
}
html:not(.dark) .tab-btn.bg-blue-600:hover,
html:not(.dark) button.tab-btn.bg-blue-600:hover {
    background: #D6E4F9 !important;
    transform: translateY(-1px);
}

/* Inactive tab (.tab-btn.bg-gray-X) → 透明 + muted text */
html:not(.dark) .tab-btn.bg-gray-50,
html:not(.dark) .tab-btn.bg-gray-100,
html:not(.dark) .tab-btn.bg-gray-200,
html:not(.dark) button.tab-btn.bg-gray-50,
html:not(.dark) button.tab-btn[class*="bg-gray"] {
    background: transparent !important;
    color: var(--apple-muted) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
html:not(.dark) .tab-btn.bg-gray-50:hover,
html:not(.dark) button.tab-btn.bg-gray-50:hover {
    background: var(--apple-surface-alt) !important;
    color: var(--apple-ink) !important;
}

/* ---- 策略卡片 (JS 生成 DOM 在 strategies_list 里) ---- */
/* 注意: migrate 脚本只扫 HTML class 属性, JS 里 element.className = '...'
 * 写的硬编码 bg-gray-800 类不会被替换. 这些 JS 生成的元素在浅色下需要 override.
 *
 * 原理: Tailwind 对 `dark:bg-gray-800` 生成 `.dark .dark\:bg-gray-800` 选择器 (不是 .bg-gray-800),
 * 所以下面的 .bg-gray-800 规则不会影响 migrate 过的静态模板元素 (class="bg-white dark:bg-gray-800"),
 * 只命中 JS 硬编码的纯 bg-gray-800 类.
 */
html:not(.dark) .bg-gray-800,
html:not(.dark) .bg-gray-750 {
    background: var(--apple-surface) !important;
}
html:not(.dark) .bg-gray-700 {
    background: var(--apple-surface-alt) !important;
}
html:not(.dark) .bg-gray-900 {
    background: var(--apple-bg) !important;
}
html:not(.dark) .border-gray-700,
html:not(.dark) .border-gray-800,
html:not(.dark) .border-gray-600 {
    border-color: var(--apple-border) !important;
}
html:not(.dark) .text-white {
    color: var(--apple-ink) !important;
}
html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-400 {
    color: var(--apple-muted) !important;
}

/* 策略信号来源标记 / 半透明彩色徽章 */
html:not(.dark) .bg-yellow-900\/30,
html:not(.dark) .bg-red-900\/30,
html:not(.dark) .bg-green-900\/30,
html:not(.dark) .bg-blue-900\/30 {
    background: var(--apple-surface-alt) !important;
    border: 1px solid var(--apple-border);
}

/* hover:border-blue-500 等交互在浅色下也用 apple 蓝 */
html:not(.dark) .hover\:border-blue-500:hover,
html:not(.dark) .hover\:border-blue-400:hover {
    border-color: var(--apple-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08);
}

/* ---- 主题切换按钮 ---- */
html:not(.dark) #theme-toggle {
    color: var(--apple-ink-2) !important;
    background: transparent !important;
    border: 1px solid var(--apple-border);
    border-radius: 10px;
    padding: 6px 10px;
    transition: all var(--apple-duration) var(--apple-ease);
}
html:not(.dark) #theme-toggle:hover {
    background: var(--apple-surface-alt) !important;
}

/* ---- 悬浮快捷键帮助按钮 (右下) ---- */
html:not(.dark) [onclick="showShortcutsHelp()"] {
    background: var(--apple-surface) !important;
    color: var(--apple-ink) !important;
    border: 1px solid var(--apple-border);
    box-shadow: var(--apple-shadow);
}
html:not(.dark) [onclick="showShortcutsHelp()"]:hover {
    background: var(--apple-surface-alt) !important;
    transform: translateY(-2px);
}

/* ---- 登出按钮 ---- */
html:not(.dark) [onclick*="logout"],
html:not(.dark) .logout-btn {
    background: var(--apple-surface-alt) !important;
    color: var(--apple-ink) !important;
    border: 1px solid var(--apple-border);
}

/* ---- 禁止切换动画打断页面性能, 但主题切换时给一个柔和过渡 ---- */
html:not(.dark) body,
html:not(.dark) body * {
    /* 不给所有元素加 transition 防止性能问题 — 只在明确需要的元素上加 */
}

/* ---- Footer ---- */
html:not(.dark) footer {
    color: var(--apple-muted) !important;
    border-top: 1px solid var(--apple-border);
}