/* Proton Light Theme — claude-dashboard-rewrite 2026-04-21
 *
 * 策略:
 *   1. html[data-theme="light"] 下重定义 tokens.css 里所有变量为浅色
 *   2. 硬编码 inline style (color:#fff / bg:rgba(...)) 用 !important 在 light 下 override
 *   3. 不改 tokens.css / primitives.css / sidebar.css (ownership: store-redesign / sidebar-rewrite)
 *   4. 默认 data-theme=dark 时本文件不生效, 零 regression
 *
 * 扩展规则 (给其他 cc):
 *   - 所有新 inline style 都改用 var(--bg-surface) / var(--text-primary) 等 token
 *   - 若必须 hardcode, 同步加一条 html[data-theme="light"] ... !important 覆盖
 */

/* ============================================================
 *  Light Theme Tokens (覆盖 tokens.css 的 :root 深色定义)
 * ============================================================ */
html[data-theme="light"] {
    color-scheme: light;

    /* ===== Legacy global-r73.css 变量覆盖 (必须!很多 .m-card / .h-pill / store 套餐卡都在引用) ===== */
    --bg: #FAFAFC;
    --card-bg: #FFFFFF;
    --card-strong: #FFFFFF;
    --card-border: #E5E4EE;
    --text: #1C1B24;
    --sub: #5A5770;
    --sub-text: #5A5770;
    --text-dim: #9896A8;
    --border: rgba(109,74,255,0.14);

    /* ===== pt-* Proton 语义变量组 (global-r73 里, cc4g02-* 和 store 大量用) ===== */
    --pt-bg: #FAFAFC;
    --pt-card: #FFFFFF;
    --pt-card-strong: #FFFFFF;
    --pt-modal-bg: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
    --pt-text: #1C1B24;
    --pt-text-sub: #5A5770;
    --pt-text-mut: #9896A8;
    --pt-text-disabled: #CAC8D8;
    --pt-border: #E5E4EE;
    --pt-border-hover: rgba(109,74,255,0.28);
    --pt-border-focus: rgba(109,74,255,0.45);
    --pt-input: #F5F5F9;
    --pt-input-focus: rgba(109,74,255,0.10);
    --pt-success: #1EA74A;
    --pt-danger: #DA2921;
    --pt-warning: #D97B0C;
    --pt-purple-soft: rgba(109,74,255,0.08);
    --pt-purple-glow: rgba(109,74,255,0.16);
    --pt-purple-line: rgba(109,74,255,0.28);
    /* VIP 品牌色保持不变: --blue --green --purple --orange --red --gold (语义徽章) */

    /* ===== store 独立 :root 变量 (template_css.v15.js 里 <style>:root{} 注入) ===== */
    --border-color: #E5E4EE;
    --sub: #5A5770;
    --hg-proton: #6D4AFF;
    --hg-proton-deep: #5639E0;
    --hg-proton-soft: rgba(109,74,255,0.08);
    --hg-proton-glow: rgba(109,74,255,0.18);

    /* ===== carpool 独立 :root 变量 (carpool/template.js 里 <style>:root{} 注入) ===== */
    --cp-bg: #FAFAFC;
    --cp-surface: #FFFFFF;
    --cp-card: #FFFFFF;
    --cp-border: #E5E4EE;
    --cp-border-h: rgba(109,74,255,0.28);
    --cp-text: #1C1B24;
    --cp-text2: #5A5770;

    /* ===== profile / secure / common 变量 ===== */
    --card-surface: #FFFFFF;
    --page-bg: #FAFAFC;

    /* 核心背景层 */
    --bg-page:     #FAFAFC;      /* 页面最底 */
    --bg-surface:  #FFFFFF;      /* 卡片/面板 */
    --bg-elevated: #F5F5F9;      /* 次级卡片/嵌套 */
    --bg-hover:    #EFEEF7;      /* hover 状态 */
    --bg-input:    #F5F5F9;      /* 输入框底 */

    /* 边框 (深色用 rgba(255,255,255,...), 浅色用纯色更清晰) */
    --border-subtle: #ECEBF3;
    --border-default: #D9D7E4;
    --border-strong: #B6B2CE;
    --border-focus: var(--proton-purple-500);

    /* 文字 */
    --text-primary:   #1C1B24;
    --text-secondary: #5A5770;
    --text-tertiary:  #8A87A3;
    --text-onpurple:  #FFFFFF;

    /* 语义色 — 浅底下降低亮度避免刺眼 */
    --success: #1EA74A;
    --warning: #D97B0C;
    --danger:  #DA2921;
    --info:    var(--proton-purple-500);

    /* 阴影 — 浅底用紫色阴影而非黑 */
    --shadow-sm:      0 1px 2px rgba(28, 27, 36, .06);
    --shadow-md:      0 4px 12px rgba(109, 74, 255, .08);
    --shadow-lg:      0 8px 32px rgba(109, 74, 255, .12);
    --shadow-modal:   0 24px 64px rgba(28, 27, 36, .18);
    --shadow-glow-purple: 0 0 0 4px rgba(109, 74, 255, .18);
}

/* ============================================================
 *  Inline hardcoded-color override (!important 必要)
 *  按"最小覆盖"原则,只覆盖用户能看到的顶层区块
 * ============================================================ */

