/* ===== 全局样式 - 深色科技风格 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 主色调 - 青蓝色科技风 */
    --primary-cyan: #00D4FF;
    --primary-cyan-dark: #00A8CC;
    --primary-cyan-light: #5CE1E6;
    --primary-blue: #0066FF;
    --primary-blue-dark: #0052CC;
    
    /* 深色背景 */
    --bg-darkest: #0A0E17;
    --bg-darker: #0F1523;
    --bg-dark: #151D2E;
    --bg-card: #1A2438;
    --bg-card-hover: #1E2A42;
    
    /* 边框 */
    --border-color: #2A3A5A;
    --border-light: #1E2D47;
    --border-glow: rgba(0, 212, 255, 0.3);
    
    /* 文字颜色 */
    --text-primary: #FFFFFF;
    --text-secondary: #A8B5CC;
    --text-tertiary: #6B7A99;
    --text-muted: #4A5875;
    
    /* 状态色 */
    --success-color: #00E676;
    --warning-color: #FFB020;
    --error-color: #FF5252;
    --info-color: #448AFF;
    
    /* 渐变 */
    --gradient-cyan: linear-gradient(135deg, #00D4FF 0%, #0066FF 100%);
    --gradient-glow: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 102, 255, 0.2) 100%);
    
    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.15);
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg-darkest);
    /*color: var(--text-primary);*/
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 页面切换 */
.page {
    display: none;
    flex: 1;
}

.page.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

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

/* ===== 顶部导航 ===== */
.top-nav {
    background: rgba(15, 21, 35, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left { display: flex; align-items: center; }

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
}

.logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon svg { width: 100%; height: 100%; }

.logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.logo-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 8px 18px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.nav-link:hover {
    color: var(--primary-cyan);
    background: rgba(0, 212, 255, 0.08);
}

.nav-link.active {
    color: var(--primary-cyan);
    background: rgba(0, 212, 255, 0.1);
}

.btn-login {
    margin-left: 12px;
    padding: 8px 22px;
    background: var(--gradient-cyan);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.btn-login svg { width: 16px; height: 16px; }

/* ===== 弹窗遮罩 ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: overlayFade 0.25s ease;
}

.modal-overlay.active {
    display: flex;
}

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

/* ===== 弹窗卡片 ===== */
.modal-card {
    width: 100%;
    max-width: 420px;
    background: #131a22;
    border-radius: 24px;
    border: 1px solid rgba(0, 212, 255, 0.15);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 212, 255, 0.05) inset;
    overflow: hidden;
    animation: modalSlide 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes modalSlide {
    from {
        transform: scale(0.94) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ===== 头部 ===== */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-header .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header .header-left svg {
    width: 20px;
    height: 20px;
    color: #00d4ff;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.modal-header .header-title {
    font-weight: 700;
    font-size: 16px;
    color: #eef3f9;
    letter-spacing: 0.3px;
}

.modal-header .close-btn {
    background: none;
    border: none;
    color: #5f7188;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s, transform 0.15s;
    line-height: 1;
}

.modal-header .close-btn:hover {
    color: #b0c4dd;
    transform: rotate(90deg);
}

.modal-header .close-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    display: block;
}

/* ===== 登录方式 Tab (验证码 / 密码) ===== */
.login-tab-bar {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 20px 24px;
    background: #1e2732;
    border-radius: 10px;
    border: 1px solid #2a3442;
}

.login-tab-btn {
    flex: 1;
    padding: 8px 0;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #7e8c9e;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.2px;
}

.login-tab-btn.active {
    background: #00d4ff;
    color: #0b0e14;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25);
}

.login-tab-btn:hover:not(.active) {
    color: #b0c4dd;
}

/* ===== 内容区 ===== */
.modal-body {
    padding: 0 24px 24px;
}

.modal-body .form-group {
    margin-bottom: 18px;
}

.modal-body .form-group:last-of-type {
    margin-bottom: 0;
}

.modal-body label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #8a9aae;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.modal-body label .required {
    color: #ff6b7a;
    margin-left: 2px;
}

.modal-body .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #1e2732;
    border-radius: 12px;
    border: 1px solid #2a3442;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-body .input-wrap:focus-within {
    border-color: #00d4ff;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.modal-body .input-wrap .input-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 14px;
    color: #5f7188;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: color 0.2s;
}

.modal-body .input-wrap:focus-within .input-icon {
    color: #00d4ff;
}

.modal-body .input-wrap input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 12px 16px 12px 12px;
    font-size: 15px;
    color: #eaf0f7;
    outline: none;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.modal-body .input-wrap input::placeholder {
    color: #5f7188;
    font-weight: 300;
    font-size: 14px;
}

/* ===== 验证码行 ===== */
.captcha-row {
    display: flex;
    gap: 10px;
}

.captcha-row .input-wrap {
    flex: 1;
}

.captcha-row .input-wrap input {
    padding-left: 14px;
}

.captcha-row .btn-captcha {
    flex-shrink: 0;
    padding: 0 16px;
    background: #1e2732;
    border: 1px solid #2a3442;
    border-radius: 12px;
    color: #a5b6cc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 96px;
    letter-spacing: 0.3px;
}

.captcha-row .btn-captcha:hover {
    border-color: #00d4ff;
    color: #eaf0f7;
    background: #28323f;
}

.captcha-row .btn-captcha:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #2a3442;
    color: #5f7188;
}

/* ===== 密码显示切换 ===== */
.toggle-pwd-btn {
    flex-shrink: 0;
    margin-right: 14px;
    background: none;
    border: none;
    color: #5f7188;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
    line-height: 1;
}

.toggle-pwd-btn:hover {
    color: #b0c4dd;
}

.toggle-pwd-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    display: block;
}

/* ===== 提交按钮 ===== */
.btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00b8e6 0%, #0095c7 100%);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #0b0e14;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.1s;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
    margin-top: 20px;
}

