/* =====================================================================
   DARK MODE SUPPORT
   触发方式：html[data-theme="dark"]（由 assets/site-polish.js 的 geoToggleDarkMode() 显式开启）
   2026-10-30：改为默认关闭 —— 不再跟随系统 prefers-color-scheme，
   只认显式设置，避免系统深色用户被动整站变暗（沿用 2026-10-11「深色下线」的口径）。
   2026-10-30: Phase 3 UI/UX Optimization
   ===================================================================== */

/* ========== DARK MODE COLOR VARIABLES ========== */
html[data-theme="dark"] {
    /* Primary Colors - Dark Mode
       口径：与浅色同色相、明度小幅上调，禁止荧光感（2026-10-30 修复：
       原 #FF9B50/#4DA3FF 过亮过饱和，marketplace 页签与 chips 大面积
       实心域色在深底上刺眼、白字对比不足）。 */
    --color-primary: #E8955A;
    --color-primary-hover: #F0A873;
    --color-primary-light: #2A2018;

    /* Secondary Colors - Dark Mode */
    --color-secondary: #3E86C9;
    --color-secondary-hover: #5C9CD6;
    --color-secondary-light: #16222E;

    /* Semantic Colors - Success */
    --color-success: #4CB878;
    --color-success-light: #12241A;
    --color-success-on: #7ED9A4;

    /* Semantic Colors - Warning */
    --color-warning: #E8955A;
    --color-warning-light: #2A2018;
    --color-warning-on: #F0A873;

    /* Semantic Colors - Error */
    --color-error: #E06C6C;
    --color-error-light: #2A1616;
    --color-error-on: #F09494;
    --color-error-border: #55292B;

    /* Neutral Colors - Dark Mode */
    --color-neutral-900: #F2F3F5;
    --color-neutral-800: #E8EAED;
    --color-neutral-700: #C5C7CC;
    --color-neutral-600: #9AA0AC;
    --color-neutral-500: #797F8A;
    --color-neutral-400: #5F656F;
    --color-neutral-300: #3D4149;
    --color-neutral-200: #2C3038;
    --color-neutral-100: #1F2329;
    --color-neutral-50: #17191F;
    /* neutral-white 语义恒为「白」：页面把它当白字/白徽标底用（顶栏标题、
       顶栏按钮、实心底上的文字），深色下不能反转成深色——深色面走
       --color-surface / --aws-surface，两者语义分离（2026-10-30 修复：
       原映射 #0F1117 导致顶栏标题与按钮深底深字看不见）。 */
    --color-neutral-white: #FFFFFF;

    /* Border tokens（2026-10-30 补：原先漏映射，--aws-border-light /
       --lp-bd / --lp-bdl / --bd / --bdl 整条链在深色下仍是浅灰） */
    --border-color: #3D4149;
    --border-color-light: #2C3038;

    /* Semantic Text Colors - Dark Mode */
    --color-semantic-text: #E8EAED;
    --color-semantic-text-secondary: #C5C7CC;
    --color-semantic-text-tertiary: #9AA0AC;
    --color-semantic-text-disabled: #5F656F;

    /* Business Domain Colors - Dark Mode
       域色经 [data-nav-domain] 的 --lp-primary 链成为页签 / chips / 主按钮的
       实心底色（配白字）。明度按「白字对比 ≥4.5」定档（2026-10-30 二次下调：
       首版 #3E7FBE 等白字仅 2.4~3.7，实测读不清）。 */
    --color-biz-publish: #33689B;
    --color-biz-publish-light: #16222E;
    --color-biz-publish-ink: #7FB2E0;
    --color-biz-publish-on: #2A5E92;

    --color-biz-content: #7B5FB0;
    --color-biz-content-light: #201830;
    --color-biz-content-ink: #C9B3EE;
    --color-biz-content-on: #6E54A0;

    --color-biz-project: #8F7526;
    --color-biz-project-light: #27200F;
    --color-biz-project-ink: #E4CB84;
    --color-biz-project-on: #96782E;

    --color-biz-insight: #2F7E81;
    --color-biz-insight-light: #0F2223;
    --color-biz-insight-ink: #7FCCCF;
    --color-biz-insight-on: #2C797C;

    --color-biz-account: #35743C;
    --color-biz-account-light: #122415;
    --color-biz-account-ink: #8CD096;
    --color-biz-account-on: #377940;

    --color-biz-platform: #626C79;
    --color-biz-platform-light: #1C1E22;
    --color-biz-platform-ink: #B4BCC6;
    --color-biz-platform-on: #5B636D;

    /* Surface Colors - Dark Mode */
    --color-surface: #0F1117;
    --color-surface-secondary: #17191F;
    --color-surface-hover: #1F2329;
    --color-surface-disabled: #2C3038;

    /* AWS Legacy Tokens - Dark Mode */
    --aws-navy: #0F1117;
    --aws-dark: #17191F;
    --aws-orange: #E8955A;
    --aws-orange-hover: #F0A873;
    --aws-blue: #3E86C9;
    --aws-light: #E8EAED;
    --aws-gray: #9AA0AC;
    --aws-border: #3D4149;
    --aws-border-light: #2C3038;
    --aws-white: #FFFFFF;
    --aws-navy-hover: #263447;
    --aws-text: #E8EAED;
    --aws-text-secondary: #C5C7CC;
    --aws-text-tertiary: #9AA0AC;
    --aws-bg: #131521;
    --aws-surface: #0F1117;
    --aws-surface-2: #17191F;
    --aws-hover-row: #1F2329;
    --aws-green: #4CB878;
    --aws-red: #E06C6C;
    --aws-red-light: #2A1616;

    /* 徽标配对层（site-theme.css 字面量，深色下 ink/border 反转：
       ink 变亮字、border 变深线，浅底类走 --color-*-light 链已自动翻） */
    --aws-green-ink: #7ED9A4;
    --aws-green-border: #2C4A34;
    --aws-amber-ink: #E4C57E;
    --aws-amber: #E4C57E;
    --aws-amber-light: #27200F;
    --aws-amber-border: #4D3F1A;
    --aws-blue-border: #274B66;
    --aws-indigo: #9AA6F0;
    --aws-indigo-light: #1C1F38;
    --aws-violet: #B79BF0;
    --aws-violet-light: #241C38;
}



