/* ============================================================
   Nexus Workbench 风格统一覆盖层 v2.0 —— 提示词组合器
   亮 / 暗 双主题全面对齐首页调色板 + 组件精修 + 交互动画
   首页调色板：bg #0B0E14 / card #131722 / border #1F2735
              accent #4FE3C1 / accent2 #A78BFA
              text #E6EAF2 / muted #8B93A7 / radius 14px
   ============================================================ */

/* ============ 1. 亮色主题（Nexus 浅色版） ============ */
:root {
    --primary: #0FAE9B;
    --primary-dark: #0C8F80;
    --primary-light: #3BD4C2;
    --secondary: #8B5CF6;
    --accent: #F59E0B;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F6F7F9;
    --bg-tertiary: #EDF0F4;
    --text-primary: #1A2130;
    --text-secondary: #5B6478;
    --text-muted: #8B93A7;
    --border: #E3E8EF;
    --border-light: #EEF1F5;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 14px;
}

/* ============ 2. 暗色主题（Nexus 暗色版） ============ */
body.dark {
    --primary: #4FE3C1;
    --primary-dark: #2FC9A8;
    --primary-light: #7CEAD3;
    --secondary: #A78BFA;
    --accent: #FBBF24;
    --bg-primary: #131722;
    --bg-secondary: #0B0E14;
    --bg-tertiary: #1A2130;
    --text-primary: #E6EAF2;
    --text-secondary: #8B93A7;
    --text-muted: #626B80;
    --border: #1F2735;
    --border-light: #161C29;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* ============ 3. 全局字体与底色 ============ */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body.dark {
    background: #0B0E14;
}
body.dark button,
body.dark input,
body.dark select,
body.dark textarea {
    font-family: inherit;
}

/* 选区与滚动条 */
:root ::selection { background: var(--primary); color: #fff; }
:root ::-moz-selection { background: var(--primary); color: #fff; }
body.dark ::selection { background: #4FE3C1; color: #0B0E14; }
body.dark ::-moz-selection { background: #4FE3C1; color: #0B0E14; }

::-webkit-scrollbar-thumb { background: #C9D1DC; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #AAB4C2; }
::-webkit-scrollbar-track { background: transparent; }
body.dark ::-webkit-scrollbar-thumb { background: #1F2735; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #2A3242; }
body.dark ::-webkit-scrollbar-track { background: #0B0E14; }

/* ============ 4. 顶栏精修 ============ */
.header {
    transition: background 0.3s, border-color 0.3s;
}
body.dark .header {
    background: rgba(11, 14, 20, 0.88);
    border-bottom-color: #1F2735;
}
.header .logo-icon { color: var(--primary); }
.header .logo-icon svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.header .logo:hover .logo-icon svg { transform: rotate(-8deg) scale(1.08); }
.header .logo-text h1 {
    background: linear-gradient(120deg, var(--text-primary) 30%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============ 5. 步骤导航（互动） ============ */
.step-tab {
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.step-tab:hover { transform: translateY(-2px); }
.step-tab:active { transform: translateY(0) scale(0.97); }
.step-tab.active .step-number {
    box-shadow: 0 0 0 4px rgba(79, 227, 193, 0.18), 0 4px 14px rgba(79, 227, 193, 0.35);
}
.step-connector { transition: background 0.3s; }

/* ============ 6. 面板切换动画 ============ */
@keyframes pcFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step-panel.active {
    animation: pcFadeUp 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ============ 7. 按钮微交互 ============ */
.btn,
.btn-send-mm,
.btn-topic-generate,
.btn-topic-refresh,
.btn-generate-img,
.btn-copy-prompts {
    transition: transform 0.2s ease, box-shadow 0.25s ease,
                background-color 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, opacity 0.25s ease;
}
.btn:hover,
.btn-send-mm:hover,
.btn-topic-generate:hover,
.btn-generate-img:hover,
.btn-copy-prompts:hover {
    transform: translateY(-1px);
}
.btn:active,
.btn-send-mm:active,
.btn-topic-generate:active,
.btn-generate-img:active,
.btn-copy-prompts:active {
    transform: translateY(0) scale(0.97);
}

/* 主操作按钮：Nexus 薄荷渐变 + 光晕 */
.btn-primary,
.btn-topic-generate,
.btn-generate-img,
.btn-send-mm {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    color: #fff;
}
.btn-primary:hover,
.btn-topic-generate:hover,
.btn-generate-img:hover,
.btn-send-mm:hover {
    box-shadow: 0 6px 20px rgba(79, 227, 193, 0.35);
}

/* ============ 8. 卡片悬浮 ============ */
.card,
.api-config-card,
.template-card,
.preset-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover,
.api-config-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

/* ============ 9. 输入焦点光环 ============ */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary) !important;
}
:root input:focus,
:root textarea:focus,
:root select:focus {
    box-shadow: 0 0 0 3px rgba(15, 174, 155, 0.15);
}
body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    box-shadow: 0 0 0 3px rgba(79, 227, 193, 0.18);
}

/* ============ 10. 无障碍：减少动态 ============ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ 11. 话题选择模块配色统一（浅色重点修复） ============ */
/* 原实现：--accent 琥珀黄 + 硬编码薄荷绿背景混搭，两色系打架。
   统一改为 Nexus 主色（浅色深青 #0FAE9B / 暗色薄荷 #4FE3C1），主色随明暗模式自动切换。 */

/* 顶部领域 tab 激活态 */
.topic-industry-tab.active,
.topic-ind-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* 五步主导航激活底色（原 indigo 残留） */
.step-tab.active {
    background: rgba(15, 174, 155, 0.06);
}
body.dark .step-tab.active {
    background: rgba(79, 227, 193, 0.08);
}

/* 话题九宫格选中态：边框 / 文字 / 背景 / 光圈全走主色 */
.topic-grid-item.selected {
    border-color: var(--primary);
    background: rgba(15, 174, 155, 0.10);
    color: var(--primary-dark);
    box-shadow: 0 0 0 2px rgba(15, 174, 155, 0.18);
}
.topic-grid-item.selected:hover {
    background: rgba(15, 174, 155, 0.16);
}
body.dark .topic-grid-item.selected {
    background: rgba(79, 227, 193, 0.10);
    color: var(--primary);
    box-shadow: 0 0 0 2px rgba(79, 227, 193, 0.20);
}

/* 选中值大字 */
.topic-sel-value {
    color: var(--primary);
}

/* 生成话题按钮：主色渐变 + 光晕（明暗通用） */
.btn-topic-generate {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
}
.btn-topic-generate:hover {
    box-shadow: 0 6px 20px rgba(15, 174, 155, 0.35);
}
body.dark .btn-topic-generate:hover {
    box-shadow: 0 6px 20px rgba(79, 227, 193, 0.35);
}

/* ============ 12. 移动端防横向滚动 ============ */
html,body{overflow-x:hidden}