/* === 根级背景 === */
html[data-theme="light"],
html[data-theme="light"] body {
    background: var(--bg-page) !important;
    color: var(--text-primary) !important;
}

/* === Dashboard home-view === */
html[data-theme="light"] .home-view-container,
html[data-theme="light"] .pc-container {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* hg-page-loading & hg-loader (2 处启动 splash 都是硬编码 #000) */
html[data-theme="light"] #hg-page-loading,
html[data-theme="light"] #hg-loader {
    background: var(--bg-page) !important;
    color: var(--text-secondary) !important;
}

/* === Sidebar 侧栏 === */
html[data-theme="light"] .hg-sidebar,
html[data-theme="light"] #hg-sidebar {
    background: #EEEDF7 !important;        /* Proton Mail 侧栏的浅紫白 */
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .hg-sidebar-brand,
html[data-theme="light"] .hg-brand-title { color: var(--text-primary) !important; }
html[data-theme="light"] .hg-brand-sub,
html[data-theme="light"] .hg-group-title,
html[data-theme="light"] .hg-mobile-title { color: var(--text-secondary) !important; }
html[data-theme="light"] .hg-nav-item { color: var(--text-primary) !important; }
html[data-theme="light"] .hg-nav-item:hover { background: #E1DFF0 !important; color: var(--proton-purple-500) !important; }
html[data-theme="light"] .hg-nav-item.active {
    background: rgba(109, 74, 255, 0.10) !important;
    color: var(--proton-purple-500) !important;
}
html[data-theme="light"] .hg-nav-group-header { color: var(--text-primary) !important; }
html[data-theme="light"] .hg-nav-group-header:hover { background: #E1DFF0 !important; }
html[data-theme="light"] .hg-chevron,
html[data-theme="light"] .hg-hamburger { color: var(--text-secondary) !important; }
html[data-theme="light"] .hg-logout-btn { color: var(--danger) !important; }
html[data-theme="light"] .hg-logout-btn:hover { background: rgba(218, 41, 33, 0.08) !important; }
html[data-theme="light"] .hg-sidebar-footer { border-top: 1px solid var(--border-subtle) !important; }
html[data-theme="light"] .hg-sf-btn {
    background: var(--bg-surface) !important; color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .hg-sf-btn.hg-sf-accent {
    background: linear-gradient(135deg, var(--proton-purple-500), var(--proton-purple-600)) !important;
    color: #fff !important; border: 0 !important;
}

/* Mobile header */
html[data-theme="light"] .hg-mobile-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .hg-sidebar-overlay { background: rgba(28, 27, 36, 0.28) !important; }

/* === Cards / Panels (Dashboard / store / profile 常用) === */
html[data-theme="light"] .panel,
html[data-theme="light"] .m-card,
html[data-theme="light"] .mbh-card,
html[data-theme="light"] .mh-hero,
html[data-theme="light"] .node-item,
html[data-theme="light"] .access-security-panel,
html[data-theme="light"] #ui-online-devices-card,
html[data-theme="light"] .eco-card,
html[data-theme="light"] .user-vip-card,
html[data-theme="light"] .sub-core-v3,
html[data-theme="light"] .asp-endpoints,
html[data-theme="light"] .asp-tiers {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 嵌套卡片内的暗紫 → 浅紫 */
html[data-theme="light"] .metric-strip,
html[data-theme="light"] .main-grid { background: transparent !important; }

/* 圆环(mbh/mh)的黑底内芯 */
html[data-theme="light"] .mh-ring-core,
html[data-theme="light"] .mbh-main,
html[data-theme="light"] .mh-strip { background: transparent !important; color: var(--text-primary) !important; }

/* 输入框 */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--text-tertiary) !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus {
    border-color: var(--border-focus) !important;
    box-shadow: var(--shadow-glow-purple) !important;
    outline: none !important;
}

/* === Buttons === */
html[data-theme="light"] .hg-btn-primary,
html[data-theme="light"] .mh-btn-primary,
html[data-theme="light"] .mbh-cta,
html[data-theme="light"] .sub-inactive-btn,
html[data-theme="light"] .btn-unlock {
    background: linear-gradient(135deg, var(--proton-purple-500), var(--proton-purple-600)) !important;
    color: #fff !important; border: 0 !important;
    box-shadow: 0 2px 10px rgba(109, 74, 255, 0.30) !important;
}
html[data-theme="light"] .hg-btn-ghost,
html[data-theme="light"] .mh-btn-secondary,
html[data-theme="light"] .ni-btn {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .hg-btn-danger {
    background: var(--danger) !important; color: #fff !important; border: 0 !important;
}
html[data-theme="light"] .ni-btn.accent {
    background: linear-gradient(135deg, var(--proton-purple-500), var(--proton-purple-600)) !important;
    color: #fff !important; border: 0 !important;
}

/* === Toast 深底即可,浅色不改 (Proton 亦如此) === */
html[data-theme="light"] #hg-toast-container .hg-toast {
    background: #1C1B24 !important;
    color: #F5F3FF !important;
    border: 1px solid rgba(109, 74, 255, 0.22) !important;
}

/* === Modal === */
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .hg-modal-overlay {
    background: rgba(28, 27, 36, 0.35) !important;
}
html[data-theme="light"] .modal-box,
html[data-theme="light"] .hg-modal-box,
html[data-theme="light"] .hg-modal-header,
html[data-theme="light"] .hg-modal-body,
html[data-theme="light"] .hg-modal-footer {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="light"] .hg-modal-title { color: var(--text-primary) !important; }
html[data-theme="light"] .btn-close-modal { color: var(--text-secondary) !important; }

/* === 通用 text utility (硬编码白字 → 黑字) === */
html[data-theme="light"] .greeting-title,
html[data-theme="light"] .mh-greet,
html[data-theme="light"] .mbh-title,
html[data-theme="light"] .mbh-meta-val,
html[data-theme="light"] .sub-url-input {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .greeting-eyebrow,
html[data-theme="light"] .gea-meta,
html[data-theme="light"] .mh-id-label,
html[data-theme="light"] .mh-meta-k,
html[data-theme="light"] .mbh-eyebrow,
html[data-theme="light"] .mbh-meta-label,
html[data-theme="light"] .mbh-subtitle,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .m-label,
html[data-theme="light"] .m-sub,
html[data-theme="light"] .sub-text,
html[data-theme="light"] .ni-desc,
html[data-theme="light"] .eco-desc {
    color: var(--text-secondary) !important;
}

/* === VIP / status badge 保留紫+绿+橙 不强制转紫 (用户要区分) === */
/* (不覆盖 .vip-badge / .ni-tag 等语义徽章) */

/* === Eco / feature cards === */
html[data-theme="light"] .eco-title-row { color: var(--text-primary) !important; }

/* === Phosphor icons: 默认色用 token === */
html[data-theme="light"] i[class*="ph-"] { /* 不强制改 icon 颜色, 让各自的 inline 覆盖 */ }

/* === 水平/垂直分割线 === */
html[data-theme="light"] hr,
html[data-theme="light"] .gea-sep,
html[data-theme="light"] .mh-strip-sep,
html[data-theme="light"] .mbh-sep {
    border-color: var(--border-subtle) !important;
    background: var(--border-subtle) !important;
}

/* === #sub-toggle modal (runtime 生成的 sub 管理 modal) === */
html[data-theme="light"] #hg-sub-toggle-modal > div {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

/* ============================================================
 *  P1.5 深度覆盖 (2026-04-21 用户反馈"浅色模式看不清")
 *  处理: gradient/rgba 复合背景 + 内部嵌套暗块 + 渐变 overlay
 * ============================================================ */

/* === 会员卡 (.mbh-card) 及其内部渐变 overlay === */
html[data-theme="light"] .mbh-card {
    background: linear-gradient(180deg, #FFFFFF, #FAFAFC) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] .mbh-grad-overlay {
    background: radial-gradient(ellipse at 30% 0%, rgba(109,74,255,0.08), transparent 60%) !important;
    opacity: 1 !important;
}
html[data-theme="light"] .mbh-ring-bg { stroke: #E5E4EE !important; }
html[data-theme="light"] .mbh-emblem,
html[data-theme="light"] .mh-ring-big,
html[data-theme="light"] .mh-ring-mid,
html[data-theme="light"] .mh-ring-dir { color: var(--text-primary) !important; }
html[data-theme="light"] .mbh-benefit-chip {
    background: rgba(109,74,255,0.08) !important;
    color: var(--proton-purple-500) !important;
    border: 1px solid rgba(109,74,255,0.18) !important;
}

/* === 手机 hero 条 + 背景 === */
html[data-theme="light"] .mh-hero {
    background: linear-gradient(180deg, #FFFFFF, #F5F5F9) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .mh-hero-bg,
html[data-theme="light"] .mh-scan { opacity: .25 !important; }
html[data-theme="light"] .mh-id-label { color: var(--text-secondary) !important; }
html[data-theme="light"] .mh-ring-bg  { stroke: #E5E4EE !important; }
html[data-theme="light"] .mh-meta-item,
html[data-theme="light"] .mh-strip,
html[data-theme="light"] .mh-strip-item {
    background: rgba(109,74,255,0.04) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .mh-strip-v { color: var(--text-primary) !important; }
html[data-theme="light"] .mh-strip-v-danger { color: var(--danger) !important; }

/* === dash-header + header-right 余额佣金 === */
html[data-theme="light"] .dash-header,
html[data-theme="light"] .greeting-area,
html[data-theme="light"] .header-right { background: transparent !important; }
html[data-theme="light"] .h-pill {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .h-pill .pill-val { color: var(--text-primary) !important; }
html[data-theme="light"] .h-pill .pill-label { color: var(--text-secondary) !important; }
html[data-theme="light"] .h-btn {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .h-btn.primary {
    background: linear-gradient(135deg, var(--proton-purple-500), var(--proton-purple-600)) !important;
    color: #fff !important; border: 0 !important;
}
html[data-theme="light"] .greeting-sub { color: var(--text-secondary) !important; }
html[data-theme="light"] .user-vip-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .uvc-title { color: var(--text-primary) !important; }
html[data-theme="light"] .uvc-sub { color: var(--text-secondary) !important; }

/* === Metric strip 指标卡 (覆盖 gradient / rgba 条) === */
html[data-theme="light"] .m-card {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .m-card .m-val,
html[data-theme="light"] .m-card #ui-traffic-val { color: var(--text-primary) !important; }
html[data-theme="light"] .m-card .m-val span { color: var(--text-secondary) !important; }
html[data-theme="light"] .m-bar-bg { background: #E9E7F5 !important; }
html[data-theme="light"] .m-status { background: rgba(109,74,255,0.08) !important; color: var(--proton-purple-500) !important; }

/* === 主体订阅主区 (.sub-core-v3 / #ui-sub-main / 状态栏 / active / inactive) === */
html[data-theme="light"] .sub-core-v3,
html[data-theme="light"] #ui-sub-main,
html[data-theme="light"] #ui-sub-active-panel,
html[data-theme="light"] #ui-sub-inactive-panel {
    background: transparent !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .sub-state-bar {
    background: rgba(109,74,255,0.06) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .sub-state-txt,
html[data-theme="light"] .sub-state-txt b { color: var(--text-primary) !important; }
html[data-theme="light"] .sub-state-btn {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .sub-state-btn:hover {
    background: rgba(109,74,255,0.08) !important;
    color: var(--proton-purple-500) !important;
}
html[data-theme="light"] .sub-input-wrap {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .sub-url-input {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 0 !important;
}
html[data-theme="light"] .sub-btn {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .sub-btn:hover {
    background: rgba(109,74,255,0.08) !important;
    color: var(--proton-purple-500) !important;
}
html[data-theme="light"] .sub-meta-grid .sub-meta {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .sub-meta-lbl { color: var(--text-secondary) !important; }
html[data-theme="light"] .sub-meta-val { color: var(--text-primary) !important; }
html[data-theme="light"] .sub-inactive-card {
    background: linear-gradient(180deg, #FFFFFF, #F5F5F9) !important;
    border: 1px dashed var(--border-default) !important;
}
html[data-theme="light"] .sub-inactive-title { color: var(--text-primary) !important; }
html[data-theme="light"] .sub-inactive-desc { color: var(--text-secondary) !important; }
html[data-theme="light"] .sub-inactive-icon { color: var(--proton-purple-500) !important; }

/* === 锁屏覆盖层 === */
html[data-theme="light"] .sub-lock {
    background: linear-gradient(180deg, #FFFFFF, #F7F6FE) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .sub-lock .lock-title { color: var(--text-primary) !important; }
html[data-theme="light"] .sub-lock .lock-desc { color: var(--text-secondary) !important; }
html[data-theme="light"] .sub-lock .lock-icon { color: var(--proton-purple-500) !important; }
html[data-theme="light"] .lock-perks .lock-perk { color: var(--text-secondary) !important; }

/* === 节点 / 订阅矩阵 === */
html[data-theme="light"] #api-nodes-container { background: transparent !important; }
html[data-theme="light"] .node-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .node-item.locked { background: var(--bg-elevated) !important; }
html[data-theme="light"] .ni-title { color: var(--text-primary) !important; }
html[data-theme="light"] .ni-desc  { color: var(--text-secondary) !important; }
html[data-theme="light"] .locked-overlay {
    background: rgba(250,250,252,0.85) !important;
    backdrop-filter: blur(2px);
}

/* === 接入安全 / endpoint === */
html[data-theme="light"] .access-security-panel {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .asp-title { color: var(--text-primary) !important; }
html[data-theme="light"] .asp-ep {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .ep-name { color: var(--text-primary) !important; }
html[data-theme="light"] .ep-status { color: var(--success) !important; }
html[data-theme="light"] .asp-domain-title { color: var(--text-primary) !important; }
html[data-theme="light"] .asp-domain-desc  { color: var(--text-secondary) !important; }
html[data-theme="light"] .asp-tier-line { background: var(--border-default) !important; }

/* === 客户端下载 dl-list === */
html[data-theme="light"] .dl-list .dl-item {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .dl-list .dl-item:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--proton-purple-500) !important;
}
html[data-theme="light"] .dl-item .dl-left { color: var(--text-primary) !important; }

/* === 客户端徽章 tools-wrap === */
html[data-theme="light"] .tools-wrap .t-badge {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* === 在线设备 ui-online-devices-card === */
html[data-theme="light"] #ui-online-devices-card {
    background: rgba(109,74,255,0.04) !important;
    border: 1px solid rgba(109,74,255,0.18) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] #ui-online-devices-card a { color: var(--proton-purple-500) !important; }
html[data-theme="light"] #ui-online-devices-list > div {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* === eco 增值生态 === */
html[data-theme="light"] .eco-card {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .eco-card:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--proton-purple-500) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] .eco-name { color: var(--text-primary) !important; }
html[data-theme="light"] .eco-desc { color: var(--text-secondary) !important; }
html[data-theme="light"] .eco-title-row,
html[data-theme="light"] .eco-title-row i { color: var(--text-primary) !important; }

/* === 流量狂欢 banner (保留深色强调,但稍调和) === */
html[data-theme="light"] .traffic-carnival-entry {
    background: linear-gradient(135deg, #2B1E5C, #1C1742) !important;
    border: 1px solid rgba(109,74,255,0.35) !important;
    color: #F5F3FF !important;
    box-shadow: 0 8px 24px rgba(109,74,255,0.18) !important;
}
html[data-theme="light"] .traffic-carnival-entry .tce-title,
html[data-theme="light"] .traffic-carnival-entry .tce-sub,
html[data-theme="light"] .traffic-carnival-entry .tce-sub b { color: #F5F3FF !important; }

/* === sub-panel (cc4g02-1 模块) === */
html[data-theme="light"] [id^="cc-sp-"],
html[data-theme="light"] .cc-sp-url-card,
html[data-theme="light"] .cc-sp-chip {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
html[data-theme="light"] .cc-sp-url-title { color: var(--text-primary) !important; }
html[data-theme="light"] .cc-sp-url-desc { color: var(--text-secondary) !important; }
html[data-theme="light"] .cc-sp-url-input {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .cc-sp-url-btn {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .cc-sp-coll-head {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

/* === 兜底: 全站常见深色 hex 作为 background (所有 views 都用) === */
html[data-theme="light"] [style*="background:#14121E"],
html[data-theme="light"] [style*="background: #14121E"],
html[data-theme="light"] [style*="background:#0B0B14"],
html[data-theme="light"] [style*="background: #0B0B14"],
html[data-theme="light"] [style*="background:#0B0B13"],
html[data-theme="light"] [style*="background: #0B0B13"],
html[data-theme="light"] [style*="background:#1C1A28"],
html[data-theme="light"] [style*="background: #1C1A28"],
html[data-theme="light"] [style*="background:#121214"],
html[data-theme="light"] [style*="background: #121214"],
html[data-theme="light"] [style*="background:#16161A"],
html[data-theme="light"] [style*="background: #16161A"],
html[data-theme="light"] [style*="background:#1D1D1F"],
html[data-theme="light"] [style*="background: #1D1D1F"],
html[data-theme="light"] [style*="background:#111"],
html[data-theme="light"] [style*="background: #111"],
html[data-theme="light"] [style*="background:#000"],
html[data-theme="light"] [style*="background: #000"],
html[data-theme="light"] [style*="background:#0F0D1A"],
html[data-theme="light"] [style*="background: #0F0D1A"],
html[data-theme="light"] [style*="background:#16141F"],
html[data-theme="light"] [style*="background: #16141F"],
html[data-theme="light"] [style*="background:#191725"],
html[data-theme="light"] [style*="background: #191725"],
html[data-theme="light"] [style*="background:#25223A"],
html[data-theme="light"] [style*="background: #25223A"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.2)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.4)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.5)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.6)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.85)"],
html[data-theme="light"] [style*="background:rgba(20,20,24"],
html[data-theme="light"] [style*="background: rgba(20,20,24"],
html[data-theme="light"] [style*="background:rgba(18,18,20"],
html[data-theme="light"] [style*="background: rgba(18,18,20"],
html[data-theme="light"] [style*="background:rgba(22,22,30"],
html[data-theme="light"] [style*="background: rgba(22,22,30"],
html[data-theme="light"] [style*="background:rgba(26,22,48"],
html[data-theme="light"] [style*="background: rgba(26,22,48"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* === 深色 linear-gradient 作 page container 兜底 (最常见起始色) === */
html[data-theme="light"] [style*="linear-gradient(135deg,#0B"],
html[data-theme="light"] [style*="linear-gradient(135deg, #0B"],
html[data-theme="light"] [style*="linear-gradient(180deg,#0B"],
html[data-theme="light"] [style*="linear-gradient(180deg, #0B"],
html[data-theme="light"] [style*="linear-gradient(180deg,#14"],
html[data-theme="light"] [style*="linear-gradient(180deg, #14"],
html[data-theme="light"] [style*="linear-gradient(135deg,#14"],
html[data-theme="light"] [style*="linear-gradient(135deg, #14"],
html[data-theme="light"] [style*="linear-gradient(180deg,#12"],
html[data-theme="light"] [style*="linear-gradient(180deg, #12"],
html[data-theme="light"] [style*="linear-gradient(180deg,#1C"],
html[data-theme="light"] [style*="linear-gradient(180deg, #1C"],
html[data-theme="light"] [style*="linear-gradient(135deg,#1C"],
html[data-theme="light"] [style*="linear-gradient(135deg, #1C"],
html[data-theme="light"] [style*="linear-gradient(180deg,#16"],
html[data-theme="light"] [style*="linear-gradient(180deg, #16"],
html[data-theme="light"] [style*="linear-gradient(135deg,#16"],
html[data-theme="light"] [style*="linear-gradient(135deg, #16"],
html[data-theme="light"] [style*="linear-gradient(180deg,#1D"],
html[data-theme="light"] [style*="linear-gradient(180deg, #1D"],
html[data-theme="light"] [style*="linear-gradient(135deg,rgba(26,22,48"],
html[data-theme="light"] [style*="linear-gradient(180deg,rgba(26,22,48"],
html[data-theme="light"] [style*="linear-gradient(180deg, rgba(26,22,48"] {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* === 补齐 rgba 白 0.05/0.15/0.2/0.25 兜底 === */
html[data-theme="light"] [style*="rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.05)"],
html[data-theme="light"] [style*="rgba(255,255,255,.05)"] {
    background-color: rgba(109,74,255,0.05) !important;
    border-color: rgba(109,74,255,0.16) !important;
}
html[data-theme="light"] [style*="rgba(255,255,255,0.15)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.15)"],
html[data-theme="light"] [style*="rgba(255,255,255,.15)"] {
    background-color: rgba(109,74,255,0.12) !important;
}
html[data-theme="light"] [style*="rgba(255,255,255,0.2)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.2)"],
html[data-theme="light"] [style*="rgba(255,255,255,.2)"] {
    background-color: rgba(109,74,255,0.15) !important;
}
html[data-theme="light"] [style*="rgba(255,255,255,0.25)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.25)"],
html[data-theme="light"] [style*="rgba(255,255,255,.25)"] {
    background-color: rgba(109,74,255,0.18) !important;
}

/* === 常见深色 hex 作为 color (文字) 在浅底对比弱 → text-primary === */
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#FFF"],
html[data-theme="light"] [style*="color:#FFFFFF"],
html[data-theme="light"] [style*="color: #FFFFFF"],
html[data-theme="light"] [style*="color:#F5F3FF"],
html[data-theme="light"] [style*="color: #F5F3FF"],
html[data-theme="light"] [style*="color:#F5F5F7"],
html[data-theme="light"] [style*="color: #F5F5F7"],
html[data-theme="light"] [style*="color:#FDFCFF"],
html[data-theme="light"] [style*="color: #FDFCFF"],
html[data-theme="light"] [style*="color:#E5DCFF"],
html[data-theme="light"] [style*="color: #E5DCFF"],
html[data-theme="light"] [style*="color:#D2D2D7"],
html[data-theme="light"] [style*="color: #D2D2D7"],
html[data-theme="light"] [style*="color:#D1D1D6"],
html[data-theme="light"] [style*="color: #D1D1D6"],
html[data-theme="light"] [style*="color:#F3D27E"],
html[data-theme="light"] [style*="color: #F3D27E"] {
    color: var(--text-primary) !important;
}

/* === 灰字硬编码 (浅底对比不够) → text-secondary === */
html[data-theme="light"] [style*="color:#86868b"],
html[data-theme="light"] [style*="color:#86868B"],
html[data-theme="light"] [style*="color: #86868B"],
html[data-theme="light"] [style*="color:#6c7a93"],
html[data-theme="light"] [style*="color: #6c7a93"],
html[data-theme="light"] [style*="color:#6e6e73"],
html[data-theme="light"] [style*="color: #6e6e73"],
html[data-theme="light"] [style*="color:#B0B0BD"],
html[data-theme="light"] [style*="color: #B0B0BD"] {
    color: var(--text-secondary) !important;
}

/* === 边框深色 hex 兜底 === */
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.0"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.1)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.12)"] {
    border-color: var(--border-default) !important;
}

/* ============================================================
 *  P2.1 Store / Carpool / VIP-perk class-level 覆盖
 *  这些是 CSS 规则 (非 inline), attribute selector 抓不到
 * ============================================================ */

/* === Store 套餐卡 + 功能卡 === */
html[data-theme="light"] .plan-card,
html[data-theme="light"] .pkg-card,
html[data-theme="light"] .feat-card,
html[data-theme="light"] .fe-feature-card,
html[data-theme="light"] .fe-plan-card,
html[data-theme="light"] .app-card,
html[data-theme="light"] .super-card,
html[data-theme="light"] .pricing-card {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .plan-card:hover,
html[data-theme="light"] .feat-card:hover {
    border-color: var(--proton-purple-500) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] .plan-card *:not(.plan-badge):not(.plan-tag):not(i[class*="ph-"]),
html[data-theme="light"] .feat-card *:not(i[class*="ph-"]) { color: inherit; }
html[data-theme="light"] .plan-price,
html[data-theme="light"] .plan-name,
html[data-theme="light"] .feat-title { color: var(--text-primary) !important; }
html[data-theme="light"] .plan-desc,
html[data-theme="light"] .feat-desc,
html[data-theme="light"] .plan-features li { color: var(--text-secondary) !important; }

/* === Store 顶部 quick-act 按钮 === */
html[data-theme="light"] .quick-act-btn,
html[data-theme="light"] [class*="quick-act"]:not(i) {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .quick-act-btn:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--proton-purple-500) !important;
    color: var(--proton-purple-500) !important;
}

/* === Store marquee 应用轮播 === */
html[data-theme="light"] .marquee-app,
html[data-theme="light"] .marquee-item,
html[data-theme="light"] .marquee-track .app,
html[data-theme="light"] .app-marquee-item {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* === Store 大 CTA / 授权超市 banner === */
html[data-theme="light"] [class*="gateway"],
html[data-theme="light"] [class*="cta-banner"],
html[data-theme="light"] [class*="bottom-banner"] {
    background: linear-gradient(135deg, #FFFFFF, #F5F5F9) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

/* === Carpool 服务卡片 + drawer + chat === */
html[data-theme="light"] .drawer-panel {
    background: #FFFFFF !important;
    border-left: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .drawer-overlay {
    background: rgba(28,27,36,0.35) !important;
}
html[data-theme="light"] .chat-container,
html[data-theme="light"] .chat-input-box,
html[data-theme="light"] .msg-bubble,
html[data-theme="light"] .cp-user-card,
html[data-theme="light"] .cp-form,
html[data-theme="light"] .cp-search-box {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .cp-tab,
html[data-theme="light"] .cp-tabs,
html[data-theme="light"] .dp-nav,
html[data-theme="light"] .cp-filter-tag {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .cp-tab.active,
html[data-theme="light"] .dp-nav-btn.active,
html[data-theme="light"] .cp-filter-tag.active {
    background: rgba(109,74,255,0.10) !important;
    color: var(--proton-purple-500) !important;
}
html[data-theme="light"] .cf-textarea,
html[data-theme="light"] .sv-val {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
html[data-theme="light"] .btn-submit,
html[data-theme="light"] .sc-btn-buy {
    background: linear-gradient(135deg, var(--proton-purple-500), var(--proton-purple-600)) !important;
    color: #fff !important;
    border: 0 !important;
}
html[data-theme="light"] .dp-close {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .tag,
html[data-theme="light"] .lbl-user,
html[data-theme="light"] .lbl-official {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .sc-prog-bar {
    background: rgba(109,74,255,0.08) !important;
}

/* === profile 安全中心 + 其他独立页的 container === */
html[data-theme="light"] [class*="secure-card"],
html[data-theme="light"] [class*="account-card"],
html[data-theme="light"] [class*="profile-card"],
html[data-theme="light"] [class*="pfx-"],
html[data-theme="light"] [id*="profile-"],
html[data-theme="light"] [id*="secure-"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

/* === VIP 徽章 tag 不动 (语义色) === */
/* .plan-badge / .plan-tag / .vip-badge / .hg-badge-* 保留原状 */

/* ============================================================
 *  P2.2 Sidebar nav-item 文字兜底
 *  触发: 用户反馈 "节点列表" 字样部分字符不可见
 *  原因: 某些浏览器扩展 (翻译/广告屏蔽/安全扩展) 识别"节点"关键词
 *        注入 CSS 改色或 visibility 隐藏个别字符
 *  修复: 给 nav-item > span 加高特异性 !important 强制可见
 *  同时: 强制字体 stack 排除 emoji font fallback
 *  注: 以下规则不在 html[data-theme=light] 作用域, 两种模式都生效
 * ============================================================ */
.hg-sidebar .hg-nav-item > span,
.hg-sidebar .hg-nav-item > span * {
    color: rgba(255, 255, 255, 0.85) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
}
.hg-sidebar .hg-nav-item.active > span {
    color: #FFFFFF !important;
}
html[data-theme="light"] .hg-sidebar .hg-nav-item > span,
html[data-theme="light"] .hg-sidebar .hg-nav-item > span * {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .hg-sidebar .hg-nav-item.active > span {
    color: var(--proton-purple-500) !important;
}
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#F5F3FF"],
html[data-theme="light"] [style*="color: #F5F3FF"] {
    color: var(--text-primary) !important;
}

/* ============================================================
 *  P1.6 极细调 (2026-04-21 用户第二次反馈"看不清")
 *  重点: ID selector 强特异性 + rgba(255,255,255,X) 半透白 attr 兜底 + 灰字对比提升
 * ============================================================ */

/* === ID selector 强覆盖 (压过 style.js 里可能的 #id{color:#fff} 规则) === */
html[data-theme="light"] #ui-username,
html[data-theme="light"] #mh-username,
html[data-theme="light"] #ui-balance,
html[data-theme="light"] #ui-commission,
html[data-theme="light"] #ui-plan-title,
html[data-theme="light"] #ui-plan-expire,
html[data-theme="light"] #ui-traffic-val,
html[data-theme="light"] #ui-traffic-up,
html[data-theme="light"] #ui-traffic-down,
html[data-theme="light"] #ui-conn-up,
html[data-theme="light"] #ui-conn-down,
html[data-theme="light"] #ui-conn-sub,
html[data-theme="light"] #ui-sub-url-input,
html[data-theme="light"] #ui-sub-state-text,
html[data-theme="light"] #ui-sub-remain,
html[data-theme="light"] #ui-sub-last-fetch,
html[data-theme="light"] #mbh-title,
html[data-theme="light"] #mbh-subtitle,
html[data-theme="light"] #mbh-state-label,
html[data-theme="light"] #mbh-days,
html[data-theme="light"] #mbh-expire,
html[data-theme="light"] #uvc-title,
html[data-theme="light"] #uvc-sub,
html[data-theme="light"] #mh-plan,
html[data-theme="light"] #mh-expire,
html[data-theme="light"] #mh-balance,
html[data-theme="light"] #mh-commission,
html[data-theme="light"] #mh-devices,
html[data-theme="light"] #mh-traffic-used,
html[data-theme="light"] #mh-traffic-total,
html[data-theme="light"] #mh-traffic-up,
html[data-theme="light"] #mh-traffic-down { color: var(--text-primary) !important; }

/* greeting-title 内部 span 兜底 (可能 style.js 里有 #ui-username{color:white}) */
html[data-theme="light"] .greeting-title,
html[data-theme="light"] .greeting-title > span,
html[data-theme="light"] .greeting-area,
html[data-theme="light"] .greeting-area * { color: var(--text-primary); }
html[data-theme="light"] .greeting-area .greeting-eyebrow,
html[data-theme="light"] .greeting-area .gea-meta,
html[data-theme="light"] .greeting-area .gea-rotate { color: var(--text-secondary) !important; }
html[data-theme="light"] .net-dot { background: var(--success) !important; }

/* === rgba(255,255,255,X) 半透白兜底 (深底用的"玻璃", 浅底变透明) === */
html[data-theme="light"] [style*="rgba(255,255,255,0.02)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.02)"],
html[data-theme="light"] [style*="rgba(255,255,255,.02)"] {
    background-color: rgba(109,74,255,0.025) !important;
}
html[data-theme="light"] [style*="rgba(255,255,255,0.03)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.03)"],
html[data-theme="light"] [style*="rgba(255,255,255,.03)"] {
    background-color: rgba(109,74,255,0.03) !important;
}
/* .h-pill 原规则 rgba(255,255,255,0.03) — 不走 inline selector, 单独覆盖 */
html[data-theme="light"] .h-pill { background: var(--bg-surface) !important; }
html[data-theme="light"] [style*="rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.04)"],
html[data-theme="light"] [style*="rgba(255,255,255,.04)"] {
    background-color: rgba(109,74,255,0.04) !important;
}
html[data-theme="light"] [style*="rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.06)"],
html[data-theme="light"] [style*="rgba(255,255,255,.06)"] {
    background-color: rgba(109,74,255,0.06) !important;
    border-color: rgba(109,74,255,0.18) !important;
}
html[data-theme="light"] [style*="rgba(255,255,255,0.08)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.08)"],
html[data-theme="light"] [style*="rgba(255,255,255,.08)"] {
    background-color: rgba(109,74,255,0.08) !important;
}
html[data-theme="light"] [style*="rgba(255,255,255,0.1)"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.1)"],
html[data-theme="light"] [style*="rgba(255,255,255,.1)"] {
    background-color: rgba(109,74,255,0.1) !important;
}

/* === 灰字改 text-secondary (原色 #8e8e93 / #c8c8cc / #aaa 在白底对比弱) === */
html[data-theme="light"] [style*="color:#8e8e93"],
html[data-theme="light"] [style*="color: #8e8e93"],
html[data-theme="light"] [style*="color:#8E8E93"],
html[data-theme="light"] [style*="color:#c8c8cc"],
html[data-theme="light"] [style*="color: #c8c8cc"],
html[data-theme="light"] [style*="color:#a1a1a6"],
html[data-theme="light"] [style*="color: #a1a1a6"],
html[data-theme="light"] [style*="color:#aaa"],
html[data-theme="light"] [style*="color: #aaa"],
html[data-theme="light"] [style*="color:#888"],
html[data-theme="light"] [style*="color: #888"],
html[data-theme="light"] [style*="color:rgba(235,235,245"],
html[data-theme="light"] [style*="color: rgba(235,235,245"] {
    color: var(--text-secondary) !important;
}

/* var(--sub-text) / var(--text-dim) 这些老 global.css 变量 (是深底灰,在浅底对比弱) */
html[data-theme="light"] [style*="color:var(--sub-text)"],
html[data-theme="light"] [style*="color: var(--sub-text)"],
html[data-theme="light"] [style*="color:var(--text-dim)"],
html[data-theme="light"] [style*="color: var(--text-dim)"] {
    color: var(--text-secondary) !important;
}

/* === dashed / hr 虚线边框在浅底下也改浅 === */
html[data-theme="light"] [style*="border:1px dashed rgba(255,255,255"] {
    border-color: rgba(109,74,255,0.22) !important;
}

/* === SF Mono 数字显示 (监控值) === */
html[data-theme="light"] [style*="font-family:'SF Mono'"],
html[data-theme="light"] [style*="font-family: 'SF Mono'"] {
    color: var(--text-primary);
}

/* === 剩余问题兜底: 放在文件末确保最高优先级 === */
html[data-theme="light"] .home-view-container *,
html[data-theme="light"] .home-view-container *::before,
html[data-theme="light"] .home-view-container *::after {
    /* 不整体强塞 color, 避免把 VIP 紫/状态橙/红误伤 */
}

/* === Scrollbar (webkit, 浅底用浅色) === */
html[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(109, 74, 255, 0.22); border-radius: 6px;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(109, 74, 255, 0.38); }

/* ============================================================
 *  Theme Toggle Widget
 * ============================================================ */
.hg-theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1;
    margin-bottom: 8px;
}
.hg-theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--proton-purple-500);
    border-color: var(--border-default);
}
.hg-theme-toggle i { font-size: 16px; flex-shrink: 0; }
.hg-theme-toggle .label { flex: 1; }
.hg-theme-toggle .indicator {
    width: 34px; height: 18px; border-radius: 10px;
    background: var(--border-default);
    position: relative; flex-shrink: 0;
    transition: background var(--dur-normal) var(--ease-out);
}
.hg-theme-toggle .indicator::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-primary);
    transition: left var(--dur-normal) var(--ease-out),
                background var(--dur-normal) var(--ease-out);
}
html[data-theme="light"] .hg-theme-toggle .indicator { background: var(--proton-purple-500); }
html[data-theme="light"] .hg-theme-toggle .indicator::after {
    left: 18px; background: #fff;
}

/* BETA 标签 */
.hg-theme-toggle .beta-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #FFA726, #FF6D3E);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.4px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
html[data-theme="light"] .hg-theme-toggle .beta-badge {
    background: linear-gradient(135deg, #D97B0C, #C94B1A);
}