/* ========================================== */
/* Theme Variables - Glimmer OS               */
/* Light defaults + Dark mode overrides       */
/* ========================================== */

/* === Light Mode (defaults) === */
:root {
    /* === User Theme Color (Wave 5 — single source of truth for accent) ===
       默认 #B8947D（榛果茶棕，星汇老色）。运行时由 starhub.js 写入 documentElement 覆盖。
       dark-mode 不重写，保证用户选过的主题色跨明暗切换。 */
    --user-theme-color: #B8947D;

    /* Page backgrounds */
    --bg-body: #F2F2F4;
    --bg-screen: #F2F2F4;
    --bg-color: #F2F2F4;
    --app-bg: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

    /* Card & Glass */
    --surface-card: rgba(255, 252, 250, 0.7);
    --card-bg: #ffffff;
    --card-border: rgba(255, 255, 255, 0.9);
    --card-shadow: 0 10px 30px rgba(189, 175, 175, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);

    /* Text */
    --text-main: #6d6466;
    --text-body: #666666;
    --text-sub: #6b7280;
    --text-muted: #aeb0b8;
    --text-primary: #6d6466;
    --text-secondary: #aeb0b8;
    --text-tertiary: #c5c7cf;
    --text-placeholder: #999999;

    /* Borders */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-card: rgba(255, 255, 255, 0.9);

    /* Icons */
    --icon-cocoa: #8d6e63;
    --icon-taro:  #8a7b94;   /* 灰香芋紫 */
    --icon-pink:  #b88a9f;   /* 脏粉色 */
    --icon-blue:  #7a9eb5;   /* 莫兰迪蓝 */

    /* 群聊专属变量 */
    --group-grid-bg: rgba(107, 78, 88, 0.04);
    --group-grid-border: rgba(107, 78, 88, 0.1);
    --group-more-bg: rgba(107, 78, 88, 0.08);
    --group-more-text: #85767b;
    --group-name-color: #3d2f34;
    --group-bio-color: #85767b;
    --group-member-border: #ffffff;
    --group-m-more-bg: rgba(107, 78, 88, 0.08);
    --group-m-more-text: #85767b;
    --name-tag-color: #85767b;
    --name-tag-bg: transparent;
    --time-underline-color: rgba(107, 78, 88, 0.2);
    /* 聊天列表项 */
    --chatitem-bg:              #ffffff;
    --chatitem-border:          rgba(107, 78, 88, 0.12);
    --chatitem-active-bg:       rgba(107, 78, 88, 0.02);
    --chatitem-name-color:      #4a3b40;
    --chatitem-time-color:      #c0b0b6;
    --chatitem-preview-color:   #9a8b90;
    --chatitem-preview-unread:  #4a3b40;
    --chatitem-unread-bg:       #6b4e58;
    --chatitem-unread-text:     #ffffff;
    --chatitem-unread-border:   #f7f5f6;
    --chatitem-pin-color:       #6b4e58;
    --chatitem-pin-bg:          linear-gradient(135deg, rgba(107, 78, 88, 0.04) 0%, #ffffff 100%);

    /* 头像轨道 */
    --rail-bg:                  #ffffff;
    --rail-border:              rgba(0, 0, 0, 0.05);
    --rail-avatar-ring:         linear-gradient(135deg, #2979ff, #00e5ff);
    --rail-avatar-ring-seen:    #e0e0e0;
    --rail-avatar-border:       #ffffff;
    --rail-add-border:          rgba(0, 0, 0, 0.15);
    --rail-add-icon-color:      #aaaaaa;

    /* 空状态 */
    --empty-text-color:         rgba(84, 110, 122, 0.5);
}

/* === Echo 单聊 Component Variables (Light) === */
:root {
    /* 3.1 顶部导航栏 */
    --navbar-bg: #ffffff;
    --navbar-border: rgba(107, 78, 88, 0.15);
    --navbar-blur: blur(20px);
    --topbar-btn-bg: transparent;
    --topbar-btn-icon-color: #3d2f34;
    --topbar-name-color: #3d2f34;
    --topbar-meta-color: #85767b;
    --topbar-bio-color: #85767b;
    --topbar-bio-border: transparent;
    --topbar-dot-color: #4ade80;
    --topbar-line-color: rgba(107, 78, 88, 0.2);
    --nav-side-reserve: 45px; /* 中间时间/天气胶囊宽度的一半，nav-side 最大宽度 = 50% - 此值 */

    /* 3.2 Tab 切换栏 */
    --tabs-bg: linear-gradient(to top, #f7f5f6 60%, transparent 100%);
    --tabs-border: rgba(107, 78, 88, 0.12);
    --tab-text-color: #c0b0b6;
    --tab-active-color: #6b4e58;
    --tab-active-indicator: #6b4e58;

    /* 3.3 底部输入栏 */
    --dock-bg: rgba(255, 255, 255, 0.95);
    --dock-border: rgba(107, 78, 88, 0.15);
    --dock-blur: blur(20px);
    --dock-btn-bg: transparent;
    --dock-btn-shadow: none;
    --dock-btn-icon-color: #85767b;
    --dock-btn-active-bg: rgba(107, 78, 88, 0.1);
    --dock-input-bg: rgba(107, 78, 88, 0.05);
    --dock-input-shadow: none;
    --dock-input-text-color: #3d2f34;
    --dock-input-placeholder: rgba(154, 139, 144, 0.5);
    --dock-send-bg: #6b4e58;
    --dock-send-shadow: 0 4px 12px rgba(107, 78, 88, 0.2);
    --dock-send-icon-color: #ffffff;
    --dock-sticker-color: #85767b;
    --dock-voice-opacity: 0.7;
    --dock-voice-active-bg: #6b4e58;
    --dock-voice-active-shadow: 0 2px 12px rgba(107, 78, 88, 0.35);
    --bottle-wobble-color: #6b4e58;

    /* 3.4 拓展坞抽屉 */
    --drawer-bg: rgba(255, 255, 255, 0.98);
    --drawer-blur: blur(20px);
    --drawer-border: rgba(107, 78, 88, 0.15);
    --drawer-item-bg: rgba(107, 78, 88, 0.04);
    --drawer-item-active-bg: rgba(107, 78, 88, 0.08);
    --drawer-item-text-color: #85767b;
    --drawer-icon-color: #6b4e58;
    --drawer-label-color: #85767b;
    --drawer-dot-active-color: #6b4e58;
    --drawer-dot-inactive-color: rgba(107, 78, 88, 0.2);

    /* 3.5 消息气泡 & 旁白 & 语音 & 礼物 */
    /* 气泡全圆角 (去掉尾巴) */
    --bubble-radius: 18px;

    /* 对方（左侧）气泡 - 果冻高光，清透立体 */
    --bubble-other-bg: #ffffff;
    --bubble-other-text: #4a3b40;
    /* 外层柔和阴影 + 顶部强烈白色内发光 */
    --bubble-other-shadow: 0 6px 16px rgba(107, 78, 88, 0.05), inset 0 2px 4px rgba(255, 255, 255, 0.9);

    /* 我方（右侧）气泡 - 清透立体（去掉内高光，避免深色底反光发油） */
    --bubble-me-bg: #ebe4e6;
    --bubble-me-text: #4a3b40;
    /* 仅外层柔和投影，不加白色内发光 */
    --bubble-me-shadow: 0 6px 16px rgba(107, 78, 88, 0.08);
    --narr-ai: #6b5a5f;
    --narr-user: #7a5262;
    --aside-color: #6b5a5f;
    --ai-aside-font-size: 13px;
    --bubble-voice-me-bg: #dfd0d5;
    --bubble-voice-me-text: #6b4e58;
    --bubble-voice-other-bg: #ffffff;
    --bubble-voice-other-text: #85767b;
    --gift-bubble-bg: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
    --gift-bubble-border: #ffd700;
    --gift-bubble-shadow: 0 4px 12px rgba(255, 159, 67, 0.2);
    --gift-icon-bg: radial-gradient(circle, rgba(255,215,0,0.2), transparent);
    --gift-text-main: #ff9f43;
    --gift-text-sub: #a67c52;

    /* 3.6 聊天列表 */
    --chatlist-bg: #f7f5f6;
    --chatlist-header-bg: #f7f5f6;
    --chatlist-header-border: transparent;
    --chatlist-header-blur: none;
    --chatlist-item-hover: rgba(107, 78, 88, 0.04);
    --chatlist-item-active-bg: rgba(107, 78, 88, 0.08);
    --chatlist-name-color: #3d2f34;
    --chatlist-preview-color: #85767b;
    --chatlist-time-color: #c0b0b6;
    --chatlist-unread-bg: #ff3b30;
    --chatlist-unread-text: #ffffff;
    --chatlist-divider-color: rgba(107, 78, 88, 0.08);

    /* === Sidebar Shell === */
    --echo-sidebar-width: 320px;
    --echo-sidebar-right: -320px;
    --echo-sidebar-right-open: 0;
    --echo-sidebar-z: 1100;
    --echo-sidebar-shadow: -12px 0 40px rgba(0,0,0,0.08), -4px 0 16px rgba(0,0,0,0.04);
    --echo-sidebar-transition: 0.4s cubic-bezier(0.34,1.56,0.64,1);
    --echo-sidebar-blur: 20px;
    --echo-sidebar-border: rgba(255,255,255,0.8);

    /* === Mask & Inner === */
    --mask-bg: rgba(107, 78, 88, 0.2);
    --mask-blur: blur(3px);
    --mask-z: 1050;
    --echo-inner-bg: #f7f5f6;

    /* === Glass (extra) === */
    --glass-blur: 20px;
    --glass-radius: 12px;
    --glass-row-radius: 12px;

    /* === Toggle === */
    --toggle-track: #e2e8ef;
    --toggle-track-active: #6d6466;
    --toggle-knob: #ffffff;
    --toggle-width: 44px;
    --toggle-height: 24px;
    --toggle-radius: 12px;

    /* === Btn & Input === */
    --btn-bg: rgba(0,0,0,0.06);
    --btn-hover-bg: rgba(0,0,0,0.1);
    --btn-active-bg: rgba(0,0,0,0.12);
    --btn-text: #6d6466;
    --btn-radius: 8px;
    --btn-height: 36px;
    --btn-icon-size: 20px;
    --input-bg: rgba(0,0,0,0.04);
    --input-border: rgba(0,0,0,0.08);
    --input-focus-border: #6d6466;
    --input-text: #6d6466;
    --input-placeholder: #999999;
    --input-radius: 8px;

    /* === Notif & Data === */
    --notif-row-hover: rgba(0,0,0,0.05);
    --notif-label: #6d6466;
    --notif-desc: #999999;
    --data-item-hover: rgba(0,0,0,0.05);
    --data-item-text: #6d6466;
    --data-item-desc: #999999;
    --data-danger-text: #e57373;

    /* === SC (single-chat sidebar) === */
    --sc-header-height: 56px;
    --sc-header-border-color: rgba(107, 78, 88, 0.15);
    --sc-header-name-text: #4a3b40;
    --sc-header-back-icon: #4a3b40;

    --sc-view-bg: rgba(0,0,0,0.05);
    --sc-view-active-bg: #ffffff;
    --sc-view-text: #6d6466;
    --sc-view-active-text: #6d6466;
    --sc-view-radius: 8px;
    --sc-view-border: rgba(0,0,0,0.06);

    --sc-area-border: rgba(0,0,0,0.06);
    --sc-area-text: #666666;
    --sc-area-text-muted: #999999;
    --sc-area-divider: rgba(0,0,0,0.06);

    --sc-chip-bg: rgba(0,0,0,0.05);
    --sc-chip-text: #666666;
    --sc-chip-radius: 16px;
    --sc-chip-border: rgba(0,0,0,0.06);
    --sc-chip-active-bg: #6d6466;
    --sc-chip-active-text: #ffffff;

    --sc-bp-bg: rgba(255,255,255,0.7);
    --sc-bp-border: rgba(255,255,255,0.9);
    --sc-bp-shadow: 0 10px 30px rgba(189,175,175,0.1);
    --sc-bp-text: #6d6466;
    --sc-bp-muted: #999999;
    --sc-bp-radius: 12px;
    --sc-bp-font-size: 13px;

    --sc-sub-bg: linear-gradient(135deg,#f5f7fa 0%,#f0f3f7 100%);
    --sc-sub-shadow: 10px 0 40px rgba(0,0,0,0.15);
    --sc-sub-z: 1100;
    --sc-sub-blur: 20px;
    --sc-sub-chip-bg: rgba(0,0,0,0.05);
    --sc-sub-chip-text: #666666;
    --sc-sub-chip-active-bg: #6d6466;
    --sc-sub-chip-active-text: #ffffff;
    --sc-sub-divider: rgba(0,0,0,0.06);

    --sc-affinity-bar-bg: rgba(0,0,0,0.08);
    --sc-affinity-bar-fill: linear-gradient(90deg,#a8edea,#fed6e3);
    --sc-affinity-label: #6d6466;
    --sc-affinity-value: #6d6466;

    --sc-lx-bg: linear-gradient(135deg,#f5f7fa 0%,#f0f3f7 100%);
    --sc-lx-chip-bg: rgba(0,0,0,0.05);
    --sc-lx-chip-text: #666666;
    --sc-lx-chip-active-bg: #6d6466;
    --sc-lx-chip-active-text: #ffffff;
    --sc-lx-divider: rgba(0,0,0,0.06);

    --sc-zx-border: rgba(0,0,0,0.06);
    --sc-zx-text: #666666;
    --sc-zx-muted: #999999;
    --sc-zx-icon: #6d6466;

    --sc-scheme-item-bg: transparent;
    --sc-scheme-item-hover: rgba(0,0,0,0.05);
    --sc-scheme-item-active: rgba(0,0,0,0.08);
    --sc-scheme-text: #666666;
    --sc-scheme-divider: rgba(0,0,0,0.06);

    --sc-api-row-bg: rgba(0,0,0,0.03);
    --sc-api-row-hover: rgba(0,0,0,0.06);
    --sc-api-label: #6d6466;
    --sc-api-value: #999999;
    --sc-api-divider: rgba(0,0,0,0.05);

    --sc-narr-row-bg: rgba(0,0,0,0.03);
    --sc-narr-row-hover: rgba(0,0,0,0.06);
    --sc-narr-label: #666666;
    --sc-narr-value: #999999;
    --sc-narr-divider: rgba(0,0,0,0.05);

    --sc-scroll-thumb-bg: rgba(0,0,0,0.15);
    --sc-scroll-thumb-radius: 4px;

    /* === sp (sub-panel) === */
    --sp-bg: var(--bg-color, #eff3f6);
    --sp-z: 10;
    --sp-transition: 0.3s cubic-bezier(0.2,0.8,0.2,1);
    --sp-radius: 0;
    --sp-header-padding: 24px 20px 18px;
    --sp-header-border: rgba(200,215,225,0.35);
    --sp-header-bg: linear-gradient(180deg,rgba(255,255,255,0.8),rgba(255,255,255,0.4));
    --sp-header-blur: 10px;
    --sp-back-size: 36px;
    --sp-back-radius: 12px;
    --sp-back-bg: rgba(255,255,255,0.9);
    --sp-back-color: #78909c;
    --sp-back-border: rgba(255,255,255,0.6);
    --sp-back-shadow: 0 2px 8px rgba(0,0,0,0.06);
    --sp-back-hover-bg: rgba(255,255,255,1);
    --sp-back-hover-color: #546e7a;
    --sp-back-active-scale: 0.95;
    --sp-title-font-size: 17px;
    --sp-title-color: #6d6466;
    --sp-title-font-weight: 600;
    --sp-body-bg: rgba(255,255,255,0.6);
    --sp-body-blur: 12px;
    --sp-body-radius: 20px;
    --sp-body-margin: 16px;
    --sp-body-padding: 20px;
    --sp-body-shadow: 0 8px 32px rgba(0,0,0,0.04);
    --sp-body-border: rgba(255,255,255,0.5);
    --sp-card-bg: rgba(255,255,255,0.6);
    --sp-card-radius: 16px;
    --sp-card-shadow: 0 4px 16px rgba(0,0,0,0.04);
    --sp-label-font-size: 13px;
    --sp-label-font-weight: 600;
    --sp-label-color: #6d6466;
    --sp-label-opacity: 0.7;
    --sp-label-margin: 12px;
    --sp-input-bg: rgba(0,0,0,0.03);
    --sp-input-focus-bg: rgba(0,0,0,0.05);
    --sp-input-radius: 16px;
    --sp-input-padding: 16px;
    --sp-input-font-size: 13px;
    --sp-input-color: #5A5555;
    --sp-input-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    --sp-btn-row-gap: 10px;
    --sp-btn-radius: 100px;
    --sp-btn-font-weight: 600;
    --sp-btn-font-size: 14px;
    --sp-btn-primary-bg: linear-gradient(135deg,rgba(251,194,235,0.25),rgba(166,193,238,0.2));
    --sp-btn-primary-color: #c96ba1;
    --sp-btn-primary-shadow: 0 4px 16px rgba(251,194,235,0.15);
    --sp-btn-secondary-bg: rgba(0,0,0,0.05);
    --sp-btn-secondary-color: #666666;

    /* === GC (group-chat sidebar) === */
    --gc-header-height: 56px;
    --gc-header-border-color: rgba(0,0,0,0.06);
    --gc-header-name-text: #6d6466;
    --gc-header-back-icon: #6d6466;

    --gc-row-height: 64px;
    --gc-row-bg: linear-gradient(135deg,#f5f7fa 0%,#f0f3f7 100%);
    --gc-row-hover-bg: rgba(0,0,0,0.03);
    --gc-row-active-bg: rgba(255,255,255,0.8);
    --gc-row-border: rgba(0,0,0,0.06);
    --gc-row-avatar-bg: rgba(0,0,0,0.06);
    --gc-row-name-text: #6d6466;
    --gc-row-desc-text: #999999;
    --gc-row-radius: 12px;

    --gc-chip-bg: rgba(0,0,0,0.05);
    --gc-chip-text: #666666;
    --gc-chip-radius: 16px;
    --gc-chip-active-bg: #6d6466;
    --gc-chip-active-text: #ffffff;

    --gc-sub-bg: linear-gradient(135deg,#f5f7fa 0%,#f0f3f7 100%);
    --gc-sub-shadow: 10px 0 40px rgba(0,0,0,0.15);
    --gc-sub-z: 1100;
    --gc-sub-blur: 20px;
    --gc-sub-chip-bg: rgba(0,0,0,0.05);
    --gc-sub-chip-text: #666666;
    --gc-sub-chip-active-bg: #6d6466;
    --gc-sub-chip-active-text: #ffffff;

    --gc-scroll-thumb-bg: rgba(0,0,0,0.15);
    --gc-scroll-thumb-radius: 4px;

    --gc-toggle-track: #e2e8ef;
    --gc-toggle-track-active: #6d6466;
    --gc-toggle-knob: #ffffff;
    --gc-toggle-width: 44px;
    --gc-toggle-height: 24px;
    --gc-toggle-radius: 12px;

    /* === Brand Colors === */
    --brand-pink: #e991b4;
    --brand-blue: #90caf9;
    --brand-pink-light: #fbc2eb;
    --brand-gradient: linear-gradient(135deg, #e991b4, #90caf9);
    --brand-gradient-h: linear-gradient(90deg, #90caf9, #e991b4);
    --brand-pink-gradient: linear-gradient(135deg, #e991b4, #ff80ab);

    /* === Semantic Colors === */
    --text-muted: #90a4ae;
    --text-subtle: #b0bec5;
    --accent-blue: #5a6fc2;
    --badge-purple: #6c5ce7;
    --switch-on-bg: #64b5f6;
    --startrack-bg: linear-gradient(180deg, #fafbff 0%, #fff 100%);

    /* === Danger Colors === */
    --danger-bg:    #b56b6f;  /* 砖红，代替刺眼鲜红 */
    --danger-hover: #9e5558;
    --danger-deep:  #7a3a3d;

    /* === Warn Colors === */
    --warn-color: #b07d62;    /* 陶土橘 */
    --warn-amber: #c49060;

    /* === Utility === */
    --white: #ffffff;

    /* === Champagne Colors (Genesis) === */
    --champagne-primary: #cdae9a;
    --champagne-light: #dfc8b8;
    --champagne-dark: #bfa898;
    --champagne-medium: #c5aba0;
    --champagne-pale: #e5d0c0;
    --champagne-deep: #d4b5a2;

    /* === Sub-panel Theme Accents === */
    --notice-accent: #42a5f5;
    --notice-accent-hover: #1976d2;
    --bubble-accent: var(--danger-bg);
    --bubble-accent-hover: #e63946;
    --api-accent: #a18cd1;
    --api-accent-hover: #8b7bb8;
    --brand-purple: #b39ddb;

    /* === Droplet Panel === */
    --droplet-bg: linear-gradient(145deg, #ffffff, #ecf0f3);
    --droplet-bg-shadow: 6px 6px 12px rgba(166,180,200,0.3), -6px -6px 12px rgba(255,255,255,1);
    --droplet-bg-shadow-active: inset 4px 4px 8px rgba(166,180,200,0.25), inset -4px -4px 8px rgba(255,255,255,1);
    --droplet-handle: #cfd8dc;
    --droplet-text: #64748b;
    --droplet-icon-color: #42a5f5;
    --droplet-panel-bg: var(--bg-color, #eff3f6);

    /* === Icon Colors === */
    --icon-red:    #b56b6f;   /* 砖红 */
    --icon-green:  #8a9a86;   /* 鼠尾草绿 */
    --icon-gold:   #bda077;   /* 哑光金 */
    --icon-purple: #9c87b0;   /* 薰衣草紫 */
    --icon-orange: #b07d62;   /* 陶土橘 */

    /* === Semantic Colors === */
    --color-info:    #7a9eb5;  /* 柔和蓝灰 */
    --color-warn:    #b07d62;  /* 陶土橘 */
    --color-danger:  #b56b6f;  /* 砖红 */
    --color-success: #8a9a86;  /* 鼠尾草绿 */
}

/* === Dark Mode Overrides === */
body.dark-mode {
    /* Page backgrounds - 深蓝灰底色 */
    --bg-body: #0f0f0f;
    --bg-screen: #0f0f0f;
    --bg-color: #0f0f0f;
    --app-bg: #0f0f0f;

    /* Card & Glass - 微微浮起的卡片 */
    --surface-card: #161616;
    --card-bg: #161616;
    --card-border: rgba(255, 255, 255, 0.06);
    --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --glass-bg: rgba(26, 30, 41, 0.85);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Text - 亮白主文本 + 灰蓝副文本 */
    --text-main: #f1f5f9;
    --text-body: #94a3b8;
    --text-sub: #94a3b8;
    --text-muted: #475569;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #475569;
    --text-placeholder: #475569;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.06);
    --border-card: rgba(255, 255, 255, 0.06);

    /* Icons - dimmed for dark */
    --icon-cocoa: #d6d2d0;
    --icon-taro: #b39ddb;
    --icon-pink: #f8bbd0;
    --icon-blue: #7db8e0;

    /* 群聊专属变量 (Dark) */
    --group-grid-bg: rgba(255, 255, 255, 0.04);
    --group-grid-border: rgba(255, 255, 255, 0.08);
    --group-more-bg: rgba(255, 255, 255, 0.08);
    --group-more-text: #94a3b8;
    --group-name-color: #f1f5f9;
    --group-bio-color: #94a3b8;
    --group-member-border: #161616;
    --group-m-more-bg: rgba(255, 255, 255, 0.08);
    --group-m-more-text: #94a3b8;
    --name-tag-color: #94a3b8;
    --name-tag-bg: transparent;
    --time-underline-color: rgba(255, 255, 255, 0.15);
    /* 聊天列表项 - 玫瑰微光方案 */
    --chatitem-bg:              #161616;
    --chatitem-border:          rgba(255, 255, 255, 0.06);
    --chatitem-active-bg:       rgba(255, 255, 255, 0.03);
    --chatitem-name-color:      #f1f5f9;
    --chatitem-time-color:      #475569;
    --chatitem-preview-color:   #94a3b8;
    --chatitem-preview-unread:  #f1f5f9;
    --chatitem-unread-bg:       #b08d9e;
    --chatitem-unread-text:     #161616;
    --chatitem-unread-border:   #161616;
    --chatitem-pin-color:       #b08d9e;
    --chatitem-pin-bg:          linear-gradient(135deg, rgba(176, 141, 158, 0.1) 0%, #161616 100%);

    /* 头像轨道 */
    --rail-bg:                  var(--bg-screen);
    --rail-border:              var(--border-color);
    --rail-avatar-ring:         linear-gradient(135deg, #5a5a5a, #3a3a3a);
    --rail-avatar-ring-seen:    rgba(255, 255, 255, 0.15);
    --rail-avatar-border:       var(--bg-screen);
    --rail-add-border:          rgba(255, 255, 255, 0.2);
    --rail-add-icon-color:      rgba(255, 255, 255, 0.3);

    /* 空状态 */
    --empty-text-color:         rgba(148, 163, 184, 0.5);

    /* Dark-only utility vars */
    --dm-bg-deep: #161616;
    --dm-bg-hover: rgba(255, 255, 255, 0.06);
    --dm-bg-active: rgba(255, 255, 255, 0.08);
    --dm-glass-blur: blur(24px);
    --dm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);

    /* Echo 单聊 Component Variables (Dark) */
    /* 3.1 顶部导航栏 */
    --navbar-bg: #1c1c1c;
    --navbar-border: rgba(255, 255, 255, 0.08);
    --topbar-btn-icon-color: #e2e8f0;
    --topbar-name-color: #e2e8f0;
    --topbar-meta-color: #94a3b8;
    --topbar-bio-color: #94a3b8;
    --topbar-line-color: rgba(255, 255, 255, 0.15);

    /* 3.2 Tab 切换栏 */
    --tabs-bg: linear-gradient(to top, #161616 60%, transparent 100%);
    --tabs-border: rgba(255, 255, 255, 0.08);
    --tab-text-color: #64748b;
    --tab-active-color: #e2e8f0;
    --tab-active-indicator: #e2e8f0;

    /* 3.3 底部输入栏 */
    --dock-bg: rgba(26, 26, 26, 0.85);
    --dock-border: rgba(255, 255, 255, 0.08);
    --dock-btn-bg: transparent;
    --dock-btn-icon-color: #94a3b8;
    --dock-btn-active-bg: rgba(255, 255, 255, 0.05);
    --dock-input-bg: rgba(255, 255, 255, 0.06);
    --dock-input-text-color: #e2e8f0;
    --dock-input-placeholder: rgba(148, 163, 184, 0.5);
    --dock-send-bg: var(--dm-accent);
    --dock-send-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    --dock-send-icon-color: #1c1c1c;
    --dock-sticker-color: #94a3b8;
    --dock-voice-active-bg: var(--dm-accent);
    --dock-voice-active-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    --bottle-wobble-color: var(--dm-accent);
    --drawer-bg: rgba(26, 26, 26, 0.95);
    --drawer-border: rgba(255, 255, 255, 0.08);
    --drawer-item-bg: rgba(255, 255, 255, 0.06);
    --drawer-item-active-bg: #2a2a2a;
    --drawer-item-text-color: #e2e8f0;
    --drawer-icon-color: var(--dm-accent);
    --drawer-label-color: #94a3b8;
    --drawer-dot-active-color: var(--dm-accent);
    --drawer-dot-inactive-color: rgba(255, 255, 255, 0.2);

    /* 3.5 消息气泡 & 旁白 & 语音 & 礼物 */
    /* 对方（左侧）气泡 - 高光变暗，深邃护眼 */
    --bubble-other-bg: #1c1c1c;
    --bubble-other-text: #e2e8f0;
    /* 外层加深阴影 + 顶部极暗微光 (0.05透明度，防刺眼) */
    --bubble-other-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.05);

    /* 我方（右侧）气泡 - 高光变暗，深邃护眼 */
    --bubble-me-bg: #2a2a2a;
    --bubble-me-text: #e2e8f0;
    /* 外层加深阴影 + 顶部极暗微光 (0.05透明度，防刺眼) */
    --bubble-me-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.05);
    --narr-ai: #94a3b8;
    --narr-user: #b8a2ad;
    --aside-color: #94a3b8;
    --ai-aside-font-size: 13px;
    --bubble-voice-me-text: var(--dm-accent);
    --bubble-voice-other-bg: #1c1c1c;
    --bubble-voice-other-text: #94a3b8;
    --gift-bubble-bg: linear-gradient(135deg, rgba(255, 159, 67, 0.15) 0%, rgba(255, 159, 67, 0.05) 100%);
    --gift-bubble-border: rgba(255, 215, 0, 0.3);
    --gift-bubble-shadow: none;
    --gift-icon-bg: radial-gradient(circle, rgba(255,215,0,0.1), transparent);
    --gift-text-main: #ffb142;
    --gift-text-sub: #d1d8e0;

    /* 3.6 聊天列表 */
    --chatlist-bg: #161616;
    --chatlist-header-bg: #161616;
    --chatlist-header-border: transparent;
    --chatlist-header-blur: none;
    --chatlist-item-hover: rgba(255, 255, 255, 0.04);
    --chatlist-item-active-bg: rgba(255, 255, 255, 0.08);
    --chatlist-name-color: #e2e8f0;
    --chatlist-preview-color: #94a3b8;
    --chatlist-time-color: #4a5568;
    --chatlist-unread-bg: #ef4444;
    --chatlist-unread-text: #ffffff;
    --chatlist-divider-color: rgba(255, 255, 255, 0.06);

    /* === Sidebar Shell (dark) === */
    --echo-sidebar-shadow: -12px 0 40px rgba(0,0,0,0.5), -4px 0 16px rgba(0,0,0,0.3);
    --echo-sidebar-border: rgba(255,255,255,0.06);

    /* === Mask & Inner (dark) === */
    --mask-bg: rgba(0,0,0,0.5);
    --echo-inner-bg: #161616;

    /* === Glass (dark) === */
    --glass-blur: 24px;

    /* === Toggle (dark) === */
    --toggle-track: #2a2a2a;
    --toggle-track-active: #4fd1c5;

    /* === Btn & Input (dark) === */
    --btn-bg: rgba(255,255,255,0.08);
    --btn-hover-bg: rgba(255,255,255,0.12);
    --btn-active-bg: rgba(255,255,255,0.15);
    --btn-text: #e2e8f0;
    --input-bg: rgba(255,255,255,0.06);
    --input-border: rgba(255,255,255,0.06);
    --input-focus-border: #4fd1c5;
    --input-text: #e2e8f0;
    --input-placeholder: #4a5568;

    /* === Notif & Data (dark) === */
    --notif-row-hover: rgba(255,255,255,0.06);
    --notif-label: #e2e8f0;
    --notif-desc: #4a5568;
    --data-item-hover: rgba(255,255,255,0.06);
    --data-item-text: #e2e8f0;
    --data-item-desc: #4a5568;
    --data-danger-text: #fc8181;

    /* === SC (dark) === */
    --sc-header-border-color: rgba(255,255,255,0.06);
    --sc-header-name-text: #e2e8f0;
    --sc-header-back-icon: #e2e8f0;

    --sc-view-bg: rgba(255,255,255,0.06);
    --sc-view-active-bg: #2a2a2a;
    --sc-view-text: #e2e8f0;
    --sc-view-active-text: #e2e8f0;
    --sc-view-border: rgba(255,255,255,0.06);

    --sc-area-border: rgba(255,255,255,0.06);
    --sc-area-text: #94a3b8;
    --sc-area-text-muted: #4a5568;
    --sc-area-divider: rgba(255,255,255,0.06);

    --sc-chip-bg: rgba(255,255,255,0.06);
    --sc-chip-text: #94a3b8;
    --sc-chip-border: rgba(255,255,255,0.06);
    --sc-chip-active-bg: #4fd1c5;
    --sc-chip-active-text: #161616;

    --sc-bp-bg: rgba(30,40,55,0.85);
    --sc-bp-border: rgba(255,255,255,0.06);
    --sc-bp-shadow: 0 8px 30px rgba(0,0,0,0.2);
    --sc-bp-text: #e2e8f0;
    --sc-bp-muted: #4a5568;

    --sc-sub-bg: #161616;
    --sc-sub-shadow: 10px 0 40px rgba(0,0,0,0.5);
    --sc-sub-chip-bg: rgba(255,255,255,0.06);
    --sc-sub-chip-text: #94a3b8;
    --sc-sub-chip-active-bg: #4fd1c5;
    --sc-sub-chip-active-text: #161616;
    --sc-sub-divider: rgba(255,255,255,0.06);

    --sc-affinity-bar-bg: rgba(255,255,255,0.06);
    --sc-affinity-label: #e2e8f0;
    --sc-affinity-value: #e2e8f0;

    --sc-lx-bg: #161616;
    --sc-lx-chip-bg: rgba(255,255,255,0.06);
    --sc-lx-chip-text: #94a3b8;
    --sc-lx-chip-active-bg: #4fd1c5;
    --sc-lx-chip-active-text: #161616;
    --sc-lx-divider: rgba(255,255,255,0.06);

    --sc-zx-border: rgba(255,255,255,0.06);
    --sc-zx-text: #94a3b8;
    --sc-zx-muted: #4a5568;
    --sc-zx-icon: #e2e8f0;

    --sc-scheme-item-hover: rgba(255,255,255,0.06);
    --sc-scheme-item-active: rgba(255,255,255,0.08);
    --sc-scheme-text: #94a3b8;
    --sc-scheme-divider: rgba(255,255,255,0.06);

    --sc-api-row-bg: rgba(255,255,255,0.03);
    --sc-api-row-hover: rgba(255,255,255,0.06);
    --sc-api-label: #e2e8f0;
    --sc-api-value: #4a5568;
    --sc-api-divider: rgba(255,255,255,0.05);

    --sc-narr-row-bg: rgba(255,255,255,0.03);
    --sc-narr-row-hover: rgba(255,255,255,0.06);
    --sc-narr-label: #94a3b8;
    --sc-narr-value: #4a5568;
    --sc-narr-divider: rgba(255,255,255,0.05);

    --sc-scroll-thumb-bg: rgba(255,255,255,0.1);

    /* === sp (dark) === */
    --sp-bg: var(--bg-color);
    --sp-header-border: rgba(255,255,255,0.06);
    --sp-back-bg: rgba(255,255,255,0.1);
    --sp-back-color: #94a3b8;
    --sp-back-border: rgba(255,255,255,0.08);
    --sp-back-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --sp-back-hover-bg: rgba(255,255,255,0.15);
    --sp-back-hover-color: #e2e8f0;
    --sp-title-color: #e2e8f0;
    --sp-body-bg: rgba(255,255,255,0.06);
    --sp-body-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --sp-body-border: rgba(255,255,255,0.08);
    --sp-card-bg: rgba(255,255,255,0.06);
    --sp-card-shadow: 0 4px 16px rgba(0,0,0,0.2);
    --sp-label-color: #e2e8f0;
    --sp-input-bg: rgba(255,255,255,0.06);
    --sp-input-focus-bg: rgba(255,255,255,0.1);
    --sp-input-color: #e2e8f0;
    --sp-btn-primary-color: #e2a8d0;
    --sp-btn-secondary-bg: rgba(255,255,255,0.08);
    --sp-btn-secondary-color: #94a3b8;

    /* === GC (dark) === */
    --gc-header-border-color: rgba(255,255,255,0.06);
    --gc-header-name-text: #e2e8f0;
    --gc-header-back-icon: #e2e8f0;

    --gc-row-bg: #161616;
    --gc-row-hover-bg: rgba(255,255,255,0.04);
    --gc-row-active-bg: rgba(255,255,255,0.08);
    --gc-row-border: rgba(255,255,255,0.06);
    --gc-row-avatar-bg: rgba(255,255,255,0.08);
    --gc-row-name-text: #e2e8f0;
    --gc-row-desc-text: #4a5568;

    --gc-chip-bg: rgba(255,255,255,0.06);
    --gc-chip-text: #94a3b8;
    --gc-chip-active-bg: #4fd1c5;
    --gc-chip-active-text: #161616;

    --gc-sub-bg: #161616;
    --gc-sub-shadow: 10px 0 40px rgba(0,0,0,0.5);
    --gc-sub-chip-bg: rgba(255,255,255,0.06);
    --gc-sub-chip-text: #94a3b8;
    --gc-sub-chip-active-bg: #4fd1c5;
    --gc-sub-chip-active-text: #161616;

    --gc-scroll-thumb-bg: rgba(255,255,255,0.1);

    --gc-toggle-track: #2a2a2a;
    --gc-toggle-track-active: #4fd1c5;


    /* === Brand Colors (dark) === */
    --brand-pink: #f48fb1;
    --brand-blue: #64b5f6;
    --brand-pink-light: rgba(251,194,235,0.3);
    --brand-gradient: linear-gradient(135deg, #f48fb1, #64b5f6);
    --brand-gradient-h: linear-gradient(90deg, #64b5f6, #f48fb1);
    --brand-pink-gradient: linear-gradient(135deg, #f48fb1, #ff80ab);

    /* === Semantic Colors (dark) === */
    --text-muted: #78909c;
    --text-subtle: #546e7a;
    --accent-blue: #b8b8b8;
    --badge-purple: #9575cd;
    --switch-on-bg: var(--dm-accent);
    --startrack-bg: linear-gradient(180deg, #1c1c1c 0%, #161616 100%);

    /* === Danger Colors (dark) === */
    --danger-bg: #ef5350;
    --danger-hover: #e53935;
    --danger-deep: #c62828;

    /* === Warn Colors (dark) === */
    --warn-color: #fb8c00;
    --warn-amber: #ffa000;


    /* === Sub-panel Theme Accents (dark) === */
    --dm-accent: #d6d6d6;        /* 夜间统一中性强调色：取代早期冰蓝(#64b5f6/#90caf9)，以后换色改这一处即可 */
    --dm-accent-rgb: 214, 214, 214;
    --dm-accent-hover: #e8e8e8;  /* 夜间强调色 hover（比基色略亮）*/
    --notice-accent: var(--dm-accent);
    --notice-accent-hover: var(--dm-accent-hover);
    --bubble-accent: #ef9a9a;
    --bubble-accent-hover: #ef5350;
    --api-accent: #ce93d8;
    --api-accent-hover: #ba68c8;
    --brand-purple: #ce93d8;


    /* === Droplet Panel (dark) === */
    --droplet-bg: linear-gradient(145deg, rgba(40,40,60,1), rgba(30,30,50,1));
    --droplet-bg-shadow: 6px 6px 12px rgba(0,0,0,0.4), -6px -6px 12px rgba(60,60,80,0.3);
    --droplet-bg-shadow-active: inset 4px 4px 8px rgba(0,0,0,0.5), inset -4px -4px 8px rgba(60,60,80,0.2);
    --droplet-handle: rgba(255,255,255,0.2);
    --droplet-text: rgba(255,255,255,0.7);
    --droplet-icon-color: var(--dm-accent);
    --droplet-panel-bg: rgba(26,26,46,0.95);

}

/* === Night mode (always in sync with dark-mode) === */
body.night {
    /* Echo 单聊 Component Variables (Night = same as dark) */
    --navbar-bg: #1c1c1c;
    --navbar-border: rgba(255, 255, 255, 0.08);
    --topbar-btn-icon-color: #e2e8f0;
    --topbar-name-color: #e2e8f0;
    --topbar-meta-color: #94a3b8;
    --topbar-bio-color: #94a3b8;
    --topbar-line-color: rgba(255, 255, 255, 0.15);
    --tabs-bg: linear-gradient(to top, #161616 60%, transparent 100%);
    --tabs-border: rgba(255, 255, 255, 0.08);
    --tab-text-color: #64748b;
    --tab-active-color: #e2e8f0;
    --tab-active-indicator: var(--dm-accent);
    --dock-bg: rgba(26, 26, 26, 0.85);
    --dock-border: rgba(255, 255, 255, 0.08);
    --dock-btn-bg: transparent;
    --dock-btn-icon-color: #94a3b8;
    --dock-btn-active-bg: rgba(255, 255, 255, 0.05);
    --dock-input-bg: rgba(255, 255, 255, 0.06);
    --dock-input-text-color: #e2e8f0;
    --dock-input-placeholder: rgba(148, 163, 184, 0.5);
    --dock-send-bg: var(--dm-accent);
    --dock-send-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    --dock-send-icon-color: #1c1c1c;
    --dock-sticker-color: #94a3b8;
    --dock-voice-active-bg: var(--dm-accent);
    --dock-voice-active-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    --bottle-wobble-color: var(--dm-accent);
    --drawer-bg: rgba(26, 26, 26, 0.95);
    --drawer-border: rgba(255, 255, 255, 0.08);
    --drawer-item-bg: rgba(255, 255, 255, 0.06);
    --drawer-item-active-bg: #2a2a2a;
    --drawer-item-text-color: #e2e8f0;
    --drawer-icon-color: var(--dm-accent);
    --drawer-label-color: #94a3b8;
    --drawer-dot-active-color: var(--dm-accent);
    --drawer-dot-inactive-color: rgba(255, 255, 255, 0.2);
    --bubble-me-bg: #2a2a2a;
    --bubble-me-text: #e2e8f0;
    --bubble-other-bg: #1c1c1c;
    --bubble-other-text: #e2e8f0;
    --narr-ai: #94a3b8;
    --narr-user: #b8a2ad;
    --aside-color: #94a3b8;
    --ai-aside-font-size: 13px;
    --bubble-voice-me-text: var(--dm-accent);
    --bubble-voice-other-bg: #1c1c1c;
    --bubble-voice-other-text: #94a3b8;
    --gift-bubble-bg: linear-gradient(135deg, rgba(255, 159, 67, 0.15) 0%, rgba(255, 159, 67, 0.05) 100%);
    --gift-bubble-border: rgba(255, 215, 0, 0.3);
    --gift-bubble-shadow: none;
    --gift-icon-bg: radial-gradient(circle, rgba(255,215,0,0.1), transparent);
    --gift-text-main: #ffb142;
    --gift-text-sub: #d1d8e0;
    --chatlist-bg: #161616;
    --chatlist-item-hover: rgba(255, 255, 255, 0.04);
    --chatlist-item-active-bg: rgba(255, 255, 255, 0.08);
    --chatlist-name-color: #e2e8f0;
    --chatlist-preview-color: #94a3b8;
    --chatlist-time-color: #4a5568;
    --chatlist-unread-bg: #ef4444;
    --chatlist-unread-text: #ffffff;
    --chatlist-divider-color: rgba(255, 255, 255, 0.06);
    /* 群聊专属变量 (Night = Dark) */
    --group-grid-bg: rgba(255, 255, 255, 0.06);
    --group-grid-border: rgba(255, 255, 255, 0.08);
    --group-more-bg: rgba(255, 255, 255, 0.08);
    --group-more-text: #64748b;
    --group-name-color: #e2e8f0;
    --group-bio-color: #64748b;
    --group-member-border: var(--bg-color, #161616);
    --group-m-more-bg: rgba(255, 255, 255, 0.06);
    --group-m-more-text: #475569;
    --name-tag-color: #94a3b8;
    --name-tag-bg: transparent;
    --time-underline-color: rgba(255, 255, 255, 0.15);
    /* 聊天列表项 (Night = Dark) */
    --chatitem-bg:              transparent;
    --chatitem-border:          var(--border-color);
    --chatitem-active-bg:       var(--dm-bg-active);
    --chatitem-name-color:      #e2e8f0;
    --chatitem-time-color:      #94a3b8;
    --chatitem-preview-color:   #94a3b8;
    --chatitem-preview-unread:  #e2e8f0;
    --chatitem-unread-bg:       #ff3b30;
    --chatitem-unread-text:     #ffffff;
    --chatitem-unread-border:   #161616;
    --chatitem-pin-color:       #ffb300;
    --chatitem-pin-bg:          transparent;
    --rail-bg:                  var(--bg-screen);
    --rail-border:              var(--border-color);
    --rail-avatar-ring:         linear-gradient(135deg, #5a5a5a, #3a3a3a);
    --rail-avatar-ring-seen:    rgba(255, 255, 255, 0.15);
    --rail-avatar-border:       var(--bg-screen);
    --rail-add-border:          rgba(255, 255, 255, 0.2);
    --rail-add-icon-color:      rgba(255, 255, 255, 0.3);
    --empty-text-color:         rgba(148, 163, 184, 0.5);

    /* === Sidebar Shell (dark) === */
    --echo-sidebar-shadow: -12px 0 40px rgba(0,0,0,0.5), -4px 0 16px rgba(0,0,0,0.3);
    --echo-sidebar-border: rgba(255,255,255,0.06);

    /* === Mask & Inner (dark) === */
    --mask-bg: rgba(0,0,0,0.5);
    --echo-inner-bg: #161616;

    /* === Glass (dark) === */
    --glass-blur: 24px;

    /* === Toggle (dark) === */
    --toggle-track: #2a2a2a;
    --toggle-track-active: #4fd1c5;

    /* === Btn & Input (dark) === */
    --btn-bg: rgba(255,255,255,0.08);
    --btn-hover-bg: rgba(255,255,255,0.12);
    --btn-active-bg: rgba(255,255,255,0.15);
    --btn-text: #e2e8f0;
    --input-bg: rgba(255,255,255,0.06);
    --input-border: rgba(255,255,255,0.06);
    --input-focus-border: #4fd1c5;
    --input-text: #e2e8f0;
    --input-placeholder: #4a5568;

    /* === Notif & Data (dark) === */
    --notif-row-hover: rgba(255,255,255,0.06);
    --notif-label: #e2e8f0;
    --notif-desc: #4a5568;
    --data-item-hover: rgba(255,255,255,0.06);
    --data-item-text: #e2e8f0;
    --data-item-desc: #4a5568;
    --data-danger-text: #fc8181;

    /* === SC (dark) === */
    --sc-header-border-color: rgba(255,255,255,0.06);
    --sc-header-name-text: #e2e8f0;
    --sc-header-back-icon: #e2e8f0;

    --sc-view-bg: rgba(255,255,255,0.06);
    --sc-view-active-bg: #2a2a2a;
    --sc-view-text: #e2e8f0;
    --sc-view-active-text: #e2e8f0;
    --sc-view-border: rgba(255,255,255,0.06);

    --sc-area-border: rgba(255,255,255,0.06);
    --sc-area-text: #94a3b8;
    --sc-area-text-muted: #4a5568;
    --sc-area-divider: rgba(255,255,255,0.06);

    --sc-chip-bg: rgba(255,255,255,0.06);
    --sc-chip-text: #94a3b8;
    --sc-chip-border: rgba(255,255,255,0.06);
    --sc-chip-active-bg: #4fd1c5;
    --sc-chip-active-text: #161616;

    --sc-bp-bg: rgba(30,40,55,0.85);
    --sc-bp-border: rgba(255,255,255,0.06);
    --sc-bp-shadow: 0 8px 30px rgba(0,0,0,0.2);
    --sc-bp-text: #e2e8f0;
    --sc-bp-muted: #4a5568;

    --sc-sub-bg: #161616;
    --sc-sub-shadow: 10px 0 40px rgba(0,0,0,0.5);
    --sc-sub-chip-bg: rgba(255,255,255,0.06);
    --sc-sub-chip-text: #94a3b8;
    --sc-sub-chip-active-bg: #4fd1c5;
    --sc-sub-chip-active-text: #161616;
    --sc-sub-divider: rgba(255,255,255,0.06);

    --sc-affinity-bar-bg: rgba(255,255,255,0.06);
    --sc-affinity-label: #e2e8f0;
    --sc-affinity-value: #e2e8f0;

    --sc-lx-bg: #161616;
    --sc-lx-chip-bg: rgba(255,255,255,0.06);
    --sc-lx-chip-text: #94a3b8;
    --sc-lx-chip-active-bg: #4fd1c5;
    --sc-lx-chip-active-text: #161616;
    --sc-lx-divider: rgba(255,255,255,0.06);

    --sc-zx-border: rgba(255,255,255,0.06);
    --sc-zx-text: #94a3b8;
    --sc-zx-muted: #4a5568;
    --sc-zx-icon: #e2e8f0;

    --sc-scheme-item-hover: rgba(255,255,255,0.06);
    --sc-scheme-item-active: rgba(255,255,255,0.08);
    --sc-scheme-text: #94a3b8;
    --sc-scheme-divider: rgba(255,255,255,0.06);

    --sc-api-row-bg: rgba(255,255,255,0.03);
    --sc-api-row-hover: rgba(255,255,255,0.06);
    --sc-api-label: #e2e8f0;
    --sc-api-value: #4a5568;
    --sc-api-divider: rgba(255,255,255,0.05);

    --sc-narr-row-bg: rgba(255,255,255,0.03);
    --sc-narr-row-hover: rgba(255,255,255,0.06);
    --sc-narr-label: #94a3b8;
    --sc-narr-value: #4a5568;
    --sc-narr-divider: rgba(255,255,255,0.05);

    --sc-scroll-thumb-bg: rgba(255,255,255,0.1);

    /* === sp (dark) === */
    --sp-bg: var(--bg-color);
    --sp-header-border: rgba(255,255,255,0.06);
    --sp-back-bg: rgba(255,255,255,0.1);
    --sp-back-color: #94a3b8;
    --sp-back-border: rgba(255,255,255,0.08);
    --sp-back-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --sp-back-hover-bg: rgba(255,255,255,0.15);
    --sp-back-hover-color: #e2e8f0;
    --sp-title-color: #e2e8f0;
    --sp-body-bg: rgba(255,255,255,0.06);
    --sp-body-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --sp-body-border: rgba(255,255,255,0.08);
    --sp-card-bg: rgba(255,255,255,0.06);
    --sp-card-shadow: 0 4px 16px rgba(0,0,0,0.2);
    --sp-label-color: #e2e8f0;
    --sp-input-bg: rgba(255,255,255,0.06);
    --sp-input-focus-bg: rgba(255,255,255,0.1);
    --sp-input-color: #e2e8f0;
    --sp-btn-primary-color: #e2a8d0;
    --sp-btn-secondary-bg: rgba(255,255,255,0.08);
    --sp-btn-secondary-color: #94a3b8;

    /* === GC (dark) === */
    --gc-header-border-color: rgba(255,255,255,0.06);
    --gc-header-name-text: #e2e8f0;
    --gc-header-back-icon: #e2e8f0;

    --gc-row-bg: #161616;
    --gc-row-hover-bg: rgba(255,255,255,0.04);
    --gc-row-active-bg: rgba(255,255,255,0.08);
    --gc-row-border: rgba(255,255,255,0.06);
    --gc-row-avatar-bg: rgba(255,255,255,0.08);
    --gc-row-name-text: #e2e8f0;
    --gc-row-desc-text: #4a5568;

    --gc-chip-bg: rgba(255,255,255,0.06);
    --gc-chip-text: #94a3b8;
    --gc-chip-active-bg: #4fd1c5;
    --gc-chip-active-text: #161616;

    --gc-sub-bg: #161616;
    --gc-sub-shadow: 10px 0 40px rgba(0,0,0,0.5);
    --gc-sub-chip-bg: rgba(255,255,255,0.06);
    --gc-sub-chip-text: #94a3b8;
    --gc-sub-chip-active-bg: #4fd1c5;
    --gc-sub-chip-active-text: #161616;

    --gc-scroll-thumb-bg: rgba(255,255,255,0.1);

    --gc-toggle-track: #2a2a2a;
    --gc-toggle-track-active: #4fd1c5;


    /* === Brand Colors (dark) === */
    --brand-pink: #f48fb1;
    --brand-blue: #64b5f6;
    --brand-pink-light: rgba(251,194,235,0.3);
    --brand-gradient: linear-gradient(135deg, #f48fb1, #64b5f6);
    --brand-gradient-h: linear-gradient(90deg, #64b5f6, #f48fb1);
    --brand-pink-gradient: linear-gradient(135deg, #f48fb1, #ff80ab);

    /* === Semantic Colors (dark) === */
    --text-muted: #78909c;
    --text-subtle: #546e7a;
    --accent-blue: #b8b8b8;
    --badge-purple: #9575cd;
    --switch-on-bg: var(--dm-accent);
    --startrack-bg: linear-gradient(180deg, #1c1c1c 0%, #161616 100%);

    /* === Danger Colors (dark) === */
    --danger-bg: #ef5350;
    --danger-hover: #e53935;
    --danger-deep: #c62828;

    /* === Warn Colors (dark) === */
    --warn-color: #fb8c00;
    --warn-amber: #ffa000;


    /* === Sub-panel Theme Accents (dark) === */
    --dm-accent: #d6d6d6;        /* 夜间统一中性强调色：取代早期冰蓝(#64b5f6/#90caf9)，以后换色改这一处即可 */
    --dm-accent-rgb: 214, 214, 214;
    --dm-accent-hover: #e8e8e8;  /* 夜间强调色 hover（比基色略亮）*/
    --notice-accent: var(--dm-accent);
    --notice-accent-hover: var(--dm-accent-hover);
    --bubble-accent: #ef9a9a;
    --bubble-accent-hover: #ef5350;
    --api-accent: #ce93d8;
    --api-accent-hover: #ba68c8;
    --brand-purple: #ce93d8;


    /* === Droplet Panel (dark) === */
    --droplet-bg: linear-gradient(145deg, rgba(40,40,60,1), rgba(30,30,50,1));
    --droplet-bg-shadow: 6px 6px 12px rgba(0,0,0,0.4), -6px -6px 12px rgba(60,60,80,0.3);
    --droplet-bg-shadow-active: inset 4px 4px 8px rgba(0,0,0,0.5), inset -4px -4px 8px rgba(60,60,80,0.2);
    --droplet-handle: rgba(255,255,255,0.2);
    --droplet-text: rgba(255,255,255,0.7);
    --droplet-icon-color: var(--dm-accent);
    --droplet-panel-bg: rgba(26,26,46,0.95);

}