/**
 * 华为云解决方案匹配系统 - 全局样式
 * 风格：Minimalist Modern + 华为云企业风格
 */

:root {
    /* 品牌色 - 华为红，仅作强调，去发光 */
    --primary-color: #C7000B;
    --primary-hover: #A30009;
    --primary-light: rgba(199, 0, 11, 0.08);
    --primary-glow: rgba(199, 0, 11, 0.0);   /* 去发光：保留变量名，值透明 */

    /* 信息蓝 - 链接/信息态，仅点缀 */
    --secondary-color: #165DFF;
    --secondary-hover: #0E42D2;
    --secondary-light: rgba(22, 93, 255, 0.08);

    /* 中性灰阶 (Arco 体系: 数字大=深) */
    --neutral-900: #1D2129;  /* 主文字 */
    --neutral-800: #4E5969;  /* 次文字 */
    --neutral-700: #86909C;  /* 提示文字 */
    --neutral-600: #C9CDD4;  /* 禁用 */
    --neutral-500: #DCE0E6;  /* 浅边框 */
    --neutral-400: #F2F3F5;  /* 分割线 */
    --neutral-300: #F7F8FA;  /* 填充 */
    --neutral-200: #F5F7FA;  /* 页面底 */
    --neutral-100: #FFFFFF;  /* 表面 */
    --neutral-50:  #FFFFFF;
    --neutral-25:  #FFFFFF;

    /* 语义状态色 */
    --success: #00B42A;
    --success-light: rgba(0, 180, 42, 0.1);
    --warning: #FF7D00;
    --warning-light: rgba(255, 125, 0, 0.1);
    --error: #F53F3F;
    --error-light: rgba(245, 63, 63, 0.1);
    --info: #165DFF;
    --info-light: rgba(22, 93, 255, 0.1);

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* 间距 (8px 基准) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* 圆角 (6/8/12 三档) */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */

    /* 阴影 - 极克制 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* 表面 / 文字 / 边框 token (v2.0 深色控制台) */
    --bg-page: #E8EAED;              /* L1: 冷灰内容底（原#F5F7FA太白） */
    --bg-card: #FFFFFF;   /* L2: 卡片实底白（去毛玻璃） */
    --bg-card-solid: #F4F5F7;        /* 卡片回退色（不支持backdrop-filter时） */
    --bg-elevated: #FFFFFF;           /* L3: 输入框/弹窗（唯一允许纯白的地方） */
    --text-primary: #1A1C23;          /* 主文字 - 深墨色 */
    --text-secondary: #4A5067;        /* 副文字 - 灰蓝 */
    --text-muted: #8890A4;            /* 弱文字（新增） */
    --text-tertiary: #86909C;
    --border-color: rgba(0, 0, 0, 0.08);     /* 更淡的边框 */
    --border-light: rgba(0, 0, 0, 0.04);
    --divider: rgba(0, 0, 0, 0.06);

    /* 动效分级 */
    --navbar-height: 3.5rem;   /* 对齐新顶栏高度(56px) */
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: var(--transition-base);

    /* ===== 企业控制台风 · 深色框架 token ===== */
    --frame-bg: var(--sidebar-bg);      /* 侧边栏/顶栏 → 跟随皮肤变量 */
    --frame-bg-2: #1B1E36;         /* 侧边栏次层/悬浮 */
    --frame-hover: #23263F;        /* 导航项 hover */
    --frame-border: rgba(255, 255, 255, 0.07);
    --frame-text: #C9CEDF;         /* 导航默认文字 */
    --frame-text-dim: #7C829B;     /* 次级/禁用 */
    --frame-active-bg: rgba(199, 0, 11, 0.16);
    --frame-active-bar: #C7000B;   /* 激活项左红条 */
    --frame-active-text: #FFFFFF;
    --frame-brand-grad: linear-gradient(135deg, #C7000B 0%, #E84D54 100%);

    --topbar-height: 56px;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 64px;

    /* ===== v2.0 深色控制台 新增 Token ===== */
    --glass-bg: #FFFFFF;   /* 卡片实底白（去毛玻璃） */
    --glass-border: rgba(0, 0, 0, 0.08);   /* 实底卡片细边框 */
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --glass-hover-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(199, 0, 11, 0.06);
    --glass-blur: none;

    --brand-glow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --brand-glow-strong: 0 4px 16px rgba(0, 0, 0, 0.12);

    --input-focus-ring: 0 0 0 3px rgba(199, 0, 11, 0.12);
    --card-accent-grad: linear-gradient(180deg, rgba(199,0,11,0.03) 0%, transparent 100%);

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 主题色衍生（供全局引用） */
    --primary-300: #FF6A3D;
    --hero-gradient: linear-gradient(135deg, #C7000B 0%, #E02020 50%, #FF6A3D 100%);

    /* 皮肤变量（侧栏+顶栏底色，默认深蓝） */
    --sidebar-bg: #1B4F72;
    --topbar-bg: #154360;
}

/* ===== 皮肤系统：data-skin 属性联动（侧栏+顶栏底色+文字纯白） ===== */

[data-skin="classic-blue"] {
    --sidebar-bg: #1B4F72;
    --topbar-bg: #154360;
    --frame-text: #FFFFFF;
    --frame-text-dim: rgba(255,255,255,0.70);
}
[data-skin="classic-blue"] .sidebar { background: #1B4F72 !important; }
[data-skin="classic-blue"] .topbar { background: #154360 !important; }

[data-skin="teal"] {
    --sidebar-bg: #17A58B;
    --topbar-bg: #148F77;
    --frame-text: #FFFFFF;
    --frame-text-dim: rgba(255,255,255,0.70);
}
[data-skin="teal"] .sidebar { background: #17A58B !important; }
[data-skin="teal"] .topbar { background: #148F77 !important; }

[data-skin="summer-yellow"] {
    --sidebar-bg: #D4AC0D;
    --topbar-bg: #B7950B;
    --frame-text: #FFFFFF;
    --frame-text-dim: rgba(255,255,255,0.80);
}
[data-skin="summer-yellow"] .sidebar { background: #D4AC0D !important; }
[data-skin="summer-yellow"] .topbar { background: #B7950B !important; }

[data-skin="peach-pink"] {
    --sidebar-bg: #E74C7A;
    --topbar-bg: #C23B65;
    --frame-text: #FFFFFF;
    --frame-text-dim: rgba(255,255,255,0.75);
}
[data-skin="peach-pink"] .sidebar { background: #E74C7A !important; }
[data-skin="peach-pink"] .topbar { background: #C23B65 !important; }

/* 皮肤模式下侧栏+顶栏全元素强制纯白（兜底，防变量继承断裂） */
[data-skin] .sidebar-item { color: #fff !important; }
[data-skin] .sidebar-item .nav-icon { color: rgba(255,255,255,0.85) !important; }
[data-skin] .sidebar-item.active .nav-icon { color: #fff !important; }
[data-skin] .sidebar-collapse-btn { color: rgba(255,255,255,0.85) !important; }
[data-skin] .sidebar-brand .brand-text { color: #fff !important; }
[data-skin] .sidebar-brand .brand-sub { color: rgba(255,255,255,0.75) !important; -webkit-text-fill-color: rgba(255,255,255,0.75) !important; }
[data-skin] .theme-label { color: rgba(255,255,255,0.75) !important; }
[data-skin] .theme-name { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
[data-skin] .sidebar-footer { color: rgba(255,255,255,0.75) !important; }
[data-skin] .sidebar-status b { color: #fff !important; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* AI 助手输入框 textarea 不用红色 focus 样式 */
.ai-input-box textarea:focus,
.ai-input-box textarea:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

body {
    font-family: var(--font-family);
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    opacity: 0;  /* 阶段0隐藏极光，阶段1清理 */
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    opacity: 0;  /* 阶段0隐藏点阵，阶段1清理 */
    z-index: 0;
}

#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;  /* 阶段0隐藏粒子，阶段1默认关闭JS控制 */
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--neutral-100);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--primary-color) 0%, 
        var(--secondary-color) 50%, 
        var(--primary-color) 100%);
    opacity: 0.6;
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.brand-icon {
    font-size: 1.5rem;
}

.brand-text {
    font-size: var(--font-size-base);
    font-weight: 600;
    background: linear-gradient(135deg, var(--neutral-900) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.navbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-family);
    white-space: nowrap;
}

.navbar-item:hover {
    background: var(--neutral-300);
    color: var(--text-primary);
}

.navbar-item.active {
    background: var(--primary-color);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25);
}

.navbar-item .nav-icon {
    font-size: 1rem;
}

.navbar-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: var(--spacing-sm);
    border-left: 1px solid var(--neutral-100);
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.status-divider {
    width: 1px;
    height: 20px;
    background: var(--neutral-200);
    flex-shrink: 0;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.status-label {
    font-size: var(--font-size-xs);
    color: var(--neutral-500);
    white-space: nowrap;
}

.status-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.quick-demo-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-family);
    white-space: nowrap;
    flex-shrink: 0;
}

.quick-demo-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 0, 11, 0.3);
}

.navbar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
}

/* 移动端登录按钮 */
.mobile-login-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #C7000B 0%, #E03030 100%);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mobile-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 0, 11, 0.3);
}

.mobile-login-btn .login-icon {
    font-size: 0.875rem;
}

.mobile-login-btn .login-text {
    font-size: 0.8125rem;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--neutral-100);
    box-shadow: var(--shadow-md);
    z-index: 999;
    flex-direction: column;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
}

.mobile-menu.open {
    display: flex;
}

.mobile-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-family);
    text-align: left;
}

.mobile-item:hover,
.mobile-item.active {
    background: var(--primary-light);
    color: var(--primary-color);
}

.main-content {
    padding-top: calc(var(--navbar-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-2xl);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.content-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    margin-bottom: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    opacity: 0;
}

.content-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--neutral-500);
}

.content-card:hover::before {
    opacity: 1;
}

/* ===== Agent 思考流（SSE 实时推送） ===== */
.thinking-stream {
    border-color: rgba(199, 0, 11, 0.25);
    animation: thinkingGlow 2s ease-in-out infinite alternate;
}
@keyframes thinkingGlow {
    from { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
    to   { box-shadow: 0 6px 30px rgba(199, 0, 11, 0.15), inset 0 1px 0 rgba(255,255,255,0.12); }
}

.thinking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
}

.thinking-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

.thinking-step-badge {
    font-size: 11px;
    color: var(--text-tertiary);
    background: var(--neutral-100);
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.thinking-entries {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}
.thinking-entries::-webkit-scrollbar { width: 3px; }
.thinking-entries::-webkit-scrollbar-track { background: transparent; }
.thinking-entries::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 3px; }

/* 单条思考条目 */
.think-entry {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    animation: thinkFadeIn 0.35s ease-out;
    border-bottom: 1px solid var(--border-light);
}
.think-entry:last-child { border-bottom: none; }
@keyframes thinkFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.think-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: 1px;
}
.think-icon.thought   { background: rgba(138, 99, 237, 0.18); }
.think-icon.action    { background: rgba(59, 168, 220, 0.18); }
.think-icon.obs      { background: rgba(74, 222, 128, 0.12); }

.think-body { flex: 1; min-width: 0; }

.think-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}
.think-label.thought-label { color: #a78bfa; }
.think-label.action-label  { color: #3bb8dc; }
.think-label.obs-label    { color: #6ee7b7; }

.think-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-primary);
    word-break: break-word;
}
.think-text code {
    background: var(--neutral-100);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--warning);
}

/* 思考流完成态 */
.thinking-stream.done {
    animation: none;
    border-color: rgba(74, 222, 128, 0.25);
}

.page-header {
    margin-bottom: var(--spacing-xl);
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
}

.history-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding: 4px;
    background: var(--neutral-100);
    border-radius: var(--radius-md);
    width: fit-content;
}

.history-tab {
    padding: 10px 24px;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.history-tab:hover {
    color: var(--text-primary);
    background: var(--neutral-200);
}

.history-tab.active {
    color: var(--primary-color);
    background: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.textarea-input {
    width: 100%;
    min-height: 180px;
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    line-height: 1.6;
    resize: vertical;
    transition: all var(--transition);
}

.textarea-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.textarea-input::placeholder {
    color: var(--text-tertiary);
}

.char-counter {
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-sm);
}

/* ===== 统一下拉选择器（竞品/行业/客户档案） ===== */
.select-input,
.client-select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--text-primary);
    line-height: 1.5;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 精致向下箭头 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

.select-input:hover,
.client-select:hover {
    border-color: #c0cad8;
    background-color: #f8fafc;
}

.select-input:focus,
.client-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
    background-color: #ffffff;
}

.select-input:active,
.client-select:active {
    border-color: var(--primary-color);
    transform: scale(0.995);
}

/* 下拉选项（仅能有限定制，浏览器原生渲染） */
.select-input option,
.client-select option {
    background: #ffffff;
    color: #1e293b;
    padding: 8px 14px;
    font-size: 14px;
}

/* 客户档案下拉特殊布局 */
.client-select {
    flex: 1;
    min-height: 42px;
}

.select-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* ---- 竞品多选 chips ---- */
.multi-tip {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 6px;
}
.competitor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    min-height: 44px;
}
.chip-group-label {
    flex-basis: 100%;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}
.chip-group-label:first-child { margin-top: 0; }
.competitor-chip {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.competitor-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.competitor-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* ---- 三方对比表 ---- */
.comparison-table-wrap {
    margin-bottom: 16px;
    padding: 16px;
}
.comparison-table-wrap::before {
    display: none !important;
}
.comparison-table-wrap:hover::before {
    display: none !important;
}
.comparison-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.comparison-table-scroll {
    overflow-x: auto;
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    min-width: 560px;
}
.comparison-table th,
.comparison-table td {
    border: 1px solid var(--border-color);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.comparison-table thead th {
    background: rgba(199, 0, 11, 0.06);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.comparison-table thead th:first-child {
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    font-weight: 500;
}
.comparison-table tbody tr:nth-child(even) {
    background: var(--bg-elevated);
}
.comparison-table td:first-child {
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    background: var(--bg-card);
}
.comparison-table tbody tr:hover td {
    background: rgba(199, 0, 11, 0.03);
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--transition);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.btn:focus {
    outline: none;
    box-shadow: none;
}

/* P0-2: 键盘导航可见 focus 环（鼠标点击不触发，:focus-visible 仅键盘）
   必须放在 .btn:focus 之后且加 :focus-visible 提升优先级，否则被上面 outline:none 压掉 */
.btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(199, 0, 11, 0.35);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: #FFFFFF;
    color: var(--neutral-700);
    border: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-300);
}

.btn-danger {
    background: linear-gradient(135deg, var(--error) 0%, #D4191F 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(245, 34, 45, 0.25);
}

.btn-cancel {
    background: linear-gradient(135deg, var(--neutral-600) 0%, var(--neutral-700) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(77, 77, 77, 0.25) !important;
}

.btn-cancel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(77, 77, 77, 0.35) !important;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 34, 45, 0.35);
}

.btn-success {
    background: linear-gradient(135deg, #52C41A 0%, #389E0C 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.25);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.35);
}

.follow-up-actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-sm) var(--spacing-md) 0 var(--spacing-md);
}

.btn-sm {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-loader {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.btn.loading .btn-text {
    opacity: 0;
}

.btn.loading .btn-loader {
    display: block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 客户资料上传（阶段1） ===== */
.form-label-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    color: var(--primary-color);
}

/* ===== 客户档案栏（方案B：Agent 记忆按客户隔离） ===== */
.client-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 8px;
}
.client-select-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* .client-select 样式已合并至统一规则（.select-input/.client-select 联合声明）*/

.client-new-btn,
.client-edit-btn,
.client-manage-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    white-space: nowrap;
    border-radius: 10px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.client-del-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
}
.client-del-btn:hover {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #DC2626;
}

.upload-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(199, 0, 11, 0.02);
    border: 2px dashed rgba(199, 0, 11, 0.35);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.upload-dropzone:hover,
.upload-dropzone:focus-visible {
    border-color: var(--primary-color);
    background: rgba(199, 0, 11, 0.05);
    outline: none;
}

.upload-dropzone.dragover {
    border-color: var(--primary-color);
    background: rgba(199, 0, 11, 0.08);
    box-shadow: 0 0 0 4px rgba(199, 0, 11, 0.1), inset 0 0 20px rgba(199, 0, 11, 0.03);
}

.upload-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.upload-dropzone-icon {
    width: 36px;
    height: 36px;
    color: var(--primary-color);
    opacity: 0.9;
}

.upload-dropzone-text {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.upload-dropzone-hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.6;
}

.upload-file-list {
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.upload-file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.upload-file-item:hover {
    border-color: var(--neutral-300);
    box-shadow: var(--shadow-sm);
}

.upload-file-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--primary-color);
    opacity: 0.85;
}

.upload-file-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.upload-file-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-file-sub {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.upload-file-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.upload-file-status.uploading {
    color: var(--text-secondary);
}

.upload-file-status.done {
    color: #52C41A;
}

.upload-file-status.error {
    color: var(--error);
}

.upload-file-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.upload-file-remove:hover {
    background: var(--error-light);
    color: var(--error);
}

.upload-file-remove .icon {
    width: 16px;
    height: 16px;
}

.upload-locked-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: 10px 12px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: var(--neutral-50);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.upload-locked-hint .icon {
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    flex: 0 0 auto;
}

.upload-dropzone.is-locked {
    opacity: 0.6;
    cursor: pointer;
}

.upload-dropzone.is-locked:hover,
.upload-dropzone.is-locked:focus-visible {
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: none;
}

/* ===== Agent 模式切换 ===== */
.mode-toggle-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: 8px 0;
}

@media (max-width: 767px) {
    .mode-toggle-bar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .mode-label {
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }
    .mode-hint {
        width: 100%;
        text-align: center;
        white-space: normal !important;
        font-size: 11px;
    }
}

.mode-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.mode-toggle {
    display: flex;
    background: var(--neutral-100);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

.mode-option {
    padding: 5px 14px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    border-radius: 17px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mode-option.active {
    background: var(--primary-color);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25);
}

.mode-option:hover:not(.active) {
    color: var(--text-primary);
    background: var(--neutral-200);
}

.mode-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    background: var(--primary-color);
    color: var(--text-primary);
    padding: 1px 5px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.mode-option.active .mode-badge {
    background: var(--bg-card);
    color: var(--text-primary);
}

.mode-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    transition: color 0.25s ease;
}

/* ===== 对话式需求引导向导 ===== */
.demand-wizard {
    margin-top: var(--spacing-md);
    padding: 24px 20px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    animation: wizardFadeIn 0.35s ease;
}
@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 步骤指示器 */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 0 12px;
}
.wizard-step-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--neutral-100);
    border: 2px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: var(--text-tertiary);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.wizard-step-dot.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.wizard-step-dot.done {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.5);
    color: #4ADE80;
}
.wizard-step-line {
    width: 40px; height: 2px;
    background: var(--border-light);
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.wizard-step-line.done {
    background: rgba(74, 222, 128, 0.4);
}

/* 问题面板 */
.wizard-panel {
    display: none;
    animation: wizardPanelIn 0.3s ease;
}
.wizard-panel.active {
    display: block;
}
@keyframes wizardPanelIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}
.wizard-question {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}
.wizard-q-icon {
    font-size: 28px;
}
.wizard-question h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

/* 行业卡片网格 */
.wizard-industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.wizard-industry-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    user-select: none;
}
.wizard-industry-card:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-300);
    transform: translateY(-2px);
}
.wizard-industry-card.selected {
    background: var(--primary-light);
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.wizard-industry-card .wic-icon {
    font-size: 26px; display: block; margin-bottom: 6px;
}
.wizard-industry-card .wic-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

/* 规模选择 */
.wizard-scale-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.wizard-radio-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 4px;
}
.wizard-radio-card:hover {
    background: var(--neutral-50);
    transform: translateY(-2px);
}
.wizard-radio-card.selected {
    background: var(--primary-light);
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.wizard-radio-icon { font-size: 28px; }
.wizard-radio-title {
    font-size: var(--font-size-sm); font-weight: 600;
    color: var(--text-primary);
}
.wizard-radio-desc {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* 痛点标签 */
.wizard-pain-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 16px;
}
.wizard-pain-tag {
    background: var(--neutral-100);
    border: 1.5px solid var(--border-light);
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    user-select: none;
}
.wizard-pain-tag:hover {
    background: var(--neutral-200);
}
.wizard-pain-tag.selected {
    background: rgba(74, 144, 226, 0.1);
    border-color: #4A90E2;
    color: #4A90E2;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.08);
}
.wizard-custom-pain {
    display: flex; align-items: center; gap: 10px;
    overflow: hidden;
}
.wizard-custom-pain label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.wizard-custom-pain input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 14px;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    outline: none;
}
.wizard-custom-pain input:focus {
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.08);
}

/* 摘要面板 */
.wizard-summary {
    background: var(--neutral-50);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.wizard-summary-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    font-size: var(--font-size-sm);
}
.wizard-summary-item .wsi-label {
    color: var(--text-tertiary);
    min-width: 70px;
}
.wizard-summary-item .wsi-value {
    color: var(--text-primary);
    font-weight: 500;
}
.wizard-summary-item .wsi-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.wizard-summary-item .wsi-tag {
    background: rgba(74, 144, 226, 0.12);
    color: #4A90E2;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
}

/* 导航按钮 */
.wizard-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}
.wizard-nav-right {
    display: flex; align-items: center; gap: 8px;
}
#wizard-skip-btn {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}
#wizard-skip-btn:hover {
    color: var(--text-secondary);
}