.btn-submit:hover {
    box-shadow: 0 8px 22px rgba(0, 212, 255, 0.35);
    transform: translateY(-1px);
}

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

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== Tab 内容容器 ===== */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ===== 页面容器 (登录/注册切换) ===== */
.page-container {
    display: none;
}

.page-container.active {
    display: block;
}

/* ===== 账号类型切换 (注册) ===== */
.account-type-row {
    display: flex;
    gap: 10px;
}

.account-type-row .type-btn {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: 1px solid #2a3442;
    border-radius: 10px;
    color: #8a9aae;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.account-type-row .type-btn.active {
    background: #00d4ff;
    border-color: #00d4ff;
    color: #0b0e14;
}

.account-type-row .type-btn:hover:not(.active) {
    border-color: #00d4ff;
    color: #eaf0f7;
}

/* ===== 底部切换链接 ===== */
.switch-link {
    text-align: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.switch-link p {
    font-size: 13px;
    color: #7e8c9e;
}

.switch-link .link-btn {
    background: none;
    border: none;
    color: #00d4ff;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    padding: 0 4px;
    transition: color 0.2s;
}

.switch-link .link-btn:hover {
    color: #66e5ff;
}

/* ===== Toast 提示 ===== */
.toast-msg {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e2732;
    border: 1px solid #2a3442;
    border-radius: 14px;
    padding: 12px 28px;
    color: #eaf0f7;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 99999;
    backdrop-filter: blur(8px);
    letter-spacing: 0.3px;
    border-left: 3px solid #00d4ff;
    animation: toastIn 0.3s ease;
    transition: opacity 0.4s;
}

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

/* ===== 响应式 ===== */
@media (max-width: 480px) {
    .modal-card {
        max-width: 100%;
        border-radius: 16px;
    }
    .modal-header {
        padding: 14px 18px;
    }
    .modal-body {
        padding: 0 18px 18px;
    }
    .login-tab-bar {
        margin: 16px 18px;
    }
    .demo-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    .captcha-row .btn-captcha {
        min-width: 80px;
        font-size: 12px;
        padding: 0 12px;
    }
}

/* ===== 首页 ===== */
.home-container {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* Hero 区域 */
.hero-section {
    position: relative;
    padding: 60px 24px 40px;
    text-align: center;
    overflow: hidden;
    color: var(--text-primary);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.glow-1 {
    width: 300px;
    height: 300px;
    background: rgba(0, 212, 255, 0.15);
    top: -100px;
    left: 10%;
}

.glow-2 {
    width: 250px;
    height: 250px;
    background: rgba(0, 102, 255, 0.12);
    top: -50px;
    right: 10%;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 13px;
    color: var(--primary-cyan);
    margin-bottom: 24px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background: var(--primary-cyan);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-title {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.title-cyan {
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    font-weight: 400;
}

.hero-subtitle .highlight {
    color: var(--primary-cyan);
    font-weight: 500;
}

/* 检测卡片 */
.detection-card {
    margin: 0 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.card-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 102, 255, 0.05) 100%);
    border-bottom: 1px solid var(--border-light);
}

.card-header-bar h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-tag {
    padding: 6px 14px;
    background: rgba(0, 230, 118, 0.1);
    color: var(--success-color);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(0, 230, 118, 0.2);
}

.form-section {
    padding: 28px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.label-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-icon svg { width: 100%; height: 100%; }

.required {
    color: var(--error-color);
    font-weight: 700;
}

.label-optional {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 13px;
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    outline: none;
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input:hover {
    border-color: var(--primary-cyan-dark);
}

.form-input:focus {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.form-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.form-tip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--warning-color);
}

/* 数量输入框 */
.count-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 160px;
}

.count-input {
    padding-right: 40px !important;
    text-align: center;
}

.count-input::-webkit-outer-spin-button,
.count-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.count-input[type=number] {
    -moz-appearance: textfield;
}

.count-unit {
    position: absolute;
    right: 15px;
    color: var(--text-tertiary);
    font-size: 14px;
    pointer-events: none;
}

/* 品牌知识库按钮 */
.kb-actions {
    display: flex;
    gap: 12px;
}

.btn-kb-upload,
.btn-kb-template {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.btn-kb-upload {
    background: var(--gradient-cyan);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.btn-kb-upload:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.btn-kb-template {
    background: var(--bg-dark);
    color: var(--text-secondary);
}

.btn-kb-template:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.btn-kb-upload svg,
.btn-kb-template svg {
    width: 16px;
    height: 16px;
}

/* 知识库已上传状态 */
.kb-uploaded {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(0, 230, 118, 0.05);
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: var(--radius-md);
    margin-top: 12px;
}

.kb-uploaded-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 230, 118, 0.15);
    border-radius: var(--radius-sm);
    color: var(--success-color);
    flex-shrink: 0;
}

.kb-uploaded-icon svg {
    width: 20px;
    height: 20px;
}

.kb-uploaded-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kb-uploaded-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--success-color);
}

.kb-uploaded-name {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-remove-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.kb-remove-btn:hover {
    border-color: var(--error-color);
    color: var(--error-color);
    background: rgba(255, 82, 82, 0.05);
}

.kb-remove-btn svg {
    width: 14px;
    height: 14px;
}

/* 上传区域 */
.upload-area {
    width: 100%;
    min-height: 140px;
    background: var(--bg-dark);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary-cyan);
    background: rgba(0, 212, 255, 0.03);
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    text-align: center;
}

.upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.upload-icon svg { width: 100%; height: 100%; }

.upload-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.upload-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.upload-btn {
    padding: 8px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 12px;
}

.upload-btn:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.template-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--primary-cyan);
    text-decoration: none;
    cursor: pointer;
}

.template-link:hover {
    text-decoration: underline;
}

.template-link svg { width: 14px; height: 14px; }

/* 已上传文件 */
.uploaded-file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.file-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--primary-cyan);
    flex-shrink: 0;
}