/* ========== DARK MODE COMPONENT OVERRIDES ========== */
html[data-theme="dark"] body {
    background: var(--aws-bg);
    color: var(--color-semantic-text);}

/* Links */
html[data-theme="dark"] a {
    color: var(--color-secondary);}

html[data-theme="dark"] a:visited {
    color: #9FB8FF;}

/* Code blocks */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background: var(--color-neutral-100);
    color: var(--color-semantic-text);
    border: 1px solid var(--color-neutral-300);}

/* Input elements */
html[data-theme="dark"] .c-input,
html[data-theme="dark"] .c-select,
html[data-theme="dark"] .c-textarea {
    background: var(--color-neutral-100);
    color: var(--color-semantic-text);
    border-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-input:focus,
html[data-theme="dark"] .c-select:focus,
html[data-theme="dark"] .c-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 155, 80, 0.15);}

html[data-theme="dark"] .c-input::placeholder,
html[data-theme="dark"] .c-textarea::placeholder {
    color: var(--color-semantic-text-tertiary);}

html[data-theme="dark"] .c-input:disabled,
html[data-theme="dark"] .c-select:disabled,
html[data-theme="dark"] .c-textarea:disabled {
    background: var(--color-neutral-200);
    color: var(--color-semantic-text-disabled);}

/* Buttons */
html[data-theme="dark"] .c-btn {
    background: var(--color-neutral-300);
    color: var(--color-semantic-text);
    border-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-btn:hover {
    background: var(--color-neutral-200);}

html[data-theme="dark"] .c-btn.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #000;}

html[data-theme="dark"] .c-btn.primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);}

