/* ==================== 全局样式 ==================== */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-bg: #eef2ff;
    --primary-bg-hover: #ddd6fe;
    --success: #10b981;
    --success-bg: #ecfdf5;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --danger: #ef4444;
    --danger-bg: #fef2f2;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ==================== 登录/注册页面 ==================== */
.auth-page { display: flex; min-height: 100vh; }
.auth-left {
    flex: 1; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    display: flex; flex-direction: column; justify-content: center; padding: 60px; color: white;
}
.auth-brand { margin-bottom: 60px; }
.brand-logo {
    width: 64px; height: 64px; background: rgba(255,255,255,0.18); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800;
    margin-bottom: 20px; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15);
}
.brand-logo-sm {
    width: 36px; height: 36px; background: var(--primary); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800;
    color: white; flex-shrink: 0;
}
.auth-brand h1 { font-size: 2.2em; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.5px; }
.auth-brand p { font-size: 1.05em; opacity: 0.82; }
.auth-features { display: flex; flex-direction: column; gap: 28px; }
.feature-item { display: flex; align-items: flex-start; gap: 16px; }
.feature-icon {
    font-size: 24px; width: 52px; height: 52px; background: rgba(255,255,255,0.14);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1);
}
.feature-item h3 { font-size: 1.02em; font-weight: 600; margin-bottom: 4px; }
.feature-item p { opacity: 0.78; font-size: 0.88em; }

.auth-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: white; }
.auth-card { width: 100%; max-width: 440px; }
.auth-tabs { display: flex; background: var(--gray-100); border-radius: 10px; padding: 3px; margin-bottom: 32px; }
.tab-btn {
    flex: 1; padding: 11px; border: none; background: transparent; font-size: 14.5px; font-weight: 600;
    color: var(--gray-500); cursor: pointer; border-radius: 8px; transition: all 0.2s;
}
.tab-btn.active { background: white; color: var(--primary); box-shadow: var(--shadow-md); }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--gray-700); font-size: 13px; }
.required { color: var(--danger); }
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; z-index: 1; }
.form-group input, .form-group select {
    width: 100%; padding: 12px 14px 12px 44px; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm); font-size: 14px; transition: all 0.2s; background: white; color: var(--gray-800);
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.form-group input::placeholder { color: var(--gray-400); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--gray-400); }