.file-icon svg { width: 20px; height: 20px; }

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

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

.file-size {
    font-size: 12px;
    color: var(--text-tertiary);
}

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

.file-remove:hover {
    background: rgba(255, 82, 82, 0.1);
    color: var(--error-color);
}

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

/* 生成按钮 */
.btn-generate {
    width: 100%;
    padding: 14px 24px;
    background: var(--bg-dark);
    border: 1px solid var(--primary-cyan);
    color: var(--primary-cyan);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.btn-generate:hover {
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.2);
}

.btn-generate svg { width: 18px; height: 18px; }

/* 问题列表区域 */
.questions-section {
    /*padding: 24px 28px 28px;*/
    /*border-top: 1px solid var(--border-light);*/
    animation: slideDown 0.3s ease;
}

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

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.question-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.question-count b {
    color: var(--primary-cyan);
    font-weight: 600;
}

.btn-add-question {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add-question:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.btn-add-question svg { width: 14px; height: 14px; }

.questions-list {
    display: flex;
    /*flex-direction: column;*/
    flex-direction: row;
    /*overflow: hidden;*/
    flex-wrap: wrap;
    gap: 8px;
    /*max-height: 360px;*/
    /*overflow-y: auto;*/
    padding-right: 4px;
    margin-bottom: 20px;
}

.question-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.question-item:hover {
    border-color: var(--border-color);
}

.question-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.1);
    color: var(--primary-cyan);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.question-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    padding: 4px 0;
}

.question-input::placeholder {
    color: var(--text-muted);
}

.question-operate {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.question-operate:hover {
    background: rgba(255, 82, 82, 0.1);
    color: var(--error-color);
}

.question-operate svg { width: 14px; height: 14px; }

/* 开始检测按钮 */
.btn-start-detect {
    width: 100%;
    line-height: normal;
    padding: 16px 28px;
    background: var(--gradient-cyan);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 24px rgba(0, 212, 255, 0.35);
}

.btn-start-detect:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.45);
}

.btn-start-detect:active {
    transform: translateY(0);
}

.btn-start-detect svg { width: 20px; height: 20px; }

/* 平台展示 */
.platforms-section {
    margin-top: 48px;
    padding: 0 24px;
    text-align: center;
}

.platforms-title {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}