html[data-theme="dark"] .c-btn.secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #000;}

html[data-theme="dark"] .c-btn.secondary:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);}

html[data-theme="dark"] .c-btn.danger {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #000;}

html[data-theme="dark"] .c-btn.danger:hover {
    background: var(--color-error-on);
    border-color: var(--color-error-on);}

html[data-theme="dark"] .c-btn.ghost {
    background: transparent;
    border-color: var(--color-neutral-300);
    color: var(--color-semantic-text);}

html[data-theme="dark"] .c-btn.ghost:hover {
    background: var(--color-neutral-200);}

/* Cards */
html[data-theme="dark"] .c-card {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-card-header {
    background: var(--color-neutral-200);
    border-bottom-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-card-footer {
    background: var(--color-neutral-200);
    border-top-color: var(--color-neutral-300);}

/* Modals */
html[data-theme="dark"] .c-modal {
    background: var(--color-neutral-100);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);}

html[data-theme="dark"] .c-modal-header {
    background: var(--color-neutral-200);
    border-bottom-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-modal-header .c-modal-close:hover {
    background: var(--color-neutral-300);
    color: var(--color-semantic-text);}

html[data-theme="dark"] .c-modal-footer {
    border-top-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-modal-mask {
    background: rgba(0, 0, 0, 0.65);}

/* Tables */
html[data-theme="dark"] .c-table {
    background: var(--color-neutral-100);}

html[data-theme="dark"] .c-table thead {
    background: var(--color-neutral-200);
    border-bottom-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-table td {
    border-bottom-color: var(--color-neutral-200);}

html[data-theme="dark"] .c-table tbody tr:hover {
    background: var(--color-neutral-200);}

/* Alerts */
html[data-theme="dark"] .c-alert.info {
    background: rgba(77, 163, 255, 0.1);
    border-left-color: var(--color-secondary);
    color: var(--color-secondary);}

html[data-theme="dark"] .c-alert.success {
    background: rgba(74, 222, 128, 0.1);
    border-left-color: var(--color-success);
    color: var(--color-success);}

html[data-theme="dark"] .c-alert.warning {
    background: rgba(255, 155, 80, 0.1);
    border-left-color: var(--color-warning);
    color: var(--color-warning);}

html[data-theme="dark"] .c-alert.error {
    background: rgba(255, 107, 107, 0.1);
    border-left-color: var(--color-error);
    color: var(--color-error);}

/* Pagination */
html[data-theme="dark"] .c-pagination-item {
    background: var(--color-neutral-100);
    color: var(--color-semantic-text);
    border-color: var(--color-neutral-300);}

html[data-theme="dark"] .c-pagination-item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);}

html[data-theme="dark"] .c-pagination-item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #000;}

/* Badges */
html[data-theme="dark"] .c-badge {
    background: var(--color-neutral-300);
    color: var(--color-semantic-text);}

html[data-theme="dark"] .c-badge.primary {
    background: var(--color-primary);
    color: #000;}

html[data-theme="dark"] .c-badge.success {
    background: rgba(74, 222, 128, 0.15);
    color: var(--color-success);}

html[data-theme="dark"] .c-badge.error {
    background: rgba(255, 107, 107, 0.15);
    color: var(--color-error);}

html[data-theme="dark"] .c-badge.warning {
    background: rgba(255, 155, 80, 0.15);
    color: var(--color-warning);}

/* Tags */
html[data-theme="dark"] .c-tag {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-300);
    color: var(--color-semantic-text);}

/* Tooltip */
html[data-theme="dark"] .c-tooltip .tooltip-text {
    background: var(--color-semantic-text);
    color: var(--color-neutral-white);}

html[data-theme="dark"] .c-tooltip .tooltip-text::after {
    border-top-color: var(--color-semantic-text);}

/* Sidebar */
html[data-theme="dark"] .sidebar {
    background: var(--aws-navy);}

html[data-theme="dark"] .sbf-item {
    color: rgba(255, 255, 255, 0.7);}

html[data-theme="dark"] .sbf-item:hover {
    background: rgba(255, 255, 255, 0.1);}

html[data-theme="dark"] .sbf-item.active {
    background: rgba(255, 155, 80, 0.2);}

html[data-theme="dark"] .sbf-bal {
    color: rgba(255, 255, 255, 0.6);}

html[data-theme="dark"] .sbf-bal b {
    color: var(--aws-orange);}

/* Sidebar bottom todo card */
html[data-theme="dark"] .sb-todo {
    background: var(--color-neutral-100);
    border-color: var(--color-error);}

html[data-theme="dark"] .sb-todo-t b {
    color: var(--color-error);}

html[data-theme="dark"] .sb-todo-go {
    background: var(--color-secondary);
    color: #000;}

html[data-theme="dark"] .sb-todo-go:hover {
    background: var(--color-secondary-hover);}

html[data-theme="dark"] .sb-todo-x {
    border-color: var(--color-neutral-300);
    color: var(--color-semantic-text-secondary);
    background: var(--color-neutral-100);}

html[data-theme="dark"] .sb-todo-x:hover {
    border-color: var(--color-semantic-text-tertiary);
    color: var(--color-semantic-text);}

/* Spinner */
html[data-theme="dark"] .c-spinner {
    border-color: var(--color-neutral-300);
    border-top-color: var(--color-primary);}

/* Divider */
html[data-theme="dark"] .c-divider {
    background: var(--color-neutral-300);}

/* Checkbox and Radio */
html[data-theme="dark"] .c-checkbox input,
html[data-theme="dark"] .c-radio input {
    accent-color: var(--color-primary);}

/* Form help text and errors */
html[data-theme="dark"] .c-form-group .c-help {
    color: var(--color-semantic-text-secondary);}

html[data-theme="dark"] .c-form-group .c-error {
    color: var(--color-error);}

/* Back to top button */
html[data-theme="dark"] .gx-top {
    background: var(--color-primary);
    color: #000;
    border: none;}

html[data-theme="dark"] .gx-top:hover {
    background: var(--color-primary-hover);}

/* Toast */
html[data-theme="dark"] .toast {
    background: var(--color-neutral-300);
    color: var(--color-semantic-text);}

html[data-theme="dark"] .toast.success {
    background: rgba(74, 222, 128, 0.2);
    border-left: 3px solid var(--color-success);}

html[data-theme="dark"] .toast.error {
    background: rgba(255, 107, 107, 0.2);
    border-left: 3px solid var(--color-error);}

/* Login page */
html[data-theme="dark"] .login-side {
    background: linear-gradient(135deg, var(--aws-navy) 0%, #1a2533 100%);}

html[data-theme="dark"] .login-panel {
    background: var(--color-neutral-100);}

html[data-theme="dark"] .contact-card {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-300);
    color: var(--color-semantic-text);}

html[data-theme="dark"] .contact-card:hover {
    border-color: var(--color-primary);}

html[data-theme="dark"] .contact-card .ico {
    background: rgba(255, 155, 80, 0.15);
    color: var(--color-primary);}

html[data-theme="dark"] .contact-card .txt strong {
    color: var(--color-semantic-text);}

/* Modal dialog */
html[data-theme="dark"] .modal-box {
    background: var(--color-neutral-100);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);}

html[data-theme="dark"] .modal-box h3 {
    color: var(--color-semantic-text);}

html[data-theme="dark"] .qr-fallback {
    background: var(--color-neutral-200);
    border-color: var(--color-neutral-300);}

/* Scrollbar styling for dark mode */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-neutral-100);}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300);
    border-radius: 4px;}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400);}