.btn-primary {
    width: 100%; padding: 13px 24px; background: var(--primary); color: white; border: none;
    border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-arrow { font-size: 17px; transition: transform 0.2s; }
.btn-primary:hover .btn-arrow { transform: translateX(3px); }

.btn-secondary {
    padding: 9px 22px; background: white; color: var(--primary); border: 1.5px solid var(--primary);
    border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-secondary:hover { background: var(--primary-bg); }
.btn-icon {
    width: 36px; height: 36px; background: var(--gray-100); border: none; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.btn-icon:hover { background: var(--gray-200); }

.form-footer { text-align: center; margin-top: 20px; color: var(--gray-500); font-size: 13px; }
.form-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.form-footer a:hover { text-decoration: underline; }

.message { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); text-align: center; font-size: 13px; font-weight: 500; display: none; }
.message.success { background: var(--success-bg); color: #047857; border: 1px solid #a7f3d0; }
.message.error { background: var(--danger-bg); color: #991b1b; border: 1px solid #fecaca; }

/* ==================== 主应用布局 ==================== */
.app-page { display: flex; min-height: 100vh; }
.sidebar {
    width: 256px; background: var(--sidebar-bg); color: white; display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
}
.sidebar-header { padding: 20px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.2px; }
.sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; }
.nav-item {
    display: flex; align-items: center; gap: 11px; padding: 10px 16px; color: rgba(255,255,255,0.55);
    text-decoration: none; border-radius: var(--radius-sm); transition: all 0.15s; font-size: 13.5px;
    font-weight: 500; margin-bottom: 2px;
}
.nav-item:hover { background: var(--sidebar-hover); color: rgba(255,255,255,0.9); }
.nav-item.active { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(99,102,241,0.35); }
.nav-item svg { flex-shrink: 0; opacity: 0.8; }
.nav-item.active svg { opacity: 1; }
.nav-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 10px 14px; }
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 10px; }
.user-info { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-avatar {
    width: 34px; height: 34px; background: var(--primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.user-details { display: flex; flex-direction: column; min-width: 0; }
.user-email { font-size: 11.5px; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-plan { font-size: 10.5px; color: var(--primary-light); font-weight: 600; }
.btn-logout {
    background: none; border: none; color: rgba(255,255,255,0.45); cursor: pointer; padding: 7px;
    border-radius: var(--radius-sm); transition: all 0.15s;
}
.btn-logout:hover { color: white; background: var(--sidebar-hover); }

.main-content { flex: 1; margin-left: 256px; display: flex; flex-direction: column; min-height: 100vh; }
.top-bar {
    padding: 18px 32px; background: white; border-bottom: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50;
}
.page-title { font-size: 19px; font-weight: 700; color: var(--gray-900); }
.btn-generate-top {
    padding: 9px 18px; background: var(--primary); color: white; border: none; border-radius: var(--radius-sm);
    font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all 0.2s;
}
.btn-generate-top:hover { background: var(--primary-dark); box-shadow: var(--shadow-md); }
.content-page { padding: 28px 32px; flex: 1; }

/* ==================== 统计卡片 ==================== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.stat-card {
    background: white; padding: 22px 24px; border-radius: var(--radius); box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
    border: 1px solid var(--gray-100); transition: all 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px 3px 0 0; }
.stat-usage::before { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.stat-plan::before { background: linear-gradient(90deg, #8b5cf6, #a855f7); }
.stat-content::before { background: linear-gradient(90deg, #10b981, #34d399); }
.stat-remain::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-icon { font-size: 26px; }
.stat-label { font-size: 12.5px; color: var(--gray-500); font-weight: 500; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--gray-900); }
.stat-progress { height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.5s ease; }
.stat-link { font-size: 12.5px; color: var(--primary); text-decoration: none; font-weight: 600; }
.stat-link:hover { text-decoration: underline; }

/* ==================== 快捷操作 ==================== */
.section-header { margin-bottom: 18px; }
.section-header h2 { font-size: 17px; font-weight: 700; color: var(--gray-900); }
.section-desc { color: var(--gray-500); font-size: 13.5px; margin-bottom: 18px; }
.empty-state { text-align: center; padding: 56px 20px; color: var(--gray-400); }
.empty-icon { font-size: 44px; display: block; margin-bottom: 14px; }
.empty-state p { font-size: 15px; margin-bottom: 7px; }
.empty-sub { font-size: 12.5px; }

/* ==================== 使用流程引导 ==================== */
.workflow-guide { background: white; padding: 26px 28px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 26px; border: 1px solid var(--gray-100); }
.workflow-guide h2 { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.workflow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step-item {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--gray-50);
    border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; border: 1.5px solid transparent;
}
.step-item:hover { border-color: var(--primary); background: var(--primary-bg); transform: translateY(-1px); }
.step-num {
    width: 34px; height: 34px; background: var(--primary); color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0;
}
.step-info { flex: 1; }
.step-info h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.step-info p { font-size: 12px; color: var(--gray-500); }
.step-arrow { font-size: 17px; color: var(--primary); font-weight: 700; }

/* ==================== 近期列表 ==================== */
.recent-list { display: grid; gap: 10px; }
.recent-item {
    background: white; padding: 16px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--gray-100);
    transition: all 0.15s;
}
.recent-item:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.recent-item-info h4 { font-size: 13.5px; font-weight: 600; color: var(--gray-800); }
.recent-item-info p { font-size: 12px; color: var(--gray-400); margin-top: 3px; }


/* ========================================================
   关键词分析页面
   ======================================================== */
.keywords-layout { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.keywords-form {
    background: white; padding: 28px; border-radius: var(--radius); box-shadow: var(--shadow);
    position: sticky; top: 80px; border: 1px solid var(--gray-100);
}
.keywords-form h2 { font-size: 18px; font-weight: 800; margin-bottom: 6px; color: var(--gray-900); }
.keywords-form .section-desc { margin-bottom: 22px; }

/* 结果面板 - 整体卡片 */
.keywords-result {
    background: white; border-radius: var(--radius); box-shadow: var(--shadow);
    min-height: 400px; border: 1px solid var(--gray-100); overflow: hidden;
}

/* 总览头部卡片 */
.kw-overview-card {
    background: linear-gradient(136deg, #eef2ff 0%, #f0f0ff 40%, #fdf4ff 100%);
    padding: 30px 32px; border-radius: var(--radius) var(--radius) 0 0;
    position: relative; overflow: hidden;
}
.kw-overview-card::after {
    content: ''; position: absolute; top: -50px; right: -50px;
    width: 180px; height: 180px; border-radius: 50%;
    background: rgba(99,102,241,0.05); pointer-events: none;
}
.kw-overview-card h3 {
    font-size: 17px; font-weight: 800; color: #312e81; margin-bottom: 18px !important;
    display: flex; align-items: center; gap: 10px;
}
.kw-overview-card h3::before { display: none; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; z-index: 1; }
.overview-item {
    background: rgba(255,255,255,0.88); backdrop-filter: blur(8px);
    border-radius: 12px; padding: 16px 18px; border: 1px solid rgba(99,102,241,0.1);
}
.overview-label {
    font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase;
    letter-spacing: 0.8px; margin-bottom: 7px;
}
.overview-text { font-size: 13.5px; color: var(--gray-700); line-height: 1.7; }

/* 评分圆环区域 */
.overview-scores {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-top: 20px; position: relative; z-index: 1;
}
.score-ring-card {
    background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
    border-radius: 16px; padding: 20px 12px 18px; text-align: center;
    border: 1px solid rgba(99,102,241,0.1); display: flex; flex-direction: column;
    align-items: center; gap: 6px; min-height: 170px; justify-content: center;
}
.score-ring {
    position: relative; width: 80px; height: 80px; margin-bottom: 2px; flex-shrink: 0;
}
.score-ring svg { width: 100%; height: 100%; }
.score-ring-value {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
}
.score-ring-label {
    font-size: 12px; font-weight: 700; color: var(--gray-700); margin-top: 2px;
}
.score-ring-tag {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
}
.score-ring-icon {
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
    font-size: 36px; margin-bottom: 2px; flex-shrink: 0;
}
/* 切入时机横条 */
.overview-timing-bar {
    display: flex; align-items: center; gap: 14px;
    margin-top: 16px; padding: 16px 22px;
    background: linear-gradient(135deg, #eef2ff, #f0f4ff);
    border-radius: 14px; border: 1px solid #c7d2fe;
}
.timing-icon { font-size: 28px; flex-shrink: 0; }
.timing-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.timing-label { font-size: 12px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 0.5px; }
.timing-value { font-size: 15px; font-weight: 800; color: #1e1b4b; }
.timing-badge {
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
    background: #6366f1; color: white; white-space: nowrap; flex-shrink: 0;
}

/* 各分析板块 */
.kw-section {
    padding: 26px 32px; margin-bottom: 0;
    border-bottom: 1px solid var(--gray-100); position: relative;
}
.kw-section:last-of-type { border-bottom: none; }
.kw-section > h3 {
    font-size: 16px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.kw-section > h3::before {
    content: ''; display: inline-block; width: 4px; height: 20px;
    background: linear-gradient(180deg, var(--primary), var(--primary-light));
    border-radius: 2px; flex-shrink: 0;
}
.kw-hint { font-size: 12px; color: var(--gray-400); font-weight: 500; margin-left: 8px; }

/* 洞察框 */
.insight-box {
    background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(168,85,247,0.05));
    border-radius: 12px; padding: 18px 22px; margin: 0;
    border-left: 4px solid var(--primary);
}
.insight-box p { color: #3730a3; line-height: 1.8; font-size: 14px; }

/* 核心关键词表格 */
.kw-table-wrap { border-radius: 12px; border: 1px solid var(--gray-200); overflow: hidden; }
.kw-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kw-table thead { position: sticky; top: 0; z-index: 2; }
.kw-table th {
    text-align: left; padding: 11px 15px; background: linear-gradient(180deg, var(--gray-50), #f0f1f5);
    font-size: 11px; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}
.kw-table td {
    padding: 12px 15px; border-bottom: 1px solid var(--gray-100);
    vertical-align: middle; transition: background 0.12s;
}
.kw-table tbody tr { transition: all 0.12s; }
.kw-table tbody tr:hover td { background: rgba(99,102,241,0.025); }
.kw-table tbody tr:last-child td { border-bottom: none; }
.kw-table strong { color: var(--gray-900); font-weight: 600; }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; }
.badge-high { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.badge-mid { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.badge-low { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }

.diff-badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.diff-easy { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.diff-mid { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.diff-hard { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.kw-index { font-variant-numeric: tabular-nums; color: var(--gray-800); font-weight: 600; }
.trend-up { color: #059669; font-weight: 700; }
.trend-stable { color: var(--gray-500); }
.trend-down { color: #dc2626; font-weight: 700; }
.kw-checkbox { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); }

/* 行动计划 */
.action-plan-grid { display: flex; flex-direction: column; gap: 0; }
.action-item {
    display: flex; align-items: flex-start; gap: 16px; padding: 16px 0;
    border-bottom: 1px solid var(--gray-100); position: relative;
}
.action-item:last-child { border-bottom: none; }
.action-label {
    font-weight: 800; white-space: nowrap; min-width: 100px; font-size: 12.5px;
    padding: 5px 14px; border-radius: 20px; text-align: center; flex-shrink: 0;
}
.action-item:nth-child(1) .action-label { background: #fef2f2; color: #991b1b; }
.action-item:nth-child(2) .action-label { background: #fffbeb; color: #92400e; }
.action-item:nth-child(3) .action-label { background: #ecfdf5; color: #047857; }
.action-item > span:last-child { font-size: 13.5px; color: var(--gray-700); line-height: 1.7; padding-top: 3px; }

/* 用户画像 */
.portrait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.portrait-card {
    padding: 20px; background: white; border-radius: 12px;
    border: 1.5px solid var(--gray-200); transition: all 0.2s; position: relative; overflow: hidden;
}
.portrait-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), #a855f7); opacity: 0; transition: opacity 0.2s;
}
.portrait-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99,102,241,0.1); }
.portrait-card:hover::before { opacity: 1; }
.portrait-name { font-size: 14.5px; font-weight: 800; color: var(--gray-900); margin-bottom: 7px; }
.portrait-desc { font-size: 12.5px; color: var(--gray-600); margin-bottom: 10px; line-height: 1.6; }
.portrait-detail { font-size: 12px; color: var(--gray-500); margin-bottom: 5px; }
.portrait-detail strong { color: var(--primary-dark); }

/* 痛点 */
.pain-list { display: flex; flex-direction: column; gap: 10px; }
.pain-item {
    padding: 14px 18px; border-radius: 10px; position: relative; transition: all 0.2s;
}
.pain-item:hover { transform: translateX(3px); }
.pain-strong { border-left: 4px solid #ef4444; background: linear-gradient(90deg, #fef2f2, white); color: #991b1b; }
.pain-mid { border-left: 4px solid #f59e0b; background: linear-gradient(90deg, #fffbeb, white); color: #92400e; }
.pain-weak { border-left: 4px solid #d1d5db; background: linear-gradient(90deg, #f9fafb, white); color: var(--gray-700); }
.pain-intensity {
    display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10.5px; font-weight: 800;
    margin-right: 7px; letter-spacing: 0.4px;
}
.pain-strong .pain-intensity { background: #fee2e2; color: #991b1b; }
.pain-mid .pain-intensity { background: #fef3c7; color: #92400e; }
.pain-weak .pain-intensity { background: var(--gray-200); color: var(--gray-600); }
.pain-main { margin-bottom: 5px; font-weight: 600; }
.pain-meta { font-size: 11.5px; opacity: 0.7; margin-top: 5px; }

/* 长尾关键词 */
.long-tail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.long-tail-item {
    padding: 16px; background: white; border-radius: 12px;
    border: 1.5px solid var(--gray-200); transition: all 0.2s; position: relative;
}
.long-tail-item:hover {
    border-color: var(--primary); background: var(--primary-bg);
    transform: translateY(-2px); box-shadow: 0 4px 14px rgba(99,102,241,0.08);
}
.long-tail-word { font-weight: 700; color: var(--gray-900); margin-bottom: 7px; font-size: 13.5px; }
.long-tail-meta { font-size: 11.5px; color: var(--gray-500); margin-bottom: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.long-tail-angle { font-size: 11.5px; color: var(--primary); font-style: italic; margin-top: 5px; }
.long-tail-item .kw-checkbox { position: absolute; top: 14px; right: 14px; }

/* 爆款话题 */
.topic-item {
    padding: 16px 18px; background: white; border-radius: 12px;
    margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    border: 1.5px solid var(--gray-200); transition: all 0.2s;
}
.topic-item:hover {
    border-color: var(--primary); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99,102,241,0.06);
}
.topic-left { flex: 1; }
.topic-title { font-weight: 700; color: var(--gray-900); font-size: 14px; margin-bottom: 5px; }
.topic-meta-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.topic-reason { font-size: 12px; color: var(--gray-500); }
.topic-timing { font-size: 10.5px; color: var(--primary); background: var(--primary-bg); padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.heat-level {
    padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px;
}
.heat-explode { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.heat-hot { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: #92400e; }
.heat-warm { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.topic-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.heat-bar { width: 70px; height: 7px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.heat-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 4px; transition: width 0.5s ease; }
.topic-platform { font-size: 11.5px; color: var(--gray-500); background: var(--gray-100); padding: 3px 9px; border-radius: 6px; }

/* 竞品分析 */
.competitor-box { display: flex; flex-direction: column; gap: 14px; }
.competitor-item {
    padding: 18px; background: white; border-radius: 12px;
    border: 1.5px solid #e9d5ff; transition: all 0.2s;
}
.competitor-item:hover { border-color: #8b5cf6; box-shadow: 0 4px 14px rgba(139,92,246,0.08); }
.competitor-item strong { font-size: 13px; color: #6d28d9; display: block; margin-bottom: 7px; font-weight: 700; }
.competitor-item p { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; }
.competitor-titles { list-style: none; padding: 0; margin-top: 9px; }
.competitor-titles li {
    padding: 7px 13px; background: var(--gray-50); border-radius: 8px;
    margin-bottom: 5px; font-size: 12.5px; color: var(--gray-700);
    border-left: 3px solid var(--primary); transition: all 0.12s;
}
.competitor-titles li:hover { background: var(--primary-bg); }

/* 内容创作建议 - 现代卡片 */
.suggestion-list { display: flex; flex-direction: column; gap: 14px; }
.suggestion-item {
    background: white; border: 1.5px solid var(--gray-100);
    border-radius: 16px; transition: all 0.25s; cursor: pointer;
    position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.suggestion-item::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--primary), #a855f7);
    opacity: 0; transition: opacity 0.25s;
}
.suggestion-item:hover {
    border-color: var(--primary); transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(99,102,241,0.13);
}
.suggestion-item:hover::before { opacity: 1; }
.suggestion-top {
    display: flex; align-items: center; gap: 10px; padding: 18px 22px 0 22px;
}
.suggestion-type {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    color: var(--primary); background: var(--primary-bg); padding: 4px 12px;
    border-radius: 20px; letter-spacing: 0.8px;
}
.suggestion-reads {
    margin-left: auto; font-size: 11.5px; color: var(--gray-400);
    background: var(--gray-50); padding: 4px 12px; border-radius: 20px; font-weight: 600;
}
.suggestion-title {
    font-weight: 800; color: var(--gray-900); padding: 12px 22px 0;
    font-size: 16px; line-height: 1.5;
}
.suggestion-body { padding: 14px 22px; display: flex; flex-direction: column; gap: 10px; }
.suggestion-hook {
    font-size: 13px; color: #be185d; background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    padding: 10px 14px; border-radius: 10px; font-style: italic; font-weight: 500;
    border-left: 3px solid #ec4899;
}
.suggestion-outline {
    font-size: 12.5px; color: var(--gray-600); background: var(--gray-50);
    padding: 10px 14px; border-radius: 10px; line-height: 1.7;
    border-left: 3px solid var(--primary);
}
.suggestion-outline span { color: var(--primary); font-weight: 700; }
.suggestion-reason {
    font-size: 13px; color: var(--gray-500); padding: 0 22px 18px;
    display: flex; align-items: center; gap: 6px;
}
.suggestion-reason::before { content: '💡'; font-size: 14px; }
.suggestion-cta {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 22px; border-top: 1px solid var(--gray-100);
    background: var(--gray-50); border-radius: 0 0 16px 16px;
}

/* 底部操作栏 */
.kw-actions-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 32px; background: white; border-top: 2px solid var(--gray-100);
    position: sticky; bottom: 0; z-index: 10; box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
}
.selected-count { font-size: 13.5px; color: var(--gray-500); font-weight: 500; }
.selected-count strong { color: var(--primary); font-weight: 800; }
.btn-goto-generate {
    font-size: 15px; padding: 12px 28px; letter-spacing: 0.3px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    border: none; color: white; font-weight: 700; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-goto-generate:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,0.3); }

/* 重新分析按钮 */
.btn-regenerate {
    font-size: 14px; padding: 10px 22px; border-radius: var(--radius-sm);
    background: var(--gray-100); border: 1.5px solid var(--gray-200); color: var(--gray-600);
    font-weight: 600; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-regenerate:hover:not(:disabled) {
    background: var(--primary-bg); color: var(--primary); border-color: var(--primary-light);
    transform: translateY(-1px);
}
.btn-regenerate:disabled { opacity: 0.6; cursor: not-allowed; }

/* 结果区域重新生成按钮 */
.btn-regenerate-sm {
    font-size: 13px; padding: 6px 14px; border-radius: var(--radius-xs);
    background: var(--primary-bg); border: 1px solid var(--primary-light); color: var(--primary);
    font-weight: 600; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 4px;
}
.btn-regenerate-sm:hover:not(:disabled) {
    background: var(--primary); color: white; border-color: var(--primary);
}
.btn-regenerate-sm:disabled { opacity: 0.6; cursor: not-allowed; }

/* 选中关键词标签 */
.selected-kw-tags { margin-bottom: 14px; }
.selected-kw-tags label { display: block; margin-bottom: 7px; font-weight: 600; color: var(--gray-700); font-size: 13px; }
.selected-kw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.selected-kw-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
    background: var(--primary-bg); color: var(--primary-dark); border-radius: 20px;
    font-size: 12px; font-weight: 600; border: 1px solid #c7d2fe;
}
.selected-kw-remove { cursor: pointer; font-size: 13px; color: var(--gray-400); margin-left: 2px; }
.selected-kw-remove:hover { color: var(--danger); }


/* ========================================================
   生成内容页面
   ======================================================== */
.generate-layout { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; }
.generate-form-panel {
    background: white; padding: 28px; border-radius: var(--radius); box-shadow: var(--shadow);
    position: sticky; top: 80px; border: 1px solid var(--gray-100);
}
.generate-form-panel h2 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.generate-form-panel .section-desc { margin-bottom: 22px; }

.generate-result-panel {
    background: white; border-radius: var(--radius); box-shadow: var(--shadow);
    min-height: 420px; border: 1px solid var(--gray-100); overflow: hidden;
}

/* 关键词摘要栏 */
.kw-summary-bar {
    display: flex; align-items: center; gap: 10px; padding: 11px 18px;
    background: linear-gradient(90deg, #eef2ff, #f5f3ff); border-bottom: 1px solid #c7d2fe;
    font-size: 13px; color: #4338ca; font-weight: 500;
}
.kw-summary-icon { font-size: 18px; }
.kw-summary-clear { margin-left: auto; background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 4px; }
.kw-summary-clear:hover { color: var(--gray-700); background: rgba(99,102,241,0.1); }

/* 结果头部 */
.result-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 28px; border-bottom: 1px solid var(--gray-100);
}
.result-header h2 { font-size: 17px; font-weight: 800; color: var(--gray-900); }
.result-actions { display: flex; gap: 8px; }

/* 按钮 */
.btn-icon {
    width: 36px; height: 36px; background: var(--gray-100); border: none; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; color: var(--gray-600);
}
.btn-icon:hover { background: var(--gray-200); color: var(--gray-800); }

.btn-publish {
    padding: 9px 18px; background: linear-gradient(135deg, #10b981, #059669); color: white;
    border: none; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;
}
.btn-publish:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.btn-publish:disabled { opacity: 0.65; cursor: default; transform: none; }

/* 生成按钮 loading */
.btn-generate { margin-top: 8px; border-radius: var(--radius-sm); }
.spinner {
    display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 标题列表 */
.result-titles { padding: 20px 28px; border-bottom: 1px solid var(--gray-100); }
.result-titles h4 { font-size: 13px; font-weight: 700; color: var(--gray-500); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.title-item {
    padding: 13px 16px; background: var(--primary-bg); border-radius: 10px; margin-bottom: 7px;
    font-weight: 600; color: var(--primary-dark); cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 10px; border: 1.5px solid transparent;
}
.title-item:hover { background: var(--primary-bg-hover); border-color: var(--primary); }
.title-item .title-num {
    width: 22px; height: 22px; background: var(--primary); color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0;
}

/* 摘要 */
.result-summary {
    padding: 14px 20px; background: var(--gray-50); margin: 0 28px;
    border-radius: var(--radius-sm); margin-bottom: 18px;
    font-size: 13.5px; color: var(--gray-600); border-left: 4px solid var(--primary);
}

/* 正文内容区 */
.result-content { margin: 0 28px 20px; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.content-toolbar {
    padding: 11px 18px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
    display: flex; justify-content: space-between; align-items: center;
}
.content-label { font-weight: 600; font-size: 12.5px; color: var(--gray-700); }
.content-meta { font-size: 11.5px; color: var(--gray-400); }

/* 文章正文预览 - 仿公众号阅读体验 */
.content-preview {
    padding: 32px 36px; font-size: 15px; line-height: 2;
    max-height: 540px; overflow-y: auto; color: #1a1a2e;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
.content-preview h2 { font-size: 19px; font-weight: 800; margin: 24px 0 12px; color: #111827; line-height: 1.5; }
.content-preview h3 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; color: #1f2937; }
.content-preview p { margin-bottom: 14px; }
.content-preview strong { color: var(--primary-dark); font-weight: 700; }
.content-preview blockquote {
    border-left: 4px solid var(--primary); padding: 14px 18px;
    background: linear-gradient(135deg, var(--primary-bg), rgba(168,85,247,0.05));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 16px 0; font-style: italic;
    color: var(--primary-dark);
}
.content-preview ul, .content-preview ol { padding-left: 20px; margin-bottom: 14px; }
.content-preview li { margin-bottom: 6px; }
.content-preview img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
.content-preview hr { border: none; height: 1px; background: var(--gray-200); margin: 24px 0; }

/* 标签 */
.result-tags { padding: 0 28px 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
    padding: 5px 14px; background: var(--gray-100); border-radius: 20px;
    font-size: 12px; color: var(--gray-600); font-weight: 500; border: 1px solid var(--gray-200);
}
.result-usage {
    padding: 11px 16px; background: var(--warning-bg); border-radius: var(--radius-sm);
    margin: 0 28px 20px; font-size: 12.5px; color: #92400e;
    border: 1px solid #fde68a;
}

/* 空状态 */
#generateResultEmpty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 380px; text-align: center; padding: 40px;
}
#generateResultEmpty .empty-icon { font-size: 52px; margin-bottom: 16px; }
#generateResultEmpty p { font-size: 15px; color: var(--gray-500); margin-bottom: 6px; }
#generateResultEmpty .empty-sub { font-size: 13px; color: var(--gray-400); }


/* ========================================================
   内容风格选择
   ======================================================== */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-option { cursor: pointer; }
.style-option input { display: none; }
.style-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--gray-700); margin-bottom: 2px; }
.style-desc { font-size: 11px; color: var(--gray-400); }
.style-option {
    padding: 11px 13px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); transition: all 0.15s;
}
.style-option:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); box-shadow: 0 0 0 3px rgba(99,102,241,0.08); }
.style-option:has(input:checked) .style-label { color: var(--primary); }


/* ========================================================
   封面图上传
   ======================================================== */
.cover-upload-area {
    width: 100%; min-height: 110px; border: 2px dashed var(--gray-200);
    border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s;
    overflow: hidden; position: relative;
}
.cover-upload-area:hover { border-color: var(--primary); background: rgba(99,102,241,0.03); }
.cover-upload-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 22px; text-align: center; color: var(--gray-400);
}
.cover-upload-placeholder span:first-child { font-size: 30px; margin-bottom: 7px; }
.cover-upload-placeholder p { font-size: 13.5px; font-weight: 600; color: var(--gray-600); margin-bottom: 3px; }
.cover-upload-placeholder span:last-child { font-size: 11.5px; }
.cover-upload-preview {
    position: relative; display: flex; align-items: center; justify-content: center;
    background: var(--gray-100); min-height: 110px;
}
.cover-upload-preview img { max-width: 100%; max-height: 180px; object-fit: contain; display: block; }
.cover-preview-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.cover-upload-preview:hover .cover-preview-overlay { opacity: 1; }
.cover-preview-overlay span { color: white; font-weight: 600; font-size: 13px; }
.cover-upload-status { font-size: 12.5px; margin-top: 7px; }
.cover-upload-status.status-ready { color: var(--primary); }
.cover-upload-status.status-success { color: var(--success); font-weight: 600; }
.cover-upload-status.status-error { color: var(--danger); }


/* ========================================================
   小眼睛暗文切换
   ======================================================== */
.secret-field { display: flex; gap: 8px; align-items: center; }
.secret-field .input-wrapper { flex: 1; position: relative; }
.eye-btn {
    width: 36px; height: 36px; background: var(--gray-100); border: none; border-radius: var(--radius-sm);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--gray-500); transition: all 0.2s; flex-shrink: 0;
}
.eye-btn:hover { background: var(--gray-200); color: var(--gray-700); }


/* ========================================================
   账号中心
   ======================================================== */
.account-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.account-profile-card {
    background: linear-gradient(136deg, #6366f1, #8b5cf6); color: white; padding: 30px 28px;
    border-radius: var(--radius); text-align: center; position: sticky; top: 80px;
    box-shadow: 0 4px 16px rgba(99,102,241,0.2);
}
.account-avatar-large {
    width: 68px; height: 68px; background: rgba(255,255,255,0.18); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    font-weight: 800; margin: 0 auto 14px; backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
}
.account-profile-card h2 { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.account-email { font-size: 12.5px; opacity: 0.8; margin-bottom: 11px; }
.account-plan-badge {
    display: inline-block; padding: 5px 16px; border-radius: 20px; font-size: 12px;
    font-weight: 700; margin-bottom: 14px;
}
.account-plan-badge.plan-free { background: rgba(255,255,255,0.15); }
.account-plan-badge.plan-paid { background: #fbbf24; color: #1f2937; }
.account-joined { font-size: 11.5px; opacity: 0.55; }

.account-info-panel { display: flex; flex-direction: column; gap: 22px; }
.account-section {
    background: white; padding: 26px 28px; border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}
.account-section h3 { font-size: 15px; font-weight: 800; margin-bottom: 18px; padding-bottom: 11px; border-bottom: 1px solid var(--gray-100); }

.account-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-item { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.info-label { font-size: 12.5px; color: var(--gray-500); min-width: 78px; white-space: nowrap; }
.info-value { font-size: 13.5px; font-weight: 600; color: var(--gray-800); }

.account-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-mini {
    background: var(--gray-50); padding: 16px; border-radius: var(--radius-sm); text-align: center;
    border: 1px solid var(--gray-100);
}
.stat-mini-value { font-size: 26px; font-weight: 800; color: var(--gray-900); display: block; }
.stat-mini-label { font-size: 11.5px; color: var(--gray-500); }

.account-danger-section { border: 1.5px solid #fecaca; }
.account-danger-actions { display: flex; gap: 12px; }
.btn-danger-outline {
    padding: 9px 22px; background: white; color: var(--danger); border: 1.5px solid var(--danger);
    border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-danger-outline:hover { background: var(--danger-bg); }


/* ========================================================
   内容管理
   ======================================================== */
.content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.content-header h2 { font-size: 17px; font-weight: 800; }
.content-filters { display: flex; gap: 12px; }
.content-filters select { padding: 8px 13px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; background: white; }
.content-grid { display: grid; gap: 14px; }
.content-item {
    background: white; padding: 22px 24px; border-radius: var(--radius); box-shadow: var(--shadow);
    display: grid; grid-template-columns: 1fr auto; gap: 16px; transition: all 0.15s;
    border: 1.5px solid transparent;
}
.content-item:hover { border-color: var(--primary-bg); box-shadow: var(--shadow-md); }
.content-main h3 { font-size: 15px; font-weight: 600; margin-bottom: 7px; color: var(--gray-800); }
.content-meta-row { display: flex; gap: 16px; font-size: 12.5px; color: var(--gray-500); flex-wrap: wrap; }
.content-meta-row span { display: flex; align-items: center; gap: 4px; }
.status-badge { padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.status-draft { background: var(--gray-100); color: var(--gray-600); }
.status-published { background: var(--success-bg); color: #047857; }
.content-actions { display: flex; gap: 8px; align-items: flex-start; }
.content-actions button {
    padding: 7px 15px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
    background: white; font-size: 12.5px; cursor: pointer; transition: all 0.15s; color: var(--gray-600);
}
.content-actions button:hover { border-color: var(--primary); color: var(--primary); }
.content-actions .btn-delete:hover { border-color: var(--danger); color: var(--danger); }


/* ========================================================
   套餐管理
   ======================================================== */
.sub-header { text-align: center; margin-bottom: 36px; }
.sub-header h2 { font-size: 22px; font-weight: 800; color: var(--gray-900); }
.sub-header p { color: var(--gray-500); margin-top: 7px; }
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.plan-card {
    background: white; padding: 30px 22px; border-radius: var(--radius); box-shadow: var(--shadow);
    text-align: center; border: 1.5px solid var(--gray-100); transition: all 0.2s; position: relative;
}
.plan-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-card.popular { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    padding: 3px 14px; background: var(--primary); color: white; border-radius: 20px;
    font-size: 11px; font-weight: 700;
}
.plan-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 7px; color: var(--gray-800); }
.plan-price { font-size: 38px; font-weight: 800; color: var(--gray-900); margin-bottom: 3px; }
.plan-price small { font-size: 13px; font-weight: 400; color: var(--gray-500); }
.plan-period { font-size: 12.5px; color: var(--gray-400); margin-bottom: 22px; }
.plan-features { list-style: none; text-align: left; margin-bottom: 26px; }
.plan-features li {
    padding: 7px 0; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; color: var(--gray-600);
    display: flex; align-items: center; gap: 8px;
}
.plan-features li::before { content: '✓'; color: var(--success); font-weight: 800; font-size: 13px; }
.plan-btn { width: 100%; padding: 11px; border: 1.5px solid var(--primary); border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.plan-btn-primary { background: var(--primary); color: white; }
.plan-btn-primary:hover { background: var(--primary-dark); }
.plan-btn-outline { background: white; color: var(--primary); }
.plan-btn-outline:hover { background: var(--primary-bg); }
.plan-btn-current { background: var(--gray-100); color: var(--gray-400); border-color: var(--gray-200); cursor: default; }


/* ========================================================
   系统设置
   ======================================================== */
.settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.settings-section {
    background: white; padding: 26px 28px; border-radius: var(--radius); box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}
.settings-section h3 { font-size: 15px; font-weight: 800; margin-bottom: 18px; padding-bottom: 11px; border-bottom: 1px solid var(--gray-100); }
.settings-section .form-group input, .settings-section .form-group select { padding-left: 14px; border-width: 1.5px; }
.settings-section-header { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
.settings-section-header h3 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.settings-desc { color: var(--gray-500); font-size: 12.5px; margin-bottom: 18px; }
.settings-actions { display: flex; gap: 12px; margin-top: 4px; }
.wx-badge { padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.wx-badge-on { background: var(--success-bg); color: #047857; border: 1px solid #a7f3d0; }
.wx-badge-off { background: var(--gray-100); color: var(--gray-500); }
.settings-wx { grid-column: 1 / -1; }
.smtp-info { padding: 11px 15px; background: var(--gray-50); border-radius: var(--radius-sm); border: 1px solid var(--gray-200); }


/* ========================================================
   Toast 提示
   ======================================================== */
.toast {
    position: fixed; bottom: 28px; right: 28px; padding: 13px 22px;
    background: var(--gray-800); color: white; border-radius: var(--radius-sm);
    font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-xl);
    z-index: 10000; transform: translateY(100px); opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }


/* ========================================================
   导航徽章
   ======================================================== */
.nav-badge {
    margin-left: auto; padding: 2px 7px; background: rgba(99,102,241,0.22);
    color: #a5b4fc; border-radius: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
}
.nav-item.active .nav-badge { background: rgba(255,255,255,0.2); color: white; }


/* ========================================================
   验证码发送按钮
   ======================================================== */
.input-with-btn { display: flex; align-items: center; position: relative; }
.input-with-btn input { flex: 1; padding-right: 130px !important; }
.btn-send-code {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    padding: 7px 15px; background: var(--primary); color: white; border: none; border-radius: 6px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; z-index: 2; transition: all 0.2s;
}
.btn-send-code:hover { background: var(--primary-dark); }
.btn-send-code:disabled { opacity: 0.55; cursor: not-allowed; }
.send-code-countdown { font-variant-numeric: tabular-nums; }


/* ========================================================
   支付弹窗
   ======================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(4px);
}
.payment-modal {
    background: white; border-radius: 20px; padding: 36px; max-width: 400px; width: 90%;
    position: relative; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-close {
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
    background: var(--gray-100); border: none; border-radius: 50%; font-size: 17px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--gray-500); transition: all 0.2s;
}
.modal-close:hover { background: var(--gray-200); color: var(--gray-800); }
.payment-header { margin-bottom: 18px; }
.payment-header h2 { font-size: 21px; font-weight: 800; color: var(--gray-900); margin-bottom: 3px; }
.payment-header p { font-size: 14px; color: var(--primary); font-weight: 600; }
.payment-amount {
    padding: 15px 22px; background: var(--primary-bg); border-radius: var(--radius-sm);
    margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between;
}
.payment-amount-label { font-size: 13.5px; color: var(--gray-600); font-weight: 500; }
.payment-amount-value { font-size: 30px; font-weight: 800; color: var(--primary-dark); }
.payment-qrcode {
    margin: 0 auto 18px; width: 200px; height: 200px; display: flex; align-items: center;
    justify-content: center; border: 2px dashed var(--gray-200); border-radius: var(--radius-sm); background: white;
}
.qr-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gray-400); font-size: 12.5px; }
.payment-instructions { margin-bottom: 14px; }
.payment-instructions p { font-size: 13.5px; color: var(--gray-600); margin-bottom: 3px; }
.payment-tip { font-size: 12px !important; color: var(--gray-400) !important; }
.payment-demo-note {
    padding: 13px 18px; background: var(--warning-bg); border-radius: var(--radius-sm);
    margin-bottom: 14px; border: 1px solid #fde68a;
}
.payment-demo-note p { font-size: 12.5px; color: #92400e; margin: 0; }
.payment-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; font-size: 13px; color: var(--gray-500); }
.payment-success { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 18px 0; }
.payment-success h3 { font-size: 19px; font-weight: 800; color: var(--success); }
.payment-success p { font-size: 13.5px; color: var(--gray-500); margin-bottom: 7px; }
.payment-success .btn-primary { width: auto; padding: 11px 28px; }

/* 支付订单记录 */
.order-list { display: flex; flex-direction: column; gap: 9px; }
.order-item {
    background: white; padding: 15px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid var(--gray-100);
}
.order-info { flex: 1; }
.order-info strong { font-size: 13.5px; color: var(--gray-800); display: block; }
.order-id { font-size: 10.5px; color: var(--gray-400); }
.order-meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--gray-500); }
.order-status { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.order-paid .order-status { color: var(--success); }
.order-pending .order-status { color: var(--warning); }
.order-failed .order-status { color: var(--danger); }


/* ========================================================
   响应式
   ======================================================== */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .plans-grid { grid-template-columns: repeat(2, 1fr); }
    .portrait-grid { grid-template-columns: 1fr 1fr; }
    .long-tail-grid { grid-template-columns: 1fr 1fr; }
    .account-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .generate-layout { grid-template-columns: 1fr; }
    .keywords-layout { grid-template-columns: 1fr; }
    .generate-form-panel { position: static; }
    .keywords-form { position: static; }
    .settings-layout { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .account-profile-card { position: static; }
    .portrait-grid { grid-template-columns: 1fr; }
    .long-tail-grid { grid-template-columns: 1fr; }
    .overview-grid { grid-template-columns: 1fr; }
    .overview-scores { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .auth-left { display: none; }
    .auth-right { padding: 20px; }
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .stats-grid { grid-template-columns: 1fr; }
    .plans-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .account-stats-grid { grid-template-columns: 1fr 1fr; }
    .account-profile-card { flex-direction: column; text-align: center; }
    .kw-actions-bar { flex-direction: column; gap: 12px; }
    .content-preview { padding: 20px; }
}