/* ============================================================================= * skins.css —— 效率工作台 4 套可切换 UI 主题（皮肤层，零业务改动） * ----------------------------------------------------------------------------- * 设计原则： * 1. 基础设计令牌（--bg / --surface / --brand / --text / --line / --radius / --shadow …） * 由 base.css 的 :root 定义，本文件只按主题「覆盖差异变量」，不改任何布局/结构。 * 2. 主题通过 切换；与月亮图标的 data-theme（浅/深）完全独立， * 互不干扰（月亮的 [data-theme="dark"] 规则位于本文件末尾，优先级最高）。 * 3. 默认 data-skin="minimal" == base.css :root（专业极简版 = 当前线上外观），保证零回退。 * 4. 切换时仅在 400ms 窗口内挂 .wb-theme-transition 做平滑过渡，日常使用无全局 transition， * 不引发布局抖动。 * ========================================================================== */ /* ---------- 0. 全主题共享的「别名 / 扩展令牌」层 ---------- * 这些令牌引用 base.css 的实时令牌，因此会自动跟随每个皮肤切换。 * 同时补齐原先只有 fallback、未定义导致无法换肤的令牌（--text-1 / --bg-2 / --line-2 / --card）， * 让日历、通知等模块也能正确跟随主题。 */ :root { /* 补齐未定义令牌（跟随实时令牌，自动换肤） */ --text-1: var(--text); --bg-2: var(--surface-2); --line-2: var(--line-strong); --card: var(--surface); /* 规范要求的「语义别名」层（统一间距/圆角/阴影/文字层级系统） */ --primary: var(--brand); --primary-hover: var(--brand-hover); --primary-active: var(--brand-hover); --success: var(--ok); --warning: var(--warn); --error: var(--danger); --bg-page: var(--bg); --bg-card: var(--surface); --bg-card-hover: var(--surface-2); --text-main: var(--text); --text-secondary: var(--text-2); --text-disable: var(--text-3); --border-color: var(--line); --divider-color: var(--line-strong); --shadow-light: var(--shadow-1); --shadow-mid: var(--shadow-2); --shadow-heavy: var(--shadow-pop); --font-family: var(--font); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 600; /* 主题切换过渡（仅切换瞬间启用，见 .wb-theme-transition） */ --transition-theme: .34s; /* 图标风格：线性图标统一描边粗细（按主题调整） */ --icon-stroke: 1.8; /* 派生圆角（统一圆角系统） */ --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; /* 渐变辅助色（品牌渐变第二色，按主题不同） */ --brand-2: #7f93f0; } /* ---------- 1. 主题 1：专业极简版（默认，= 当前线上外观） ---------- */ [data-skin="minimal"] { --brand-2: #7f93f0; --icon-stroke: 1.8; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --font-weight-bold: 600; } /* ---------- 2. 主题 2：柔和治愈版（莫兰迪粉紫 / 米白 / 浅紫） ---------- */ [data-skin="soft"] { --bg: #f5f1f9; --bg-grid: rgba(120, 90, 150, .03); --surface: #fffdfe; --surface-2: #f7f2fb; --surface-3: #efe7f5; --line: #ece4f1; --line-strong: #ddd2e8; --switch-off: #c9bcd8; --text: #3b3545; --text-2: #6f6678; --text-3: #a99fb4; --brand: #a482c7; /* 莫兰迪紫 */ --brand-hover: #8f6fbb; --brand-soft: #f1eafb; --brand-line: #e0d2f0; --brand-2: #c9b3e6; /* 浅紫渐变副色 */ --ok: #6fae8f; --ok-soft: #e9f4ee; --warn: #d6a25e; --warn-soft: #fbf1e2; --danger: #d98a86; --danger-soft: #fbecea; --radius: 18px; /* 大圆角 */ --radius-sm: 12px; --radius-xs: 9px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px; --shadow-1: 0 2px 8px rgba(120, 90, 150, .06), 0 6px 18px rgba(120, 90, 150, .07); --shadow-2: 0 4px 12px rgba(120, 90, 150, .08), 0 18px 44px rgba(120, 90, 150, .10); --shadow-pop: 0 10px 40px rgba(120, 90, 150, .16); --ease: cubic-bezier(.34, .65, .4, 1); --dur: .26s; --icon-stroke: 1.6; /* 更柔和、偏圆润的线性图标 */ } /* ---------- 3. 主题 3：糖果（高饱和活力 · 游戏化卡片，参考 monk.party） ---------- */ [data-skin="vibrant"] { --bg: radial-gradient(120% 68% at 50% -10%, rgba(249, 115, 22, .12) 0%, transparent 55%), radial-gradient(circle at 18px 18px, rgba(249, 115, 22, .06) 1.5px, transparent 1.6px) 0 0 / 26px 26px, linear-gradient(180deg, #fffdfb 0%, #fff7f0 100%); --bg-grid: rgba(249, 115, 22, .05); --surface: #ffffff; --surface-2: #fff4ec; --surface-3: #ffe9db; --line: #ffe2d2; --line-strong: #ffcfb5; --switch-off: #f2c3ab; --text: #1f2130; --text-2: #5b5f70; --text-3: #9aa0b0; --brand: #f97316; /* 高饱和糖果橙 */ --brand-hover: #ea580c; --brand-soft: #fff1e6; --brand-line: #ffd9bf; --brand-2: #fcd34d; /* 糖果黄 */ --ok: #10b981; /* 薄荷翠绿 */ --ok-soft: #e6f9f1; --warn: #f59e0b; /* 琥珀 */ --warn-soft: #fef5e3; --danger: #ef4444; /* 高饱和红 */ --danger-soft: #fdeaea; --radius: 18px; --radius-sm: 12px; --radius-xs: 9px; --radius-md: 15px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px; --shadow-1: 0 2px 8px rgba(249, 115, 22, .10), 0 8px 22px rgba(120, 90, 150, .07); --shadow-2: 0 8px 20px rgba(249, 115, 22, .14), 0 20px 48px rgba(120, 90, 150, .10); --shadow-pop: 0 16px 48px rgba(249, 115, 22, .22); --ease: cubic-bezier(.34, 1.45, .5, 1); /* 轻微回弹，更活泼 */ --dur: .26s; --icon-stroke: 2; /* 更圆润、略粗的图标 */ /* 更明显的点击反馈（仅本主题） */ --btn-press: scale(.95); } [data-skin="vibrant"] .btn:active { transform: var(--btn-press, translateY(1px)); } /* ---------- 3.5 糖果专属：糖果卡片 / 图标磁贴 / 组件适配（仅本皮肤，不影响其余 3 套） ---------- */ /* 模块卡片：白浮卡 + 糖果细描边 + 彩色柔和投影；hover 上浮 + 轻微放大（游戏化手感） */ [data-skin="vibrant"] .card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } [data-skin="vibrant"] .card:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--shadow-2); border-color: var(--brand-line); } /* 模块图标 → 糖果磁贴（圆角方块 + 糖果渐变底 + 白描边）；按 data-module 分组上色 */ [data-skin="vibrant"] .card__icon { --cg1: #fb923c; --cg2: #f97316; --cglow: #f9731659; /* 默认·橙 */ width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--cg1), var(--cg2)); box-shadow: 0 3px 10px var(--cglow), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* 选中态（hover / 卡片内聚焦）：弹跳放大 + 微旋 + 彩色光环 */ [data-skin="vibrant"] .card:hover .card__icon, [data-skin="vibrant"] .card:focus-within .card__icon { transform: scale(1.15) rotate(-5deg); box-shadow: 0 6px 16px var(--cglow), 0 0 0 3px var(--brand-soft), inset 0 1px 0 rgba(255, 255, 255, .55); } /* 糖果色板分组（磁贴底色 + 光环色）——按模块 id 稳定配色，与布局顺序无关 */ [data-skin="vibrant"] .card[data-module="note"] .card__icon, [data-skin="vibrant"] .card[data-module="bookmarks"] .card__icon, [data-skin="vibrant"] .card[data-module="booknote"] .card__icon, [data-skin="vibrant"] .card[data-module="books"] .card__icon, [data-skin="vibrant"] .card[data-module="feed"] .card__icon, [data-skin="vibrant"] .card[data-module="translate"] .card__icon, [data-skin="vibrant"] .card[data-module="search"] .card__icon, [data-skin="vibrant"] .card[data-module="google"] .card__icon, [data-skin="vibrant"] .card[data-module="bing"] .card__icon { --cg1: #60a5fa; --cg2: #2563eb; --cglow: #2563eb59; } [data-skin="vibrant"] .card[data-module="todo"] .card__icon, [data-skin="vibrant"] .card[data-module="habit"] .card__icon, [data-skin="vibrant"] .card[data-module="plantask"] .card__icon, [data-skin="vibrant"] .card[data-module="stats"] .card__icon, [data-skin="vibrant"] .card[data-module="qual"] .card__icon { --cg1: #34d399; --cg2: #10b981; --cglow: #10b98159; } [data-skin="vibrant"] .card[data-module="ai"] .card__icon, [data-skin="vibrant"] .card[data-module="agenthub"] .card__icon, [data-skin="vibrant"] .card[data-module="clipboard"] .card__icon, [data-skin="vibrant"] .card[data-module="fileconv"] .card__icon, [data-skin="vibrant"] .card[data-module="fileworks"] .card__icon, [data-skin="vibrant"] .card[data-module="filedrop"] .card__icon { --cg1: #a78bfa; --cg2: #7c3aed; --cglow: #7c3aed59; } [data-skin="vibrant"] .card[data-module="calendar"] .card__icon, [data-skin="vibrant"] .card[data-module="reminder"] .card__icon, [data-skin="vibrant"] .card[data-module="reminderplus"] .card__icon, [data-skin="vibrant"] .card[data-module="favorite"] .card__icon, [data-skin="vibrant"] .card[data-module="favplus"] .card__icon, [data-skin="vibrant"] .card[data-module="favsearch"] .card__icon { --cg1: #fb7185; --cg2: #e11d48; --cglow: #e11d4859; } [data-skin="vibrant"] .card[data-module="pwd"] .card__icon, [data-skin="vibrant"] .card[data-module="flash"] .card__icon, [data-skin="vibrant"] .card[data-module="wool"] .card__icon, [data-skin="vibrant"] .card[data-module="jd_ads"] .card__icon, [data-skin="vibrant"] .card[data-module="taobao_ads"] .card__icon { --cg1: #fcd34d; --cg2: #f59e0b; --cglow: #f59e0b59; } /* 按钮：主按钮高饱和糖果渐变 + 白粗字 + hover 上浮发光 + 按下回弹 */ [data-skin="vibrant"] .btn--primary, [data-skin="vibrant"] .btn-primary { background: linear-gradient(135deg, #fb923c, #f97316); border: none; color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(249, 115, 22, .35); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); } [data-skin="vibrant"] .btn--primary:hover, [data-skin="vibrant"] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(249, 115, 22, .45); filter: brightness(1.03); } [data-skin="vibrant"] .btn--primary:active, [data-skin="vibrant"] .btn-primary:active { transform: var(--btn-press, scale(.95)); } /* 弹窗：大圆角 + 柔和彩色投影 */ [data-skin="vibrant"] .modal, [data-skin="vibrant"] .modal__panel { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-pop); } /* 输入 / 文本域 / 选择：大圆角 + 加粗描边 + 橙色聚焦环 */ [data-skin="vibrant"] input, [data-skin="vibrant"] textarea, [data-skin="vibrant"] select, [data-skin="vibrant"] .input, [data-skin="vibrant"] .textarea { border-radius: var(--radius-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } [data-skin="vibrant"] input:focus, [data-skin="vibrant"] textarea:focus, [data-skin="vibrant"] select:focus, [data-skin="vibrant"] .input:focus, [data-skin="vibrant"] .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; } /* 标签 / 胶囊 / 列表行：糖果配色适配 */ [data-skin="vibrant"] .chip:hover { border-color: var(--brand-line); } [data-skin="vibrant"] .chip.is-active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); } [data-skin="vibrant"] .tag--brand { background: var(--brand-soft); color: var(--brand); } [data-skin="vibrant"] .item:hover { background: var(--surface-2); } /* ---------- 4. 主题 4：浮光（浅色卡片 · 通透留白，参考小声工作室编辑感） ---------- * [2026-09-14] 由「硬核深色版」深度改造为浅色悬浮卡片风格：暖纸底 + 近白浮卡 + 沉静靛蓝， * 大圆角、柔和分层阴影、hover 上浮；文字高对比保证清晰可读。仅本皮肤生效，其余 3 套零改动。 */ [data-skin="hardcore"] { --bg: radial-gradient(120% 80% at 50% -10%, rgba(90, 170, 130, .08) 0%, transparent 60%), linear-gradient(180deg, #f4f7f5 0%, #ebf0ee 100%); --bg-grid: rgba(45, 65, 55, .03); --surface: #ffffff; /* 清爽近白浮卡 */ --surface-2: #eef3f0; --surface-3: #e3eae6; --line: #e4ebe6; --line-strong: #d2dbd4; --switch-off: #c5cfc8; --text: #222a26; /* 近黑绿灰，高对比可读 */ --text-2: #5d6b63; --text-3: #93a099; --brand: #4e9a6b; /* 柔和绿色强调（低饱和、干净商务） */ --brand-hover: #5cab78; --brand-soft: #e7f2ec; --brand-line: #cfe6d8; --brand-2: #84b59b; /* 柔和副绿 */ --ok: #4e9a6b; /* 成功=主绿 */ --ok-soft: #e7f2ec; --warn: #c89a3e; /* 低饱和琥珀，与绿区分 */ --warn-soft: #f6efe0; --danger: #d2756a; /* 低饱和珊瑚，柔和警示 */ --danger-soft: #f8e9e6; --radius: 18px; /* 大圆角，柔和（保留） */ --radius-sm: 12px; --radius-xs: 9px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(45, 65, 55, .05), 0 6px 16px rgba(45, 65, 55, .07); --shadow-2: 0 4px 14px rgba(45, 65, 55, .08), 0 18px 44px rgba(45, 65, 55, .12); --shadow-pop: 0 16px 48px rgba(45, 65, 55, .18); --ease: cubic-bezier(.34, .65, .4, 1); --dur: .24s; /* 轻量动效，不卡顿（保留） */ --icon-stroke: 1.7; /* 统一线宽，柔和（保留） */ } /* ---------- 4.5 浮光专属：悬浮卡片 / 图标选中 / 组件适配（仅本皮肤，不影响其余 3 套） ---------- */ /* 模块卡片：悬浮卡片质感 + hover 上浮（轻量 transform，不引发布局抖动） */ [data-skin="hardcore"] .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } [data-skin="hardcore"] .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--brand-line); } /* 模块图标：统一品牌单色描边；选中(hover/聚焦交互)时高亮 + 微缩放 + 柔光 */ [data-skin="hardcore"] .card__icon { color: var(--brand); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease); } [data-skin="hardcore"] .card:hover .card__icon, [data-skin="hardcore"] .card:focus-within .card__icon { transform: scale(1.14); filter: drop-shadow(0 3px 8px var(--brand-soft)); } /* 弹窗：大圆角 + 柔光分层 */ [data-skin="hardcore"] .modal, [data-skin="hardcore"] .modal__panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); border: 1px solid var(--line); } /* 按钮：主按钮柔填充 + hover 轻微上浮 */ [data-skin="hardcore"] .btn--primary, [data-skin="hardcore"] .btn-primary { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } [data-skin="hardcore"] .btn--primary:hover, [data-skin="hardcore"] .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); } /* 输入 / 文本域 / 选择：柔和面 + 品牌聚焦环（清晰可读、焦点明确） */ [data-skin="hardcore"] input, [data-skin="hardcore"] textarea, [data-skin="hardcore"] select, [data-skin="hardcore"] .input, [data-skin="hardcore"] .textarea { border-radius: var(--radius-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } [data-skin="hardcore"] input:focus, [data-skin="hardcore"] textarea:focus, [data-skin="hardcore"] select:focus, [data-skin="hardcore"] .input:focus, [data-skin="hardcore"] .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; } /* 标签 / 胶囊：贴合新配色 */ [data-skin="hardcore"] .chip:hover { border-color: var(--brand-line); } [data-skin="hardcore"] .chip.is-active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); } [data-skin="hardcore"] .tag--brand { background: var(--brand-soft); color: var(--brand); } /* 列表行：hover 微高亮（适配通用列表/项） */ [data-skin="hardcore"] .item:hover { background: var(--surface-2); } /* ---------- 5. 图标风格按主题切换（皮肤层，不改 SVG 资源） ---------- */ .icon { stroke-width: var(--icon-stroke, 1.8); } /* ---------- 6. 切换瞬间的平滑过渡（避免闪烁 / 布局抖动） ---------- * 仅在选择「应用」后的 400ms 窗口内给 挂 .wb-theme-transition， * 日常使用不挂此 class，因此不影响其它交互动画。 */ html.wb-theme-transition, html.wb-theme-transition *, html.wb-theme-transition *::before, html.wb-theme-transition *::after { transition: background-color var(--transition-theme) var(--ease), border-color var(--transition-theme) var(--ease), color var(--transition-theme) var(--ease), box-shadow var(--transition-theme) var(--ease), fill var(--transition-theme) var(--ease), stroke var(--transition-theme) var(--ease) !important; } /* ============================================================================ * 主题切换器（右上角按钮）+ 主题选择面板 * 仅皮肤层：复用 base.css 的 .btn / .modal 体系与所有令牌，不新增业务结构。 * ========================================================================== */ /* 切换按钮：圆形按钮、线框图标、尺寸/外边距/hover 与月亮图标（.btn.btn--ghost）完全一致 */ #btnSkin { position: relative; display: inline-flex; align-items: center; justify-content: center; } #btnSkin svg { transition: transform var(--dur) var(--ease); } #btnSkin.is-spin svg { animation: wb-spin .6s var(--ease); } /* 主题选择面板 */ .skin-panel { position: fixed; top: calc(var(--topbar-h, 56px) + 10px); right: 14px; z-index: 320; width: 320px; max-width: calc(100vw - 28px); padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); transform-origin: top right; animation: skinPop .2s var(--ease); } .skin-panel[hidden] { display: none; } @keyframes skinPop { from { opacity: 0; transform: scale(.94) translateY(-6px); } to { opacity: 1; transform: none; } } .skin-panel__head { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; padding: 2px 4px 10px; border-bottom: 1px solid var(--divider-color); } .skin-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 2px 4px; } /* 单个主题预览卡片（可点击预览，内含「应用」按钮） */ .skin-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; text-align: left; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .skin-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-1); transform: translateY(-2px); } .skin-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } .skin-card.is-preview { border-color: var(--brand); } .skin-card__preview { height: 56px; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid rgba(0, 0, 0, .06); } /* 预览缩略图内的迷你模块示意（用内联色绘制，见 theme-switcher.js） */ .skin-card__preview .sk-bar { position: absolute; left: 8px; right: 8px; top: 9px; height: 7px; border-radius: 4px; } .skin-card__preview .sk-box { position: absolute; left: 8px; right: 8px; top: 22px; bottom: 9px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .05); } .skin-card__preview .sk-dot { position: absolute; right: 12px; top: 11px; width: 7px; height: 7px; border-radius: 50%; } .skin-card__preview .sk-line { position: absolute; left: 14px; height: 4px; border-radius: 3px; opacity: .55; } .skin-card__name { font-size: 13px; font-weight: 600; color: var(--text); } .skin-card__desc { font-size: 11px; color: var(--text-3); line-height: 1.45; min-height: 30px; } .skin-card__current { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--brand); color: #fff; display: none; } .skin-card.is-current .skin-card__current { display: inline-block; } .skin-card__apply { margin-top: 2px; height: 28px; border: 1px solid var(--brand); border-radius: var(--radius-xs); background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; /* 20260913 「应用」文字水平居中 */ transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease); } .skin-card__apply:hover { background: var(--brand-hover); } .skin-card.is-current .skin-card__apply { background: var(--surface); color: var(--brand); } /* 底部「自定义主题」占位入口（本期仅 UI 占位，不实现复杂功能） */ .skin-panel__foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider-color); } .skin-custom { width: 100%; height: 34px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); } .skin-custom:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .skin-custom:disabled { opacity: .65; cursor: not-allowed; } /* ============================================================================ * 7. 月亮图标的浅/深模式（data-theme）覆盖 —— 置于最后，确保优先级最高， * 使月亮切换的「深色模式」始终覆盖任何皮肤（与现有 core/theme.js 完全兼容）。 * ========================================================================== */ [data-theme="dark"] { --bg: #14161a; --bg-grid: rgba(255, 255, 255, 0.035); --surface: #1b1e24; --surface-2: #21252c; --surface-3: #272c34; --line: #2c313a; --line-strong: #3a414c; --switch-off: #5a6470; --text: #e6e9ee; --text-2: #a4adba; --text-3: #737d8b; --brand: #7d93ef; --brand-hover: #8ea2f3; --brand-soft: #232a40; --brand-line: #33406b; --ok: #4cb98a; --ok-soft: #1d2c26; --warn: #d9a04a; --warn-soft: #2e271a; --danger: #e2716d; --danger-soft: #33211f; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28); --shadow-2: 0 2px 8px rgba(0, 0, 0, .34), 0 18px 44px rgba(0, 0, 0, .4); --shadow-pop: 0 10px 36px rgba(0, 0, 0, .5); }