/* 移动端适配 */
@media (max-width: 640px) {
    .wizard-panel {
        padding-left: 4px;
        padding-right: 4px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    .wizard-question {
        flex-wrap: wrap;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .wizard-industry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .wizard-scale-options {
        grid-template-columns: repeat(2, 1fr);
    }
    .wizard-steps { gap: 0; }
    .wizard-step-line { width: 24px; }
    .wizard-industry-card { padding: 10px 8px; }
    .wizard-question h3 { font-size: var(--font-size-md); }

    /* ── 痛点标签：移动端紧凑两列 ── */
    .wizard-pain-tags {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }
    .wizard-pain-tag {
        padding: 7px 6px;
        font-size: 12px;
        border-radius: 16px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── 自定义输入区 ── */
    .wizard-custom-pain {
        gap: 6px;
    }
    .wizard-custom-pain label {
        font-size: 11px;
        white-space: nowrap;
        min-width: auto;
    }
    .wizard-custom-pain input {
        padding: 7px 10px;
        font-size: 13px;
        border-radius: 8px;
    }

    /* ── 摘要面板 ── */
    .wizard-summary {
        padding: 12px 10px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .wizard-summary-item .wsi-label {
        min-width: 52px;
        font-size: 11px;
    }

    /* ── 向导导航按钮：移动端重排 ── */
    .wizard-nav {
        display: flex !important;
        flex-direction: row;
        gap: 10px;
        margin-top: 14px;
        border-top: none;
        padding-top: 0;
        align-items: center;
    }

    /* 上一步 | 下一步 并排等宽 */
    .wizard-nav > #wizard-prev-btn {
        flex: 1 !important;
        height: 42px;
        white-space: nowrap;
        font-size: var(--font-size-sm);
        min-width: 0;
    }
    .wizard-nav-right {
        flex: 1 !important;
        justify-content: stretch !important;
        gap: 0 !important;
    }
    .wizard-nav-right #wizard-next-btn,
    .wizard-nav-right #wizard-submit-btn {
        width: 100% !important;
        height: 42px;
        white-space: nowrap;
        font-size: var(--font-size-sm);
    }

    /* 移动端隐藏跳过链接（空间有限，已有"清空"按钮可退出） */
    .wizard-nav-right #wizard-skip-btn {
        display: none !important;
    }
}

.button-group {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.button-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.result-container {
    animation: slide-up 0.4s ease;
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-header {
    margin-bottom: var(--spacing-lg);
}

/* 方案 A：结果页"本次已参考客户背景与历史方案 N 条"小字提示 */
.client-context-hint {
    margin: 0 0 var(--spacing-md);
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: rgba(199, 0, 11, 0.04);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}

/* 快速体验引导条：免登录体验结果顶部，引导注册（品牌红 callout，去「AI 味」渐变） */
.quick-demo-banner {
    display: none; /* 默认隐藏，script.js 按 State.isQuickDemo 显隐 */
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-lg);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: var(--primary-light);                 /* 极淡红底，企业感 */
    border: 1px solid rgba(199, 0, 11, 0.15);
    border-left: 3px solid var(--primary-color);       /* 左侧红色强调条 */
    flex-wrap: wrap;
    animation: qd-fade-in 0.35s ease;
}
@keyframes qd-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.quick-demo-banner .qd-icon {
    color: var(--primary-color);
    flex-shrink: 0;
}
.quick-demo-banner .qd-text {
    flex: 1 1 auto;
    min-width: 200px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}
.quick-demo-banner .qd-text b {
    color: var(--primary-color);
    font-weight: 600;
}
.quick-demo-banner .qd-login-btn {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .quick-demo-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .quick-demo-banner .qd-login-btn {
        align-self: stretch;
    }
}

.result-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.result-badge.success {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(82, 196, 26, 0.2);
}

.result-content {
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary) !important;
    line-height: 1.8;
}

/* ---- 方案摘要卡片（匹配结果顶部置顶） ---- */
.solution-summary-card {
    background: linear-gradient(135deg, #FFF8F8 0%, #FFFFFF 60%);
    border: 1px solid rgba(199, 0, 11, 0.16);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(199, 0, 11, 0.05);
}
.solution-summary-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.solution-summary-head .icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--primary-color);
}
.solution-summary-body { font-size: 0.85rem; }
.solution-summary-value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary) !important;
    line-height: 1.7;
    margin: 0 0 8px;
}
.solution-summary-bullets {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.solution-summary-bullets li {
    padding-left: 0;
    margin-bottom: 6px;
    color: var(--text-secondary) !important;
    line-height: 1.6;
}

.result-content * {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border: none !important;
}

.result-content h1,
.result-content h2,
.result-content h3,
.result-content h4,
.result-content h5,
.result-content h6 {
    color: var(--neutral-900) !important;
    margin-bottom: var(--spacing-md);
}

.result-content h1 { font-size: var(--font-size-2xl); }
.result-content h2 { font-size: var(--font-size-xl); }
.result-content h3 { font-size: var(--font-size-lg); }

/* 章节级定向精修：章节标题旁的精修按钮 + 精修面板 */
.chapter-refine-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--primary-color, #C7000B);
    background: rgba(199, 0, 11, 0.06);
    border: 1px solid rgba(199, 0, 11, 0.2);
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    font-family: var(--font-family);
    transition: background var(--transition-fast), color var(--transition-fast);
    opacity: 0.55;  /* 默认半透明可见——hover 才完全显示，避免被忽略 */
}
.result-content h3:hover .chapter-refine-btn,
.chapter-refine-btn:hover {
    opacity: 1;
}
.chapter-refine-btn:hover {
    background: var(--primary-color, #C7000B);
    color: #fff;
}
.chapter-refine-btn .icon { width: 11px; height: 11px; }
/* 精修面板 */
.chapter-refine-panel {
    margin: 4px 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #E5E6EB);
    border-left: 3px solid var(--primary-color, #C7000B);
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
}
.chapter-refine-panel-head {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.chapter-refine-input {
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    font-size: 0.82rem;
    border: 1px solid var(--border-color, #E5E6EB);
    border-radius: 6px;
    background: var(--bg-default, #fff);
    color: var(--text-primary);
    resize: vertical;
    font-family: var(--font-family);
}
.chapter-refine-input:focus {
    outline: 2px solid var(--primary-color, #C7000B);
    outline-offset: 0;
}
.chapter-refine-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* AI 图片引用兜底占位（防止 LLM 偶发输出 ![图](url) 渲染成乱码/外部图） */
.md-image-placeholder {
    display: inline-block;
    padding: 2px 10px;
    margin: 2px 4px;
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
    background: var(--neutral-200, #F2F3F5);
    border: 1px dashed var(--neutral-500, #DCE0E6);
    border-radius: 4px;
    cursor: default;
}

/* 追问框章节选择器（输入 @ 弹出） */
.follow-up-chapter-picker {
    z-index: 9999;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-color, #E5E6EB);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.fup-picker-tip {
    padding: 6px 12px;
    font-size: 0.7rem;
    color: var(--text-tertiary, #999);
    background: var(--neutral-100, #FAFAFA);
    border-bottom: 1px solid var(--border-color, #E5E6EB);
}
.fup-picker-list {
    max-height: 220px;
    overflow-y: auto;
}
.fup-picker-item {
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-primary, #1D2129);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--transition-fast);
}
.fup-picker-item:hover,
.fup-picker-item.active {
    background: rgba(199, 0, 11, 0.06);
    color: var(--primary-color, #C7000B);
}
.fup-picker-item.active::before {
    content: '✓ ';
    color: var(--primary-color, #C7000B);
}

.result-content p {
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.result-content ul,
.result-content ol {
    margin-left: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

/* 方案/竞品正文列表去掉圆点（匹配页/分享页/导出统一无圆点、无编号），保留缩进层级感 */
.result-content ul {
    list-style: none;
    padding-left: 1.2em;
}
.result-content ul li {
    position: relative;
    padding-left: 0;
}

/* 摘要卡片要点同正文列表风格：无圆点、无编号，保留缩进 */
.solution-summary-bullets {
    list-style: none;
    padding-left: 0;
}
.solution-summary-bullets li {
    position: relative;
    padding-left: 0;
}

.result-content li {
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
}

.result-content code {
    background: var(--neutral-200);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--error) !important;
}

.result-content pre {
    background: var(--neutral-800);
    color: #FFFFFF !important;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

.result-content pre code {
    background: none;
    padding: 0;
    color: inherit !important;
}

.result-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

/* Markdown 表格：确保边框可见（覆盖透明/白色默认值） */
.markdown-table,
.result-content .markdown-table {
    border: 1px solid #d9d9d9 !important;
}
.markdown-table th,
.markdown-table td,
.result-content .markdown-table th,
.result-content .markdown-table td {
    border: 1px solid #e8e8e8 !important;
    color: #333 !important;
}
.markdown-table th,
.result-content .markdown-table th {
    background: rgba(199, 0, 11, 0.06) !important;   /* P0-3: 华为红极浅底 */
    color: #1f2329 !important;
    border-bottom: 2px solid rgba(199, 0, 11, 0.15) !important;   /* 表头红下沿 */
}
.markdown-table td,
.result-content .markdown-table td {
    background: #fff;
}

.result-content th,
.result-content td {
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    text-align: left;
}

.result-content th {
    background: var(--neutral-100);
    color: var(--neutral-900) !important;
    font-weight: 600;
}

.result-content td {
    background: var(--bg-card);
}

.result-content strong,
.result-content b {
    color: var(--neutral-900) !important;
}

.result-content a {
    color: var(--secondary-color) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(22, 93, 255, 0.3);
}

.result-content blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: var(--spacing-md);
    color: var(--text-secondary) !important;
    margin-bottom: var(--spacing-md);
}

.result-actions {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.source-documents {
    margin-top: var(--spacing-lg);
}

.source-summary {
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.source-summary:hover {
    background: var(--neutral-100);
    color: var(--text-primary);
}

.source-documents[open] .source-summary {
    margin-bottom: var(--spacing-md);
}

/* ========= 方案追问优化 ========= */
.follow-up-section {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.follow-up-divider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--spacing-md);
}

.follow-up-divider-text {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.btn-link {
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    transition: color 0.2s ease;
}
.btn-link:hover {
    color: var(--text-primary);
    background: transparent;
}

.follow-up-divider .btn-link {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.follow-up-divider .btn-link:hover {
    color: var(--text-primary);
}

.follow-up-history {
    max-height: 480px;
    overflow-y: auto;
    padding: var(--spacing-sm) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* 自定义滚动条 */
.follow-up-history::-webkit-scrollbar {
    width: 4px;
}
.follow-up-history::-webkit-scrollbar-track {
    background: transparent;
}
.follow-up-history::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 4px;
}
.follow-up-history::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
}

.follow-up-msg {
    max-width: 85%;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    word-wrap: break-word;
    animation: msgFadeIn 0.3s ease-out;
}

@keyframes msgFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.follow-up-user-msg {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
    box-shadow: 0 2px 12px rgba(199, 0, 11, 0.25);
}

.follow-up-ai-msg {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: var(--radius-sm);
    max-width: 95%;
}

.follow-up-ai-msg .result-content {
    font-size: var(--font-size-sm);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary) !important;
}

.follow-up-ai-msg .result-content * {
    color: var(--text-primary) !important;
}

.follow-up-ai-msg h1,
.follow-up-ai-msg h2,
.follow-up-ai-msg h3,
.follow-up-ai-msg h4 {
    font-size: var(--font-size-base);
    margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
    color: var(--neutral-900) !important;
}

.follow-up-ai-msg ul,
.follow-up-ai-msg ol {
    padding-left: var(--spacing-lg);
    margin: var(--spacing-xs) 0;
}

.follow-up-ai-msg table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-xs);
}

.follow-up-ai-msg table th {
    background: var(--neutral-100);
    color: var(--neutral-900) !important;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
}

.follow-up-ai-msg table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}

.follow-up-ai-msg table tr:hover {
    background: var(--neutral-50);
}

.follow-up-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.follow-up-loading-dot {
    width: 6px;
    height: 6px;
    background: var(--neutral-400);
    border-radius: 50%;
    animation: loadingBounce 1.4s ease-in-out infinite both;
}

.follow-up-loading-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.follow-up-loading-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes loadingBounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
        background: var(--primary-color);
    }
}

.follow-up-input-area {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0 0 0;
    border-top: 1px solid var(--border-light);
    margin-top: var(--spacing-md);
    align-items: flex-end;
}

.follow-up-input-area textarea {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background: var(--bg-card);
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.follow-up-input-area textarea::placeholder {
    color: var(--text-tertiary);
}

.follow-up-input-area textarea:focus {
    border-color: var(--primary-color);
    background: var(--bg-card);
}

.follow-up-input-area .btn-sm {
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.follow-up-input-area .btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    text-align: center;
    padding: var(--spacing-xl);
}

.stat-card-value {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neutral-900) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
}

.stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.chart-container {
    height: 350px;
    margin-top: var(--spacing-lg);
}

.confirm-dialog {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(245, 34, 45, 0.15);
    border-radius: var(--radius-md);
    border: 1px solid rgba(245, 34, 45, 0.3);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.info-card h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.info-card ol {
    list-style: decimal;
    padding-left: var(--spacing-xl);
}

.info-card li {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
}

.info-card code {
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
    color: var(--text-primary);
}

#toast-container {
    position: fixed;
    top: calc(var(--navbar-height) + var(--spacing-lg));
    right: var(--spacing-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
    box-shadow: var(--shadow-lg);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100px); }
}

.toast.success {
    background: var(--success);
    color: white;
}

.toast.error {
    background: var(--error);
    color: white;
}

.toast.warning {
    background: var(--warning);
    color: white;
}

.toast.info {
    background: var(--info);
    color: white;
}

@media (max-width: 1023px) {
    .navbar-status {
        display: flex;
    }
    
    /* 隐藏状态统计项，保留登录按钮和用户菜单 */
    .quick-demo-btn,
    .status-divider,
    .status-item {
        display: none;
    }
    
    .content-wrapper {
        padding: 0 var(--spacing-lg);
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    :root {
        --navbar-height: 3.5rem;
    }
    
    .navbar-menu {
        display: none;
    }
    
    .navbar-toggle {
        display: none;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .navbar-container {
        padding: 0 var(--spacing-md);
    }
    
    .brand-text {
        font-size: var(--font-size-base);
    }
    
    .main-content {
        padding-top: calc(var(--navbar-height) + var(--spacing-lg));
    }
    
    .content-wrapper {
        padding: 0 var(--spacing-md);
    }
    
    .page-title {
        font-size: var(--font-size-2xl);
    }
    
    .select-row {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .button-group,
    .button-row {
        flex-direction: column;
    }
    
    .confirm-dialog {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==================== 进度反馈面板 ==================== */

.progress-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    animation: slide-up 0.4s ease;
    position: relative;
    overflow: hidden;
}

.progress-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    opacity: 0;
}
.progress-panel.success::before,
.progress-panel.fade-out::before {
    display: none;
}

@keyframes progress-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.progress-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.progress-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--neutral-200);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.progress-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--neutral-100);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    width: 0%;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
    animation: progress-shimmer 1.5s ease-in-out infinite;
}

@keyframes progress-shimmer {
    0% { transform: translateX(-60px); }
    100% { transform: translateX(60px); }
}

.progress-bar.indeterminate {
    width: 40%;
    animation: indeterminate-slide 1.5s ease-in-out infinite;
}

@keyframes indeterminate-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.progress-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.progress-step.active {
    background: rgba(199, 0, 11, 0.1);
    border-color: rgba(199, 0, 11, 0.3);
    box-shadow: 0 0 12px rgba(199, 0, 11, 0.15);
}

.progress-step.done {
    opacity: 0.6;
}

.progress-step.done .step-icon {
    animation: none;
    filter: grayscale(0.3);
}

.step-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--neutral-100);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.progress-step.active .step-icon {
    background: rgba(199, 0, 11, 0.2);
    animation: step-pulse 1.5s ease-in-out infinite;
}

@keyframes step-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.step-info {
    flex: 1;
    min-width: 0;
}

.step-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.step-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.step-status {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
}

.step-status.waiting {
    border: 2px solid var(--border-color);
}

.step-status.running {
    background: var(--primary-color);
    box-shadow: 0 0 8px rgba(199, 0, 11, 0.5);
    animation: status-pulse 1s ease-in-out infinite;
}

.step-status.running::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.step-status.completed {
    background: var(--success);
    box-shadow: 0 0 8px rgba(82, 196, 26, 0.4);
}

.step-status.completed::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(199, 0, 11, 0.5); }
    50% { box-shadow: 0 0 16px rgba(199, 0, 11, 0.8); }
}

.progress-time {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.time-elapsed {
    font-variant-numeric: tabular-nums;
}

.rebuild-status {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-sm);
}

/* 进度完成时的成功状态 */
.progress-panel.success {
    border-color: rgba(82, 196, 26, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(82, 196, 26, 0.15);
}

.progress-panel.success::before {
    background: linear-gradient(90deg, var(--success) 0%, #7ED321 50%, var(--success) 100%);
}

.progress-panel.success .progress-title {
    color: var(--success);
}

/* 进度面板淡出动画 */
.progress-panel.fade-out {
    animation: fade-out-up 0.5s ease forwards;
}

@keyframes fade-out-up {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

/* ===== 知识库文档管理 ===== */
.kb-doc-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px;
    flex-wrap: wrap;
}
.kb-doc-toolbar-right {
    display: flex; align-items: center; gap: 10px;
}
.kb-doc-search {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 14px;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    width: 200px;
    outline: none;
}
.kb-doc-search:focus { border-color: var(--primary-color); }
.kb-doc-search::placeholder { color: var(--text-tertiary); }

.kb-doc-stats {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; font-size: var(--font-size-xs);
    color: var(--text-secondary); flex-wrap: wrap; gap: 8px;
}
.kb-doc-filter { display: flex; gap: 4px; }
.kb-filter-btn {
    background: transparent; border: 1px solid var(--border-color);
    border-radius: 14px; padding: 3px 12px;
    color: var(--text-secondary); font-size: 12px;
    cursor: pointer; transition: all 0.2s;
}
.kb-filter-btn.active, .kb-filter-btn:hover {
    background: rgba(199,0,11,0.12); border-color: var(--primary-color);
    color: var(--primary-color);
}

.kb-doc-list { 
    max-height: 500px; overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.kb-doc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer; transition: background 0.15s;
    font-size: var(--font-size-sm);
}
.kb-doc-item:last-child { border-bottom: none; }
.kb-doc-item:hover { background: var(--neutral-50); }
.kb-doc-item-icon { font-size: 18px; flex-shrink: 0; }
.kb-doc-item-info { flex: 1; min-width: 0; }
.kb-doc-item-title {
    color: var(--text-primary); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-doc-item-meta {
    font-size: 12px; color: var(--text-tertiary);
    display: flex; gap: 8px; margin-top: 2px;
}
.kb-doc-item-meta span {
    background: var(--neutral-100);
    border-radius: 4px; padding: 1px 8px;
}
.kb-doc-item-actions {
    display: flex; gap: 6px; flex-shrink: 0;
}
.kb-doc-action-btn {
    background: var(--neutral-100); border: 1px solid var(--border-light);
    border-radius: 6px; padding: 4px 10px; font-size: 12px;
    color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.kb-doc-action-btn:hover { background: var(--neutral-200); color: var(--text-primary); }
.kb-doc-action-btn.danger:hover { background: rgba(199,0,11,0.08); color: var(--primary-color); }
.kb-doc-skeleton {
    padding: 40px; text-align: center; color: var(--text-tertiary);
}

/* 知识库编辑弹窗 */
.kb-editor-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 1100;
    display: flex; align-items: center; justify-content: center;
}
.kb-editor-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px; width: 90%; max-width: 680px;
    max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: wizardFadeIn 0.25s ease;
}
.kb-editor-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid var(--border-light);
}
.kb-editor-header h3 { margin: 0; font-size: var(--font-size-lg); color: var(--text-primary); }
.kb-editor-close {
    background: none; border: none; color: var(--text-tertiary);
    font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.kb-editor-close:hover { color: var(--text-primary); }
.kb-editor-body {
    padding: 20px 24px; overflow-y: auto; flex: 1;
    display: flex; flex-direction: column; gap: 16px;
}
.kb-editor-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
/* voice-input wrap 后的 .voice-field 必须撑满父级宽度，textarea 铺满 */
.kb-editor-field > .voice-field {
    width: 100%; flex: 1; display: flex; align-items: stretch;
}
.kb-editor-field > .voice-field > textarea {
    width: 100%; flex: 1; box-sizing: border-box;
}
.kb-editor-field label {
    font-size: var(--font-size-sm); color: var(--text-secondary);
}
.kb-editor-field select, .kb-editor-field input, .kb-editor-field textarea {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px; padding: 10px 14px;
    color: var(--text-primary); font-size: var(--font-size-sm);
    font-family: inherit; outline: none;
}
.kb-editor-field select option {
    background: var(--bg-card); color: var(--text-primary);
}
.kb-editor-field select:focus, .kb-editor-field input:focus, .kb-editor-field textarea:focus {
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.15);
}
.kb-editor-field textarea { resize: vertical; min-height: 140px; }
.kb-editor-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-editor-upload-name {
    font-size: var(--font-size-sm); color: var(--text-secondary);
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-editor-hint {
    font-size: 12px; line-height: 1.6; color: var(--text-tertiary, #8a8f99);
    background: var(--bg-hover, #f5f6f8); border-left: 3px solid var(--border-color);
    padding: 8px 12px; border-radius: 6px;
}
/* 上传区域突出显示 */
.kb-editor-upload-section {
    background: var(--bg-hover, #f7f8fa);
    border: 1px dashed var(--border-color, #d0d5dd);
    border-radius: 10px;
    padding: 14px 16px;
}
.kb-editor-upload-section .kb-editor-hint {
    margin-top: 8px;
}
/* 分隔线：或手动输入内容 */
.kb-editor-divider {
    text-align: center; position: relative; margin: 12px 0 8px;
}
.kb-editor-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: var(--border-light, #e5e7eb);
}
.kb-editor-divider span {
    position: relative; z-index: 1; padding: 0 12px;
    font-size: 12px; color: var(--text-tertiary, #8a8f99);
    background: #fff;
}
#kb-editor-upload-btn[disabled] { opacity: .6; cursor: not-allowed; }
.kb-editor-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 16px 24px;
    border-top: 1px solid var(--border-light);
}
#kb-editor-status { font-size: 12px; color: var(--text-tertiary); margin-right: auto; }

/* ==================== 清空知识库确认弹窗 ==================== */
.confirm-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 1100;
    display: flex; align-items: center; justify-content: center;
}
.confirm-modal {
    background: var(--bg-card);
    border: 1px solid rgba(245, 34, 45, 0.3);
    border-radius: 16px; width: 90%; max-width: 420px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    animation: wizardFadeIn 0.25s ease;
    overflow: hidden;
}
.confirm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid var(--border-color);
}
.confirm-header h3 { margin: 0; font-size: var(--font-size-lg); color: #f56c6c; }
.confirm-close {
    background: none; border: none; color: var(--border-color);
    font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.confirm-close:hover { color: var(--text-primary); }
.confirm-body {
    padding: 24px; color: var(--text-primary); font-size: var(--font-size-sm); line-height: 1.8;
}
.confirm-body p { margin: 0 0 8px; }
.confirm-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}
.confirm-actions .btn-ghost { color: var(--border-color); border-color: var(--border-color); }
.confirm-actions .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-color); }

@media (max-width: 640px) {
    .confirm-modal { width: 92%; max-width: none; }
    .confirm-header { padding: 16px 18px 12px; }
    .confirm-body { padding: 18px; }
    .confirm-actions { padding: 12px 18px; }
    .confirm-actions .btn { flex: 1; justify-content: center; }
}

/* 移动端适配 */
@media (max-width: 640px) {
    .kb-doc-toolbar { flex-direction: column; align-items: stretch; }
    .kb-doc-toolbar-right { flex-wrap: wrap; }
    .kb-doc-search { width: 100%; }

    /* ── 文档卡片：移动端改为上下布局 ── */
    .kb-doc-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 10px;
    }
    /* 第一行：图标 + 标题 + 编辑按钮 */
    .kb-doc-item > .kb-doc-item-icon {
        display: none;  /* 移动端隐藏大圆点，节省空间 */
    }
    .kb-doc-item-info {
        width: 100%;
    }
    .kb-doc-item-title {
        font-size: 13px;
        white-space: normal;  /* 允许换行 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .kb-doc-item-meta {
        gap: 4px;
        margin-top: 4px;
        flex-wrap: wrap;
    }
    .kb-doc-item-meta span {
        padding: 0 6px;
        font-size: 11px;
    }
    /* 操作按钮：横排紧凑 */
    .kb-doc-item-actions {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        gap: 4px;
        margin-top: 4px;
        border-top: 1px solid var(--border-color);
        padding-top: 8px;
    }
    .kb-doc-action-btn {
        flex: 1;
        text-align: center;
        padding: 5px 4px !important;
        font-size: 11px !important;
        min-width: 0;
        white-space: nowrap;
    }
    .kb-editor-modal { width: 96%; max-height: 90vh; }
}

@media (max-width: 767px) {
    .progress-panel {
        padding: var(--spacing-md);
    }
    
    .progress-step {
        padding: var(--spacing-sm);
    }
    
    .step-icon {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }
    
    .step-label {
        font-size: var(--font-size-sm);
    }
    
    .step-desc {
        font-size: var(--font-size-xs);
    }
}

/* ==================== 移动端全面适配 ==================== */

/* 手机端基础调整 */
@media (max-width: 767px) {
    :root {
        --navbar-height: 3.5rem;
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
    }
    
    /* 导航栏 */
    .navbar-menu {
        display: none;
    }

    .navbar-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        color: var(--neutral-700) !important;
    }

    .navbar-container {
        padding: 0 var(--spacing-md);
    }

    .brand-text {
        font-size: var(--font-size-sm);
    }

    /* 移动端菜单 - 修复文字颜色 */
    .mobile-menu {
        background: #FFFFFF;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .mobile-item {
        color: var(--neutral-700);
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }

    .mobile-item:hover,
    .mobile-item.active {
        background: var(--primary-light);
        color: var(--primary-color);
    }

    .main-content {
        padding-top: calc(var(--navbar-height) + var(--spacing-md));
        padding-bottom: var(--spacing-xl);
    }

    .content-wrapper {
        padding: 0 var(--spacing-md);
    }

    .page-title {
        font-size: var(--font-size-2xl);
    }

    .page-subtitle {
        font-size: var(--font-size-sm);
    }

    .content-card {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    /* 表单 */
    .select-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .textarea-input {
        min-height: 120px;
        font-size: var(--font-size-sm);
    }

    /* 按钮组 */
    .button-group,
    .button-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    /* 统计卡片 */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .stat-card {
        padding: var(--spacing-lg);
    }

    .stat-card-value {
        font-size: 1.75rem;
    }

    /* 结果内容 */
    .result-content {
        font-size: var(--font-size-sm);
    }

    .result-content h1 { font-size: var(--font-size-xl); }
    .result-content h2 { font-size: var(--font-size-lg); }
    .result-content h3 { font-size: var(--font-size-base); }

    .result-content pre {
        font-size: var(--font-size-xs);
        padding: var(--spacing-sm);
    }

    .result-content table {
        font-size: var(--font-size-xs);
    }

    .result-content th,
    .result-content td {
        padding: 6px 8px;
    }

    /* 来源文档 */
    .source-documents .source-summary {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
    }

    /* 进度面板 */
    .progress-panel {
        padding: var(--spacing-md);
    }

    .progress-step {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .step-icon {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    .step-label {
        font-size: var(--font-size-sm);
    }

    .step-desc {
        font-size: var(--font-size-xs);
    }

    /* 追问区域 */
    .follow-up-section {
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .follow-up-divider {
        padding: var(--spacing-sm) 0;
        margin-bottom: var(--spacing-sm);
    }
    
    .follow-up-divider-text {
        font-size: var(--font-size-sm);
    }
    
    .follow-up-history {
        max-height: 300px;
    }
    
    .follow-up-input-area {
        flex-direction: row;
        gap: 8px;
        padding: var(--spacing-sm) 0 0 0;
        margin-top: var(--spacing-sm);
        align-items: stretch;
    }
    
    .follow-up-input-area textarea {
        flex: 1;
        min-height: 36px;
        max-height: 80px;
        padding: 8px 12px;
        font-size: 0.875rem;
        border-radius: var(--radius-md);
    }
    
    .follow-up-input-area textarea::placeholder {
        font-size: 0.8125rem;
    }
    
    .follow-up-input-area .btn-sm {
        width: auto;
        flex-shrink: 0;
        padding: 8px 16px;
        font-size: 0.875rem;
        border-radius: var(--radius-md);
        align-self: stretch;
    }
    
    .follow-up-msg {
        max-width: 95%;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .follow-up-actions {
        padding: var(--spacing-sm) 0 0 0;
    }
    
    .follow-up-actions .btn-sm {
        width: 100%;
        padding: 10px 16px;
        font-size: 0.875rem;
    }
    
    /* 结果操作按钮 */
    .result-actions {
        margin-top: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .result-actions .btn {
        width: 100%;
        padding: 10px 16px;
        font-size: 0.875rem;
        margin-bottom: 8px;
    }
    
    .result-actions .btn:last-child {
        margin-bottom: 0;
    }
    
    /* source documents 移动端 */
    .source-documents {
        margin-top: var(--spacing-md);
    }
    
    .source-summary {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Toast */
    #toast-container {
        left: var(--spacing-md);
        right: var(--spacing-md);
        top: calc(var(--navbar-height) + var(--spacing-sm));
    }

    .toast {
        width: 100%;
    }

    /* ========== 产品图谱页面移动端 ========== */
    .products-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start !important;
    }

    .products-header-left h2 {
        font-size: var(--font-size-xl);
    }

    .products-header-left p {
        font-size: var(--font-size-xs);
    }

    .products-header-stats {
        width: 100%;
        justify-content: flex-start;
        gap: var(--spacing-lg);
    }

    .products-toolbar {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .products-filter-group {
        flex-wrap: wrap;
        gap: 6px;
    }

    .product-filter-btn {
        padding: 6px 10px;
        font-size: var(--font-size-xs);
    }

    .product-search-input {
        width: 100%;
        font-size: var(--font-size-sm);
    }

    .products-graph-wrapper {
        flex-direction: column;
        height: auto;
    }

    .products-canvas-area {
        height: 50vh;
        min-height: 300px;
    }

    .product-detail-panel {
        width: 100%;
        height: auto;
        min-height: 200px;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .products-grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
        padding: 8px;
    }

    .product-node {
        padding: 8px;
    }

    .product-node .node-title {
        font-size: var(--font-size-xs);
    }

    .products-highlight-bar {
        display: none;
    }

    /* ========== Dashboard 移动端 ========== */
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .dashboard-kpi-card {
        padding: var(--spacing-md);
    }

    .kpi-icon {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    .kpi-value {
        font-size: 1.25rem;
    }

    .kpi-label {
        font-size: var(--font-size-xs);
    }

    .dashboard-charts-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card {
        padding: var(--spacing-md);
    }

    .dashboard-chart-card.wide {
        grid-column: span 1;
    }

    .chart-title {
        font-size: var(--font-size-base);
    }

    .chart-body {
        height: 240px;
    }

    .dashboard-chart-card.wide .chart-body {
        height: 300px;
    }

    .dashboard-info-bar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .info-item {
        flex: 1;
        min-width: 80px;
    }

    /* ========== 历史记录移动端 ========== */
    .history-toolbar {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }

    .history-toolbar-right {
        justify-content: flex-end;
    }

    .history-item {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .history-item-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* 历史对比弹窗 */
    .history-compare-content {
        width: 95%;
        max-height: 90vh;
    }

    .compare-body {
        flex-direction: column;
    }

    .compare-side {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 40vh;
    }

    /* 历史详情弹窗 */
    .history-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    /* ========== 设置页面移动端 ========== */
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .setting-item {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }

    .settings-info-grid {
        grid-template-columns: 1fr;
    }

    .settings-actions {
        flex-direction: column;
    }

    /* ========== 登录/注册弹窗移动端 ========== */
    .auth-modal {
        width: 92%;
        max-height: 85vh;
        padding: var(--spacing-lg);
    }

    .auth-tabs {
        margin-bottom: var(--spacing-md);
    }

    .captcha-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .captcha-img {
        width: 100%;
        height: 44px;
        object-fit: cover;
    }

    /* ========== 个人中心面板移动端 ========== */
    .profile-drawer {
        width: 100%;
        max-width: 100%;
    }

    .profile-hero { padding: 24px 16px 20px; }
    .profile-avatar { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
    .profile-username { font-size: 1.05rem; }
    .profile-role-badge { font-size: 0.72rem; }
    .profile-welcome-sub { display: none; }

    .profile-stats-grid { gap: 8px; }
    .profile-stat-card { padding: 12px 8px; border-radius: 10px; }
    .profile-stat-value { font-size: 1.35rem; }
    .profile-stat-label { font-size: 0.7rem; }

    .profile-section { padding: 14px 14px; }
    .profile-fav-list { max-height: 180px; }

    /* ========== 全局错误弹窗移动端 ========== */
    .global-error-content {
        width: 90%;
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .global-inline-error-content {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    /* ========== 知识库页面移动端 ========== */
    .chart-container {
        height: 250px;
    }

    .confirm-dialog {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    /* ========== 分页组件移动端 ========== */
    .pagination-container {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
    }

    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* 平板端适配 */
@media (min-width: 768px) and (max-width: 1023px) {
    .content-wrapper {
        padding: 0 var(--spacing-lg);
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-graph-wrapper {
        flex-direction: column;
    }

    .products-canvas-area {
        height: 50vh;
    }

    .product-detail-panel {
        width: 100%;
        height: auto;
        min-height: 200px;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-charts-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card.wide {
        grid-column: span 1;
    }
}

@media (min-width: 1440px) {
    .content-wrapper {
        max-width: 1400px;
    }
}

/* ==================== Dashboard 数据仪表盘 ==================== */

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.dashboard-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dashboard-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0.7;
}

.dashboard-kpi-card:hover {
    transform: translateY(-4px);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-lg);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(199, 0, 11, 0.15);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.kpi-content {
    flex: 1;
    min-width: 0;
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}

.kpi-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.kpi-trend {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(82, 196, 26, 0.15);
    color: var(--success);
    white-space: nowrap;
}

.trend-down {
    background: rgba(245, 34, 45, 0.15);
    color: var(--error);
}

.kpi-trend.static {
    background: rgba(24, 144, 255, 0.15);
    color: var(--info);
}

.dashboard-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.dashboard-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
}

.dashboard-chart-card:hover {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
}

.dashboard-chart-card.wide {
    grid-column: span 2;
}

.chart-header {
    margin-bottom: var(--spacing-lg);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.chart-body {
    position: relative;
    height: 340px;
}

.dashboard-chart-card.wide .chart-body {
    height: 500px;
}

.dashboard-info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xl);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.info-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.info-value.status-online {
    color: var(--success);
}

/* Dashboard 响应式适配 */
@media (max-width: 1023px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-charts-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-chart-card.wide {
        grid-column: span 1;
    }
    
    .dashboard-info-bar {
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: var(--spacing-md);
    }
    
    .dashboard-kpi-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px 8px;
        gap: 2px;
        border-radius: var(--radius-md);
    }

    .kpi-icon {
        width: 28px;
        height: 28px;
        font-size: 1rem;
        border-radius: var(--radius-sm);
        margin-bottom: 2px;
    }

    .kpi-value {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .kpi-label {
        font-size: 0.6875rem;
        white-space: nowrap;
    }

    .kpi-trend {
        font-size: 0.625rem;
        padding: 2px 6px;
        margin-top: 4px;
    }

    .kpi-change {
        font-size: 0.625rem;
        padding: 2px 6px;
    }
    
    .chart-body {
        height: 240px;
    }
    
    .dashboard-chart-card.wide .chart-body {
        height: 340px;
    }
    
    .dashboard-info-bar {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .dashboard-chart-card {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }
    
    .dashboard-chart-card .chart-header {
        padding-bottom: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .dashboard-chart-card .chart-header h3 {
        font-size: var(--font-size-sm);
    }
}

/* ========== 历史记录页面 ========== */

.history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.history-toolbar-left {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.history-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.compare-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-right: var(--spacing-sm);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.compare-hint.visible {
    opacity: 1;
    color: var(--primary-color);
    font-weight: 500;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.history-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.history-item:hover {
    border-color: var(--primary);
    background: rgba(199, 0, 11, 0.04);
}

.history-item.selected {
    border-color: var(--primary);
    background: rgba(199, 0, 11, 0.08);
    box-shadow: 0 0 0 2px rgba(199, 0, 11, 0.15);
}

.history-item-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.history-item.selected .history-item-checkbox {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-primary);
}

.history-item-content {
    flex: 1;
    min-width: 0;
}

.history-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

.history-item-tags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-item-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: 'SF Mono', monospace;
}

.history-item-industry {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(74, 144, 226, 0.15);
    color: #4A90E2;
    font-weight: 600;
}

.history-item-industry.competitor-badge {
    background: rgba(245, 34, 45, 0.15);
    color: #F5222D;
}

.history-item-demand {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.6;
    word-break: break-word;
}

.history-item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.history-empty {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    color: var(--text-muted);
}

.history-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

.history-empty p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
}

.history-empty .empty-sub {
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

/* 历史记录 - 详情弹窗 */
.history-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.history-modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-modal-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.history-modal-content .modal-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

/* 全局关闭按钮样式 */
.btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-close:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    transform: scale(1.1);
}

.btn-close:active {
    transform: scale(0.95);
}

.history-modal-content .btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.history-modal-content .btn-close:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.history-modal-content .modal-body {
    padding: var(--spacing-lg) var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

.history-modal-content .detail-section {
    margin-bottom: var(--spacing-lg);
}

.history-modal-content .detail-section-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.history-modal-content .detail-demand {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.history-modal-content .detail-solution {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--text-primary);
    overflow-x: auto;
}

/* ===== 历史记录增强：下载状态 / 归档徽标 / 操作按钮 / 追问面板 ===== */
.history-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.history-badge .icon {
    width: 12px;
    height: 12px;
}
.badge-downloaded {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.3);
}
.badge-archived {
    background: rgba(202, 138, 4, 0.14);
    color: #b45309;
    border: 1px solid rgba(202, 138, 4, 0.32);
}

/* 方案版本化徽标：v1/v2/v3 + 定稿 */
.badge-version {
    background: rgba(59, 130, 246, 0.14);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.32);
}
.badge-final {
    background: rgba(168, 85, 247, 0.16);
    color: #9333ea;
    border: 1px solid rgba(168, 85, 247, 0.34);
}

/* 阶段 2.5：澄清提问卡 */
.clarify-card {
    margin: 16px 0;
    padding: 18px 18px 16px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.02));
    border-radius: 14px;
}
.clarify-header {
    margin-bottom: 12px;
}
.clarify-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: var(--font-size-base, 15px);
    color: var(--text-primary, #e8edf5);
}
.clarify-title .icon {
    width: 18px;
    height: 18px;
    color: #3b82f6;
}
.clarify-q {
    margin-bottom: 14px;
}
.clarify-q-text {
    font-size: var(--font-size-sm, 13px);
    color: var(--text-secondary, #aab4c4);
    margin-bottom: 8px;
    line-height: 1.5;
}
.clarify-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.clarify-opt-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: var(--surface-2, rgba(255, 255, 255, 0.04));
    color: var(--text-secondary, #aab4c4);
    font-size: var(--font-size-sm, 13px);
    cursor: pointer;
    transition: all 0.15s ease;
}
.clarify-opt-btn:hover {
    border-color: rgba(59, 130, 246, 0.5);
    color: var(--text-primary, #e8edf5);
}
.clarify-opt-btn.selected {
    background: rgba(59, 130, 246, 0.18);
    border-color: #3b82f6;
    color: #fff;
}
.clarify-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: var(--surface-1, rgba(15, 20, 30, 0.6));
    color: var(--text-primary, #e8edf5);
    font-size: var(--font-size-sm, 13px);
    outline: none;
}
.clarify-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.clarify-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

/* 方案版本化：版本列表 */
.versions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.versions-loading,
.versions-empty {
    font-size: var(--font-size-sm, 13px);
    color: var(--text-muted, #6b7686);
    padding: 6px 0;
}
.version-item {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--surface-1, rgba(15, 20, 30, 0.5));
    border-radius: 12px;
    padding: 12px 14px;
}
.version-item.current {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}
.version-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.version-tag {
    font-weight: 700;
    font-size: var(--font-size-sm, 13px);
    color: #3b82f6;
}
.version-date {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted, #6b7686);
}
.version-preview {
    font-size: var(--font-size-sm, 13px);
    color: var(--text-secondary, #aab4c4);
    line-height: 1.5;
    margin-bottom: 10px;
}
.version-view-btn {
    font-size: var(--font-size-sm, 13px);
}

/* 列表项图标按钮（下载 / 归档） */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s ease;
}
.btn-icon:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(199, 0, 11, 0.06);
}
.btn-icon.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(199, 0, 11, 0.1);
}
.btn-icon .icon {
    width: 16px;
    height: 16px;
}

/* 详情弹窗：状态 + 操作区 */
.detail-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--spacing-sm);
}
.detail-actions {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--border-color);
}
.detail-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.detail-action-btns .btn .icon {
    width: 15px;
    height: 15px;
    margin-right: 4px;
    vertical-align: -2px;
}

/* 追问优化面板 */
.followup-section {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-subtle, #f7f8fa);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
}
.followup-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}
.followup-conversation {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.followup-empty {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary, #999);
    padding: var(--spacing-sm) 0;
}
.followup-msg {
    max-width: 92%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg, 12px);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}
.followup-msg.user {
    align-self: flex-end;
    background: var(--primary-color);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.followup-msg.assistant {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}
.followup-role {
    font-size: 11px;
    font-weight: 700;
    opacity: .7;
    margin-bottom: 3px;
}
.followup-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.followup-ai-summary {
    color: var(--text-secondary);
}
.followup-input-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}
.followup-input {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    resize: vertical;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: var(--bg-card);
    color: var(--text-primary);
}
.followup-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(199, 0, 11, 0.12);
}
.followup-preview {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
}
.followup-preview-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* 历史记录 - 对比视图 */
.history-compare-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.history-compare-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.compare-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.compare-ai-summary-bottom {
    padding: var(--spacing-md) var(--spacing-xl);
    background: linear-gradient(135deg, rgba(199, 0, 11, 0.06) 0%, rgba(255, 100, 0, 0.04) 100%);
    border-top: 1px solid rgba(199, 0, 11, 0.15);
    flex-shrink: 0;
    max-height: 220px;
    overflow-y: auto;
}

.ai-summary-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.ai-summary-label .ai-icon {
    font-size: 1rem;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.ai-summary-content {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--text-primary);
    max-height: 180px;
    overflow-y: auto;
}

.ai-summary-content h1,
.ai-summary-content h2,
.ai-summary-content h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
}

.ai-summary-content ul,
.ai-summary-content ol {
    padding-left: var(--spacing-lg);
    margin: var(--spacing-xs) 0;
}

.ai-summary-content p {
    margin: var(--spacing-xs) 0;
}

.compare-ai-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: var(--spacing-md);
}

.ai-summary-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family);
}

.ai-summary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(199, 0, 11, 0.3);
}

.ai-summary-btn .ai-btn-icon {
    font-size: 1rem;
    animation: pulse-glow 2s ease-in-out infinite;
}

.ai-summary-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    font-weight: 500;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(199, 0, 11, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.compare-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    flex: 1;
}

.compare-column {
    padding: var(--spacing-lg) var(--spacing-xl);
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
}

.compare-column:last-child {
    border-right: none;
}

.compare-column-header {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.compare-column-demand {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--primary);
    line-height: 1.6;
}

.compare-column-solution {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--text-primary);
    overflow-x: auto;
}

/* 响应式 */
@media (max-width: 1023px) {
    .compare-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .compare-column {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .compare-column:last-child {
        border-bottom: none;
    }

    .history-compare-content {
        max-height: 95vh;
    }
}

@media (max-width: 767px) {
    .history-toolbar {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }

    .history-item {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .history-item-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .history-modal-content {
        max-height: 95vh;
        margin: var(--spacing-sm);
    }
}

/* ==================== 系统设置页 ==================== */

.settings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    gap: var(--spacing-lg);
    animation: setting-item-enter 0.3s ease backwards;
}

@keyframes setting-item-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.setting-item:nth-child(1) { animation-delay: 0s; }
.setting-item:nth-child(2) { animation-delay: 0.06s; }
.setting-item:nth-child(3) { animation-delay: 0.12s; }

.setting-item:hover {
    background: var(--bg-elevated);
    border-color: var(--text-primary);
}

.setting-info {
    flex: 1;
    min-width: 0;
}

.setting-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.setting-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--neutral-300);
    border-radius: 26px;
    transition: 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.setting-select {
    padding: 8px 32px 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 100px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386909C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.setting-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.settings-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.settings-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
}

.settings-info-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-info-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.settings-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    justify-content: flex-end;
}

.settings-saved-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 28px;
    background: var(--success);
    color: white;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: toast-in 0.3s ease, toast-out 0.3s ease 2.5s forwards;
    pointer-events: none;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ==================== 错误边界 ==================== */

.global-error-boundary {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.3s ease;
}

.global-error-content {
    background: var(--bg-card);
    border: 1px solid rgba(245, 34, 45, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

.global-error-emoji {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-lg);
}

.global-error-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.global-error-message {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.global-error-detail {
    font-size: var(--font-size-xs);
    color: var(--error);
    background: rgba(245, 34, 45, 0.1);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    word-break: break-all;
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.global-error-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.global-inline-error {
    position: sticky;
    top: calc(var(--navbar-height) + var(--spacing-md));
    z-index: 1001;
    margin-bottom: var(--spacing-lg);
    animation: slide-down 0.3s ease;
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.global-inline-error-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(245, 34, 45, 0.12);
    border: 1px solid rgba(245, 34, 45, 0.25);
    border-radius: var(--radius-lg);
}

.global-inline-error-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.global-inline-error-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.global-inline-error-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.125rem;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.global-inline-error-close:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

/* ==================== 空状态增强 ==================== */

.empty-state-card {
    padding: var(--spacing-2xl);
    text-align: center;
}

.empty-state-content {
    max-width: 480px;
    margin: 0 auto;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.7;
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state-desc {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.empty-state-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: left;
}

.empty-state-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.empty-state-step .step-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: var(--font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.empty-state-step code {
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
    color: var(--text-primary);
}

.empty-state-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.history-empty .empty-state-actions {
    margin-top: var(--spacing-xl);
}

/* ==================== 骨架屏 ==================== */

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--text-secondary) 0%,
        var(--text-secondary) 40%,
        var(--text-secondary) 80%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.skeleton-text {
    height: 16px;
    margin-bottom: var(--spacing-sm);
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

.skeleton-chart {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* 圆形（头像等） */
.skeleton-circle {
    border-radius: 50%;
    flex-shrink: 0;
}

/* 标题行 */
.skeleton-title {
    height: 24px;
    width: 50%;
    margin-bottom: var(--spacing-md);
}

/* 多段段落 */
.skeleton-paragraph {
    margin-bottom: var(--spacing-md);
}
.skeleton-paragraph .skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}
.skeleton-paragraph .skeleton-text:last-child {
    width: 60%;
}

/* 表格/列表行 */
.skeleton-row {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}
.skeleton-row .skeleton-cell {
    height: 16px;
    background: linear-gradient(90deg, var(--neutral-100) 0%, var(--neutral-200) 40%, var(--neutral-100) 80%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite,
               skeleton-pulse 2s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-row .skeleton-cell.w40 { width: 40%; }
.skeleton-row .skeleton-cell.w30 { width: 30%; }
.skeleton-row .skeleton-cell.w20 { width: 20%; }
.skeleton-row .skeleton-cell.w10 { width: 10%; }

/* 表单输入框骨架 */
.skeleton-input {
    height: 120px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* 搜索/方案结果项骨架 */
.skeleton-result {
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
}

/* ==================== 分页组件 ==================== */

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.pagination-btn:hover:not(:disabled):not(.active) {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.pagination-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: var(--text-primary);
    border-color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-ellipsis {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.pagination-page-size-select {
    margin-left: var(--spacing-md);
    padding: 6px 30px 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-family: var(--font-family);
    color: var(--text-secondary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.pagination-page-size-select:focus {
    outline: none;
    border-color: rgba(199, 0, 11, 0.4);
}


.history-item {
    animation: history-item-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@keyframes history-item-enter {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.history-item:nth-child(1) { animation-delay: 0s; }
.history-item:nth-child(2) { animation-delay: 0.05s; }
.history-item:nth-child(3) { animation-delay: 0.1s; }
.history-item:nth-child(4) { animation-delay: 0.15s; }
.history-item:nth-child(5) { animation-delay: 0.2s; }
.history-item:nth-child(6) { animation-delay: 0.25s; }
.history-item:nth-child(7) { animation-delay: 0.3s; }
.history-item:nth-child(8) { animation-delay: 0.35s; }

@media (max-width: 767px) {
    .settings-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .empty-state-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    
    .pagination-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==================== 系统设置页 ==================== */

.settings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    gap: var(--spacing-lg);
    animation: setting-item-enter 0.3s ease backwards;
}

.setting-item:hover {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.setting-item:nth-child(1) { animation-delay: 0s; }
.setting-item:nth-child(2) { animation-delay: 0.06s; }
.setting-item:nth-child(3) { animation-delay: 0.12s; }

.setting-info {
    flex: 1;
    min-width: 0;
}

.setting-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.setting-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Toggle 开关 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--neutral-300);
    border-radius: 26px;
    transition: 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.setting-select {
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 100px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386909C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.setting-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.settings-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.settings-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
}

.settings-info-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-info-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.settings-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    justify-content: flex-end;
}

/* 保存成功提示 */
.settings-saved-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 28px;
    background: var(--success);
    color: white;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: toast-in 0.3s ease, toast-out 0.3s ease 2.5s forwards;
    pointer-events: none;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ==================== 全局错误边界 ==================== */

.global-error-boundary {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.3s ease;
}

.global-error-content {
    background: var(--bg-card);
    border: 1px solid rgba(245, 34, 45, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

.global-error-emoji {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-lg);
}

.global-error-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.global-error-message {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.global-error-detail {
    font-size: var(--font-size-xs);
    color: var(--error);
    background: rgba(245, 34, 45, 0.1);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    word-break: break-all;
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.global-error-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

/* 内联错误提示 */
.global-inline-error {
    position: sticky;
    top: calc(var(--navbar-height) + var(--spacing-md));
    z-index: 1001;
    margin-bottom: var(--spacing-lg);
    animation: slide-down 0.3s ease;
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.global-inline-error-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(245, 34, 45, 0.12);
    border: 1px solid rgba(245, 34, 45, 0.25);
    border-radius: var(--radius-lg);
}

.global-inline-error-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.global-inline-error-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.global-inline-error-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.125rem;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.global-inline-error-close:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

/* ==================== 空状态增强 ==================== */

.empty-state-card {
    padding: var(--spacing-2xl);
    text-align: center;
}

.empty-state-content {
    max-width: 480px;
    margin: 0 auto;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.7;
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state-desc {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.empty-state-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: left;
}

.empty-state-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.empty-state-step .step-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: var(--font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.empty-state-step code {
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
    color: var(--text-primary);
}

.empty-state-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
}

/* 历史记录空状态增强 */
.history-empty .empty-state-actions {
    margin-top: var(--spacing-xl);
}

/* ==================== 骨架屏 ==================== */

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--text-secondary) 0%,
        var(--text-secondary) 40%,
        var(--text-secondary) 80%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 2s ease-in-out infinite, skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.skeleton-text {
    height: 16px;
    margin-bottom: var(--spacing-sm);
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

.skeleton-chart {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* 圆形（头像等） */
.skeleton-circle {
    border-radius: 50%;
    flex-shrink: 0;
}

/* 标题行 */
.skeleton-title {
    height: 24px;
    width: 50%;
    margin-bottom: var(--spacing-md);
}

/* 多段段落 */
.skeleton-paragraph {
    margin-bottom: var(--spacing-md);
}
.skeleton-paragraph .skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}
.skeleton-paragraph .skeleton-text:last-child {
    width: 60%;
}

/* 表格/列表行 */
.skeleton-row {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}
.skeleton-row .skeleton-cell {
    height: 16px;
    background: linear-gradient(90deg, var(--neutral-100) 0%, var(--neutral-200) 40%, var(--neutral-100) 80%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite,
               skeleton-pulse 2s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-row .skeleton-cell.w40 { width: 40%; }
.skeleton-row .skeleton-cell.w30 { width: 30%; }
.skeleton-row .skeleton-cell.w20 { width: 20%; }
.skeleton-row .skeleton-cell.w10 { width: 10%; }

/* 表单输入框骨架 */
.skeleton-input {
    height: 120px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* 搜索/方案结果项骨架 */
.skeleton-result {
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
}

/* ==================== 分页组件 ==================== */

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.pagination-btn:hover:not(:disabled):not(.active) {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.pagination-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: var(--text-primary);
    border-color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-ellipsis {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.pagination-page-size-select {
    margin-left: var(--spacing-md);
    padding: 6px 30px 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-family: var(--font-family);
    color: var(--text-secondary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.pagination-page-size-select:focus {
    outline: none;
    border-color: rgba(199, 0, 11, 0.4);
}

/* ==================== 页面过渡动画 ==================== */

.page {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: none;
}

.page.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s cubic-bezier(0,0,0.2,1),
                transform 0.3s cubic-bezier(0,0,0.2,1),
                visibility 0s 0s;
    will-change: transform, opacity;
}

/* 动画关闭时的瞬间切换 */
.page-instant .page {
    transition: none !important;
    will-change: auto;
}

/* 历史记录列表项动画 */
.history-item {
    animation: history-item-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

@keyframes history-item-enter {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.history-item:nth-child(1) { animation-delay: 0s; }
.history-item:nth-child(2) { animation-delay: 0.05s; }
.history-item:nth-child(3) { animation-delay: 0.1s; }
.history-item:nth-child(4) { animation-delay: 0.15s; }
.history-item:nth-child(5) { animation-delay: 0.2s; }
.history-item:nth-child(6) { animation-delay: 0.25s; }
.history-item:nth-child(7) { animation-delay: 0.3s; }
.history-item:nth-child(8) { animation-delay: 0.35s; }

/* 设置项动画 */
@keyframes setting-item-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 设置页面响应式 */
@media (max-width: 767px) {
    .settings-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .empty-state-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    
    .pagination-container {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .pagination-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==================== 登录按钮（导航栏） ==================== */

.nav-login-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-family);
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-login-btn:hover {
    background: var(--primary-color);
    color: #fff;
}
.nav-login-btn .nav-icon {
    font-size: 1rem;
}

/* 用户菜单 */
.nav-user-menu {
    position: relative;
    flex-shrink: 0;
}
.nav-user-avatar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--neutral-200);
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font-family);
    white-space: nowrap;
}
.nav-user-avatar-btn:hover {
    background: var(--bg-card);
}
.user-avatar-icon {
    font-size: 1.125rem;
    color: var(--primary-color);
}
.user-name {
    font-weight: 500;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdown-arrow {
    font-size: 0.625rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
}
.nav-user-menu.open .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
    z-index: 1001;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-family);
    text-align: left;
}
.dropdown-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.dropdown-item:last-child {
    border-top: 1px solid var(--border-color);
    color: var(--error-color, #ef4444);
}

/* ==================== 登录/注册弹窗 ==================== */

.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: overlay-in 0.2s ease;
}
@keyframes overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.auth-modal {
    position: relative;
    width: 420px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    padding: 40px 36px 32px;
    animation: modal-in 0.25s cubic-bezier(0,0,0.2,1);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(-20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}
.auth-modal-close:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Tab 切换 */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border-color);
}
.auth-tab {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-family);
}
.auth-tab:hover {
    color: var(--text-primary);
}
.auth-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* 表单 */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}
.form-label-hint {
    font-weight: 400;
    color: var(--text-secondary);
}
.form-input {
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-family: var(--font-family);
    transition: border-color 0.2s;
    outline: none;
}
.form-input:focus {
    border-color: var(--primary-color);
    background: var(--bg-card);
}
.form-input::placeholder {
    color: var(--neutral-600);
}

/* 验证码 */
.captcha-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.captcha-input {
    flex: 1;
}
.captcha-img {
    height: 42px;
    width: 120px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    background: var(--bg-card);
    object-fit: contain;
}

/* 错误提示 */
.auth-error {
    padding: 10px 14px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: #ef4444;
    line-height: 1.5;
}
.auth-error.success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    color: #16a34a;
}

/* 浏览器自动填充提示（醒目的琥珀色警告） */
.login-auto-fill-hint {
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(245,158,11,0.12);
    border: 2px solid rgba(245,158,11,0.4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: #92400e;
    line-height: 1.6;
    animation: hintPulse 0.5s ease-out;
}
.login-auto-fill-hint small {
    color: #a16207;
    font-size: 0.6875rem;
}
.login-auto-fill-hint strong {
    color: #92400e;
    font-weight: 700;
}
@keyframes hintPulse {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* 提交按钮 */
.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-family);
}
.auth-submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(199,0,11,0.3);
}
.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.btn-spinner {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 底部 */
.auth-footer {
    margin-top: 24px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.auth-switch-link {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-family);
    padding: 0;
    margin-left: 4px;
}
.auth-switch-link:hover {
    text-decoration: underline;
}

/* ===== 个人中心面板 v2 Premium — "Your Space, Your Brand" ===== */
/* 设计语言：红渐变 Hero + 分色统计卡 + 卡片化信息行 + 品牌退出按钮 */

.profile-panel {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3000;
}

.profile-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    animation: profileFadeIn 0.25s ease;
}

@keyframes profileFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.profile-drawer {
    position: absolute;
    top: 0; right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100%;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    animation: profileSlideIn 0.35s cubic-bezier(0.22,1,0.36,1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.15), -2px 0 12px rgba(199,0,11,0.05);
}

@keyframes profileSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ====== Hero Header：红渐变（全站统一）====== */
.profile-hero {
    padding: 32px 24px 28px;
    background: linear-gradient(135deg, #C7000B 0%, #E02020 50%, #FF6A3D 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 140px;
}
.profile-hero::before {
    content: '';
    position: absolute;
    top: -40%; right: -15%;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}
.profile-hero::after {
    content: '';
    position: absolute;
    bottom: -25%; left: 18%;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

/* 关闭按钮：白底实心圆浮于 Hero 右上角外侧 */
.profile-close-btn {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 50%;
    color: #555;
    font-size: 15px;
    cursor: pointer;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.profile-close-btn:hover {
    background: #fff;
    color: #C7000B;
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 4px 14px rgba(199,0,11,0.25);
}

/* Hero body */
.profile-hero-body {
    display: flex; align-items: center; gap: 16px;
    position: relative; z-index: 1;
}

/* Avatar — 实心白底+红色首字母，确保在红渐变Hero上清晰可见 */
.profile-avatar {
    width: 56px; height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
    color: #C7000B;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 1px 3px rgba(199,0,11,0.2);
}

/* Hero text */
.profile-hero-text {
    display: flex; flex-direction: column; gap: 4px;
}
.profile-username {
    font-size: 1.25rem; font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.profile-role-badge {
    display: inline-flex; align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.28);
    padding: 4px 12px;
    border-radius: 10px;
    width: fit-content;
    backdrop-filter: none;
    border: 1px solid rgba(255,255,255,0.15);
}
.profile-welcome-sub {
    margin-top: 4px;
    font-size: 0.78rem;
    opacity: 0.75;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* ====== Section（统一间距）====== */
.profile-section {
    padding: 18px 20px;
}
.profile-logout-section {
    padding: 10px 20px 24px;
}

.profile-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #888;
    margin-bottom: 12px;
    letter-spacing: 0.2px;
}

/* ====== 统计卡：分色系统（4色）====== */
.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.profile-stat-card {
    display: flex;
    flex-direction: column; align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    cursor: default;
    border: 1px solid transparent;
}
.profile-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
/* 左侧彩色竖条 */
.profile-stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 0 2px 2px 0;
}

/* 智能匹配 — 品牌红 */
.stat-card-red { background: linear-gradient(135deg, #FEF3F3, #FFF5F5); border-color: rgba(199,0,11,0.08); }
.stat-card-red::before { background: #C7000B; }
.stat-card-red .profile-stat-value { color: #C7000B; }
.stat-card-red:hover { box-shadow: 0 6px 20px rgba(199,0,11,0.10); border-color: rgba(199,0,11,0.15); }

/* 竞品分析 — 工业橙 */
.stat-card-amber { background: linear-gradient(135deg, #FFFBEB, #FFFCF5); border-color: rgba(245,158,11,0.08); }
.stat-card-amber::before { background: #F59E0B; }
.stat-card-amber .profile-stat-value { color: #F59E0B; }
.stat-card-amber:hover { box-shadow: 0 6px 20px rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.15); }

/* 收藏方案 — 森林绿 */
.stat-card-green { background: linear-gradient(135deg, #F0FAF4, #F5FCF7); border-color: rgba(34,168,90,0.08); }
.stat-card-green::before { background: #22A85A; }
.stat-card-green .profile-stat-value { color: #22A85A; }
.stat-card-green:hover { box-shadow: 0 6px 20px rgba(34,168,90,0.10); border-color: rgba(34,168,90,0.15); }

/* 历史记录 — 科技蓝 */
.stat-card-blue { background: linear-gradient(135deg, #EFF6FF, #F5F9FF); border-color: rgba(59,130,246,0.08); }
.stat-card-blue::before { background: #3B82F6; }
.stat-card-blue .profile-stat-value { color: #3B82F6; }
.stat-card-blue:hover { box-shadow: 0 6px 20px rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.15); }

.profile-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
}

.profile-stat-label {
    font-size: 0.75rem;
    color: #999;
    margin-top: 4px;
}

/* ====== 信息列表：卡片化行 ====== */
.profile-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #F0F0F0;
    transition: all 0.25s ease;
}
.profile-info-row:last-child { border-bottom: none; }
.profile-info-row:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border-color: #E8E8E8;
}

.profile-info-label {
    font-size: 0.78rem;
    color: #999;
    flex-shrink: 0;
    width: 72px;
}

.profile-info-value {
    font-size: 0.82rem;
    color: #333;
    text-align: right;
    flex: 1;
    font-weight: 500;
}

.profile-info-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.profile-edit-btn {
    font-size: 0.73rem;
    color: #3B82F6;
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.15);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 6px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.profile-edit-btn:hover {
    background: #3B82F6;
    color: #fff;
    border-color: #3B82F6;
}

/* Email Edit */
.profile-email-edit-row {
    flex-wrap: nowrap;
    background: #FAFAFA;
}

.profile-email-edit {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.profile-email-edit .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.profile-input {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px;
    border: 1.5px solid #E0E0E0;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 0.82rem;
    outline: none;
    transition: all 0.25s ease;
}
.profile-input:focus {
    border-color: #C7000B;
    box-shadow: 0 0 0 3px rgba(199,0,11,0.08);
}

/* Password Form */
.profile-password-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #FAFAFA;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #F0F0F0;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.profile-form-label {
    font-size: 0.75rem;
    color: #888;
}

.profile-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}

.profile-error {
    font-size: 0.75rem;
    color: #C7000B;
    padding: 7px 12px;
    background: rgba(199,0,11,0.06);
    border-radius: 8px;
    border-left: 3px solid #C7000B;
}

.profile-success {
    font-size: 0.75rem;
    color: #22A85A;
    padding: 7px 12px;
    background: rgba(34,168,90,0.06);
    border-radius: 8px;
    border-left: 3px solid #22A85A;
}

/* Logout — 品牌红渐变实心按钮 */
.profile-logout-btn {
    width: 100%;
    padding: 13px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #C7000B, #E02020);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(199,0,11,0.2);
}
.profile-logout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(199,0,11,0.3);
    background: linear-gradient(135deg, #A80009, #C7000B);
}

/* Loading state for stats */
.profile-stat-value.loading {
    color: #CCC;
    font-size: 1.2rem;
}

/* ===== 收藏按钮样式 ===== */
.btn-favorite {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #fbbf24;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-favorite:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
}
.btn-favorite.active {
    background: rgba(251, 191, 36, 0.2);
    border-color: #fbbf24;
    color: #f59e0b;
}

/* 结果卡片内的收藏按钮 — 与下载/导出/分享统一为红色系 */
.btn-favorite-result {
    background: #fff;
    border: 1px solid rgba(199, 0, 11, 0.25);
    color: #C7000B;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
}
.btn-favorite-result:hover {
    background: linear-gradient(135deg, #C7000B, #E02020);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.18);
}
.btn-favorite-result.active {
    background: linear-gradient(135deg, #C7000B, #E02020);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(199, 0, 11, 0.25);
}

/* Modal header favorite button */
.modal-header-fav {
    margin-right: auto;
    margin-left: 16px;
}

/* ===== 收藏区域（卡片化容器）====== */
.profile-fav-box {
    background: #FAFAF9;
    border: 1px solid #EEE;
    border-radius: 12px;
    padding: 16px;
}
.profile-fav-header {
    margin-bottom: 10px;
}
.profile-fav-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #888;
}

.profile-fav-empty {
    text-align: center;
    padding: 14px;
    color: #BBB;
    font-size: 0.8rem;
}

.profile-fav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.profile-fav-item {
    background: #fff;
    border-radius: 10px;
    padding: 11px 13px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    border: 1px solid #F0F0F0;
}
.profile-fav-item:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.profile-fav-item-content {
    flex: 1; min-width: 0;
    cursor: pointer;
}
.profile-fav-item-name {
    font-size: 0.82rem;
    color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 2px;
}
.profile-fav-item-meta {
    font-size: 0.7rem;
    color: #AAA;
}

.profile-fav-item-delete {
    background: transparent;
    border: none;
    color: rgba(199,0,11,0.45);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.73rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}
.profile-fav-item-delete:hover {
    background: rgba(199,0,11,0.08);
    color: #C7000B;
}

/* ==================== 产品图谱页 ==================== */

.products-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ===== 页面标题栏（带统计数字） ===== */
/* 产品页：占满视口高度，左栏独立滚动、右栏固定不跟随 */
#page-products {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 12px;
    flex-shrink: 0;
}

.products-header-left h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.5px;
}

.products-header-left p {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin: 3px 0 0 0;
}

.products-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.products-header-stats {
    display: flex;
    gap: 16px;
}

.ph-stat {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 4px 12px;
    background: var(--neutral-100);
    border-radius: 14px;
    border: 1px solid var(--border-light);
}

.ph-stat b {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.875rem;
}

/* ===== 工具栏 ===== */
.products-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.products-filter-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.product-filter-btn {
    padding: 5px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.product-filter-btn:hover {
    background: var(--neutral-50);
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.product-filter-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: var(--text-primary);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(199, 0, 11, 0.2);
}

.product-search-input {
    margin-left: auto;
    padding: 6px 14px 6px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: var(--font-family);
    color: var(--text-primary);
    width: 200px;
    outline: none;
    transition: all 0.25s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.product-search-input:focus {
    border-color: var(--primary-color);
    background-color: var(--bg-card);
    width: 260px;
}

.product-search-input::placeholder {
    color: var(--text-tertiary);
}

/* ===== 图谱主区域 - 左右分栏 ===== */
.products-graph-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ===== 左侧画布区域（可滚动）===== */
.products-canvas-area {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-page);
}

/* 自定义滚动条 */
.products-canvas-area::-webkit-scrollbar {
    width: 5px;
}
.products-canvas-area::-webkit-scrollbar-track {
    background: transparent;
}
.products-canvas-area::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 3px;
}
.products-canvas-area::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
}

/* ===== 网格布局容器（替代旧的绝对定位画布）===== */
.products-grid-layout {
    padding: 20px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

/* ===== 分类分组卡片 ===== */
.product-category-group {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 18px;
    transition: all 0.25s ease;
}

.product-category-group:hover {
    background: var(--bg-elevated);
    border-color: var(--text-primary);
}

/* ===== 分类标题行：嵌套 flex 居中（v5 彻底重写） ===== */
.category-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.category-group-icon {
    width: 28px;
    height: 28px;
    min-height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

/* SVG：强制重置全局 .icon 的所有可能干扰属性 */
.category-group-icon > svg,
.category-group-icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    flex-shrink: 0;
    /* 重置 .icon 继承的属性 */
    vertical-align: baseline;
    margin: 0 !important;
    padding: 0 !important;
    fill: currentColor;
    stroke: currentColor;
}

.category-group-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    line-height: 1;
    /* 内部 flex 居中：让文字在 28px 高度内垂直居中 */
    display: flex;
    align-items: center;
    min-height: 28px;
}

.category-group-count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-left: auto;
    background: var(--neutral-100);
    padding: 0 10px;
    border-radius: 10px;
    line-height: 1;
    white-space: nowrap;
    /* 内部 flex 居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

/* 分类颜色 */
.product-category-group[data-cat="compute"] .category-group-icon { background: rgba(59, 130, 246, 0.15); }
.product-category-group[data-cat="compute"] .category-group-title { color: #60A5FA; }
.product-category-group[data-cat="network"] .category-group-icon { background: rgba(245, 158, 11, 0.15); }
.product-category-group[data-cat="network"] .category-group-title { color: #F59E0B; }
.product-category-group[data-cat="storage"] .category-group-icon { background: rgba(34, 197, 94, 0.15); }
.product-category-group[data-cat="storage"] .category-group-title { color: #4ADE80; }
.product-category-group[data-cat="database"] .category-group-icon { background: rgba(168, 85, 247, 0.15); }
.product-category-group[data-cat="database"] .category-group-title { color: #C084FC; }
.product-category-group[data-cat="ai"] .category-group-icon { background: rgba(239, 68, 68, 0.15); }
.product-category-group[data-cat="ai"] .category-group-title { color: #F87171; }
.product-category-group[data-cat="iot"] .category-group-icon { background: rgba(249, 115, 22, 0.15); }
.product-category-group[data-cat="iot"] .category-group-title { color: #FB923C; }
.product-category-group[data-cat="security"] .category-group-icon { background: rgba(236, 72, 153, 0.15); }
.product-category-group[data-cat="security"] .category-group-title { color: #F472B6; }
.product-category-group[data-cat="media"] .category-group-icon { background: rgba(6, 182, 212, 0.15); }
.product-category-group[data-cat="media"] .category-group-title { color: #22D3EE; }
.product-category-group[data-cat="enterprise"] .category-group-icon { background: rgba(132, 204, 22, 0.15); }
.product-category-group[data-cat="enterprise"] .category-group-title { color: #A3E635;

}

/* 产品节点网格（每个分组内） */
.category-nodes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ===== 产品节点 ===== */
.product-node {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.product-node::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 11px;
    opacity: 0;
    transition: opacity 0.2s;
    background: linear-gradient(135deg, rgba(199, 0, 11, 0.2), rgba(59, 130, 246, 0.1));
    z-index: -1;
}

.product-node:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}
.product-node:hover::after {
    opacity: 1;
}

.product-node.selected {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(199, 0, 11, 0.15), 0 0 0 2px rgba(199, 0, 11, 0.08);
    background: var(--primary-light);
}

/* 高亮状态 */
.product-node.matched {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    animation: node-pulse-gold 2s ease-in-out infinite;
}

.product-node.core-matched {
    border-color: var(--primary-color);
    background: rgba(199, 0, 11, 0.12);
    animation: node-pulse-red 2s ease-in-out infinite;
}

@keyframes node-pulse-gold {
    0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
    50% { box-shadow: 0 2px 18px rgba(245, 158, 11, 0.45), 0 0 24px rgba(245, 158, 11, 0.15); }
}

@keyframes node-pulse-red {
    0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
    50% { box-shadow: 0 2px 22px rgba(199, 0, 11, 0.5), 0 0 28px rgba(199, 0, 11, 0.2); }
}

/* 分类圆点 */
.product-node .node-category-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94A3B8;
}
.product-node[data-category="compute"] .node-category-dot { background: #3B82F6; }
.product-node[data-category="network"] .node-category-dot { background: #F59E0B; }
.product-node[data-category="storage"] .node-category-dot { background: #22C55E; }
.product-node[data-category="database"] .node-category-dot { background: #A855F7; }
.product-node[data-category="ai"] .node-category-dot { background: #EF4444; }
.product-node[data-category="iot"] .node-category-dot { background: #F97316; }
.product-node[data-category="security"] .node-category-dot { background: #EC4899; }
.product-node[data-category="media"] .node-category-dot { background: #06B6D4; }
.product-node[data-category="enterprise"] .node-category-dot { background: #84CC16; }

/* 节点文字 */
.product-node .node-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.product-node:hover .node-label,
.product-node.selected .node-label {
    color: var(--text-primary);
    font-weight: 600;
}

/* 根产品特殊样式（ECS/OBS/ModelArts）*/
.product-node.node-root {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(199, 0, 11, 0.12) 0%, rgba(139, 0, 8, 0.08) 100%);
    border-color: rgba(199, 0, 11, 0.25);
}
.product-node.node-root .node-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* 分支产品 */
.product-node.node-branch {
    padding: 7px 14px;
}
.product-node.node-branch .node-label {
    font-weight: 600;
}

/* 隐藏/显示动画 */
.product-node.hidden {
    display: none !important;
}

.product-node.fade-in {
    animation: node-enter 0.35s ease backwards;
}

@keyframes node-enter {
    from { opacity: 0; transform: scale(0.85) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 分组隐藏 */
.product-category-group.group-hidden {
    display: none;
}

/* ===== 右侧详情面板 ===== */
/* ================================================================
   右侧智能面板：三态动态设计
   态1: 默认(统计+热门) / 态2: 悬停预览 / 态3: 选中详情
   ================================================================ */
.product-detail-panel {
    width: 340px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* ---- 态1：默认面板 ---- */
.panel-default {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 20px 18px;
    overflow-y: auto;
    animation: fadeInUp 0.3s ease-out;
}

.panel-default::-webkit-scrollbar {
    width: 5px;
}
.panel-default::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 3px;
}

.panel-header {
    margin-bottom: 16px;
}
.panel-header h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-header h4 .icon {
    color: var(--primary-color);
    width: 16px; height: 16px;
}

/* 快速统计卡片 */
.panel-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.panel-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 4px;
    background: linear-gradient(135deg, #FFF, #FAFAF8);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.panel-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    border-color: rgba(199,0,11,0.15);
}
.panel-stat-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
}
.panel-stat-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
}

/* 热门产品入口 */
.panel-section {
    margin-bottom: 16px;
}
.panel-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.panel-section-title .icon {
    width: 14px; height: 14px;
    color: #FF7D00; /* 橙色火焰 */
}

.panel-hot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.panel-hot-item {
    padding: 6px 13px;
    background: linear-gradient(135deg, #FFFDFB, #FFF);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.panel-hot-item::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    flex-shrink: 0;
}
.panel-hot-item:hover {
    background: linear-gradient(135deg, #C7000B, #E02020);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(199,0,11,0.20);
}
.panel-hot-item:hover::before {
    background: #fff;
}

/* 使用提示 */
.panel-tips {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.panel-tip-row {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}
.pt-icon {
    color: var(--primary-color);
    font-size: 0.65rem;
    opacity: 0.7;
}

/* ---- 态2：悬停预览卡 ---- */
.panel-hover-preview {
    padding: 0;
    height: 100%;
    animation: previewSlideIn 0.2s ease-out;
}
@keyframes previewSlideIn {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

.preview-card {
    padding: 18px 18px 24px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}
.preview-card .pv-category-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.pv-cat-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.preview-card .pv-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    line-height: 1.25;
}
.preview-card .pv-name-en {
    font-size: 0.76rem;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}
.preview-card .pv-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #FAFAF7, #F7F5F1);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.04);
}
.preview-card .pv-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pv-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.pv-tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
}
.pv-hint {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,0.08);
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pv-hint svg {
    width: 13px; height: 13px;
    color: var(--primary-color);
}

/* ---- 态3：选中详情面板 ---- */
.panel-selected-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: selectedFadeIn 0.25s ease-out;
}
@keyframes selectedFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.selected-detail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 28px;
    scrollbar-width: thin;
}

/* 选中态的详情头部 */
.selected-detail-scroll .sd-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(199,0,11,0.08);
}
.sd-header .sd-cat-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}
.sd-header h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    line-height: 1.25;
}
.sd-header .sd-name-en {
    font-size: 0.74rem;
    color: var(--text-tertiary);
}
.selected-detail-scroll .sd-section {
    margin-bottom: 16px;
}
.selected-detail-scroll .sd-section-title {
    font-size: 0.73rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sd-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sd-chip {
    padding: 4px 11px;
    border-radius: 7px;
    font-size: 0.73rem;
    font-weight: 500;
}
.sd-adv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sd-adv-list li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: static !important;
    padding: 9px 12px !important;
    background: linear-gradient(135deg, #F0FAF4, #EBF7F0);
    border: 1px solid #D4EDDA;
    border-radius: 9px;
    font-size: 0.77rem;
    color: #1A6E3A;
    line-height: 1.45;
}
.sd-adv-list li::before {
    content: '' !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    border-radius: 50% !important;
    background: #22A85A !important;
    flex-shrink: 0 !important;
    position: static !important;
}
.sd-action-bar {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    gap: 8px;
}
.sd-btn {
    flex: 1;
    padding: 9px 0;
    border: none;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.sd-btn-primary {
    background: linear-gradient(135deg, #C7000B, #E02020);
    color: #fff;
    box-shadow: 0 2px 8px rgba(199,0,11,0.18);
}
.sd-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(199,0,11,0.28);
}
.sd-btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.sd-btn-outline:hover {
    background: var(--bg-card);
    border-color: var(--neutral-400);
}

/* 分类颜色映射（用于预览卡的 badge） */
[data-pv-cat="compute"] .pv-cat-badge,
[data-sd-cat="compute"] .sd-cat-pill { background: rgba(245,158,11,0.12); color: #D97706; }
[data-pv-cat="network"] .pv-cat-badge,
[data-sd-cat="network"] .sd-cat-pill { background: rgba(59,130,246,0.12); color: #2563EB; }
[data-pv-cat="storage"] .pv-cat-badge,
[data-sd-cat="storage"] .sd-cat-pill { background: rgba(16,185,129,0.12); color: #059669; }
[data-pv-cat="database"] .pv-cat-badge,
[data-sd-cat="database"] .sd-cat-pill { background: rgba(139,92,246,0.12); color: #7C3AED; }
[data-pv-cat="ai"] .pv-cat-badge,
[data-sd-cat="ai"] .sd-cat-pill { background: rgba(236,72,153,0.12); color: #DB2777; }
[data-pv-cat="iot"] .pv-cat-badge,
[data-sd-cat="iot"] .sd-cat-pill { background: rgba(20,184,166,0.12); color: #0D9488; }
[data-pv-cat="security"] .pv-cat-badge,
[data-sd-cat="security"] .sd-cat-pill { background: rgba(239,68,68,0.12); color: #DC2626; }
[data-pv-cat="media"] .pv-cat-badge,
[data-sd-cat="media"] .sd-cat-pill { background: rgba(99,102,241,0.12); color: #4F46E5; }
[data-pv-cat="enterprise"] .pv-cat-badge,
[data-sd-cat="enterprise"] .sd-cat-pill { background: rgba(107,114,128,0.12); color: #4B5563; }

/* 能力/场景/亮点 chip 颜色 */
.pv-cap { background: rgba(199,0,11,0.07); color: #B91C1C; }
.pv-sce { background: rgba(22,93,255,0.07); color: #1D4ED8; }
.pv-hlt { background: rgba(147,51,234,0.07); color: #7E22CE; }
.sd-cap { background: rgba(199,0,11,0.08); color: #B91C1C; }
.sd-sce { background: rgba(22,93,255,0.08); color: #1D4ED8; }
.sd-hlt { background: rgba(147,51,234,0.08); color: #7E22CE; }

/* 详情内容区（弹窗用，保留） */
.product-detail-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.product-detail-content::-webkit-scrollbar {
    width: 5px;
}
.product-detail-content::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 3px;
}

.product-detail-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-detail-header .detail-category-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.product-detail-header h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.product-detail-header .detail-name-en {
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.product-detail-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.detail-section-content {
    font-size: 0.8125rem;
    color: var(--text-primary);
    line-height: 1.75;
}

.detail-scenario-list,
.detail-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-scenario-list li,
.detail-related-list li {
    display: inline-block;
    padding: 5px 11px;
    background: var(--bg-card);
    border-radius: 7px;
    font-size: 11.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.detail-related-list li:hover {
    background: rgba(199, 0, 11, 0.1);
    border-color: rgba(199, 0, 11, 0.25);
    color: var(--text-primary);
}

/* 产品优势列表 */
.detail-advantage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-advantage-list li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: static !important;
    padding: 11px 14px !important;
    font-size: 0.83rem;
    color: #1A6E3A;
    line-height: 1.55;
    background: linear-gradient(135deg, #F0FAF4, #EBF7F0);
    border: 1px solid #D4EDDA;
    border-radius: 11px;
    transition: box-shadow 0.15s ease;
}

.detail-advantage-list li::before {
    content: '' !important;
    display: block !important;
    position: static !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 50% !important;
    background: #22A85A !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
}

.detail-advantage-list li:hover {
    box-shadow: 0 3px 12px rgba(34,168,90,0.12);
}

/* 技术亮点列表 */
.detail-highlight-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-highlight-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(199, 0, 11, 0.06) 100%);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 500;
}

.detail-highlight-list li::before {
    content: '\2605';
    color: #F59E0B;
    font-size: 0.625rem;
}

/* ===== 底部高亮信息栏 ===== */
.products-highlight-bar {
    padding: 16px 24px;
    background: linear-gradient(90deg, rgba(199, 0, 11, 0.06) 0%, rgba(59, 130, 246, 0.04) 50%, rgba(16, 185, 129, 0.03) 100%);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.highlight-default-text {
    flex: 1;
}

.products-highlight-bar .info-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.products-highlight-bar .info-pill:hover {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.2);
}

.products-highlight-bar .info-icon {
    font-size: 1rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
}

.products-highlight-bar .highlight-icon {
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.products-highlight-bar .highlight-count {
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.875rem;
}

.products-highlight-bar .highlight-core-count {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.875rem;
}

.products-highlight-bar .btn-clear-highlight {
    margin-left: auto;
    padding: 4px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-family);
    white-space: nowrap;
}

.btn-clear-highlight:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* 图例 */
.products-legend {
    position: fixed;
    bottom: 16px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    z-index: 10;
    font-size: 0.6875rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.products-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
}

.products-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.products-legend .legend-dot.dot-normal { background: var(--border-color); border: 1px dashed var(--border-color); }
.products-legend .legend-dot.dot-matched { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.products-legend .legend-dot.dot-core { background: var(--primary-color); box-shadow: 0 0 6px rgba(199, 0, 11, 0.5); }

/* ==================== 产品图谱响应式 ==================== */

@media (max-width: 1023px) {
    .products-graph-wrapper {
        flex-direction: column;
    }

    .product-detail-panel {
        width: 100%;
        max-height: 42%;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .product-detail-empty {
        padding: 24px 20px;
        flex-direction: row;
        gap: 20px;
        text-align: left;
    }

    .empty-hand-icon {
        font-size: 2.5rem;
        flex-shrink: 0;
    }

    .empty-tips {
        display: none;
    }

    .products-toolbar {
        gap: 6px;
    }

    .product-filter-btn {
        padding: 4px 11px;
        font-size: 0.6875rem;
    }

    .product-search-input {
        width: 150px;
    }

    .product-search-input:focus {
        width: 180px;
    }

    .products-legend {
        position: static;
        margin: 8px 16px;
        align-self: flex-start;
    }
}

@media (max-width: 767px) {
    .products-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px 8px;
    }

    .products-header-center {
        align-self: center;
        width: 100%;
        justify-content: center;
        margin: -4px 0;
    }

    .products-header-stats {
        gap: 10px;
    }

    .products-toolbar {
        padding: 6px 12px 10px;
    }

    .products-filter-group {
        gap: 4px;
    }

    .product-filter-btn {
        padding: 4px 9px;
        font-size: 10.5px;
    }

    .product-node {
        padding: 6px 10px;
        border-radius: 8px;
    }

    .product-node .node-label {
        font-size: 0.6875rem;
    }

    .product-detail-panel {
        max-height: 50%;
    }

    .product-detail-header h3 {
        font-size: 0.9375rem;
    }

    .products-highlight-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 16px;
        font-size: 0.6875rem;
    }

    .products-grid-layout {
        padding: 14px 14px 70px;
        gap: 12px;
    }

    .product-category-group {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .category-group-header {
        margin-bottom: 8px;
    }
}

/* ==================== 移动端底部导航栏 ==================== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.06), 0 -2px 8px rgba(0,0,0,0.04);
}

/* 移动端隐藏次要Tab（产品、成就 → 移入汉堡菜单） */
.mobile-nav-item[data-page="products"],
.mobile-nav-item[data-page="achievement"] {
    display: none;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 80px;
    border-radius: 8px;
}

.mobile-nav-item .mobile-nav-icon {
    font-size: 1.25rem;
    line-height: 1;
    filter: grayscale(0.3);
    transition: all 0.2s ease;
}

.mobile-nav-item .mobile-nav-label {
    font-size: 0.625rem;
    font-weight: 500;
    white-space: nowrap;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: var(--primary-color);
}

.mobile-nav-item.active .mobile-nav-icon {
    filter: grayscale(0);
    transform: scale(1.1);
}

/* 产品详情弹窗 */
/* ============================================================
   产品详情弹窗 v3 — Premium Redesign
   对标：Vercel/Linear/Huawei Cloud Console
   设计语言：红渐变 Hero + 分色 Chip 标签 + 分区视觉层次
   ============================================================ */

/* ================================================================
   AI 智能助手面板
   位置：右侧滑出，毛玻璃遮罩
   风格：与 v3 产品弹窗统一（暖白渐变 + 品牌红强调）
   ================================================================ */

/* 顶栏 AI 助手条 — 灵动岛风格（细长浮岛） */
.topbar-ai-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 560px;
    padding: 6px 20px;
    height: 34px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    box-shadow: 0 1px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.10);
}
.topbar-ai-bar:hover {
    background: rgba(255,255,255,0.24);
    border-color: rgba(199,0,11,0.35);
    box-shadow: 0 2px 20px rgba(199,0,11,0.12), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: scale(1.01);
}
.topbar-ai-bar .ai-search-icon {
    color: rgba(255,255,255,0.50);
    width: 14px; height: 14px;
    flex-shrink: 0;
    transition: color 0.25s;
}
.topbar-ai-bar:hover .ai-search-icon {
    color: rgba(255,255,255,0.75);
}
.topbar-ai-bar .ai-icon {
    color: #FF6B6B;
    width: 15px; height: 15px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255,107,107,0.5));
    animation: aiPulse 2.5s ease-in-out infinite;
}
@keyframes aiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.12); }
}
.topbar-ai-bar .ai-placeholder {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* 遮罩 */
.ai-assistant-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    display: flex;
    justify-content: flex-end;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.25);
    animation: aiOverlayIn 0.25s ease-out;
}
@keyframes aiOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 面板主体 */
.ai-assistant-panel {
    width: 420px;
    max-width: 92vw;
    height: 100%;
    background: linear-gradient(180deg, #FFFCF8 0%, #FFFFFF 30%, #FAFAF9 100%);
    border-left: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,0.10);
    animation: aiPanelSlide 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes aiPanelSlide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ---- 头部 ---- */
.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
    background: linear-gradient(135deg, #C7000B 0%, #E02020 60%, #FF6A3D 100%);
}
.ai-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ai-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-avatar svg {
    width: 20px; height: 20px;
    color: #fff;
}
.ai-panel-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.ai-status {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.75);
}
.ai-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    margin-right: 4px;
    vertical-align: middle;
    animation: dotBlink 1.8s ease-in-out infinite;
}
@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ai-close-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}
.ai-close-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: rotate(90deg);
}

.ai-new-chat-btn {
    height: 30px;
    padding: 0 14px;
    margin-right: 10px;
    border-radius: 15px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}
.ai-new-chat-btn:hover {
    background: rgba(255,255,255,0.32);
}

/* ---- 快捷建议 ---- */
.ai-quick-actions {
    padding: 20px;
    flex-shrink: 0;
}
.ai-quick-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.ai-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.ai-quick-card {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-quick-card:hover {
    border-color: rgba(199,0,11,0.25);
    background: linear-gradient(135deg, rgba(199,0,11,0.04), rgba(199,0,11,0.08));
    box-shadow: 0 2px 10px rgba(199,0,11,0.08);
    transform: translateY(-1px);
}
.aq-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ---- 对话消息区 ---- */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 16px;
    min-height: 0;
}
.ai-chat-messages::-webkit-scrollbar { width: 5px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 3px; }

/* 单条消息 */
.ai-msg {
    margin-bottom: 14px;
    animation: msgIn 0.25s ease-out;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.ai-msg-user {
    display: flex;
    justify-content: flex-end;
}
.ai-msg-bubble {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.83rem;
    line-height: 1.6;
    word-break: break-word;
}
.ai-msg-user .ai-msg-bubble {
    background: linear-gradient(135deg, #C7000B, #E02020);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-msg-ai .ai-msg-bubble {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

/* 思考中动画 */
.ai-msg-thinking {
    display: flex;
    gap: 5px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.ai-msg-thinking span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--neutral-400);
    animation: thinkBounce 1.2s ease-in-out infinite;
}
.ai-msg-thinking span:nth-child(2) { animation-delay: 0.15s; }
.ai-msg-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-8px); opacity: 1; }
}

/* ---- 输入区 v5 — 现代AI聊天风格 ---- */
.ai-input-area {
    padding: 16px 20px 22px;
    flex-shrink: 0;
    background: #fff;
}
.ai-input-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e4ea;
    border-radius: 18px;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-input-box:focus-within {
    border-color: #c8cdd6;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
/* 覆盖全局 textarea:focus 红边规则（3处全局规则已排除 textarea） */
.ai-input-box textarea {
    flex: 1;
    border: none !important;
    background: transparent !important;
    resize: none;
    outline: none !important;
    box-shadow: none !important;
    font-size: 0.87rem;
    line-height: 1.55;
    color: #1a1d26;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-height: 110px;
    min-height: 24px;
    padding: 3px 4px;
}
.ai-input-box textarea::placeholder {
    color: #aeb2bf;
}
.ai-send-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #2a2d35;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s, transform 0.15s;
}
.ai-send-btn svg {
    width: 14px; height: 14px;
    margin-top: 1px;
    margin-left: 1px;
}
.ai-send-btn:not(:disabled) {
    cursor: pointer;
}
.ai-send-btn:not(:disabled):hover {
    background: #3a3d47;
    transform: scale(1.05);
}
.ai-send-btn:disabled {
    background: #dcdedf;
    cursor: default;
}

/* 移动端适配 */
@media (max-width: 600px) {
    .topbar-center { padding: 0 4px; }
    /* 搜索框由 767px 媒体查询统一控制，此处不覆盖 */
    .ai-assistant-panel { width: 100vw; max-width: 100vw; }
    .ai-quick-grid { grid-template-columns: 1fr; }
}


.product-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 29, 39, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: modalFadeIn 0.25s ease-out;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes modalSlideUpV3 {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ---- 弹窗容器：暖白渐变底 + 大圆角 + 深阴影 ---- */
.product-modal {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    background: linear-gradient(165deg, #FFFCF8 0%, #FFFFFF 45%, #FAFAF9 100%);
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(0,0,0,0.06);
    border-bottom: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    animation: modalSlideUpV3 0.35s cubic-bezier(.16, 1, .3, 1);
    box-shadow:
        0 -12px 48px rgba(0,0,0,0.10),
        0 0 1px rgba(0,0,0,0.04),
        0 24px 80px rgba(199,0,11,0.05);
}

/* ---- 关闭按钮：实心白底圆 + 深色×，浮于弹窗右上角外侧 ---- */
.product-modal-close {
    position: absolute;
    top: -18px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border: none;
    border-radius: 50%;
    color: #555;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow:
        0 2px 10px rgba(0,0,0,0.12),
        0 1px 3px rgba(0,0,0,0.08);
}
.product-modal-close:hover {
    background: #F5F5F5;
    color: #C7000B;
    transform: rotate(90deg) scale(1.08);
    box-shadow:
        0 4px 16px rgba(199,0,11,0.18),
        0 2px 6px rgba(0,0,0,0.08);
}

/* ---- 内容滚动区 ---- */
.product-modal-content {
    padding: 0 24px 90px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

/* ====== Header：红渐变 Hero（与仪表盘统一，占满宽度+顶部圆角）====== */
.product-modal-content .product-detail-header {
    display: block;
    margin: 0 -24px 28px -24px;
    padding: 36px 24px 32px;
    background: linear-gradient(135deg, #C7000B 0%, #E02020 50%, #FF6A3D 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}
.product-modal-content .product-detail-header::after {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* 分类 badge pill — 绝对定位左上角，不占文档流 */
.product-modal-content .detail-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.17) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    color: #fff !important;
    white-space: nowrap;
    position: absolute;
    left: 24px;
    top: 22px;
    z-index: 2;
}

/* 产品名区域 — 上方留出 badge 空间 */
.product-modal-content .detail-header-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 4px;
}

/* 产品名 */
.product-modal-content .product-detail-header h3 {
    font-size: 1.35rem;
    color: #fff !important;
    margin: 0;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.product-modal-content .detail-name-en {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.72) !important;
    margin-top: 3px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ====== Section 通用 ====== */
.product-modal-content .detail-section { margin-bottom: 22px; }
.product-modal-content .detail-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: none;
}
/* 分区标题颜色 */
.product-modal-content .detail-section-title.title-intro      { color: #555D6A; }
.product-modal-content .detail-section-title.title-capability { color: #C7000B; }
.product-modal-content .detail-section-title.title-scenario    { color: #0876A6; }
.product-modal-content .detail-section-title.title-advantage   { color: #05854B; }
.product-modal-content .detail-section-title.title-highlight   { color: #9333EA; }

/* 简介：浅暖灰卡片 */
.product-modal-content .detail-section.section-intro > .detail-section-content {
    background: linear-gradient(135deg, #FAFAF7 0%, #F7F5F1 100%);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 13px;
    padding: 18px 20px;
    font-size: 0.87rem;
    line-height: 1.75;
    color: #333;
}
.product-modal-content .detail-section-content {
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* ====== Chip 标签系统（核心能力 / 典型场景 / 技术亮点）====== */
.product-modal-content .detail-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.product-modal-content .detail-chip-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    border: 0.5px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}
.product-modal-content .detail-chip-list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.product-modal-content .detail-chip-list li:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* 核心：红色系 chip */
.detail-capability .detail-chip-list li {
    background: linear-gradient(135deg, #FEF3F3, #FDECEC);
    border-color: #F5D5D5;
    color: #992D2D;
}
.detail-capability .detail-chip-list li::before { background: #E8353D; }

/* 场景：蓝色系 chip */
.detail-scenario .detail-chip-list li {
    background: linear-gradient(135deg, #EDF5FB, #E2EFF8);
    border-color: #C8E2F3;
    color: #1A5C82;
}
.detail-scenario .detail-scenario-list { list-style: none; padding: 0; margin: 0; }
.detail-scenario .detail-scenario-list li { /* fallback if not chip */ padding: 6px 14px; border-radius: 16px; }
.detail-scenario .detail-scenario-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #1890CC; margin-right: 6px; }
.detail-scenario .detail-scenario-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* 技术亮点：紫色系 chip */
.detail-highlight .detail-chip-list li {
    background: linear-gradient(135deg, #F5EEFE, #EEE5FC);
    border-color: #DDD0F5;
    color: #6B3CA8;
}
.detail-highlight .detail-chip-list li::before { background: #9333EA; }

/* 旧列表兼容（保留以防 JS 未更新 class）*/
.product-modal-content .detail-scenario-list,
.product-modal-content .detail-advantage-list,
.product-modal-content .detail-highlight-list,
.product-modal-content .detail-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.product-modal-content .detail-scenario-list li:not(.detail-chip-list li),
.product-modal-content .detail-highlight-list li {
    padding: 6px 0 6px 20px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    position: relative;
    line-height: 1.5;
}
.product-modal-content .detail-scenario-list li::before,
.product-modal-content .detail-highlight-list li::before {
    content: '•'; position: absolute; left: 4px; color: var(--primary-color);
}

/* ====== 产品优势：绿色卡片行 ====== */
.detail-advantage .detail-advantage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.detail-advantage .detail-advantage-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #F0FAF4, #EBF7F0);
    border: 1px solid #D4EDDA;
    border-radius: 11px;
    font-size: 0.83rem;
    color: #1A6E3A;
    line-height: 1.55;
    transition: box-shadow 0.15s ease;
}
.detail-advantage .detail-advantage-list li::before {
    content: '';
    display: block;
    width: 8px; height: 8px; min-width: 8px;
    border-radius: 50%;
    background: #22A85A;
    flex-shrink: 0;
}
.detail-advantage .detail-advantage-list li:hover {
    box-shadow: 0 3px 12px rgba(34,168,90,0.12);
}

/* ====== 关联产品：品牌红 Pill 按钮 ====== */
.detail-related .detail-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.detail-related .detail-related-list li {
    padding: 8px 20px;
    background: #FFF;
    border: 1px solid rgba(199,0,11,0.12);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #C7000B;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-bottom: none;
}
.detail-related .detail-related-list li:hover {
    background: linear-gradient(135deg, #C7000B, #E02020);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(199,0,11,0.25);
    transform: translateY(-1px);
}
.detail-related .detail-related-list li::before {
    display: none; /* 隐藏默认 bullet */
}

/* ====== 产品介绍：参考价格区块（成本参考价目联动） ====== */
.pp-price {
    margin-top: 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #FFF7F7, #FDEEEE);
    border: 1px solid rgba(199,0,11,0.14);
    border-radius: 12px;
}
.pp-price-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #C7000B;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pp-price-title::before {
    content: '￥';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    background: #C7000B; color: #fff;
    border-radius: 5px; font-size: 0.72rem; font-weight: 700;
}
.pp-price-body { font-size: 0.82rem; line-height: 1.7; color: var(--text-primary); }
.pp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.pp-row span { color: var(--text-secondary); flex-shrink: 0; }
.pp-row b { font-weight: 700; color: #C7000B; text-align: right; }
.pp-unit { font-style: normal; font-size: 0.72rem; color: var(--text-secondary); font-weight: 400; }
.pp-tiers { margin-top: 6px; font-size: 0.78rem; color: var(--text-secondary); }
.pp-tiers b { color: #C7000B; }
.pp-price-note { margin-top: 8px; font-size: 0.76rem; color: var(--text-secondary); line-height: 1.55; }
.pp-biz { color: #B45309; font-weight: 600; }
.pp-noprice { color: #6B7280; font-style: italic; }
.pp-free { color: #047857; font-weight: 600; }
.pp-warn { color: #B45309; }
.pp-price-src { display: inline-block; margin-top: 8px; font-size: 0.76rem; color: #C7000B; text-decoration: none; font-weight: 600; }
.pp-price-src:hover { text-decoration: underline; }
.pp-price-meta { margin-top: 6px; font-size: 0.72rem; color: #9AA0A6; }

/* 拖拽手柄装饰条 */
.product-modal-content::after {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
    margin: 20px auto 0 auto;
}

/* ===== ICP 备案 Footer ===== */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    z-index: 999;
}
.site-footer-text {
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.2px;
}
.site-footer-divider {
    font-size: 11px;
    color: var(--text-tertiary);
}
.site-footer-icp {
    font-size: 11px;
    color: var(--text-tertiary);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}
.site-footer-icp:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: flex;
    }

    /* 手机端隐藏备案 footer（底部导航栏空间有限，且管局核查只看PC端） */
    .site-footer {
        display: none;
    }
    
    /* 知识库统计卡片改为横向 */
    #page-knowledge .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }
    
    #page-knowledge .stat-card {
        padding: 12px 8px;
        text-align: center;
    }
    
    #page-knowledge .stat-card-value {
        font-size: 1.375rem;
        margin-bottom: 4px;
    }
    
    #page-knowledge .stat-card-label {
        font-size: 0.6875rem;
    }
    
    /* 设置页面更紧凑 */
    .settings-section {
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .settings-section-title {
        font-size: 0.9375rem;
        margin-bottom: 12px;
    }
    
    .setting-item {
        padding: 10px 0;
    }
    
    .setting-item-title {
        font-size: 0.875rem;
    }
    
    .setting-item-desc {
        font-size: 0.75rem;
    }
    
    .toggle-switch {
        width: 44px;
        height: 24px;
    }
    
    .toggle-switch::after {
        width: 20px;
        height: 20px;
    }
    
    .toggle-switch.active::after {
        transform: translateX(20px);
    }
    
    /* 主内容区域底部留空给导航栏 */
    .main-content {
        padding-bottom: 70px; /* 底部导航栏高度56px + 14px余量 */
    }
    
    /* 产品图谱详情面板在移动端隐藏（用弹窗替代） */
    .products-graph-wrapper .product-detail-panel {
        display: none;
    }
    
    .products-graph-wrapper {
        display: block;
    }
    
    /* 移动端恢复整页滚动（不锁定视口高度） */
    #page-products {
        height: auto;
        overflow: visible;
        display: block;
    }
    
    .products-canvas-area {
        height: auto;
        min-height: 400px;
    }
    
    /* 用户菜单移动端适配 */
    .navbar-status {
        display: flex;
    }
    
    .nav-login-btn {
        display: none;
    }
    
    .nav-user-menu {
        display: flex;
    }
    
    .nav-user-avatar-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .user-name {
        max-width: 60px;
    }
    
    .user-dropdown {
        position: fixed;
        top: var(--navbar-height);
        right: 8px;
        min-width: 160px;
        z-index: 10010;
    }
    
    .dropdown-item {
        padding: 14px 16px;
        font-size: 0.875rem;
    }
    
    /* 个人中心面板移动端适配 */
    .profile-drawer { width: 100%; max-width: 100vw; }
    .profile-hero { padding: 22px 16px 18px; }
    .profile-avatar { width: 44px; height: 44px; min-width: 44px; font-size: 19px; }
    .profile-username { font-size: 1.05rem; }
    .profile-role-badge { font-size: 0.72rem; padding: 2px 8px; }
    .profile-welcome-sub { display: none; }

    .profile-section { padding: 14px 14px; }
    .profile-section-title { font-size: 0.78rem; margin-bottom: 10px; }
    .profile-stats-grid { gap: 8px; }
    .profile-stat-card { padding: 12px 8px; border-radius: 10px; }
    .profile-stat-value { font-size: 1.35rem; }
    .profile-stat-label { font-size: 0.7rem; }

    .profile-info-row { padding: 10px 12px; border-radius: 8px; }
    .profile-info-label, .profile-info-value { font-size: 0.78rem; }

    .profile-fav-box { padding: 12px; }
    .profile-fav-item { padding: 9px 11px; border-radius: 8px; }
    .profile-logout-btn { padding: 11px; font-size: 0.82rem; border-radius: 10px; }
}

@media (min-width: 768px) {
    .product-modal-overlay {
        align-items: center;
        padding: 20px;
    }
    
    .product-modal {
        border-radius: 20px;
        max-height: 90vh;
        border: 1px solid var(--border-color);
    }
    
    .product-modal-content {
        padding: 32px;
    }
}

/* ===== 成就勋章页面 ===== */
.achievement-progress-bar {
    position: relative;
    width: 100%;
    height: 28px;
    background: var(--bg-card);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
.achievement-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0, #a78bfa, #6366f1);
    border-radius: 14px;
    transition: width 0.6s ease;
    width: 0%;
}
.achievement-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.achievement-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ach-filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.ach-filter-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.ach-filter-btn.active {
    background: rgba(99,102,241,0.25);
    border-color: rgba(99,102,241,0.5);
    color: #a5b4fc;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.achievement-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 14px 14px;
    text-align: center;
    transition: all 0.25s;
    overflow: hidden;
}
.achievement-card:hover {
    background: var(--bg-card);
    transform: translateY(-2px);
}
.achievement-card.unlocked {
    border-color: rgba(99,102,241,0.3);
    background: rgba(99,102,241,0.08);
}
.achievement-card.locked {
    opacity: 0.55;
}
.achievement-card .ach-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--neutral-50, #f9fafb);
    margin: 0 auto 10px;
}
.achievement-card .ach-icon .ach-icon-svg {
    width: 22px;
    height: 22px;
}
.achievement-card .ach-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.achievement-card.locked .ach-name {
    color: var(--text-tertiary);
}
.achievement-card .ach-desc {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
}
.achievement-card .ach-rarity {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
}
.ach-rarity.copper  { background: rgba(205,127,50,0.2);  color: #cd7f32; }
.ach-rarity.silver  { background: rgba(170,169,173,0.2); color: #aaa9ad; }
.ach-rarity.gold    { background: rgba(212,175,55,0.2);  color: #d4af37; }
.ach-rarity.diamond { background: rgba(185,242,255,0.15); color: #b9f2ff; }
.ach-rarity.hidden  { background: rgba(255,100,255,0.15); color: #ff9ff3; }

/* 解锁动画 */
.achievement-card.unlock-anim {
    animation: achPop 0.5s ease;
}
@keyframes achPop {
    0%   { transform: scale(0.8); opacity: 0; }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── 移动端：成就卡片一行4个，紧凑布局 ── */
@media (max-width: 767px) {
    .achievement-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 0 4px;
    }
    .achievement-card {
        padding: 10px 6px 8px;
        border-radius: 10px;
    }
    .achievement-card .ach-icon {
        width: 36px;
        height: 36px;
        margin: 0 auto 4px;
        border-radius: 10px;
    }
    .achievement-card .ach-icon svg {
        width: 20px;
        height: 20px;
    }
    .achievement-card .ach-name {
        font-size: 11px;
        margin-bottom: 2px;
    }
    .achievement-card .ach-desc {
        font-size: 9px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .achievement-card .ach-rarity {
        margin-top: 4px;
        padding: 1px 5px;
        font-size: 9px;
        border-radius: 6px;
    }
}

/* ═════════════ 成就解锁通知（右上角滑入，不阻挡操作） ═════════════ */
.achievement-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid rgba(255,215,0,0.2);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.5),
        inset 0 1px 0 var(--text-secondary);
    color: var(--text-primary);
    animation: toastSlideInRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 移动端：Toast 宽度适配 */
@media (max-width: 640px) {
    .achievement-toast {
        top: 12px;
        right: 8px;
        left: 8px;
        min-width: 0;
        max-width: none;
        padding: 12px 14px;
        gap: 10px;
        border-radius: 12px;
    }
    .achievement-toast .toast-icon {
        font-size: 28px;
    }
    .achievement-toast .toast-name {
        font-size: 13px;
    }
    .achievement-toast .toast-desc {
        font-size: 11px;
    }
}
@keyframes toastSlideInRight {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.achievement-toast .toast-icon {
    font-size: 40px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
    animation: toastIconPop 0.4s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}
@keyframes toastIconPop {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

.achievement-toast .toast-body {
    flex: 1;
    min-width: 0;
}

.achievement-toast .toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFD700;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.achievement-toast .toast-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
}

.achievement-toast .toast-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.achievement-toast .toast-rarity {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.achievement-toast .toast-rarity.copper  { background: rgba(205,127,50,.2); color:#CD7F32; border:1px solid rgba(205,127,50,.3); }
.achievement-toast .toast-rarity.silver  { background: rgba(192,192,192,.15); color:#C0C0C0; border:1px solid rgba(192,192,192,.25); }
.achievement-toast .toast-rarity.gold    { background: rgba(255,215,0,.15); color:#FFD700; border:1px solid rgba(255,215,0,.25); }
.achievement-toast .toast-rarity.diamond { background: rgba(0,191,255,.15); color:#00BFFF; border:1px solid rgba(0,191,255,.25); }
.achievement-toast .toast-rarity.hidden  { background: rgba(168,85,247,.15); color:#A855F7; border:1px solid rgba(168,85,247,.25); }

.achievement-toast .toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
}
.achievement-toast .toast-close:hover {
    color: var(--text-primary);
    transform: scale(1.15);
}

/* Toast 滑出 */
.achievement-toast.toast-exit {
    animation: toastSlideOutRight 0.35s ease-in forwards;
}
@keyframes toastSlideOutRight {
    from { transform: translateX(0);  opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

/* ===== Phase 3: 线性图标系统（inline SVG sprite，自包含无外部依赖） ===== */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: inherit;
}
/* 华为云 / 竞品 文档分类色点（替代原 emoji 圆点） */
.cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  vertical-align: -0.5px;
}
.cat-dot.huawei { background: var(--primary-color); }
.cat-dot.competitor { background: #3B82F6; }

/* ===== Phase 4: 图标与文字间距/对齐微调 ===== */
/* 仅当图标后还有文字时留出间距；纯图标容器(only-child)不加，避免多余留白 */
.icon:not(:only-child) { margin-right: 0.4em; }
.cat-dot { margin-right: 6px; }

/* ===== Phase 5: 图标动效/移动端回归 ===== */
.icon { transition: color 0.2s ease, transform 0.2s ease; }
/* 移动端底部导航图标与桌面一致，随 font-size 缩放（已在 .icon 基类中处理） */
.mobile-nav-item .mobile-nav-icon .icon { width: 1.4em; height: 1.4em; }


/* ===== Phase 5.5: 视觉增强 — 大厂质感（浅色白卡 + 层次感 + 品牌色点缀） ===== */

/* 1. 全局卡片层次：多层阴影替代扁平 */
.dashboard-kpi-card, .kb-doc-item, .stat-card, .ach-filter-btn, .product-node,
.setting-item, .history-item, .profile-stat-card, .compare-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.dashboard-kpi-card:hover, .kb-doc-item:hover, .stat-card:hover,
.setting-item:hover, .profile-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.05);
}

/* 2. KPI卡片：左侧品牌色装饰线 */
.dashboard-kpi-card { position: relative; overflow: hidden; }
.dashboard-kpi-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--primary-color), var(--primary-light));
  border-radius: 3px 0 0 3px; opacity: 0.8;
}
.kpi-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(199,0,11,0.07), rgba(199,0,11,0.03));
  color: var(--primary-color); margin-bottom: 12px;
}
.kpi-icon .icon { width: 22px; height: 22px; }

/* 3. 导航激活态增强 */
.navbar-item.active .nav-text, .mobile-nav-item.active .mobile-nav-label { font-weight: 600; }
.navbar-item.active::after {
  content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2.5px; background: var(--primary-color); border-radius: 2px;
}
.mobile-nav-item.active .mobile-nav-icon { color: var(--primary-color); }

/* 4. 按钮精致化 */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  box-shadow: 0 2px 8px rgba(199,0,11,0.25); transition: all 0.2s ease;
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(199,0,11,0.35); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(199,0,11,0.2); }
.btn-secondary:hover { background: var(--neutral-100); border-color: var(--neutral-300); }

/* 5. 表单输入焦点发光 */
.form-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(199,0,11,0.1); }
.textarea-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(199,0,11,0.08); }

/* 6. 产品节点增强 */
.product-node { border: 1px solid var(--border-color); transition: all 0.2s ease; }
.product-node:hover { border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(199,0,11,0.1); }
.product-node.selected {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(199,0,11,0.02) 100%);
  box-shadow: 0 2px 8px rgba(199,0,11,0.12);
}

/* 7. 分类组标题增强 */
.category-group-title { font-weight: 600; letter-spacing: 0.3px; }
.category-group-header {
  display: flex;                 /* 双保险：确保标题行始终是 flex 容器 */
  align-items: center;
  border-left: 3px solid var(--primary-color); padding-left: 12px;
  background: linear-gradient(90deg, rgba(199,0,11,0.03), transparent);
  border-radius: 0 8px 8px 0;
}

/* 8. 结果内容排版优化 */
.result-content h1, .result-content h2, .result-content h3 {
  position: relative; padding-left: 14px;
}
.result-content h1::before, .result-content h2::before, .result-content h3::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  background: linear-gradient(180deg, var(--primary-color), var(--primary-light)); border-radius: 2px;
}
.result-content strong { color: var(--neutral-900); font-weight: 600; }
.result-content code {
  background: var(--neutral-100); padding: 2px 6px; border-radius: 4px;
  font-size: 0.88em; color: var(--error);
}
.result-content blockquote {
  border-left: 3px solid var(--primary-color);
  background: linear-gradient(90deg, rgba(199,0,11,0.03), transparent);
  padding: 12px 16px; border-radius: 0 8px 8px 0;
}

/* 9. 进度条增强 */
.progress-bar-container { background: var(--neutral-100); border-radius: 999px; overflow: hidden; }
.progress-bar {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
  border-radius: 999px; position: relative; overflow: hidden;
}
.progress-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* 10. 竞品分析步骤 */
.competitor-step { border: 1px solid var(--border-color); transition: all 0.2s ease; }
.competitor-step.active {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, rgba(255,240,240,0.7), rgba(255,245,245,0.4));
  box-shadow: 0 2px 10px rgba(199,0,11,0.08);
}
.competitor-step.done { border-color: #4ade80; background: rgba(74,222,128,0.04); }

/* 11. 成就卡片增强（已合并到上方主定义） */

/* 12. 知识库文档项 */
.kb-doc-item { border: 1px solid var(--border-color); border-radius: 12px; }
.kb-doc-item:hover { border-color: var(--primary-color); }

/* 13. 设置开关美化 */
.toggle-switch { width: 48px; height: 26px; }
.toggle-slider:before { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
input:checked + .toggle-slider { background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)); }
input:checked + .toggle-slider:before { transform: translateX(22px); }

/* 14. 分页增强 */
.pagination-btn {
  border: 1px solid var(--border-color); min-width: 34px; height: 34px;
  border-radius: 8px; transition: all 0.15s;
}
.pagination-btn:hover:not(.active):not(:disabled) {
  border-color: var(--primary-color); color: var(--primary-color);
  background: rgba(199,0,11,0.04);
}
.pagination-btn.active {
  background: var(--primary-color); color: #fff; border-color: var(--primary-color);
  box-shadow: 0 2px 6px rgba(199,0,11,0.25);
}

/* 15. Toast通知增强 */
.toast { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.toast.success { border-left: 4px solid #4ade80; }
.toast.error { border-left: 4px solid var(--error); }
.toast.warning { border-left: 4px solid #f59e0b; }
.toast.info { border-left: 4px solid #3b82f6; }

/* 16. Modal弹窗统一增强 */
.auth-modal, .confirm-modal, .kb-editor-modal, .profile-drawer {
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
}
.auth-modal-overlay { backdrop-filter: blur(4px); }

/* 17. 空状态图标容器 */
.empty-state-icon {
  width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--neutral-100), var(--neutral-50));
  margin-bottom: 16px;
}
.empty-state-icon .icon { width: 36px; height: 36px; color: var(--neutral-400); }

/* 18. 底部导航移动端增强 */
.mobile-bottom-nav { box-shadow: 0 -1px 3px rgba(0,0,0,0.06), 0 -2px 8px rgba(0,0,0,0.04); }
.mobile-nav-item.active .mobile-nav-label { color: var(--primary-color); font-weight: 600; }

/* 19. Footer微调 */
.site-footer { border-top: 1px solid var(--border-color); background: var(--bg-card); }

/* ================================================================
   Phase 6 · 华为红品牌风格增强 — 大厂质感
   参考：阿里云/腾讯云/华为云官网设计语言
   核心原则：品牌色点缀 + 层次感 + 温度，不使用logo
   ================================================================ */

/* ---- 1. 页面背景增加暖色调层次（极淡的红色光晕）---- */
body {
    background: linear-gradient(180deg, #FAFBFD 0%, #F5F6F8 40%, #FBFAFC 100%);
}

/* ---- 2. 页面标题区域：左侧品牌色竖线装饰 ---- */
.page-header {
    position: relative;
    padding-left: 16px;
    margin-bottom: var(--spacing-xl);
}
.page-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-color) 0%, #E02020 50%, var(--primary-hover) 100%);
    border-radius: 2px;
}
.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}
.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ---- 3. 内容卡片：始终显示顶部品牌色线（不再只hover才出现）---- */
.content-card::before {
    opacity: 1;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(199,0,11,0.3) 30%, transparent 100%);
}
.content-card:hover::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

/* ---- 4. Navbar 品牌增强：logo区域红色脉冲微光 ---- */
.navbar-brand .brand-icon {
    filter: drop-shadow(0 0 6px rgba(199, 0, 11, 0.25));
}
.navbar-item.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #D00818 100%);
    box-shadow: 0 2px 12px rgba(199, 0, 11, 0.35), 0 0 0 1px rgba(199, 0, 11, 0.1);
}
.navbar-item:not(.active):hover {
    background: rgba(199, 0, 11, 0.06);
    color: var(--primary-color);
}

/* ---- 5. Dashboard KPI 卡片增强 ---- */
.dashboard-kpi-card {
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
}
.dashboard-kpi-card:nth-child(1) .kpi-icon { background: linear-gradient(135deg, rgba(199,0,11,0.12), rgba(199,0,11,0.06)); color: #C7000B; }
.dashboard-kpi-card:nth-child(1)::before { background: linear-gradient(90deg, #C7000B, #E85D5D); }
.dashboard-kpi-card:nth-child(2) .kpi-icon { background: linear-gradient(135deg, rgba(22,93,255,0.12), rgba(22,93,255,0.06)); color: #165DFF; }
.dashboard-kpi-card:nth-child(2)::before { background: linear-gradient(90deg, #165DFF, #69A1FF); }
.dashboard-kpi-card:nth-child(3) .kpi-icon { background: linear-gradient(135deg, rgba(82,196,26,0.12), rgba(82,196,26,0.06)); color: #52C41A; }
.dashboard-kpi-card:nth-child(3)::before { background: linear-gradient(90deg, #52C41A, #95DE64); }
.dashboard-kpi-card:nth-child(4) .kpi-icon { background: linear-gradient(135deg, rgba(250,173,13,0.15), rgba(250,173,13,0.07)); color: #D48806; }
.dashboard-kpi-card:nth-child(4)::before { background: linear-gradient(90deg, #D48806, #FFD666); }
.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* ---- 6. 图表卡片增强 ---- */
.dashboard-chart-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}
.dashboard-chart-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(199, 0, 11, 0.08);
    transform: translateY(-2px);
}
.chart-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding-left: 10px;
}
.chart-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 2px;
}
.chart-body {
    padding: 16px 20px;
    min-height: 220px;
}

/* ---- 8. 按钮系统统一增强 ---- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #E02020 60%, #D00818 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: all 0.25s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(199, 0, 11, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    background: linear-gradient(135deg, #D00818 0%, var(--primary-color) 60%, #E02020 100%);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(199, 0, 11, 0.3);
}

/* ---- 9. Footer 增强品牌底栏 ---- */
.site-footer {
    border-top: none;
    background: linear-gradient(180deg, var(--bg-card) 0%, #F8F9FB 100%);
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.5;
}

/* ---- 10. 移动端底部导航激活态 ---- */
.mobile-nav-item.active .mobile-nav-icon {
    color: var(--primary-color);
}
.mobile-nav-item.active .mobile-nav-label {
    color: var(--primary-color);
    font-weight: 600;
}
.mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 0 0 3px 3px;
}

/* ---- 11. 表单输入框焦点增强 ---- */
.form-input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(199, 0, 11, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* AI 输入框不受此规则影响（已在上方 .ai-input-box 中用 !important 覆盖） */

/* ---- 12. 统计卡片（stat-card）增强 ---- */
.stat-card {
    text-align: center;
    padding: 20px 16px !important;
    border-radius: var(--radius-lg) !important;
    position: relative;
    overflow: hidden;
}
.stat-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.03em;
}
.stat-card-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}
.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(199,0,11,0.2), transparent);
}

/* ============================================================
   企业控制台风 · 框架布局
   深色侧边栏(#14162B) + 深色顶栏 + 浅色内容区
   仅改外壳，页面内容(card/按钮)沿用既有浅色主题
   ============================================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- 侧边栏（深色） ---------- */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--frame-bg);
    border-right: 1px solid var(--frame-border);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    transition: width var(--transition-base);
    overflow: hidden;
}
.sidebar-brand {
    height: var(--topbar-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--frame-border);
}
/* 品牌区 - 纯文字（无图标），上下两行红+灰层次 */
.sidebar-brand {
    height: var(--topbar-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 1px solid var(--frame-border);
}
.sidebar-brand .brand-titles {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 8px;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.brand-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    line-height: 1.2;
}
.brand-cloud-icon {
    color: #fff;
    width: 24px; height: 24px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}
.sidebar-brand .brand-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #fff;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.sidebar-brand .brand-sub {
    font-size: 0.85rem;
    color: var(--frame-text-dim);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--frame-text-dim);
    white-space: nowrap;
}
.sidebar-collapse-btn {
    margin-left: auto;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--frame-border);
    border-radius: 8px;
    color: var(--frame-text-dim);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--frame-hover); color: #fff; }
.sidebar-collapse-btn .icon { width: 1rem; height: 1rem; }

.sidebar-menu {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-menu::-webkit-scrollbar { width: 6px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: var(--frame-text);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    transition: all var(--transition-fast);
}
.sidebar-item .nav-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--frame-text-dim);
    transition: color var(--transition-fast);
}
.sidebar-item .nav-icon .icon { width: 1.25rem; height: 1.25rem; }
.sidebar-item:hover { background: var(--frame-hover); color: #fff; }
.sidebar-item:hover .nav-icon { color: #fff; }
.sidebar-item.active {
    background: var(--frame-active-bg);
    border-left-color: var(--frame-active-bar);
    color: var(--frame-active-text);
}
.sidebar-item.active .nav-icon { color: var(--primary-300); }

/* ===== 侧栏底部主题切换器 ===== */
.theme-switcher {
    flex-shrink: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--frame-border);
}
.theme-label {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--frame-text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.theme-palette {
    display: flex;
    gap: 14px;
}
.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.theme-name {
    font-size: 10px;
    color: var(--frame-text-dim);
    opacity: 0.55;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.theme-option:hover .theme-name { opacity: 1; }
.theme-color {
    flex: 1;
    aspect-ratio: 1;
    max-width: 42px;
    min-width: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
    outline: none;
}
.theme-color:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
    border-color: rgba(255,255,255,0.35);
}
.theme-color.active {
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 4px 16px rgba(0,0,0,0.5);
    transform: scale(1.08);
}

/* 收起态完全隐藏主题切换器（收缩空间不足，展开时才可用） */
.app-shell.collapsed .theme-switcher { display: none; }

.sidebar-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--frame-border);
    color: var(--frame-text-dim);
    font-size: 0.75rem;
}
.sidebar-status { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sidebar-status .status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px rgba(0,180,42,0.6);
    flex-shrink: 0;
}
.sidebar-status b { color: var(--frame-text); font-weight: 700; }

/* 收起态 */
.app-shell.collapsed .sidebar { width: var(--sidebar-width-collapsed); }
.app-shell.collapsed .sidebar-brand { padding: 0; justify-content: center; }
.app-shell.collapsed .sidebar-brand .brand-titles { display: none; }
.app-shell.collapsed .sidebar-collapse-btn {
    display: flex;   /* 始终可见，允许再次点击展开 */
    margin-left: 0;
}
/* 展开时箭头向左(←)，收起时箭头向右(→) */
.app-shell.collapsed .sidebar-collapse-btn .icon { transform: rotate(180deg); }
.app-shell.collapsed .sidebar-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.collapsed .sidebar-item .nav-text { display: none; }
.app-shell.collapsed .sidebar-footer { display: none; }

/* ---------- 主区 ---------- */
.app-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left var(--transition-base);
}
.app-shell.collapsed .app-main { margin-left: var(--sidebar-width-collapsed); }

/* ---------- 顶栏（深色） ---------- */
.topbar {
    height: var(--topbar-height);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--topbar-bg, var(--frame-bg));
    border-bottom: 1px solid var(--frame-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 16px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-left { flex-shrink: 0; }
.topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.topbar-menu-btn {
    display: none;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--frame-text); cursor: pointer; border-radius: 8px;
}
.topbar-menu-btn:hover { background: var(--frame-hover); }
.topbar-menu-btn .icon { width: 1.25rem; height: 1.25rem; }

.topbar-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--frame-bg-2);
    border: 1px solid var(--frame-border);
    border-radius: 10px;
    padding: 0 12px;
    height: 36px;
    width: 320px;
    max-width: 38vw;
    color: var(--frame-text-dim);
    transition: border-color var(--transition-fast);
}
.topbar-search:focus-within { border-color: var(--primary-color); }
.topbar-search .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.topbar-search input {
    border: none; background: transparent; outline: none;
    color: #fff; font-size: 0.85rem; width: 100%; font-family: var(--font-family);
}
.topbar-search input::placeholder { color: var(--frame-text-dim); }

.topbar-icon-btn {
    display: flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    background: var(--primary-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--primary-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    border-radius: 10px;
    color: rgba(255,255,255,0.92); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; font-family: var(--font-family);
    transition: all var(--transition-fast);
}
.topbar-icon-btn:hover {
    background: #A30009;
    border-color: #A30009;
    color: #fff;
}
.topbar-icon-btn .icon { width: 1.1rem; height: 1.1rem; }

/* 顶栏内用户菜单 */
.topbar .nav-user-menu { position: relative; }
.topbar .nav-user-avatar-btn {
    display: flex; align-items: center; gap: 8px;
    background: var(--primary-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--primary-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    color: rgba(255,255,255,0.92);
    border-radius: 10px;
    height: 36px; padding: 0 12px;
    cursor: pointer; font-family: var(--font-family);
    font-weight: 600; font-size: 0.85rem;
    transition: all var(--transition-fast);
}
.topbar .nav-user-avatar-btn:hover {
    background: #A30009;
    border-color: #A30009;
    color: #fff;
}
.topbar .user-name { font-size: 0.85rem; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .user-avatar-icon { color: rgba(255,255,255,0.92); }
.topbar .dropdown-arrow { color: rgba(255,255,255,0.7); font-size: 0.7rem; }

/* ---------- 最新更新滚动横幅（顶栏下方，随皮肤主题联动） ---------- */
.update-ticker {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 12px 0 16px;
    /* 与顶栏同色系加深一档（叠加黑色半透明），皮肤切换自动联动 */
    background: linear-gradient(rgba(0,0,0,0.14), rgba(0,0,0,0.14)), var(--topbar-bg, var(--frame-bg));
    color: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.8rem;
    overflow: hidden;
    position: relative;
    z-index: 999;
}
[data-skin] .update-ticker {
    background: linear-gradient(rgba(0,0,0,0.14), rgba(0,0,0,0.14)), var(--topbar-bg) !important;
}
.update-ticker-label {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
}
.update-ticker-label .icon { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.update-ticker-viewport {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.update-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: update-ticker-scroll 70s linear infinite;
}
.update-ticker:hover .update-ticker-track,
.update-ticker-viewport:hover .update-ticker-track { animation-play-state: paused; }
.update-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px;
    color: rgba(255,255,255,0.9);
}
.update-ticker-item b { font-weight: 600; color: #fff; }
.update-ticker-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    flex-shrink: 0;
}
@keyframes update-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* 覆盖旧固定 navbar 留下的顶部留白 */
.main-content { padding-top: var(--spacing-xl); }

/* 全局滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
::-webkit-scrollbar-track { background: transparent; }

/* ================================================================
   顶栏天气条（高德天气，随皮肤主题联动）
   ================================================================ */
.weather-widget {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.weather-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    color: rgba(255,255,255,0.92);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.weather-bar:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.28); }
.weather-bar .weather-icon { width: 0.95rem; height: 0.95rem; flex-shrink: 0; color: rgba(255,255,255,0.85); }
.weather-bar .weather-city { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weather-bar .weather-temp { font-size: 0.95rem; font-weight: 600; color: #fff; }
.weather-bar .weather-desc { color: rgba(255,255,255,0.72); font-size: 0.75rem; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weather-bar .weather-caret { width: 0.7rem; height: 0.7rem; color: rgba(255,255,255,0.55); transition: transform var(--transition-fast); }
.weather-widget.open .weather-bar .weather-caret { transform: rotate(180deg); }
.weather-widget.open .weather-bar { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); }

/* 城市搜索下拉面板（覆盖在内容区上方） */
.weather-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 300px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
    padding: 12px;
    z-index: 1200;
    color: var(--text-primary, #222);
}
.weather-panel-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-elevated, #f5f5f5);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: 8px;
    padding: 0 10px;
    height: 36px;
    margin-bottom: 10px;
}
.weather-panel-search .icon { width: 0.95rem; height: 0.95rem; color: var(--text-tertiary, #999); flex-shrink: 0; }
.weather-panel-search input {
    border: none;
    background: transparent;
    outline: none;
    outline-color: transparent;
    width: 100%;
    font-size: 0.8rem;
    font-family: var(--font-family);
    color: var(--text-primary, #222);
}
/* 覆盖项目全局 input:focus-visible 华为红 outline（项目 a11y 默认行为） */
.weather-panel-search input:focus,
.weather-panel-search input:focus-visible {
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}
.weather-panel-search input::placeholder { color: var(--text-secondary, #666); }
.weather-panel-hot { margin-bottom: 8px; }
.weather-panel-label { font-size: 0.7rem; color: var(--text-tertiary, #999); margin-bottom: 6px; display: block; }
.weather-hot-list { display: flex; flex-wrap: wrap; gap: 6px; }
.weather-hot-chip {
    border: 1px solid var(--border-color, rgba(0,0,0,0.15));
    background: transparent;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.75rem;
    color: var(--text-secondary, #555);
    cursor: pointer;
    font-family: var(--font-family);
    transition: all var(--transition-fast);
}
.weather-hot-chip:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(199,0,11,0.04); }
.weather-panel-results { max-height: 220px; overflow-y: auto; }
.weather-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.8rem;
    color: var(--text-primary, #222);
    transition: background var(--transition-fast);
    text-align: left;
}
.weather-result-item:hover { background: var(--bg-elevated, #f5f5f5); }
.weather-result-item .wr-province { font-size: 0.7rem; color: var(--text-tertiary, #999); }
.weather-panel-empty {
    font-size: 0.78rem;
    color: var(--text-tertiary, #999);
    text-align: center;
    padding: 16px 0;
}

/* 定位失败 / 加载中状态 */
.weather-bar.loading .weather-temp { color: rgba(255,255,255,0.5); }
.weather-bar .weather-temp.error { color: #ffd9a8; }

/* 移动端隐藏天气条（窄屏空间紧张） */
@media (max-width: 768px) {
    .weather-widget { display: none; }
}

/* ================================================================
   科技资讯弹窗（顶栏「资讯」按钮，RSS 每日聚合）
   ================================================================ */
.news-modal-content {
    width: min(560px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.news-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.news-modal-tip {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}
/* 资讯弹窗标签页（行业资讯 / 华为云动态 / 行业展会） */
.news-tabs {
    display: flex;
    gap: 8px;
    margin: 10px 0 12px;
    padding: 3px;
    background: var(--neutral-200, #F2F3F5);
    border-radius: 8px;
    width: fit-content;
}
.news-tab {
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    font-family: var(--font-family);
}
.news-tab:hover { color: var(--primary-color); }
.news-tab.active {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}
/* 展会条目 */
.event-item .event-icon { font-size: 0.95rem; margin-right: 6px; }
.event-item .event-name { font-size: 0.86rem; }
.event-item .event-city { background: rgba(199, 0, 11, 0.08); color: var(--primary-color); }
.event-item .event-location,
.event-item .event-note {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 3px;
    padding-left: 2px;
    line-height: 1.5;
}
.event-item.no-link { cursor: default; }
.event-item.no-link:hover .news-item-title { color: var(--text-primary); }
.news-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-elevated);
}
.news-list {
    display: flex;
    flex-direction: column;
}
.news-loading,
.news-empty,
.news-error {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}
.news-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--bg-card); }
.news-item-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.news-item-num {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    user-select: none;
}
.news-item-title {
    font-size: 0.86rem;
    color: var(--text-primary);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.news-item:hover .news-item-title { color: var(--primary-color); }
.news-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    margin-left: 24px;
    font-size: 0.68rem;
    color: var(--text-tertiary);
}
.news-source-tag {
    font-size: 0.65rem;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(199, 0, 11, 0.08);
    color: var(--primary-color);
}
.news-meta-dot {
    color: var(--border-color);
}
.news-meta-read {
    margin-left: auto;
    color: var(--primary-color);
    opacity: 0.65;
    transition: opacity var(--transition-fast);
}
.news-item:hover .news-meta-read { opacity: 1; }
.news-item-time {
    color: var(--text-tertiary);
}
.news-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.news-updated {
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

/* ================================================================
   v2.0 深色控制台 — 全局组件增强
   ================================================================ */

/* ---- 客户需求描述卡片：极浅米白→纯白渐变（与横幅统一） ---- */
#page-solution > .content-card {
    background: linear-gradient(90deg, #FFFEFA 0%, #FFFDFB 40%, #FFFFFF 100%) !important;
    background-size: 200% 100% !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: background-position .6s ease, box-shadow .25s ease, border-color .25s ease !important;
}
#page-solution > .content-card:hover {
    background-position: 100% 0 !important;
    box-shadow: 0 10px 30px rgba(199,0,11,0.08) !important;
}
#page-solution > .content-card::before {
    display: none; /* 去掉顶部伪元素红条 */
}
/* PC端：匹配页/竞品页卡片红色上边框（竞品标题header不加） */
#page-solution > .content-card {
    border-top: 3px solid var(--primary-color) !important;
}
#page-competitor > .content-card {
    border-top: 3px solid var(--primary-color) !important;
}

/* ---- 毛玻璃卡片（覆盖旧纯白卡片） ---- */
.card,
.match-form-card,
.solution-card,
.competitor-card,
.kb-doc-card,
.history-item,
.settings-panel,
.panel {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition-smooth);
}
.card:hover,
.match-form-card:hover,
.solution-card:hover,
.competitor-card:hover {
    box-shadow: var(--glass-hover-shadow) !important;
    transform: translateY(-1px);
}

/* P0-1 表面层级：核心浮层（弹窗/详情面板）补中性阴影，建立"浮起来"的层级感。
   纯新增，不改任何现有规则与 DOM 结构；--shadow-xl 已定义(style.css:69)。
   注：普通卡片已有 glass-shadow 层级系统，此处补齐"浮层"缺口。 */
.modal-content,
.history-modal-content,
.detail-modal,
.detail-panel,
.product-detail-content,
.popup-body {
    box-shadow: var(--shadow-xl);
}

/* ---- 输入框聚焦红光晕 ---- */
input:focus, select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: var(--input-focus-ring) !important;
}
/* textarea 聚焦样式已按组件各自处理（AI输入框用 .ai-input-box 内的 !important 规则） */
input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ---- 主按钮：红渐变 + 光晕 ---- */
.btn-primary,
#start-match-btn,
.btn-submit {
    background: linear-gradient(135deg, #C7000B 0%, #E02020 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.3);
    transition: all 0.3s ease;
}
.btn-primary:hover,
#start-match-btn:hover,
.btn-submit:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--brand-glow-strong), 0 4px 16px rgba(199, 0, 11, 0.4) !important;
}

/* ---- 次要按钮：毛玻璃白底 + 红字 ---- */
.btn-secondary {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(199, 0, 11, 0.25) !important;
}
.btn-secondary:hover {
    background: #F2F3F5 !important;
}

/* ---- 表格条纹 + 红色hover ---- */
table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}
table tbody tr:hover {
    background: rgba(199, 0, 11, 0.04) !important;
}

/* ---- 页面标题区：浅米白→白 左→右渐变横幅（全站统一 + hover 动效） ---- */
.page-header {
    background: linear-gradient(90deg, #FFFEFA 0%, #FFFDFB 40%, #FFFFFF 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0 !important;
    border-radius: 14px !important;
    padding: 24px 28px !important;
    margin-bottom: 24px !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    transition: background-position .6s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.page-header:hover {
    background-position: 100% 0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(199,0,11,0.12) !important;
    border-left-color: #E02020 !important;
}
.page-header h1,
.page-header h2,
.page-header .page-title {
    color: #2D2D2D !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    transition: transform .3s ease !important;
}
.page-header:hover h1,
.page-header:hover h2,
.page-header:hover .page-title {
    transform: translateX(4px) !important;
}
.page-header p,
.page-header .page-subtitle,
.page-header .page-desc {
    color: #666 !important;
    margin-top: 6px !important;
    transition: transform .3s ease !important;
}
.page-header:hover p,
.page-header:hover .page-subtitle,
.page-header:hover .page-desc {
    transform: translateX(4px) !important;
}

/* ---- 模式切换按钮组（毛玻璃未选中态） ---- */
.mode-switch button:not(.active) {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.mode-switch button.active {
    background: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.3);
}

/* ================================================================
   v2.0 动画 Keyframes
   ================================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scalePop {
    0%   { transform: scale(0.96); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(199, 0, 11, 0.3); }
    50%      { box-shadow: 0 2px 24px rgba(199, 0, 11, 0.5), 0 0 40px rgba(199, 0, 11, 0.15); }
}
@keyframes slideRight {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes countUp {
    0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes progressFill {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* ---- scalePop：卡片入场弹跳（错峰，backwards 不锁死 hover transform） ---- */
.glass-card,
.card,
.content-card,
.dashboard-kpi-card,
.achievement-card,
.kb-doc-card {
    animation: scalePop 0.45s cubic-bezier(.16, 1, .3, 1) backwards;
}
.glass-card:nth-child(2),
.card:nth-child(2),
.content-card:nth-child(2),
.dashboard-kpi-card:nth-child(2) { animation-delay: 0.05s; }
.glass-card:nth-child(3),
.card:nth-child(3),
.content-card:nth-child(3),
.dashboard-kpi-card:nth-child(3) { animation-delay: 0.1s; }
.glass-card:nth-child(4),
.card:nth-child(4),
.content-card:nth-child(4),
.dashboard-kpi-card:nth-child(4) { animation-delay: 0.15s; }

/* ---- glowPulse：主按钮品牌脉冲光晕 ---- */
.btn-primary,
.match-submit-btn,
.btn-brand {
    animation: glowPulse 2.4s ease-in-out infinite;
}
.btn-primary:hover,
.match-submit-btn:hover,
.btn-brand:hover {
    animation-play-state: paused;
}

/* ---- fadeIn：弹窗/详情面板淡入 ---- */
.modal-content,
.detail-panel,
.product-detail-content,
.popup-body {
    animation: fadeIn 0.3s ease both;
}

/* ---- 页面内容入场动画 ---- */
.main-content > [id^="page-"] {
    animation: fadeInUp 0.4s cubic-bezier(.16,1,.3,1) both;
}

/* ---------- 仪表盘 hero（浅米白→白，与全站统一 + hover 动效） ---------- */
#page-dashboard .page-header {
    background: linear-gradient(90deg, #FFFEFA 0%, #FFFDFB 40%, #FFFFFF 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0 !important;
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    margin-bottom: var(--spacing-lg);
    color: #2D2D2D;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: background-position .6s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
    border-left: 4px solid var(--primary-color) !important;
}
#page-dashboard .page-header:hover {
    background-position: 100% 0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 34px rgba(199,0,11,0.12) !important;
    border-left-color: #E02020 !important;
}
#page-dashboard .page-header::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(199,0,11,0.06) 0%, transparent 70%);
    pointer-events: none;
}
#page-dashboard .page-title { color: #C7000B; font-size: 1.75rem; font-weight: 700; transition: transform .3s ease; }
#page-dashboard .page-header:hover .page-title { transform: translateX(4px); }
#page-dashboard .page-subtitle { color: #666; }

/* ================================================================
   v2.0 仪表盘专属增强 — 深色卡片 + 白字
   ================================================================ */

/* Hero 增强纹理 + 光点动画（米白底适配） */
#page-dashboard .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(199,0,11,0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(199,0,11,0.03) 0%, transparent 40%);
    pointer-events: none;
}

/* 统计卡片：毛玻璃白卡 + 深色字（去黑色） */
#page-dashboard .stat-card,
#page-dashboard .dashboard-kpi-card,
.dashboard-kpi-card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1D2129 !important;
}
#page-dashboard .stat-card-value,
.stat-card-value,
.kpi-value {
    color: #C7000B !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    animation: countUp 1s ease-out both;
}
#page-dashboard .stat-card-label,
.stat-card-label,
.kpi-label {
    color: #555D6A !important;
}
#page-dashboard .stat-card:hover,
.dashboard-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(199, 0, 11, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 图表区域：浅灰毛玻璃（去黑色） */
#page-dashboard .dashboard-chart-card,
.dashboard-chart-card {
    background: var(--bg-card) !important;
    backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
#page-dashboard .dashboard-chart-card h3,
.dashboard-chart-card .chart-header h3 {
    color: #1D2129 !important;
}
.dashboard-chart-card .chart-body {
    background: rgba(248, 250, 252, 0.8);
    border-radius: 10px;
}

/* ================================================================
   v2.0 其余页面逐页适配（P4）
   ================================================================ */

/* ---- 竞品页：卡片左侧品牌色竖线 ---- */
.competitor-card,
.compare-card {
    border-left: 3px solid var(--primary-color) !important;
}
.competitor-card:hover,
.compare-card:hover {
    border-left-color: #E02020 !important;
}

/* ---- 产品图谱：节点毛玻璃 ---- */
.product-node {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(199, 0, 11, 0.15) !important;
    transition: all 0.3s ease !important;
}
.product-node:hover {
    background: #F7F8FA !important;
    box-shadow: 0 0 16px rgba(199, 0, 11, 0.15) !important;
    transform: scale(1.03);
}

/* ---- 历史记录：时间线风格 ---- */
.history-item {
    padding-left: 16px !important;
}

/* ---- 成就中心：渐变卡片 + 进度条 ---- */
.ach-card,
.achievement-card {
    position: relative;
    overflow: hidden;
}
.ach-card::before,
.achievement-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C7000B, #FF6A3D);
}
.ach-progress-bar,
.progress-fill {
    background: linear-gradient(90deg, #C7000B, #E02020) !important;
    transform-origin: left center;
    animation: progressFill 1s cubic-bezier(.16,1,.3,1) both;
}
.ach-locked {
    opacity: 0.5;
    filter: grayscale(0.8);
}

/* ---- 知识库：表格增强 ---- */
.kb-doc-table tr:hover {
    background: rgba(199, 0, 11, 0.04) !important;
}
.kb-doc-table th {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* ---- 设置页：面板 + 自定义开关 ---- */
.settings-panel,
.setting-section {
    border-left: 3px solid rgba(199, 0, 11, 0.3) !important;
}
.setting-item {
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.2s ease;
}
.setting-item:hover {
    background: rgba(199, 0, 11, 0.03) !important;
}

/* ---- Toast/通知增强 ---- */
#toast-container .toast {
    backdrop-filter: none;
    border-radius: 12px !important;
    animation: slideRight 0.3s ease both;
}
#toast-container .toast.toast-success { border-left: 4px solid #52C41A; }
#toast-container .toast.toast-error { border-left: 4px solid #C7000B; }
#toast-container .toast.toast-info { border-left: 4px solid #165DFF; }

/* ---------- 响应式：移动端侧边栏→底部Tab + 顶栏精简 ---------- */
@media (max-width: 767px) {
    .sidebar { display: none; }
    .app-main { margin-left: 0; }
    .topbar-menu-btn { display: none !important; }
    .topbar-search { display: none; }
    /* 左侧区域完全隐藏，给搜索框腾空间 */
    .topbar-left { display: none !important; }
    .main-content { padding-bottom: 70px; padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
    .sidebar-collapse-btn { display: none; }

    /* ===== 移动端顶栏精简 ===== */
    /* 隐藏"体验"按钮（移动端空间有限，功能可从页面内访问） */
    #quick-demo-btn { display: none !important; }

    /* 登录按钮：去掉桌面渐变样式，改为简洁文字按钮 */
    #nav-login-btn {
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.25) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        padding: 5px 10px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
        color: rgba(255,255,255,0.9) !important;
    }
    #nav-login-btn:hover {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.4) !important;
    }
    /* 已登录用户菜单按钮同理 */
    #nav-user-avatar-btn,
    .nav-user-menu .topbar-icon-btn {
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.25) !important;
        box-shadow: none !important;
        padding: 5px 10px !important;
        height: 32px !important;
        color: rgba(255,255,255,0.9) !important;
    }

    /* AI 搜索栏缩小 */
    /* ---- 顶栏搜索框：继承 PC 端精致设计，仅调整尺寸 ---- */
    .topbar {
        padding: 0 12px !important;
        gap: 8px !important;
    }
    .topbar-left { display: none !important; flex-shrink: 0; }
    .topbar-right {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    .topbar-center {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 6px !important;
    }
    /* ★ 只覆盖尺寸，保留 PC 端的 border-radius/背景/边框/阴影/动画 */
    .topbar-ai-bar {
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;  /* ★ 手机端左对齐 */
        height: 36px !important;           /* PC端34px，移动端略大方便点击 */
        padding: 0 16px !important;       /* PC端20px，稍紧凑 */
        overflow: hidden !important;

        /* 视觉效果与PC端一致（这些是PC端原值） */
        background: rgba(255,255,255,0.14) !important;
        border: 1px solid rgba(255,255,255,0.20) !important;
        border-radius: 999px !important;   /* ★ 胶囊形 */
        box-shadow:
            0 1px 8px rgba(0,0,0,0.08),
            inset 0 1px 0 rgba(255,255,255,0.10) !important;
    }
    .topbar-ai-bar:hover,
    .topbar-ai-bar:active {
        background: rgba(255,255,255,0.24) !important;
        border-color: rgba(199,0,11,0.35) !important;
        box-shadow:
            0 2px 20px rgba(199,0,11,0.12),
            inset 0 1px 0 rgba(255,255,255,0.15) !important;
        transform: scale(1.01) !important;
        transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94) !important;
    }
    /* 搜索图标 - 继承PC端半透明风格 */
    .topbar-ai-bar .ai-search-icon {
        color: rgba(255,255,255,0.50) !important;
        width: 15px !important;
        height: 15px !important;
        flex-shrink: 0 !important;
    }
    /* AI 图标 - 继承PC端红色+脉冲动画 */
    .topbar-ai-bar .ai-icon {
        color: #FF6B6B !important;
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
        filter: drop-shadow(0 0 4px rgba(255,107,107,0.5)) !important;
    }
    /* placeholder 文字 */
    .topbar-ai-bar .ai-placeholder {
        font-size: 0.78rem !important;
        font-weight: 400 !important;
        color: rgba(255,255,255,0.55) !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 36px) !important;
    }
}

/* ---- 13. Tab / 切换按钮组品牌化 ---- */
.history-tabs {
    background: var(--neutral-100);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}
.history-tab.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25);
}
.mode-btn-group .mode-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(199, 0, 11, 0.25);
}

/* ---- 14. 进度步骤条增强 ---- */
.step-indicator .step.active .step-num,
.step-indicator .step.done .step-num {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 6px rgba(199, 0, 11, 0.3);
}

/* ---- 15. 知识库文档列表行悬停 ---- */
.kb-doc-item:hover {
    border-left: 3px solid var(--primary-color);
    background: rgba(199, 0, 11, 0.03);
}

/* ---- 16. 成就徽章/标签品牌化 ---- */
.badge-primary, .badge-success, .badge-info, .badge-warning {
    font-weight: 500;
    letter-spacing: 0.02em;
}
.badge-primary { background: rgba(199,0,11,0.1); color: #C7000B; border: 1px solid rgba(199,0,11,0.2); }

/* ---- 17. 分页组件 ---- */
.pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(199, 0, 11, 0.25);
}

/* ---- 18. 滚动条 ---- */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   手机端重设计 v1.0（PRD 落地）2026-07-15
   信息架构：底部 5 Tab + "我的"聚合页
   全局：表格横向滚动 / 输入框 16px / 弹窗底部抽屉 / 逐页美化
   ============================================================ */

/* ---- "我的"页：桌面端永不显示（仅移动端聚合入口）---- */
#page-mine { display: none; }
@media (max-width: 767px) {
    #page-mine.active { display: block; }
}

/* ==================== "我的"聚合页组件 ==================== */
.mine-user-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
}
.mine-user-guest { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mine-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #C7000B 0%, #E84D54 100%);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mine-avatar .icon { width: 26px; height: 26px; color: #fff; }
.mine-avatar-guest { background: linear-gradient(135deg, #9AA0AE 0%, #C2C7D0 100%); }
.mine-guest-text { flex: 1; min-width: 0; }
.mine-guest-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.mine-guest-sub { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }
.mine-login-btn {
    width: 100%; margin-top: 4px;
    height: 44px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #C7000B 0%, #E84D54 100%);
    color: #fff; font-size: 0.95rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 12px rgba(199,0,11,0.25);
}
.mine-login-btn:active { transform: scale(0.98); }

.mine-user-logged { display: flex; align-items: center; gap: 14px; }
.mine-user-info { flex: 1; min-width: 0; }
.mine-user-name { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.mine-user-email { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-logout-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--border-color); border-radius: 10px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.mine-logout-btn .icon { width: 18px; height: 18px; }
.mine-logout-btn:active { background: var(--neutral-300); }

/* 功能入口列表 */
.mine-menu-list {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
}
.mine-menu-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 15px 16px;
    background: transparent; border: none;
    border-bottom: 1px solid var(--divider);
    cursor: pointer; text-align: left;
}
.mine-menu-item:last-child { border-bottom: none; }
.mine-menu-item:active { background: var(--neutral-300); }
.mine-menu-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mine-menu-icon .icon { width: 20px; height: 20px; color: #fff; }
.mine-icon-blue { background: linear-gradient(135deg, #2F80ED, #56A5FF); }
.mine-icon-green { background: linear-gradient(135deg, #17A58B, #38C9AC); }
.mine-icon-gold { background: linear-gradient(135deg, #D4AC0D, #F2CB3A); }
.mine-icon-gray { background: linear-gradient(135deg, #6B7280, #9AA0AE); }
.mine-menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mine-menu-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.mine-menu-desc { font-size: 0.75rem; color: var(--text-secondary); }
.mine-menu-arrow { color: var(--text-tertiary); font-size: 1.3rem; flex-shrink: 0; }

/* 主题切换块 */
.mine-theme-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
}
.mine-block-title { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.mine-theme-row { display: flex; gap: 16px; justify-content: flex-start; }
.mine-theme-dot {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.15s ease;
}
.mine-theme-dot.active { border-color: var(--text-primary); transform: scale(1.1); }
.mine-theme-dot:active { transform: scale(0.95); }

/* 底部信息 */
.mine-footer { text-align: center; padding: 8px 0 4px; }
.mine-footer-status { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.mine-footer-status b { color: var(--text-primary); }
.mine-footer-version { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 4px; }
.mine-footer-icp { font-size: 0.72rem; color: var(--text-tertiary); text-decoration: none; }
.mine-footer-icp:active { text-decoration: underline; }

/* ==================== 全局移动端修复 ==================== */
@media (max-width: 767px) {
    /* ---- 核心修复：App Shell 模式，唯一滚动容器 = .main-content ---- */
    html {
        height: 100% !important;
        overflow: hidden !important;
        position: relative;
    }
    body {
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    .app-shell {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column;
    }
    .sidebar { display: none !important; flex-shrink: 0; }
    .app-main {
        min-height: 0 !important;
        height: 0 !important;
        flex: 1 1 0% !important;     /* 填满剩余空间，不超 */
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column;
    }
    .topbar { flex-shrink: 0; }
    .main-content {
        min-height: 0 !important;
        height: 0 !important;
        flex: 1 1 0% !important;     /* 唯一可滚动区：填满 app-main 剩余空间 */
        overflow-y: auto !important;
        overflow-x: clip;
        padding-top: var(--spacing-sm) !important;  /* 原 spacing-xl(32px) → 8px */
        padding-left: var(--spacing-md) !important;
        padding-right: var(--spacing-md) !important;
        padding-bottom: 70px !important;      /* 给底部固定导航留空间 */
        -webkit-overflow-scrolling: touch;
    }
    .page.active { min-height: 0 !important; height: auto !important; }

    /* ---- card spacing tighten ---- */
    .content-card {
        padding: 14px 16px !important;     /* 原 24px → 14/16px */
        margin-bottom: 12px !important;     /* 原 24px → 12px */
        border-radius: 12px !important;
    }
    #page-solution > .content-card:first-child {
        margin-bottom: 10px !important;
        padding: 14px 16px 10px !important;
    }

    /* ---- 表格横向滚动包裹（防截断）---- */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 6px 0;
        border-radius: 8px;
    }
    .table-wrapper > table { min-width: 480px; }

    /* ---- 结果区表格：移动端转为卡片列表（无需横滑！）---- */
    .result-content {
        overflow-x: hidden;
    }
    /* 原表格隐藏，由JS替换为卡片 */
    .result-content table.mobile-transformed {
        display: none !important;
    }

    /* ====== 表格→卡片布局样式 ====== */
    .mobile-table-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 10px;
    }
    .mobile-table-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 10px !important;
        padding: 10px 12px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    }
    /* 所有卡片统一红色左边框 */
    .mobile-table-card {
        border-left: 3px solid var(--primary-color) !important;
    }
    .mobile-table-card:first-child {
        /* 首张卡片无额外样式，统一处理 */
    }
    .mobile-table-item {
        display: flex;
        flex-direction: column;
        padding: 5px 0;
        border-bottom: 1px solid rgba(0,0,0,0.04);
    }
    .mobile-table-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .mobile-table-label {
        font-size: 0.7rem !important;
        color: var(--text-tertiary) !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 2px;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 0;
    }
    .mobile-table-value {
        font-size: 0.85rem !important;
        color: var(--text-primary) !important;
        line-height: 1.45 !important;
        word-break: break-word;
    }
    .mobile-table-value p,
    .mobile-table-value ul,
    .mobile-table-value ol {
        margin: 4px 0 !important;
        padding-left: 16px !important;
        font-size: inherit !important;
    }

    /* 结果区整体紧凑化 */
    .result-content.content-card {
        padding: 12px 14px !important;
    }
    .result-content h2,
    .result-content h3 {
        font-size: 1.05rem !important;
        margin-top: 10px !important;
        margin-bottom: 6px !important;
    }
    .result-content p,
    .result-content li {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    .result-content ul,
    .result-content ol {
        padding-left: 18px !important;
        margin-bottom: 8px !important;
    }

    /* ---- 参考资料：列表→卡片化（和表格卡片统一风格）---- */
    .result-content > ul,
    .result-content > ol {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding-left: 0 !important;
        margin-top: 8px !important;
        margin-bottom: 10px !important;
        list-style: none !important;   /* 去掉圆点 */
    }
    .result-content > ul > li,
    .result-content > ol > li {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        border-left: 3px solid var(--primary-color) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;      /* 去掉原有间距，用 gap 控制 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    }
    /* 参考资料里的 code 标签（来源/行业/类型）紧凑化 */
    .result-content > ul > li code,
    .result-content > ol > li code {
        background: var(--neutral-100) !important;
        color: var(--text-secondary) !important;
        font-size: 0.75rem !important;
        padding: 1px 5px !important;
        border-radius: 4px !important;
    }

    /* ---- 输入框统一 16px 防 iOS 缩放 ---- */
    input, textarea, select,
    .textarea-input,
    .follow-up-input-area textarea,
    .setting-select,
    #kb-editor-content,
    #ai-input {
        font-size: 16px !important;
    }

    /* ---- 弹窗统一底部抽屉 ---- */
    .product-modal,
    .kb-editor-modal,
    .auth-modal,
    .history-compare-content,
    .history-modal-content,
    .confirm-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
    }
    .product-modal-overlay,
    .kb-editor-overlay,
    .confirm-overlay,
    .history-compare-overlay { align-items: flex-end !important; }

    /* 关闭按钮加大点击区 */
    .product-modal-close,
    .ai-close-btn,
    .kb-editor-close,
    .confirm-close,
    .btn-close {
        min-width: 40px; min-height: 40px;
    }

    /* ---- 历史记录 tab 横向滚动，不裁剪 ---- */
    .history-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        scrollbar-width: none;
    }
    .history-tabs::-webkit-scrollbar { display: none; }
    .history-tab { flex-shrink: 0; white-space: nowrap; }

    /* ---- 模式切换按钮组：紧凑排列 ---- */
    .mode-btn-group {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        margin: 6px 0 10px !important;  /* 收紧上下间距 */
    }
    .mode-btn-group .mode-btn { padding: 8px 14px !important; font-size: 0.82rem !important; }

    /* ---- 精准搜索提示文字 ---- */
    .mode-btn-group + * { margin-top: 4px !important; }
    [class*="精准"], .match-form-card > p:last-of-type {
        font-size: 0.78rem !important;
        margin: 2px 0 8px !important;
        color: var(--text-tertiary) !important;
    }

    /* ---- 主操作按钮全宽 + 紧凑间距 ---- */
    .result-actions .btn,
    .settings-actions .btn,
    .match-btn,
    #start-match-btn {
        width: 100%;
        margin-bottom: 8px !important;   /* 按钮之间收紧 */
        padding: 12px 16px !important;   /* 高度稍缩 */
    }
    #start-match-btn { padding: 14px 20px !important; }  /* 主按钮略高保持醒目 */

    /* ---- AI 输入框紧凑化 ---- */
    .ai-input-box {
        border-radius: 12px !important;
        padding: 8px 12px !important;
    }
    .ai-input-box textarea {
        min-height: 60px !important;     /* 缩小最小高度（原 24px 但视觉上撑得高） */
        max-height: 120px !important;
        font-size: 15px !important;      /* 接近 16px 防缩放但略小一点 */
    }

    /* ---- 方案页标题卡片紧凑 ---- */
    #page-solution > .content-card:first-child h2 {
        font-size: 1.15rem !important;    /* 原更大 */
        margin-bottom: 4px !important;
    }
    #page-solution > .content-card:first-child p {
        font-size: 0.82rem !important;
        margin: 0 !important;
        line-height: 1.35 !important;
    }

    /* ---- 客户需求描述 label ---- */
    #page-solution label, .demand-section label {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
    }

    /* ---- 方案页/竞品页：标题横幅紧凑化 ---- */
    #page-solution .page-header,
    #page-competitor .page-header {
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }
    #page-solution .page-header h2,
    #page-solution .page-header .page-title,
    #page-competitor .page-header h2,
    #page-competitor .page-header .page-title {
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
    }
    #page-solution .page-header p,
    #page-solution .page-header .page-subtitle,
    #page-competitor .page-header p,
    #page-competitor .page-header .page-subtitle {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        margin-top: 2px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ---- 匹配页表单紧凑化 ---- */
    #page-solution .content-card .form-group {
        margin-bottom: 10px !important;
    }
    #page-solution .textarea-input {
        min-height: 100px !important;     /* 原180px → 100px */
        max-height: 160px !important;
        padding: 10px 12px !important;
        font-size: 15px !important;       /* 接近16px防缩放 */
        border-radius: 8px !important;
    }
    #page-solution .char-counter {
        font-size: 0.7rem !important;
        margin-top: 2px !important;
    }

    /* ---- 匹配模式切换栏紧凑化 ---- */
    #page-solution .mode-toggle-bar {
        margin-top: 8px !important;
        padding: 4px 0 !important;
        gap: 6px !important;
    }
    #page-solution .mode-toggle {
        padding: 2px !important;
        gap: 2px !important;
    }
    #page-solution .mode-option {
        padding: 5px 10px !important;
        font-size: 0.78rem !important;
        border-radius: 14px !important;
    }
    #page-solution .mode-badge {
        font-size: 8px !important;
        padding: 1px 4px !important;
    }
    #page-solution .mode-hint {
        font-size: 0.7rem !important;
        margin-top: 2px !important;
    }

    /* ---- 竞品页表单紧凑化 ---- */
    #page-competitor .select-row {
        gap: 10px !important;             /* 原 spacing-lg(24px) → 10px */
        margin-bottom: 10px !important;
    }
    #page-competitor .form-group {
        margin-bottom: 8px !important;
    }
    #page-competitor .select-input {
        padding: 10px 36px 10px 12px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    /* ---- 按钮组：主按钮全宽 + 次按钮小巧 ---- */
    #page-solution .button-group,
    #page-competitor .button-group {
        flex-direction: column !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }
    #page-solution .button-group .btn-primary,
    #page-competitor .button-group .btn-primary {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
    }
    #page-solution .button-group .btn-secondary,
    #page-competitor .button-group .btn-secondary {
        width: 100% !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    /* ---- 成就卡片 2 列（原 4 列太挤）---- */
    .achievement-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ---- 仪表盘 KPI 标签允许换行，不截断 ---- */
    .kpi-label { white-space: normal !important; line-height: 1.3; }

    /* ---- Toast 移动端约束 ---- */
    #toast-container { max-width: 90vw; left: 50%; transform: translateX(-50%); right: auto; }
    #toast-container .toast { max-width: 90vw; }
}

/* ==================== 方案详情弹窗移动端适配 ==================== */
@media (max-width: 767px) {
    /* 弹窗全屏化，留顶部标题栏空间 */
    #history-detail-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .detail-modal {
        width: 100vw !important;
        max-width: none !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        overflow: hidden;
    }

    /* 操作按钮区：紧凑横向排列 */
    .detail-action-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 6px !important;
        padding: 10px 12px !important;
    }

    .detail-action-btns .btn {
        flex: 1 1 calc(45% - 3px);
        min-width: 0;
        font-size: 0.8rem;
        padding: 7px 4px !important;
        white-space: nowrap;
    }

    /* 追问区域优化 */
    .followup-section {
        margin-top: 8px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .followup-title {
        font-size: 0.85rem !important;
        margin-bottom: 6px !important;
    }

    .followup-input-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .followup-input {
        min-height: 60px !important;
        max-height: 100px !important;
        font-size: 0.88rem !important;
    }

    .followup-send-btn {
        width: 100% !important;
        padding: 10px !important;
    }

    /* 方案内容区可滚动 */
    .detail-body-wrapper {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .detail-section {
        margin-bottom: 10px !important;
    }

    .detail-section-label {
        font-size: 0.78rem !important;
    }
}

/* ==================== 超小屏微调 ==================== */
@media (max-width: 480px) {
    .main-content { padding-left: 12px !important; padding-right: 12px !important; }
    .mobile-nav-item { font-size: 0.65rem; }
    .mine-menu-desc { font-size: 0.72rem; }
    .table-wrapper > table { min-width: 440px; }
}
@media (max-width: 375px) {
    .topbar-ai-bar .ai-placeholder { font-size: 0.65rem !important; }
    .table-wrapper > table { min-width: 400px; }
}

/* ==================== 关于我们·案例展示 ==================== */
.case-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1.5px dashed var(--border-secondary, #d3d1c7);
    background: var(--neutral-50, #fafafa);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--text-tertiary, #888);
    font-size: 0.82rem; line-height: 1.6; padding: 16px; box-sizing: border-box;
}
.case-video { width: 100%; border-radius: 8px; display: block; aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.case-hint { margin-top: 12px; font-size: 0.78rem; color: var(--text-tertiary, #888); line-height: 1.6; }
.case-hint code { background: var(--neutral-100, #f1efea); padding: 1px 5px; border-radius: 4px; font-size: 0.76rem; }

/* ==================== 关于我们页面 ==================== */
#page-about .about-card { margin-bottom: 20px; }
.about-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-strong, #1f2329);
    margin: 0 0 14px;
}
.about-section-title .icon { width: 1.2em; height: 1.2em; color: var(--primary-color); }
.about-text {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text-secondary, #4b5563);
    margin: 0 0 10px;
}
.about-text strong { color: var(--text-strong, #1f2329); font-weight: 600; }
.about-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary, #4b5563);
    background: var(--primary-light, #fdecec);
    border-left: 3px solid var(--primary-color);
    border-radius: 6px;
}
.about-note-icon { flex: none; width: 1.1em; height: 1.1em; margin-top: 2px; color: var(--primary-color); }

.about-author { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.about-author-avatar {
    flex: none;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary-light, #fdecec);
    color: var(--primary-color);
}
.about-author-avatar .icon { width: 28px; height: 28px; }
.about-author-name { font-size: 1.1rem; font-weight: 700; color: var(--text-strong, #1f2329); }
.about-author-school { font-size: 0.85rem; color: var(--text-secondary, #4b5563); margin-top: 2px; }

.about-contact-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.about-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card, #fff);
    transition: all 0.18s ease;
}
.about-contact-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(199,0,11,0.12);
    transform: translateY(-1px);
}
.about-contact-icon {
    flex: none;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--primary-light, #fdecec);
    color: var(--primary-color);
}
.about-contact-icon .icon { width: 20px; height: 20px; }
.about-github-icon { fill: currentColor; stroke: none; }
.about-contact-text { display: flex; flex-direction: column; flex: 1; }
.about-contact-label { font-size: 0.78rem; color: var(--text-secondary, #4b5563); }
.about-contact-value { font-size: 0.95rem; font-weight: 600; color: var(--text-strong, #1f2329); }
.about-contact-arrow { color: var(--text-secondary, #9ca3af); font-size: 1.1rem; }

@media (max-width: 480px) {
    .about-author-avatar { width: 48px; height: 48px; }
    .about-author-avatar .icon { width: 24px; height: 24px; }
}

/* ===== 语音输入麦克风按钮（华为红主题） ===== */
.voice-field {
    position: relative;
    width: 100%;
}
.voice-mic-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e2e4ea);
    background: var(--bg-card, #fff);
    color: var(--primary-color, #C7000B);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.voice-mic-btn:hover { border-color: var(--primary-color, #C7000B); }
.voice-mic-btn svg { width: 16px; height: 16px; pointer-events: none; }
.voice-mic-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--bg-muted, #f2f3f5);
    color: var(--text-muted, #86909c);
    border-color: var(--border-color, #e2e4ea);
    animation: none;
}
.voice-mic-btn.is-disabled:hover { border-color: var(--border-color, #e2e4ea); }
.voice-mic-btn.listening {
    background: var(--primary-color, #C7000B);
    color: #fff;
    border-color: var(--primary-color, #C7000B);
    animation: voicePulse 1.2s infinite;
}
@keyframes voicePulse {
    0%   { box-shadow: 0 0 0 0 rgba(199, 0, 11, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(199, 0, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(199, 0, 11, 0); }
}
/* 包裹式：为麦克风预留右侧空间，避免文字被遮 */
.voice-field .textarea-input,
.voice-field input,
.voice-field textarea { padding-right: 42px; }
/* Agent 输入框内联麦克风（与发送按钮同排，绝对定位不破坏 flex） */
.ai-input-box { position: relative; }
.ai-input-box .voice-mic-btn {
    top: 50%; right: auto; bottom: auto; left: 10px;
    transform: translateY(-50%);
}
#ai-input.has-voice { padding-left: 42px; }

/* 追问/竞品追问输入区：语音 wrap 后 .voice-field 需撑满 flex 剩余空间 */
.follow-up-input-area > .voice-field {
    flex: 1;
    display: flex;
    align-items: stretch;
}
.follow-up-input-area > .voice-field > textarea {
    flex: 1;
    min-height: 52px;
}

/* ===== 方案分享弹窗 ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100; /* 高于 history-modal(2000)，确保从历史详情内打开分享时不被遮挡 */
    padding: 16px;
}

/* ===== 客户档案弹窗（结构化表单，复用 history-modal 容器） ===== */
.client-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-bottom: 14px;
}
.client-form-grid .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.client-form-grid .form-row.full {
    grid-column: 1 / -1;
}
/* 全宽行内的输入框也要统一尺寸（!important 确保不被全局规则覆盖） */
.client-form-grid .form-row.full input,
.client-form-grid .form-row.full select,
.client-form-grid .form-row.full textarea,
#cf-pain_points,
#cf-decision_chain,
#cf-note {
    width: 100% !important;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid #e3e3e8 !important;
    font-size: 13px !important;
    font-family: inherit !important;
    background: #fff !important;
    color: #222 !important;
    box-sizing: border-box !important;
}
.client-form-grid .form-row.full textarea,
#cf-pain_points,
#cf-note {
    min-height: 68px !important;
    height: auto !important;
    resize: vertical !important;
}
.client-form-grid label {
    font-size: 12px;
    color: #555;
    font-weight: 600;
}
.client-form-grid input,
.client-form-grid select,
.client-form-grid textarea {
    border: 1px solid #e3e3e8;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #222;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.client-form-grid input:focus,
.client-form-grid select:focus,
.client-form-grid textarea:focus {
    outline: none;
    border-color: #C7000B;
    box-shadow: 0 0 0 2px rgba(199, 0, 11, 0.15);
}
/* 覆盖全局 :focus-visible 双环，客户表单内只用单层细环 */
.client-form-grid input:focus-visible,
.client-form-grid select:focus-visible,
.client-form-grid textarea:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(199, 0, 11, 0.15) !important;
}
.client-form-grid textarea {
    resize: vertical;
    min-height: 68px;
    height: auto;
}

/* 手机端：客户表单单列排版 */
@media (max-width: 768px) {
    .client-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .client-form-grid .form-row.full {
        grid-column: auto;
    }
}

.history-modal-content .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid #f0f0f0;
}
.history-modal-content .modal-footer .btn-primary {
    background: #C7000B;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
}
.history-modal-content .modal-footer .btn-primary:hover {
    background: #a80009;
}
/* 客户弹窗取消按钮：与保存按钮同尺寸同圆角 */
.history-modal-content .modal-footer .btn-secondary {
    background: #fff;
    color: var(--neutral-700);
    border: 1px solid var(--neutral-300);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
}
.history-modal-content .modal-footer .btn-secondary:hover {
    background: var(--neutral-100);
    border-color: var(--neutral-500);
}

/* ===== 历史记录：按客户筛选 + 客户标签 + 详情关联客户 ===== */
.history-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    font-size: 13px;
    color: var(--text-secondary, #666);
}
.history-filter-label .icon {
    width: 15px;
    height: 15px;
    color: var(--huawei-red, #C7000B);
}
.history-client-filter {
    margin-left: 6px;
    padding: 6px 10px;
    border: 1px solid #e2e2e5;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary, #1f2329);
    background: #fff;
    cursor: pointer;
    min-width: 150px;
}
.history-client-filter:focus {
    outline: none;
    border-color: var(--huawei-red, #C7000B);
    box-shadow: 0 0 0 3px rgba(199, 0, 11, 0.12);
}

/* 列表项客户标签 */
.history-item-client {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    background: rgba(199, 0, 11, 0.08);
    color: var(--huawei-red, #C7000B);
    border: 1px solid rgba(199, 0, 11, 0.18);
    margin-left: 6px;
    white-space: nowrap;
}
.history-item-client .icon {
    width: 12px;
    height: 12px;
}

/* 详情：关联客户行 */
.detail-client-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.detail-client-select {
    flex: 1;
    min-width: 180px;
    padding: 8px 10px;
    border: 1px solid #e2e2e5;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary, #1f2329);
    background: #fff;
    cursor: pointer;
    height: 36px;
}
.detail-client-select:focus {
    outline: none;
    border-color: var(--huawei-red, #C7000B);
    box-shadow: 0 0 0 3px rgba(199, 0, 11, 0.12);
}

/* ===== 客户档案管理弹窗（轻量全景） ===== */
.client-manage-content {
    max-width: 880px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}
.client-manage-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.client-manage-hint {
    font-size: 12px;
    color: var(--text-muted, #999);
}
.client-manage-body {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.client-manage-list {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
    overflow-y: auto;
    padding: 8px;
    background: #fafafa;
}
.client-manage-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    border: 1px solid transparent;
}
.client-manage-item:hover {
    background: #fff;
    border-color: #eee;
}
.client-manage-item.active {
    background: #fff;
    border-color: var(--huawei-red, #C7000B);
    box-shadow: 0 0 0 2px rgba(199, 0, 11, 0.08);
}
.client-manage-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1f2329);
}
.client-manage-item-meta {
    font-size: 11px;
    color: var(--text-muted, #999);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.client-manage-detail {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}
.client-manage-empty {
    color: var(--text-muted, #999);
    font-size: 13px;
    padding: 24px;
    text-align: center;
}
.client-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.client-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #1f2329);
}
.client-detail-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.client-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin-bottom: 18px;
}
.client-detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.client-detail-label {
    font-size: 11px;
    color: var(--text-muted, #999);
}
.client-detail-value {
    font-size: 13px;
    color: var(--text-primary, #1f2329);
    word-break: break-word;
}
.client-detail-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    margin: 6px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}
.client-solution-item {
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.client-solution-item:hover {
    border-color: var(--huawei-red, #C7000B);
    box-shadow: 0 0 0 2px rgba(199, 0, 11, 0.08);
}
.client-solution-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1f2329);
}
.client-solution-meta {
    font-size: 11px;
    color: var(--text-muted, #999);
    margin-top: 3px;
}
.client-solution-empty {
    font-size: 12px;
    color: var(--text-muted, #999);
    padding: 8px 0;
}

/* ===== 客户管理页面（一级入口：列表 + 详情，P6） ===== */
.clients-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.clients-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
}
.clients-search .icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-muted, #999);
    pointer-events: none;
}
.clients-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--neutral-500, #DCE0E6);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: var(--text-primary, #1f2329);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.clients-search input:focus {
    outline: none;
    border-color: var(--primary-color, #C7000B);
    box-shadow: 0 0 0 2px rgba(199, 0, 11, 0.12);
}
.clients-filter-select {
    height: 38px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--neutral-500, #DCE0E6);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
    color: var(--text-primary, #1f2329);
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
.clients-filter-select:focus {
    outline: none;
    border-color: var(--primary-color, #C7000B);
}
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.clients-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted, #999);
    font-size: 13px;
}
.client-card {
    background: #fff;
    border: 1px solid var(--neutral-500, #DCE0E6);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.client-card:hover {
    border-color: var(--primary-color, #C7000B);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.04));
    transform: translateY(-2px);
}
.client-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.client-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-stage-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--neutral-300, #F7F8FA);
    color: var(--text-secondary, #555);
}
.stage-初步接触 { background: #E8F3FF; color: #165DFF; }
.stage-需求调研 { background: #E8F3FF; color: #165DFF; }
.stage-方案报价 { background: #FFF3E8; color: #FF7D00; }
.stage-商务谈判 { background: #FFF3E8; color: #FF7D00; }
.stage-已成交 { background: #E8FFEA; color: #00B42A; }
.stage-已流失 { background: #FFECE8; color: #F53F3F; }
.client-card-meta {
    font-size: 12px;
    color: var(--text-secondary, #555);
    margin-bottom: 4px;
}
.client-card-contact {
    font-size: 12px;
    color: var(--text-muted, #999);
    margin-bottom: 12px;
}
.client-card-foot {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--neutral-400, #F2F3F5);
    padding-top: 10px;
}
.client-card-go {
    border: none;
    background: transparent;
    color: var(--primary-color, #C7000B);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.client-card-go:hover {
    text-decoration: underline;
}
.client-detail-view {
    max-width: 880px;
}
#client-detail-back {
    margin-bottom: 16px;
}
.client-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.client-detail-title-wrap {
    min-width: 0;
}
.client-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #1f2329);
}
.client-detail-sub {
    font-size: 13px;
    color: var(--text-muted, #999);
    margin-top: 4px;
}
.client-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.client-detail-stage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--neutral-300, #F7F8FA);
    border-radius: 8px;
}
.client-detail-stage-row .client-detail-label {
    font-size: 13px;
    color: var(--text-secondary, #555);
}
.client-detail-stage-select {
    height: 34px;
    padding: 0 32px 0 10px;
    border: 1px solid var(--neutral-500, #DCE0E6);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
    color: var(--text-primary, #1f2329);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.client-detail-stage-select:focus {
    outline: none;
    border-color: var(--primary-color, #C7000B);
}
.client-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin-bottom: 20px;
}
@media (max-width: 560px) {
    .client-detail-grid { grid-template-columns: 1fr; }
    .clients-grid { grid-template-columns: 1fr; }
}
.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 460px;
    width: 100%;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
}
.modal-close:hover { color: var(--text-primary); }
.share-modal-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.share-modal-tip { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.share-link-row { display: flex; gap: 8px; }
.share-link-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border, #E5E6EB);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg, #F5F6F8);
}
.share-qr-wrap { text-align: center; margin-top: 20px; }
.share-qr-inner {
    display: inline-block;
    border: 2px solid var(--primary-color, #C7000B);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}
#share-qr svg { width: 176px; height: 176px; display: block; }
.share-qr-tip { color: var(--text-muted); font-size: 13px; margin-top: 10px; }

/* 移动端分享弹窗：隐藏链接输入框，复制按钮全宽 */
@media (max-width: 600px) {
    .share-link-input { display: none; }
    .share-link-row { display: block; }
    .share-link-row #share-copy-btn { width: 100%; }
}

/* ===== 登录续期提示条（滑动续期 / 到期提示 / 优雅掉线） ===== */
.auth-expire-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.auth-expire-text { flex: 1; }
.auth-expire-soon-banner {
    background: #fff8e1;
    color: #8a6d00;
    border-bottom: 1px solid #ffe08a;
}
.auth-expired-banner {
    background: #fdecea;
    color: #b71c1c;
    border-bottom: 1px solid #f5c6cb;
}
.auth-expire-keep-btn,
.auth-expire-login-btn {
    flex: 0 0 auto;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    background: #C7000B;
    transition: background 0.15s ease;
}
.auth-expire-keep-btn:hover,
.auth-expire-login-btn:hover { background: #a30009; }