/* ============================================================
   HanziTest — 视觉精修层
   保留原有紫色视觉体系，只优化排版、间距、层次与交互细节。
   在各页面内联样式之后加载。
   ============================================================ */

:root {
    /* 沿用原有配色 */
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #eef2ff;
    --primary-lighter: #f5f7ff;
    --accent: #7c3aed;
    --success: #22c55e;
    --success-light: #dcfce7;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --warning: #f59e0b;
    --warn: #f59e0b;
    --bg: #f7f9fc;
    --card: #ffffff;
    --text: #1f2937;
    --text-secondary: #6b7280;
    --muted: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -16px rgba(15, 23, 42, .16);
    --shadow-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 26px 50px -26px rgba(15, 23, 42, .28);
    --shadow-hover: 0 2px 6px rgba(15, 23, 42, .05), 0 26px 50px -26px rgba(15, 23, 42, .28);
    --radius: 16px;
}

/* ---------- 基底 ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2 { letter-spacing: -.012em; text-wrap: balance; }
h1 { line-height: 1.15; }

p { text-wrap: pretty; }

a { transition: color .18s ease; }

::selection { background: rgba(79, 70, 229, .16); color: var(--text); }

:focus-visible { outline: 2px solid rgba(79, 70, 229, .45); outline-offset: 2px; }

/* ---------- 卡片：统一阴影与描边，减弱“漂浮感” ---------- */
.card,
.panel,
.plan,
.stat-card,
.stat-box,
.tone-card,
.rule-card,
.chart-wrap,
.quiz-shell,
.detail-card {
    border: 1px solid rgba(15, 23, 42, .04);
    box-shadow: var(--shadow);
}

.card { padding: 32px; }

.card h2,
.panel h2 {
    line-height: 1.35;
    margin-bottom: 14px;
}

.card p,
.panel p { line-height: 1.75; }

/* ---------- 按钮 ---------- */
.btn,
.btn-primary,
.btn-plan.upgrade {
    border-radius: 12px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-primary:hover,
.btn-plan.upgrade:hover {
    box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .55);
}

.btn:active,
.btn-primary:active,
.btn-plan.upgrade:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* 深色底按钮一律白字（全站兜底）
   页面里普遍有 `.card a { color: 紫 }` 这类"区块内链接"规则，优先级高于 `.btn-primary`，
   会把紫底主按钮的文字也染成紫色 —— 紫底紫字完全看不清。这里用更高优先级钉死颜色。 */
a.btn-primary,
button.btn-primary,
.card a.btn-primary,
.cta a.btn-primary,
.panel a.btn-primary,
a.btn-primary:hover,
.card a.btn-primary:hover,
.cta a.btn-primary:hover,
a.btn-plan.upgrade,
.card a.btn-plan.upgrade,
a.btn-plan.upgrade:hover {
    color: #fff;
    text-decoration: none;
}

.btn-secondary,
.btn-plan.free {
    border-radius: 12px;
}

/* ---------- 顶部导航 ---------- */
.nav-links a {
    transition: color .18s ease;
}

.logo { letter-spacing: -.01em; }

/* ---------- 首页双栏英雄区 ---------- */
.hero--split {
    text-align: left;
    padding: 48px 0 40px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 48px;
    align-items: center;
}

.hero-copy .hero-badge { margin-bottom: 18px; }

.hero-copy h1 {
    font-size: 38px;
    margin-bottom: 16px;
}

.hero-copy p {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 34em;
    margin: 0 0 26px;
}

.hero-copy .hero-cta { justify-content: flex-start; }

.hero-note {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: .01em;
}

.hero--split .hero-demo {
    margin: 0;
    max-width: none;
    width: 100%;
}

.demo-nav { flex-wrap: wrap; }

.demo-nav .demo-cta {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.demo-nav .demo-cta:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.hero--split + .stats { margin-top: 6px; }

.stat-card {
    padding: 22px 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.stat-card .stat-num { font-size: 30px; letter-spacing: -.01em; }
.stat-card .stat-label { font-size: 12.5px; letter-spacing: .01em; }

/* ---------- 表格 ---------- */
.hsk-table tr:nth-child(even) td,
.cmp tr:nth-child(even) td {
    background: #fafbfe;
}

.hsk-table th,
.cmp th { letter-spacing: .01em; }

/* ---------- 定价 ---------- */
.plan { padding: 34px 32px; }
.plan-badge { letter-spacing: .02em; }
.price .amount { letter-spacing: -.02em; }

/* ---------- 测试页字卡 ---------- */
.char-display { padding: 28px 0 18px; }
.char-big { letter-spacing: .02em; }

/* ---------- 页脚 ---------- */
footer {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

/* ---------- 小屏 ---------- */
@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .hero--split { text-align: center; padding: 36px 0 30px; }
    .hero-copy h1 { font-size: 34px; }
    .hero-copy p { margin-left: auto; margin-right: auto; }
    .hero-copy .hero-cta { justify-content: center; }
    .hero--split .hero-demo { max-width: 460px; margin: 0 auto; }
}

@media (max-width: 640px) {
    .card { padding: 24px 20px; }
    .hero-copy h1 { font-size: 30px; }
    .hero-note { text-align: center; }
    footer { margin-top: 26px; }
}