/* ===== 深色模式 =====
   仅当 <html data-theme="dark"> 时生效；由 static/js/theme.js 写入 data-theme。
   必须在每个页面的所有样式之后加载（放最后），才能覆盖各页面里硬编码的浅色值。
   覆盖顺序：① 设计系统 token ② 旧调色板变量 ③ 工作台覆盖层
            ④ 各页面/组件里写死的浅色（白底、浅边、浅渐变） */

/* ---------- ① 设计系统 token ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ds-canvas: #0f1513;
    --ds-surface: #171f1c;
    --ds-surface-muted: #1e2825;
    --ds-ink: #e7efec;
    --ds-ink-soft: #b9c7c2;
    --ds-muted: #8b9a94;
    --ds-line: #263230;
    --ds-line-strong: #33413d;
    --ds-primary: #35d6c4;
    --ds-primary-hover: #52e0d0;
    --ds-primary-soft: rgba(53, 214, 196, .14);
    --ds-accent: #a08cf0;
    --ds-danger: #f08a8a;
    --ds-success: #79d147;
    --ds-warning: #f0c94a;
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 5px 16px rgba(0, 0, 0, .35);
    --ds-shadow-md: 0 16px 40px rgba(0, 0, 0, .5);
}

/* ---------- ①b 后台语义色（oplogs.css / admin.css 的 --adm-*） ----------
   后台样式已全部走这批变量；改深色只需改这里，别再按选择器一条条覆盖。 */
:root[data-theme="dark"] {
    --adm-bg: #0f1513;
    --adm-surface: #171f1c;
    --adm-surface-soft: #1e2825;
    --adm-surface-softer: #131b19;
    --adm-head-bg: #1e2825;
    --adm-row-alt: #131b19;
    --adm-row-hover: #1e2825;
    --adm-code-bg: #1b2522;
    --adm-topbar-bg: rgba(23, 31, 28, .94);
    --adm-line: #33413d;
    --adm-line-soft: #263230;
    --adm-line-field: #33413d;
    --adm-tab-active-line: rgba(53, 214, 196, .38);
    --adm-ink-strong: #e7efec;
    --adm-ink: #cfdbd6;
    --adm-ink-soft: #9aa8a2;
    --adm-ink-muted: #9aa8a2;
    --adm-ink-faint: #8b9a94;
    --adm-ink-on-accent: #08120f;
    --adm-brand: #35d6c4;
    --adm-brand-hover: #52e0d0;
    --adm-brand-ink: #35d6c4;
    --adm-brand-bg: rgba(53, 214, 196, .14);
    --adm-brand-line: rgba(53, 214, 196, .34);
    --adm-success: #79d147;
    --adm-success-bg: rgba(121, 209, 71, .14);
    --adm-success-line: rgba(121, 209, 71, .32);
    --adm-danger: #f08a8a;
    --adm-danger-bg: rgba(240, 138, 138, .14);
    --adm-danger-line: rgba(240, 138, 138, .32);
    --adm-warning: #f0c94a;
    --adm-warning-bg: rgba(240, 201, 74, .14);
    --adm-warning-line: rgba(240, 201, 74, .32);
    --adm-blue: #7fb6e8;
    --adm-blue-bg: rgba(127, 182, 232, .14);
    --adm-blue-line: rgba(127, 182, 232, .34);
    --adm-neutral: #f0c94a;
}

/* ---------- ② 旧调色板变量（原 index-base.css 的 :root） ---------- */
:root[data-theme="dark"] {
    --bg: #0f1513;
    --card-bg: #171f1c;
    --border: #33413d;
    --border-light: #263230;
    --text: #cfdbd6;
    --text-heading: #e7efec;
    --text-secondary: #9aa8a2;
    --text-muted: #8b9a94;
    --primary: #35d6c4;
    --primary-hover: #52e0d0;
    --primary-active: #1f9f92;
    --primary-light: rgba(53, 214, 196, .14);
    --primary-3d: #1f9f92;
    --danger: #f08a8a;
    --danger-active: #e06666;
    --danger-bg: rgba(240, 138, 138, .12);
    --success: #79d147;
    --success-active: #67b93a;
    --success-bg: rgba(121, 209, 71, .12);
    --warning: #f0c94a;
    --warning-active: #d9b23a;
    --warning-bg: rgba(240, 201, 74, .12);
    --focus: #ffd75e;
    --focus-dark: #d9b23a;
    --shadow-3d: #050807;
    --shadow-btn: rgba(0, 0, 0, .35);
    --shadow-btn-hover: rgba(0, 0, 0, .45);
}

