:root {
    --brand-primary:#f39800;
    --brand-primary-dark:#db3710;
    --brand-primary-soft:#fff4df;
    --brand-gold:#aa8534;
    --text:#1f1f1f;
    --muted:#7a6250;
    --line:#eee0cf;
    --surface:#fffaf2;
    --page:#fff;
    --ok:#188652;
    --bad:#c7372f;
    --page-gutter:32px;
    --page-max:1440px;
}
* { box-sizing:border-box; }
body {
    margin:0;
    background:var(--page);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
}
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
.page { width:min(calc(100% - var(--page-gutter)), var(--page-max)); margin:0 auto; }
.topbar {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    min-height:108px; border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; }
.brand-mark { width:220px; max-width:45vw; display:block; }
.nav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 12px; color:#5f4630; font-size:14px; }
.nav a:hover, .nav a.active { color:var(--brand-primary-dark); }
.nav-dk { white-space:nowrap; }
.nav-mb { display:none; border:1px solid var(--line); border-radius:6px; padding:7px 24px 7px 10px; background:#fff; color:#5f4630; }
.hero {
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:28px;
    padding:28px 0 22px; border-bottom:1px solid var(--line);
}
.kicker { margin:0 0 8px; color:var(--brand-gold); font-size:13px; font-weight:750; }
h1 { margin:0; font-size:34px; line-height:1.18; letter-spacing:0; }
.subtitle { margin:10px 0 0; color:var(--muted); line-height:1.7; font-size:14px; }
.hero-actions, .toolbar, .card-actions, .exam-actions { display:flex; flex-wrap:wrap; gap:10px; }
.hero-actions { margin-top:18px; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; min-height:42px; border-radius:7px;
    border:1px solid var(--line); padding:0 14px; background:#fff; color:#5f4630; font-weight:800; cursor:pointer;
}
.btn-primary { background:var(--brand-primary); border-color:var(--brand-primary); color:#111; }
.btn-danger { background:#fff4f1; border-color:#f0b4a8; color:#9c291d; }
.btn:hover { border-color:var(--brand-primary); color:var(--brand-primary-dark); }
.btn[disabled] { opacity:.55; cursor:not-allowed; }
.btn-jump { background:#eef7ff; border-color:#98c8f0; color:#1a5e9c; }
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-self:end; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:16px; }
.stat strong { display:block; font-size:26px; line-height:1.2; white-space:nowrap; }
.stat span { display:block; margin-top:7px; color:var(--muted); font-size:13px; white-space:nowrap; }
.section { padding:24px 0; border-bottom:1px solid var(--line); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-head h2 { margin:0; font-size:21px; line-height:1.3; }
.section-head a { color:var(--brand-gold); font-size:13px; }
.quick-grid, .article-grid, .category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.quick-card, .article-card, .category-card, .panel {
    border:1px solid var(--line); border-radius:7px; background:#fff; padding:14px; min-width:0;
}
.quick-card:hover, .article-card:hover, .category-card:hover { border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.quick-card strong, .article-card strong, .category-card strong { display:block; font-size:17px; line-height:1.35; }
.quick-card span, .article-card p, .category-card p, .muted { color:var(--muted); font-size:13px; line-height:1.6; }
.level-card { align-self:end; border:1px solid var(--line); border-radius:7px; background:var(--surface); padding:18px; }
.level-card strong { display:block; font-size:24px; line-height:1.25; color:var(--brand-primary-dark); }
.xpbar { height:10px; overflow:hidden; margin:14px 0 12px; border-radius:999px; background:#ead8bd; }
.xpbar span { display:block; height:100%; border-radius:999px; background:var(--brand-primary); }
.quest-map { display:grid; gap:14px; }
.quest-stage {
    display:grid; grid-template-columns:140px minmax(0,1fr) 210px; gap:16px; align-items:start;
    border:1px solid var(--line); border-radius:7px; background:#fff; padding:16px;
}
.quest-badge {
    display:grid; gap:5px; align-content:center; min-height:92px; border-radius:7px;
    background:var(--brand-primary-soft); color:#5f4630; padding:12px; text-align:center;
}
.quest-badge b { display:block; color:var(--brand-primary-dark); font-size:20px; line-height:1.1; }
.quest-badge span { font-size:13px; font-weight:800; }
.quest-main h3 { margin:0 0 8px; font-size:19px; line-height:1.35; }
.quest-main p { margin:0 0 10px; color:var(--muted); line-height:1.65; font-size:14px; }
.quest-list { margin:0; padding-left:19px; color:#3a2b1f; line-height:1.7; font-size:14px; }
.quest-actions { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.quest-actions .btn { width:100%; min-height:38px; }
.soon {
    display:inline-flex; align-items:center; justify-content:center; min-height:34px; border:1px dashed #ead8bd;
    border-radius:7px; padding:0 10px; color:#8a7564; background:#fffaf2; font-size:12px; font-weight:800; text-align:center;
}
.category-card b { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-bottom:10px; border-radius:7px; background:var(--brand-primary); color:#111; }
.category-card .veh-desc { color:#3a2b1f; font-size:14px; margin-bottom:8px; line-height:1.5; }
.category-card .meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.category-card .meta span { background:var(--surface); border-radius:5px; padding:3px 9px; font-size:12px; color:#5f4630; }
.category-card .desc { font-size:13px; line-height:1.65; }
.chapter-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.chapter-item {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border:1px solid var(--line); border-radius:7px; padding:13px; background:#fff;
}
.chapter-item:hover { border-color:var(--brand-primary); }
.chapter-item strong { display:block; }
.chapter-item span { color:var(--muted); font-size:12px; }
.practice-shell { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:start; padding:24px 0; }
.question-card { border:1px solid var(--line); border-radius:7px; background:#fff; overflow:hidden; }
.question-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-bottom:1px solid var(--line); background:var(--surface); }
.question-head strong { color:var(--brand-primary-dark); }
.question-body { padding:18px; }
.question-title { margin:0; font-size:20px; line-height:1.55; }
.options { display:grid; gap:10px; margin-top:18px; }
.option {
    width:100%; display:flex; gap:10px; align-items:flex-start; text-align:left;
    border:1px solid var(--line); border-radius:7px; background:#fff; padding:12px; cursor:pointer;
}
.option:hover { border-color:var(--brand-primary); }
.option-key { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; background:var(--surface); font-weight:850; color:#5f4630; }
.option.selected { border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.option.correct { border-color:#8fcea9; background:#eefaf3; color:#0f623b; }
.option.wrong { border-color:#efa39c; background:#fff1ef; color:#9c291d; }
.explain { display:none; margin-top:16px; border:1px solid var(--line); border-radius:7px; background:var(--surface); padding:13px; color:#5f4630; line-height:1.7; }
.explain.show { display:block; }
.side-panel { display:grid; gap:12px; }
.subject-tabs { display:flex; gap:8px; margin-top:12px; }
.subject-tabs .btn { flex:1; min-height:38px; }
.subject-tabs .active { background:var(--brand-primary-soft); border-color:var(--brand-primary); color:var(--brand-primary-dark); }
.question-pager { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.qdot {
    width:34px; height:34px; border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer;
    color:#5f4630; font-size:12px; font-weight:800;
}
.qdot.active { border-color:var(--brand-primary); background:var(--brand-primary-soft); color:var(--brand-primary-dark); }
.qdot.done { background:#eefaf3; border-color:#8fcea9; color:#0f623b; }
.qdot.bad { background:#fff1ef; border-color:#efa39c; color:#9c291d; }
.result-banner {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    border:1px solid var(--line); border-radius:7px; background:var(--surface); padding:18px; margin-top:18px;
}
.score { font-size:36px; font-weight:900; color:var(--brand-primary-dark); }
.article-body { max-width:780px; padding:24px 0 40px; line-height:1.85; color:#3a2b1f; }
.article-body h1 { font-size:30px; margin-bottom:12px; }
.article-body p { margin:0 0 14px; }
.article-body .gesture-img { max-width:420px; width:100%; height:auto; display:block; margin:16px auto; border:1px solid var(--line); border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.state { color:var(--muted); padding:18px 0; }
.empty { border:1px dashed var(--line); border-radius:7px; padding:20px; color:var(--muted); background:#fff; }
.site-footer { padding:22px 0 34px; color:#8a7564; font-size:12px; line-height:1.7; text-align:center; }
.footer-link { color:var(--brand-gold); }

@media (max-width:760px) {
    :root { --page-gutter:22px; }
    .page { width:min(calc(100% - var(--page-gutter)), var(--page-max)); }
    .topbar { min-height:86px; }
    .brand-mark { width:160px; max-width:42vw; }
    .nav-dk { display:none; }
    .nav-mb { display:block; max-width:112px; }
    .hero, .practice-shell { display:block; padding-top:18px; }
    h1 { font-size:27px; }
    .stats { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:14px; }
    .stat { padding:10px; }
    .stat strong { font-size:22px; }
    .quick-grid, .article-grid, .category-grid, .chapter-list { grid-template-columns:1fr; }
    .level-card { margin-top:14px; }
    .quest-stage { grid-template-columns:1fr; gap:12px; padding:13px; }
    .quest-badge { min-height:auto; text-align:left; }
    .quest-actions { flex-direction:row; flex-wrap:wrap; }
    .quest-actions .btn, .quest-actions .soon { flex:1 1 150px; }
    .side-panel { margin-top:14px; }
    .question-title { font-size:18px; }
    .question-head { align-items:flex-start; flex-direction:column; }
    .result-banner { display:block; }
    #startMockBtn { display:block; width:100%; max-width:320px; margin:20px auto; padding:0 20px; min-height:50px; font-size:18px; font-weight:900; }
}

@media (min-width:1280px) {
    :root {
        --page-gutter:96px;
        --page-max:1440px;
    }

    body {
        font-size:15px;
    }

    .nav,
    .btn,
    .quick-card span,
    .category-card p,
    .article-card p,
    .quest-main p,
    .quest-list,
    .category-card .meta span,
    .chapter-item span,
    .exam-rule,
    .site-footer {
        font-size:14px;
    }

    .tag,
    .card-kicker {
        font-size:13px;
    }
}

/* Wide content adaptation: keep learning cards at a readable width. */
@media (min-width:1280px) {
    .hero {
        grid-template-columns:minmax(0, 760px) minmax(280px, 420px);
        justify-content:space-between;
    }

    .quick-grid,
    .article-grid,
    .category-grid {
        grid-template-columns:repeat(auto-fill, minmax(240px, 300px));
        justify-content:start;
    }

    .chapter-list {
        grid-template-columns:repeat(auto-fill, minmax(300px, 420px));
        justify-content:start;
    }

    .quest-map,
    .practice-shell,
    .result-banner {
        max-width:1280px;
    }

    .practice-shell {
        grid-template-columns:minmax(0, 920px) 320px;
    }
}

@media (min-width:1800px) {
    .quick-grid,
    .article-grid,
    .category-grid {
        grid-template-columns:repeat(auto-fill, minmax(250px, 310px));
    }
}

/* Desktop-only reflow for xiaobai and the license home page. */
@media (min-width:1280px) {
    body.xiaobai-page .xiaobai-hero {
        max-width:1280px;
        grid-template-columns:minmax(0, 780px) minmax(320px, 420px);
    }

    body.xiaobai-page .quest-map {
        max-width:1440px;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        align-items:stretch;
    }

    body.xiaobai-page .quest-stage {
        grid-template-columns:104px minmax(0, 1fr);
        grid-template-rows:auto 1fr auto;
        gap:13px 15px;
        min-height:0;
        padding:16px;
    }

    body.xiaobai-page .quest-badge {
        min-height:100%;
    }

    body.xiaobai-page .quest-main {
        min-width:0;
    }

    body.xiaobai-page .quest-main h3 {
        margin-bottom:6px;
        font-size:18px;
    }

    body.xiaobai-page .quest-main p {
        margin-bottom:8px;
        line-height:1.55;
    }

    body.xiaobai-page .quest-list {
        line-height:1.6;
    }

    body.xiaobai-page .quest-actions {
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:8px;
        align-self:end;
    }

    body.xiaobai-page .quest-actions .btn,
    body.xiaobai-page .quest-actions .soon {
        width:auto;
        min-height:36px;
    }

    body.xiaobai-page .quick-grid {
        grid-template-columns:repeat(auto-fill, minmax(280px, 340px));
    }

    body.license-home-page .page {
        display:grid;
        grid-template-columns:minmax(0, 1fr) 380px;
        column-gap:24px;
        align-items:start;
    }

    body.license-home-page #siteNav,
    body.license-home-page .hero {
        grid-column:1 / -1;
    }

    body.license-home-page .hero {
        max-width:1280px;
        grid-template-columns:minmax(0, 760px) minmax(320px, 420px);
    }

    body.license-home-page .section {
        border-bottom:0;
        padding:18px 0 22px;
    }

    body.license-home-page .license-quick-section,
    body.license-home-page .license-type-section,
    body.license-home-page .license-article-section {
        grid-column:1;
        min-width:0;
    }

    body.license-home-page .license-progress-section {
        grid-column:2;
        grid-row:3 / span 3;
        position:sticky;
        top:18px;
        align-self:start;
        padding:18px;
        border:1px solid var(--line);
        border-radius:8px;
        background:#fffaf2;
    }

    body.license-home-page .license-progress-section .section-head {
        margin-bottom:12px;
    }

    body.license-home-page .license-progress-section .quick-grid {
        grid-template-columns:1fr;
        gap:10px;
    }

    body.license-home-page .license-progress-section .quick-card {
        background:#fff;
    }

    body.license-home-page .license-quick-section .quick-grid,
    body.license-home-page .license-type-section .category-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    body.license-home-page .license-article-section .article-grid {
        grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    }

    body.license-home-page .quick-card,
    body.license-home-page .category-card,
    body.license-home-page .article-card {
        min-height:110px;
    }
}

@media (min-width:2200px) {
    body.xiaobai-page .quest-map {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    body.license-home-page .page {
        grid-template-columns:minmax(0, 1fr) 400px;
        justify-content:start;
    }
}