.platforms-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.platform-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.platform-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.platform-avatar.doubao { background: linear-gradient(135deg, #4FC3F7 0%, #0288D1 100%); }
.platform-avatar.deepseek { background: linear-gradient(135deg, #7986CB 0%, #3949AB 100%); }
.platform-avatar.qianwen { background: linear-gradient(135deg, #FFB74D 0%, #F57C00 100%); }
.platform-avatar.yuanbao { background: linear-gradient(135deg, #F06292 0%, #C2185B 100%); }
.platform-avatar.wenxin { background: linear-gradient(135deg, #4DB6AC 0%, #00897B 100%); }

.platform-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

.platform-arrow {
    color: var(--text-muted);
    padding: 0 4px;
}

.platform-arrow svg { width: 20px; height: 20px; }

/* ===== 检测结果页 ===== */
.result-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

.result-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}

.result-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.result-logo svg { width: 32px; height: 32px; }

.result-logo span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.result-search-box {
    flex: 1;
    display: flex;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.result-search-box:focus-within {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.result-search-input {
    flex: 1;
    padding: 0 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.result-search-input::placeholder {
    color: var(--text-muted);
}

.result-search-btn {
    padding: 0 24px;
    background: var(--gradient-cyan);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.result-search-btn:hover {
    opacity: 0.9;
}

.result-search-btn svg { width: 16px; height: 16px; }

.result-actions-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.result-progress {
    margin-bottom: 24px;
}

.btn-outline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-outline:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.btn-outline svg { width: 16px; height: 16px; }

/* 进度卡片 */
.progress-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.progress-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.progress-title .progress-title-completed {
    display: flex;
    align-items: center;
    color: var(--primary-cyan);
    gap: 5px;
}

.progress-title .progress-title-completed svg {
    width: 30px;
    height: 30px;
}

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

.progress-percent {
    font-size: 28px;
    font-weight: 700;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-completed-count {
    text-align: right;
    margin-bottom: 10px;
    color: var(--text-tertiary);
}

.progress-bar-bg {
    height: 8px;
    background: var(--bg-dark);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 24px;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--gradient-cyan);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.progress-platforms {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.prog-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
}

.prog-platform.running {
    border-color: rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.05);
}

.prog-platform.completed {
    border-color: rgba(0, 230, 118, 0.3);
    background: rgba(0, 230, 118, 0.05);
}

.prog-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.prog-avatar.doubao { background: linear-gradient(135deg, #4FC3F7 0%, #0288D1 100%); }
.prog-avatar.deepseek { background: linear-gradient(135deg, #7986CB 0%, #3949AB 100%); }
.prog-avatar.qianwen { background: linear-gradient(135deg, #FFB74D 0%, #F57C00 100%); }
.prog-avatar.yuanbao { background: linear-gradient(135deg, #F06292 0%, #C2185B 100%); }
.prog-avatar.wenxin { background: linear-gradient(135deg, #4DB6AC 0%, #00897B 100%); }

.prog-platform span:nth-child(2) {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.prog-status {
    font-size: 11px;
    color: var(--text-tertiary);
}

.prog-platform.running .prog-status {
    color: var(--primary-cyan);
    animation: pulse 1.5s infinite;
}

.prog-platform.completed .prog-status {
    color: var(--success-color);
}

/* 结果概览 */
.result-overview {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.overview-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.result-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-tertiary);
}

.btn-primary-cyan {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--gradient-cyan);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.btn-primary-cyan:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.btn-primary-cyan svg { width: 16px; height: 16px; }

.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.overview-item {
    padding: 20px;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    text-align: center;
    transition: all var(--transition-fast);
}

.overview-item:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
}

.overview-value {
    font-size: 32px;
    font-weight: 700;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1.2;
}

.overview-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.overview-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.overview-trend.up {
    background: rgba(0, 230, 118, 0.1);
    color: var(--success-color);
}

.overview-trend.good {
    background: rgba(255, 176, 32, 0.1);
    color: var(--warning-color);
}

.overview-trend svg { width: 12px; height: 12px; }

/* 结果区块 */
.result-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.section-head .section-title {
    margin-bottom: 0;
}

/* 平台卡片 */
.platform-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.platform-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.platform-card:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(0, 212, 255, 0.03);
    border-bottom: 1px solid var(--border-light);
}

.pc-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.pc-rate {
    font-size: 12px;
    color: var(--text-tertiary);
}

.pc-rate b {
    color: var(--primary-cyan);
    font-size: 14px;
}

.pc-rank {
    min-width: 48px;
    height: 36px;
    padding: 0 14px;
    background: var(--gradient-cyan);
    color: white;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-stats {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pc-stat span {
    font-size: 13px;
    color: var(--text-secondary);
}

.pc-stat b {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
}

/* 详细数据标签 */
.detail-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-dark);
    padding: 4px;
    border-radius: var(--radius-md);
}

.detail-tab {
    padding: 8px 18px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.detail-tab:hover {
    color: var(--text-primary);
}

.detail-tab.active {
    background: var(--bg-card);
    color: var(--primary-cyan);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* 详细表格 */
.detail-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.detail-table-platform {
    display: none;
}

.detail-table-platform.active {
    display: block;
}

.detail-table-platform .question-tt-doubao { color: #0288D1; }
.detail-table-platform .question-tt-deepseek { color: #667bf7; }
.detail-table-platform .question-tt-qianwen { color: #F57C00; }
.detail-table-platform .question-tt-yuanbao { color: #C2185B; }
.detail-table-platform .question-tt-wenxin { color: #00897B; }

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.detail-table thead {
    background: var(--bg-dark);
}

.detail-table th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-light);
}

.detail-table td {
    padding: 14px 18px;
    border-top: 1px solid var(--border-light);
    color: var(--text-primary);
}

.detail-table tbody tr:hover {
    background: rgba(0, 212, 255, 0.03);
}

.detail-table th:first-child,
.detail-table td:first-child {
    text-align: center;
    color: var(--text-tertiary);
}

.detail-table th:nth-child(3),
.detail-table td:nth-child(3),
.detail-table th:last-child,
.detail-table td:last-child {
    text-align: center;
}

.detail-table td .platform-question {
    cursor: pointer;
    color: var(--primary-cyan);
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
}

.rank-badge.top {
    background: rgba(0, 230, 118, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(0, 230, 118, 0.2);
}

.rank-badge.mid {
    background: rgba(255, 176, 32, 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(255, 176, 32, 0.2);
}

.rank-badge.low {
    background: rgba(255, 82, 82, 0.1);
    color: var(--error-color);
    border: 1px solid rgba(255, 82, 82, 0.2);
}

.mention-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.mention-badge.yes {
    background: rgba(0, 230, 118, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(0, 230, 118, 0.2);
}

.mention-badge.no {
    background: rgba(255, 82, 82, 0.1);
    color: var(--error-color);
    border: 1px solid rgba(255, 82, 82, 0.2);
}

/* 底部操作 */
.result-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

/* ===== 历史记录页 ===== */
.history-container {
    max-width: 1000px;
    margin: 24px auto;
    padding: 32px 24px 60px;
    background: var(--bg-card);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.08);
    box-shadow: 0 20px 60px rgb(0 0 0 / 60%);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.history-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.history-header p {
    font-size: 14px;
    color: var(--text-secondary);
}

.history-header p span {
    color: var(--primary-cyan);
    font-weight: 600;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.history-item:hover {
    border-color: var(--primary-cyan);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 20px rgba(0, 212, 255, 0.1);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.history-keyword {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.history-time {
    font-size: 13px;
    color: var(--text-tertiary);
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.history-stat {
    text-align: center;
    padding: 12px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
}

.history-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-cyan);
    margin-bottom: 4px;
}

.history-stat-label {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* 诊断分卡片 */
.diagnosis-stat .diagnosis-score-num {
    background: linear-gradient(135deg, #FFB74D 0%, #F57C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 风险等级卡片 */
.risk-stat .risk-grade {
    font-size: 24px;
    line-height: 1;
}

.risk-grade.risk-a {
    color: var(--success-color);
}

.risk-grade.risk-b {
    color: var(--info-color);
}

.risk-grade.risk-c {
    color: var(--warning-color);
}

.risk-grade.risk-d {
    color: var(--error-color);
}

/* 空状态 - 深色 */
.empty-state-dark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
}

.empty-state-dark svg {
    width: 72px;
    height: 72px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.empty-state-dark p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.empty-state-dark span {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}

.empty-state-dark .btn-primary-cyan {
    margin-top: 4px;
}

/* ===== 帮助页 ===== */
/* ===== 帮助中心 ===== */
.help-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

/* 帮助中心头部 */
.help-header {
    text-align: center;
    padding: 40px 0 50px;
}

.help-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--primary-cyan) 0%, var(--primary-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.help-header > p {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.help-search {
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

.help-search svg {
    position: absolute;
    left: 18px;
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.help-search input {
    width: 100%;
    padding: 14px 20px 14px 48px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.help-search input::placeholder {
    color: var(--text-muted);
}

.help-search input:hover {
    border-color: var(--primary-cyan-dark);
}

.help-search input:focus {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1), var(--shadow-sm);
}

/* 快速分类 */
.help-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.help-category-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.help-category-card:hover {
    border-color: var(--primary-cyan);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.hc-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.hc-icon svg {
    width: 24px;
    height: 24px;
}

.icon-cyan {
    background: rgba(0, 212, 255, 0.12);
    color: var(--primary-cyan);
}

.icon-green {
    background: rgba(0, 230, 118, 0.12);
    color: var(--success-color);
}

.icon-orange {
    background: rgba(255, 176, 32, 0.12);
    color: var(--warning-color);
}

.icon-purple {
    background: rgba(156, 39, 176, 0.12);
    color: #CE93D8;
}

.icon-pink {
    background: rgba(240, 98, 146, 0.12);
    color: #F48FB1;
}

.icon-blue {
    background: rgba(68, 138, 255, 0.12);
    color: var(--info-color);
}

.help-category-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.help-category-card > p {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.hc-count {
    display: inline-block;
    padding: 3px 10px;
    background: var(--bg-dark);
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--text-secondary);
}

/* FAQ 区域 */
.faq-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.faq-section-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.faq-section-header span {
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 4px 12px;
    background: var(--bg-dark);
    border-radius: var(--radius-full);
}

/* FAQ 分类 */
.faq-category {
    margin-bottom: 28px;
    transition: all var(--transition-fast);
}

.faq-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
    padding-left: 4px;
}

.faq-category-title svg {
    width: 20px;
    height: 20px;
    color: var(--primary-cyan);
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.faq-item:hover {
    border-color: var(--border-color);
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.faq-q svg {
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.faq-item.open .faq-q svg {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    padding: 0 22px 18px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.faq-item.open .faq-a {
    display: block;
}

/* 无搜索结果 */
.faq-no-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.faq-no-result svg {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.faq-no-result p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.faq-no-result span {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* 联系客服 */
.help-contact {
    margin-top: 48px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 102, 255, 0.08) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.help-contact-text h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.help-contact-text p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.help-contact-btns {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
}

.btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-contact svg {
    width: 18px;
    height: 18px;
}

.btn-contact-phone {
    background: var(--gradient-cyan);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.btn-contact-phone:hover {
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.btn-contact-email:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

/* ===== 页脚 ===== */
.footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border-light);
    margin-top: auto;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 48px;
}

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-logo svg { width: 36px; height: 36px; }

.footer-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.footer-slogan {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.footer-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.footer-col a {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: var(--primary-cyan);
}

.footer-bottom {
    border-top: 1px solid var(--border-light);
    padding: 20px 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.footer-bottom p:last-child {
    margin-bottom: 0;
}

footer .footer-nav {
    display: none;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999999;
    background: rgba(15, 21, 35, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-light);
}

footer .footer-nav ul:after {
    content: '';
    display: block;
    clear: both;
}

footer .footer-nav ul li {
    float: left;
    width: 33.33%;
    height: 50px;
    text-align: center;
}

footer .footer-nav ul li a {
    display: block;
    height: 50px;
    line-height: 50px;
    width: 100%;
    position: relative;
    font-size: 14px;
    color: #666;
}

footer .footer-nav ul li a.active {
    color: var(--primary-cyan);
    background: rgba(0, 212, 255, 0.1);
}

/* ===== 填写品牌信息按钮 ===== */
.btn-fill-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: 10px;
}

.btn-fill-info:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.btn-fill-info svg {
    width: 16px;
    height: 16px;
}

.btn-fill-info.active {
    color: var(--success-color);
}

/* 品牌信息已填写状态 */
.kb-filled {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-left: 10px;
}

.kb-filled.active {
    background: rgba(0, 230, 118, 0.05);
    border-color: rgba(0, 230, 118, 0.2);
}

.kb-filled-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 230, 118, 0.15);
    border-radius: var(--radius-sm);
    color: var(--success-color);
    flex-shrink: 0;
}

.kb-filled-icon svg {
    width: 20px;
    height: 20px;
}

.kb-filled-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kb-filled-title {
    font-size: 14px;
    font-weight: 600;
}

.kb-filled.active .kb-filled-title  {
    color: var(--success-color);
}

.kb-filled-desc {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-edit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.kb-edit-btn:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.kb-edit-btn svg {
    width: 14px;
    height: 14px;
}

/* ===== 弹窗 ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(1px);
}

.modal-overlay.show {
    display: flex;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s ease;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-dark);
    color: var(--text-primary);
}

.modal-close svg {
    width: 18px;
    height: 18px;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.modal-form-group {
    margin-bottom: 16px;
}

.modal-form-group:last-child {
    margin-bottom: 0;
}

.modal-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.modal-form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: all var(--transition-fast);
    outline: none;
}

.modal-form-textarea::placeholder {
    color: var(--text-muted);
}

.modal-form-textarea:hover {
    border-color: var(--primary-cyan-dark);
}

.modal-form-textarea:focus {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
}

.modal-btn {
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.modal-btn-cancel {
    background: var(--bg-dark);
    color: var(--text-secondary);
}

.modal-btn-cancel:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.modal-btn-confirm {
    background: var(--gradient-cyan);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.modal-btn-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

/* ===== 报告页面 ===== */
.report-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    padding-bottom: 60px;
}

.report-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-back:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
}

.btn-back svg {
    width: 16px;
    height: 16px;
}

.report-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.report-keyword {
    margin-left: auto;
    padding: 8px 16px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 14px;
    color: var(--primary-cyan);
    font-weight: 500;
}

.report-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.report-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.report-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.report-section-header .report-section-title {
    margin-bottom: 0;
}

.report-platform-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-dark);
    padding: 4px;
    border-radius: var(--radius-md);
}

.report-platform-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.report-platform-tab:hover {
    color: var(--text-primary);
}

.report-platform-tab.active {
    background: var(--bg-card);
    color: var(--primary-cyan);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* 排名报告 - 汇总 */
.ranking-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ranking-overview-item {
    padding: 20px;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    text-align: center;
}

.ranking-overview-value {
    font-size: 28px;
    font-weight: 700;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1.2;
}

.ranking-overview-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 排名报告 - 平台汇总 */
.ranking-platform-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.ranking-ps-item {
    padding: 14px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    text-align: center;
}

.ranking-ps-item span {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.ranking-ps-item b {
    font-size: 18px;
    color: var(--primary-cyan);
    font-weight: 600;
}

/* 排名表格 */
.ranking-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ranking-table thead {
    background: var(--bg-dark);
}

.ranking-table th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-light);
}

.ranking-table td {
    padding: 14px 18px;
    border-top: 1px solid var(--border-light);
    color: var(--text-primary);
}

.ranking-table tbody tr:hover {
    background: rgba(0, 212, 255, 0.03);
}

.ranking-table th:first-child,
.ranking-table td:first-child {
    text-align: center;
    color: var(--text-tertiary);
}

.ranking-table th:nth-child(3),
.ranking-table td:nth-child(3),
.ranking-table th:last-child,
.ranking-table td:last-child {
    text-align: center;
}

/* 诊断报告 - 评分卡 */
.diagnosis-score-card {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
}

.diagnosis-score {
    flex-shrink: 0;
}

.score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(var(--primary-cyan) 0deg, var(--primary-blue) 270deg, var(--bg-dark) 270deg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--bg-card);
}

.score-value {
    position: relative;
    z-index: 1;
    font-size: 42px;
    font-weight: 700;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    display: block;
    text-align: center;
}

.score-label {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: var(--text-tertiary);
    display: block;
    text-align: center;
    margin-top: 4px;
}

.diagnosis-summary {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.diagnosis-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ds-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.diagnosis-summary-item.good .ds-icon {
    background: rgba(0, 230, 118, 0.15);
    color: var(--success-color);
}

.diagnosis-summary-item.warn .ds-icon {
    background: rgba(255, 176, 32, 0.15);
    color: var(--warning-color);
}

.diagnosis-summary-item.bad .ds-icon {
    background: rgba(255, 82, 82, 0.15);
    color: var(--error-color);
}

/* 诊断报告 - 平台卡片 */
.diagnosis-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.diagnosis-platform-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: all var(--transition-fast);
}

.diagnosis-platform-card:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.dpc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

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

.dpc-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.dpc-rate {
    font-size: 12px;
    color: var(--text-tertiary);
}

.dpc-rate b {
    color: var(--primary-cyan);
    font-size: 14px;
}

.dpc-score {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.dpc-score.score-A {
    background: rgba(0, 230, 118, 0.15);
    color: var(--success-color);
}

.dpc-score.score-B {
    background: rgba(255, 176, 32, 0.15);
    color: var(--warning-color);
}

.dpc-score.score-C {
    background: rgba(255, 82, 82, 0.15);
    color: var(--error-color);
}

.dpc-progress {
    height: 6px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    margin-bottom: 10px;
    overflow: hidden;
}

.dpc-progress-bar {
    height: 100%;
    background: var(--gradient-cyan);
    border-radius: var(--radius-full);
    transition: width 1s ease;
}

.dpc-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* 优化建议 */
.suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.suggestion-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.suggestion-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--gradient-cyan);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.suggestion-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.suggestion-content p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* 历史记录按钮 */
.history-item-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.btn-history-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-history-action:hover {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.btn-history-action svg {
    width: 14px;
    height: 14px;
}

/* ===== Toast ===== */
.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    padding: 14px 28px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1000;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    border-color: rgba(0, 230, 118, 0.3);
    color: var(--success-color);
}

.toast.error {
    border-color: rgba(255, 82, 82, 0.3);
    color: var(--error-color);
}

.toast.warning {
    border-color: rgba(255, 176, 32, 0.3);
    color: var(--warning-color);
}

.toast.info {
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--primary-cyan);
}



/* ========================================================= */
/* 登录后状态 (用户信息) */
/* ========================================================= */
.user-menu {
    position: relative;
    display: none;
    /* 默认隐藏，登录后显示 */
    cursor: pointer;
}

.user-menu.active {
    display: block;
}

.user-menu .user-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px 4px 4px;
    background: #1e2732;
    border: 1px solid #2a3442;
    border-radius: 40px;
    transition: all 0.2s;
    cursor: pointer;
}

.user-menu .user-trigger:hover {
    border-color: #00d4ff;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

/* 用户头像 */
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b8e6, #0095c7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b0e14;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    user-select: none;
    text-transform: uppercase;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.user-info .user-phone {
    color: #eaf0f7;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.user-info .user-status {
    color: #5f7188;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.user-menu .chevron {
    color: #5f7188;
    transition: transform 0.25s;
    flex-shrink: 0;
    margin-left: 2px;
}

.user-menu .chevron svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    display: block;
}

.user-menu .chevron.open {
    transform: rotate(180deg);
}

/* ===== 下拉菜单 ===== */
.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: #131a22;
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: all 0.2s ease;
    z-index: 100;
    transform-origin: top right;
}

.user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: #c8d4e0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    letter-spacing: 0.2px;
}

.user-dropdown .dropdown-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
    color: #5f7188;
}

.user-dropdown .dropdown-item:hover {
    background: #1e2732;
    color: #eaf0f7;
}

.user-dropdown .dropdown-item:hover svg {
    color: #00d4ff;
}

.user-dropdown .dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 12px;
}

.user-dropdown .dropdown-item.danger {
    color: #ff6b7a;
}

.user-dropdown .dropdown-item.danger svg {
    color: #ff6b7a;
}

.user-dropdown .dropdown-item.danger:hover {
    background: rgba(255, 107, 122, 0.1);
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== 响应式 ===== */
@media (max-width: 900px) {
    .progress-platforms { grid-template-columns: repeat(3, 1fr); }
    .overview-grid { grid-template-columns: repeat(2, 1fr); }
    .help-cards { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr; gap: 32px; }
    .footer-links { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .nav-container { padding: 0 16px; height: 56px; }
    .logo-text-group { display: none; }
    .nav-links { gap: 4px; }
    .nav-link { padding: 6px 10px; font-size: 13px; }
    .nav-menu { display: none; }
    .btn-login { padding: 6px 14px; font-size: 13px; margin-left: 6px; }
    .btn-login svg { display: none; }
    
    .hero-section { padding: 32px 16px 20px; }
    .hero-title { font-size: 28px; }
    .hero-subtitle { font-size: 14px; }
    
    .detection-card { margin: 0 12px; }
    .card-header-bar { padding: 14px 18px; }
    .card-header-bar h2 { font-size: 17px; }
    .form-section { padding: 18px; }
    
    .form-label { font-size: 13px; }
    .form-input { padding: 10px 14px; font-size: 14px; }
    .form-tip { font-size: 12px; }
    
    .count-input-wrap { width: 130px; }
    
    .btn-fill-info { padding: 10px 18px; font-size: 13px; }
    .kb-filled { padding: 7px 10px; gap: 5px; }
    .kb-filled-icon { width: 32px; height: 32px; }
    .kb-filled-icon svg { width: 18px; height: 18px; }
    .kb-filled-title { font-size: 13px; }
    .kb-filled-desc { font-size: 11px; }
    .kb-edit-btn { padding: 1px 10px; font-size: 11px; }
    
    .btn-generate { padding: 12px; font-size: 14px; }
    .btn-start-detect { padding: 12px; font-size: 14px; }
    
    /*.questions-section { padding: 0 18px 18px; padding-top: 18px; }*/
    .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .section-actions { width: 100%; justify-content: space-between; }
    .question-item { flex: 1;gap: 8px; }
    .question-number { width: 26px; height: 26px; font-size: 12px; }
    .question-input { padding: 8px 12px; font-size: 13px; }
    .question-operate { width: 30px; height: 30px; }
    .question-operate svg { width: 14px; height: 14px; }
    
    .platforms-section { margin-top: 24px; padding: 0 12px; }
    .platforms-title { font-size: 12px; margin-bottom: 16px; }
    .platforms-row { gap: 4px; }
    .platform-item { padding: 8px 10px; gap: 6px; }
    .platform-avatar { width: 36px; height: 36px; font-size: 14px; border-radius: var(--radius-sm); }
    .platform-item span { font-size: 11px; }
    .platform-arrow { display: none; }
    
    .result-container { padding: 14px; }
    .result-topbar { flex-wrap: wrap; gap: 12px; }
    .result-logo span { display: none; }
    .result-search-box { height: 40px; order: 3; width: 100%; }
    .result-search-input { font-size: 13px; padding: 0 12px; }
    .result-search-btn { padding: 0 16px; font-size: 13px; }
    .result-actions-top .btn-outline span { display: none; }

    .result-time { font-size: 14px; }
    
    .progress-title { font-size: 16px; }
    .progress-desc { font-size: 13px; }
    .progress-bar-wrap { height: 12px; }
    .progress-percent { font-size: 28px; }
    
    .progress-platforms { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .prog-item { padding: 12px; }
    .prog-platform-name { font-size: 13px; }
    .prog-status { font-size: 11px; }
    
    .overview-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .overview-item { padding: 14px 10px; }
    .overview-value { font-size: 22px; }
    .overview-label { font-size: 12px; }
    
    .detail-section { padding: 20px; }
    .detail-section-title { font-size: 16px; }
    .detail-tabs { gap: 4px; overflow-x: auto; padding-bottom: 4px; }
    .detail-tab { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
    
    .detail-table-wrap { margin: 0 -20px; padding: 0 20px; overflow-x: auto; }
    .detail-table { min-width: 500px; }
    .detail-table th, .detail-table td { padding: 10px 12px; font-size: 13px; }
    
    .history-container { padding: 20px 14px 36px; }
    .history-header { flex-wrap: wrap; gap: 12px; }
    .history-header h2 { font-size: 20px; }
    .history-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .history-stat { padding: 10px 8px; }
    .history-stat-num { font-size: 17px; }
    .history-stat-label { font-size: 11px; }
    .history-item-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .history-keyword { font-size: 15px; }
    .history-time { font-size: 11px; }
    .history-item-actions { flex-wrap: wrap; }
    .btn-history-action { font-size: 12px; padding: 8px 12px; }
    
    .report-container { padding: 16px 14px 40px; }
    .report-header { gap: 10px; }
    .report-header h2 { font-size: 20px; }
    .report-keyword { font-size: 12px; padding: 6px 12px; order: 3; width: 100%; text-align: center; }
    .report-section { padding: 20px 16px; }
    .report-section-title { font-size: 16px; }
    .report-section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    
    .ranking-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ranking-overview-item { padding: 14px 10px; }
    .ranking-overview-value { font-size: 22px; }
    .ranking-overview-label { font-size: 12px; }
    
    .report-platform-tabs { width: 100%; overflow-x: auto; }
    .report-platform-tab { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
    
    .ranking-platform-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ranking-ps-item { padding: 10px; }
    .ranking-ps-item span { font-size: 11px; }
    .ranking-ps-item b { font-size: 15px; }
    
    .ranking-table-wrap { overflow-x: auto; }
    .ranking-table { min-width: 500px; }
    .ranking-table th, .ranking-table td { padding: 10px 12px; font-size: 13px; }
    
    .diagnosis-score-card { flex-direction: column; gap: 20px; text-align: center; }
    .diagnosis-score { margin: 0 auto; }
    .score-circle { width: 120px; height: 120px; }
    .score-circle::before { width: 92px; height: 92px; }
    .score-value { font-size: 36px; }
    
    .diagnosis-platform-grid { grid-template-columns: 1fr; gap: 12px; }
    .diagnosis-platform-card { padding: 16px; }
    
    .suggestion-item { padding: 16px; gap: 12px; }
    .suggestion-num { width: 28px; height: 28px; font-size: 13px; }
    .suggestion-content h4 { font-size: 15px; }
    .suggestion-content p { font-size: 13px; line-height: 1.7; }
    
    .help-container { padding: 20px 14px 40px; }
    .help-header { padding: 16px 0 24px; }
    .help-header h2 { font-size: 24px; }
    .help-header > p { font-size: 13px; margin-bottom: 20px; }
    .help-search input { padding: 12px 16px 12px 42px; font-size: 14px; }
    .help-search svg { left: 14px; width: 18px; height: 18px; }
    
    .help-categories { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 32px; }
    .help-category-card { padding: 16px; }
    .hc-icon { width: 40px; height: 40px; margin-bottom: 12px; }
    .hc-icon svg { width: 20px; height: 20px; }
    .help-category-card h4 { font-size: 14px; }
    .help-category-card > p { font-size: 12px; margin-bottom: 8px; }
    .hc-count { font-size: 11px; padding: 2px 8px; }
    
    .faq-section-header { margin-bottom: 16px; }
    .faq-section-header h3 { font-size: 17px; }
    .faq-section-header span { font-size: 12px; padding: 3px 10px; }
    
    .faq-category { margin-bottom: 22px; }
    .faq-category-title { font-size: 15px; margin-bottom: 10px; }
    .faq-category-title svg { width: 18px; height: 18px; }
    
    .faq-item { margin-bottom: 8px; }
    .faq-q { padding: 14px 16px; font-size: 14px; }
    .faq-q svg { width: 16px; height: 16px; }
    .faq-a { padding: 0 16px 14px; font-size: 13px; line-height: 1.7; }
    
    .help-contact { padding: 24px 20px; margin-top: 32px; }
    .help-contact-text h3 { font-size: 17px; }
    .help-contact-text p { font-size: 13px; }
    .help-contact-btns { width: 100%; }
    .btn-contact { flex: 1; justify-content: center; padding: 10px 16px; font-size: 13px; }
    .btn-contact svg { width: 16px; height: 16px; }
    
    .footer { padding: 32px 0 60px; }
    .footer-container { padding: 0 16px; }
    .footer-top { flex-direction: column; gap: 24px; text-align: center; }
    .footer-logo { justify-content: center; }
    .footer-links { grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
    .footer-col h4 { font-size: 14px; margin-bottom: 12px; }
    .footer-col a { font-size: 12px; }
    .footer-bottom { padding: 16px; font-size: 11px; }

    footer .footer-nav {
        display: block;
    }
    
    /* 弹窗移动端 */
    .modal-content { width: 95%; max-height: 90vh; border-radius: var(--radius-md); }
    .modal-header { padding: 16px 18px; }
    .modal-header h3 { font-size: 16px; }
    .modal-body { padding: 16px 18px; }
    .modal-form-group { margin-bottom: 12px; }
    .modal-form-label { font-size: 12px; margin-bottom: 6px; }
    .modal-form-textarea { padding: 8px 12px; font-size: 13px; }
    .modal-footer { padding: 12px 18px; gap: 10px; }
    .modal-btn { padding: 9px 20px; font-size: 13px; }
    
    .toast { top: 64px; padding: 10px 20px; font-size: 13px; max-width: 85%; }

    .user-menu .user-trigger {
        padding: 3px 8px 3px 3px;
    }
    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .user-info .user-phone {
        font-size: 12px;
    }
    .user-info .user-status {
        font-size: 10px;
    }
    .user-dropdown {
        min-width: 170px;
        right: -8px;
    }
    .toggle-bar .toggle-btn {
        padding: 6px 16px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hero-section { padding: 24px 12px 16px; }
    .hero-title { font-size: 22px; }
    .hero-subtitle { font-size: 13px; }
    
    .detection-card { margin: 0 8px; border-radius: var(--radius-md); }
    .card-header-bar { padding: 12px 16px; }
    .card-header-bar h2 { font-size: 16px; }
    .form-section { padding: 14px; }
    
    .form-label { font-size: 12px; }
    .label-icon svg { width: 14px; height: 14px; }
    .form-input { padding: 9px 12px; font-size: 13px; }
    .form-tip { font-size: 11px; padding: 8px 10px; }
    .form-tip svg { width: 13px; height: 13px; }
    
    .count-input-wrap { width: 110px; }
    .count-unit { right: 25px; font-size: 13px; }
    
    .btn-fill-info { padding: 9px 16px; font-size: 12px; }
    .btn-fill-info svg { width: 14px; height: 14px; }
    
    .btn-generate, .btn-start-detect { padding: 11px; font-size: 13px; }
    .btn-generate svg, .btn-start-detect svg { width: 16px; height: 16px; }
    
    /*.questions-section { padding: 0 14px 14px; padding-top: 14px; }*/
    .section-header h3 { font-size: 15px; }
    .question-count { font-size: 12px; }
    .btn-add-question { font-size: 12px; padding: 6px 10px; }
    .btn-add-question svg { width: 13px; height: 13px; }
    
    .overview-grid { grid-template-columns: 1fr; }
    .progress-platforms { grid-template-columns: 1fr; }
    .history-stats { grid-template-columns: repeat(2, 1fr); }
    
    .history-item-header { gap: 4px; }
    .history-keyword { font-size: 14px; }
    .history-time { font-size: 11px; }
    
    .detail-tabs { overflow-x: auto; }
    .detail-table-wrap { margin: 0 -14px; padding: 0 14px; }
    
    .report-header h2 { font-size: 18px; }
    .ranking-overview-grid { grid-template-columns: repeat(2, 1fr); }
    .ranking-platform-summary { grid-template-columns: repeat(2, 1fr); }
    
    .help-categories { grid-template-columns: 1fr; }
    .help-contact { flex-direction: column; align-items: flex-start; padding: 20px 16px; }
    .help-contact-btns { width: 100%; }
    .btn-contact { width: 100%; }
    
    .footer-links { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .footer-col { text-align: center; }
    
    .modal-content { width: 92%; }
    .modal-footer { flex-direction: column-reverse; gap: 8px; }
    .modal-btn { width: 100%; }
    
    .toast { max-width: 90%; font-size: 12px; padding: 9px 16px; }
}