/* ---------- ③ 工作台覆盖层（workspace.css 里写死的映射值） ---------- */
[data-theme="dark"] .workspace-page {
    --text-secondary: #93a29c;
    --text-muted: #8b9a94;
    --primary-active: #1f9f92;
    --primary-3d: #1f9f92;
    --focus-dark: #d9b23a;
    --shadow-3d: #050807;
    --shadow-btn: rgba(0, 0, 0, .35);
    --shadow-btn-hover: rgba(0, 0, 0, .45);
    background:
        radial-gradient(circle at 78% -15%, rgba(112, 87, 217, .16), transparent 36%),
        var(--ds-canvas);
}

/* 滚动条 / 选区 / 焦点环 */
[data-theme="dark"] * {
    scrollbar-color: #3a4a45 transparent;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: #3a4a45;
}

[data-theme="dark"] ::selection {
    color: #0f1513;
    background: #35d6c4;
}

/* ---------- ④ 工作台：写死的浅色组件 ---------- */
/* 顶栏 / 侧栏 / 表单控件：浅色值写在 workspace.css 与 index-*.css 里，这里统一收敛 */
[data-theme="dark"] .workspace-page .header {
    background: rgba(23, 31, 28, .92);
}

[data-theme="dark"] .workspace-page .app-sidebar {
    background: rgba(23, 31, 28, .78);
}

[data-theme="dark"] .workspace-page select,
[data-theme="dark"] .workspace-page input[type="text"],
[data-theme="dark"] .workspace-page input[type="password"],
[data-theme="dark"] .workspace-page textarea,
[data-theme="dark"] .workspace-page .opt-btn,
[data-theme="dark"] .workspace-page .empty-step,
[data-theme="dark"] .local-provider-select {
    background: var(--ds-surface-muted);
    border-color: var(--ds-line-strong);
    color: var(--ds-ink);
}

[data-theme="dark"] .workspace-page .local-provider-select {
    background: var(--ds-surface);
}

/* 深色下主色本身变亮，主色底上的白字会糊成一片 —— 统一改成深色字。
   注意排掉 tpl-btn-ghost：那是深底幽灵按钮，字色要浅。 */
[data-theme="dark"] .workspace-page .btn-generate,
[data-theme="dark"] .workspace-page .btn-generate:hover,
[data-theme="dark"] .workspace-page .btn-generate:active,
[data-theme="dark"] .workspace-page .empty-primary-action,
[data-theme="dark"] .workspace-page .tpl-btn:not(.tpl-btn-ghost) {
    color: #08120f;
}

[data-theme="dark"] .workspace-page .btn-generate:disabled {
    color: var(--ds-ink-soft);
}

/* 生成中倒计时：原本是白底 + 浅灰字，深色下同样看不见 */
[data-theme="dark"] .workspace-page .generation-elapsed {
    background: rgba(23, 31, 28, .82);
}

[data-theme="dark"] .history-sidebar-body .history-item:hover {
    background: var(--ds-surface);
}

[data-theme="dark"] .mobile-drawer-body .history-thumb {
    background: var(--ds-surface-muted);
}

[data-theme="dark"] .prompt-wrap textarea:focus,
[data-theme="dark"] .param-group input:focus,
[data-theme="dark"] .bind-form input:focus,
[data-theme="dark"] .workspace-page input:focus {
    background: var(--ds-surface-muted);
}

[data-theme="dark"] .workspace-page input[type="password"],
[data-theme="dark"] .workspace-page .opt-btn,
[data-theme="dark"] .workspace-page .empty-step {
    background: var(--ds-surface-muted);
}

[data-theme="dark"] .workspace-page .opt-btn:hover {
    border-color: var(--ds-primary);
}

[data-theme="dark"] .workspace-page .upload-zone {
    border-color: var(--ds-line-strong);
    background: var(--ds-surface-muted);
}

[data-theme="dark"] .workspace-page .result-empty-icon {
    border-color: var(--ds-line);
    background: linear-gradient(145deg, var(--ds-surface-muted), rgba(160, 140, 240, .12));
}

[data-theme="dark"] .workspace-page .history-count-badge {
    background: var(--ds-primary-soft);
}

[data-theme="dark"] .workspace-page .bind-phone-btn:hover,
[data-theme="dark"] .workspace-page .sidebar-menu-item.active,
[data-theme="dark"] .workspace-page .history-sidebar-body .history-item.active {
    border-color: var(--ds-line-strong);
}

[data-theme="dark"] .sidebar-menu-item.active {
    background: var(--ds-surface-muted);
}

[data-theme="dark"] .new-creation-btn:hover {
    border-color: var(--ds-primary);
}

[data-theme="dark"] .new-creation-btn:active {
    background: var(--ds-primary-soft);
}

[data-theme="dark"] .btn-generate:disabled {
    background: #24312d;
    box-shadow: 0 3px 0 0 #0a0f0d;
}

[data-theme="dark"] .btn-generate:disabled:active {
    box-shadow: 0 3px 0 0 #0a0f0d;
}

[data-theme="dark"] .generation-mark {
    border-color: var(--ds-line);
    background: var(--ds-surface-muted);
}