/* ========== 2026-10-30 补：页面 literal 浅色收口 ========== */

/* loop.css .lp-searchbar 的 literal #fcfdfe（媒体市场搜索条，深色下是一条白带） */
html[data-theme="dark"] .lp-searchbar {
    background: var(--color-surface-secondary);}

/* loop.css 表格行 hover 的 literal #fbfcfe（深色下整行闪白） */
html[data-theme="dark"] .lp-table tr:hover td,
html[data-theme="dark"] .lp-qtable tr:hover td {
    background: var(--color-surface-hover);}

/* loop.css .lp-more hover 的 literal #e88a00 */
html[data-theme="dark"] .lp-more:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);}

/* 行内徽标（tableHtml 里的 literal 浅底小块）：深色下反转底字 */
html[data-theme="dark"] .lp-badge {
    background: var(--color-neutral-200) !important;
    color: var(--color-semantic-text) !important;}

/* KPI 数字 / 图标块的浅底（各页 literal #fff 系兜底） */
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .lp-card,
html[data-theme="dark"] .card {
    background: var(--color-surface);}

/* 顶栏与吸顶元素保持深蓝底（浅色下本来就是 navy，token 链已翻，这里显式兜底） */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .lp-topbar {
    background: var(--aws-navy);
    color: #fff;}

/* 实心域色底的文字：浅色下白字来自 var(--aws-surface)=#fff，
   深色下 --aws-surface 是深色面值，实心底必须显式保持白字 */
html[data-theme="dark"] .lp-mtab.on,
html[data-theme="dark"] .lp-chip.lg.on,
html[data-theme="dark"] .lp-chip.sq.on,
html[data-theme="dark"] .lp-more {
    color: #fff;}

/* 主按钮：沿用浅色口径「橙底 + 深字」（site-components .btn-primary 本就是
   var(--aws-navy) 深字），深色下对比 4.6:1；显式覆盖防止个别页面把按钮文字
   改成 --aws-blue 之类导致蓝字压橙底（实测 1.6:1 不可读） */
html[data-theme="dark"] .btn-primary {
    color: #0F1117;}

/* 无业务域色（橙底）页面的主按钮文字同样用深字；有 [data-nav-domain] 时
   域色底保持白字（site-polish 的 --lp-primary-on:#fff 口径不被覆盖） */
html[data-theme="dark"]:not([data-nav-domain]) {
    --lp-primary-on: #0F1117;
}

/* 深底容器里依赖 var(--aws-surface)=白 的文字（顶栏标题 / 顶栏 ghost 按钮 /
   侧栏视角下拉），深色下 surface 是面值（深），必须显式白字：
   特异性 html[data-theme] + 原选择器，压过 polish / loop / sidebar 内联 */
html[data-theme="dark"] body .main .topbar h1,
html[data-theme="dark"] body .main .topbar h2,
html[data-theme="dark"] body .lp-main .lp-topbar h1,
html[data-theme="dark"] body .lp-main .lp-topbar h2,
html[data-theme="dark"] body .main .topbar .lp-btn.ghost,
html[data-theme="dark"] body .lp-main .lp-topbar .lp-btn.ghost,
html[data-theme="dark"] body .sidebar .sb-view-sel {
    color: #fff;}

/* site-components .data-table 表头：--aws-navy 在浅色下当深字用，
   深色下 navy=近黑、底 --aws-surface-2 也是深 → 深底深字，反转为亮字 */
html[data-theme="dark"] .data-table th {
    color: var(--color-semantic-text);}

/* site-polish 卡头标题（card-h h2 / lp-card-h h2|h3）同样用 --aws-navy 当深字，
   深色下卡头底是深色 surface-2 → 统一反转为正文亮色 */
html[data-theme="dark"] body .main .card-h h2,
html[data-theme="dark"] body .main .card-h h3,
html[data-theme="dark"] body .lp-main .lp-card-h h2,
html[data-theme="dark"] body .lp-main .lp-card-h h3 {
    color: var(--color-semantic-text);}

/* 页面内联样式里用 --aws-navy 当「分组标签」深字的地方（实测 1:1 完全不可见）：
   媒体市场筛选区 .mk-lb / .mk-presets-lb */
html[data-theme="dark"] .mk-lb,
html[data-theme="dark"] .mk-presets-lb {
    color: var(--color-semantic-text-secondary);}