[data-theme="dark"] .skeleton-tile {
    border-color: var(--ds-line);
    background: linear-gradient(145deg, #1b2522 0%, #16201d 54%, #1c1b2b 100%);
}

[data-theme="dark"] .tpl-chip,
[data-theme="dark"] .tpl-btn-ghost {
    background: var(--ds-surface-muted);
}

[data-theme="dark"] .image-viewer-overlay img {
    background: var(--ds-surface);
}

/* 工作台里的浅色阴影/描边（空状态、模板、结果卡） */
[data-theme="dark"] .workspace-page .result-card,
[data-theme="dark"] .workspace-page .tpl-card,
[data-theme="dark"] .workspace-page .card {
    border-color: var(--ds-line);
    background: var(--ds-surface);
}

/* ---------- ⑤ 后台 / 操作日志页（oplogs.css / admin.css 写死的浅色） ---------- */
[data-theme="dark"] body.admin-page {
    background: #0f1513;
    color: #cfdbd6;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .tabs,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .admin-page .topbar .exit,
[data-theme="dark"] .admin-page .topbar .home-link,
[data-theme="dark"] .admin-page .tabs,
[data-theme="dark"] .admin-page .stat-card,
[data-theme="dark"] .admin-page .controls .btn,
[data-theme="dark"] .admin-page .controls .btn.secondary {
    background: #171f1c;
    border-color: #263230;
    color: #cfdbd6;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .tabs {
    border-color: #263230;
}

[data-theme="dark"] .topbar h1,
[data-theme="dark"] .stat-card .num {
    color: #e7efec;
}

[data-theme="dark"] .topbar h1 span,
[data-theme="dark"] .topbar .exit,
[data-theme="dark"] .stat-card .label {
    color: #8b9a94;
}

[data-theme="dark"] .tabs a {
    color: #9aa8a2;
}

[data-theme="dark"] .tabs a:hover {
    color: #e7efec;
    background: #1e2825;
}

[data-theme="dark"] .tabs a.active,
[data-theme="dark"] .admin-page .tabs a.active {
    color: #35d6c4;
    border-color: #35d6c4;
}

[data-theme="dark"] .topbar .exit:hover {
    color: #f08a8a;
    background: rgba(240, 138, 138, .14);
}

/* 后台表格 / 控件 / 分页 / 空状态 */
[data-theme="dark"] .admin-page thead th {
    background: #1e2825;
}

[data-theme="dark"] .admin-page tbody tr:nth-child(even) {
    background: #131b19;
}

[data-theme="dark"] .admin-page tbody tr:hover {
    background: #1e2825;
}

[data-theme="dark"] table,
[data-theme="dark"] .admin-page table {
    color: #cfdbd6;
}

[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: #263230;
}

[data-theme="dark"] .provider-meta .key-input {
    background: #1e2825;
    border-color: #33413d;
    color: #cfdbd6;
}

[data-theme="dark"] .act-btn {
    background: #1e2825;
    border-color: #33413d;
    color: #cfdbd6;
}

/* admin.css 把分页按钮文字写成 --ds-ink-soft，会压过选中态的白字，深色下几乎全糊 */
[data-theme="dark"] .admin-page .pagination .active {
    color: var(--adm-ink-on-accent);
}

/* ---------- ⑥ 登录页（选择器一律限定在 .login-page 内，避免影响工作台） ---------- */
[data-theme="dark"] .login-page h1 {
    color: #e7efec;
}

[data-theme="dark"] .login-page .sub {
    color: #8b9a94;
}

[data-theme="dark"] .login-page label {
    color: #9aa8a2;
}

[data-theme="dark"] .login-page input {
    background: #1e2825;
    border-color: #33413d;
    color: #cfdbd6;
}

[data-theme="dark"] .login-page input:focus {
    border-color: #35d6c4;
    background: #1e2825;
}

[data-theme="dark"] .login-page .tip {
    border-top-color: #263230;
    color: #6f7d77;
}

[data-theme="dark"] .login-page .tip code {
    background: #1e2825;
    color: #9aa8a2;
}

[data-theme="dark"] .login-page .msg.err {
    background: rgba(240, 138, 138, .14);
    color: #f08a8a;
    border-color: rgba(240, 138, 138, .3);
}

[data-theme="dark"] .login-page .msg.ok {
    background: rgba(121, 209, 71, .14);
    color: #79d147;
    border-color: rgba(121, 209, 71, .3);
}

/* ---------- ⑦ 深色模式切换按钮 ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ds-line, #dfe7e3);
    border-radius: 10px;
    background: var(--ds-surface, #fff);
    color: var(--ds-ink-soft, #53615c);
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}

.theme-toggle:hover {
    border-color: var(--ds-primary, #0f766e);
    color: var(--ds-primary, #0f766e);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

/* 图标显隐：浅色显示月亮、深色显示太阳 */
.theme-toggle .icon-moon {
    display: block;
}

.theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}