/* ====================================================
 * 榆阳区职工知识竞赛 H5
 * 设计风格：政务党建 · 高端庄重
 * 主色：朱红 #a01419 / 古铜金 #b8924a / 暖米 #faf4ea
 * ==================================================== */

:root {
    --c-red:        #a01419;
    --c-red-dark:   #7a0f13;
    --c-red-light:  #c8252b;
    --c-gold:       #b8924a;
    --c-gold-light: #d4b572;
    --c-gold-soft:  #f0e3c4;
    --c-cream:      #faf4ea;
    --c-cream-2:    #f5ecd9;
    --c-ink:        #1f1813;
    --c-ink-2:      #4a3d2f;
    --c-mute:       #8c7d6b;
    --c-line:       #e6d6b8;
    --c-line-soft:  #ede0c4;
    --c-bg:         #f3ead6;
    --c-paper:      #fffdf7;

    --font-serif: "Source Han Serif SC","Noto Serif SC","Songti SC","SimSun","STSong","Microsoft YaHei",serif;
    --font-sans:  -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;

    --shadow-card: 0 2px 14px rgba(120, 60, 30, .08), 0 0 0 1px rgba(184, 146, 74, .12);
    --shadow-btn:  0 4px 14px rgba(160, 20, 25, .28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    margin: 0; padding: 0;
    font-family: var(--font-sans);
    color: var(--c-ink);
    background: var(--c-bg);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--c-red); text-decoration: none; transition: color .15s; }
a:hover { color: var(--c-red-dark); }
input, button, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ============ 页面容器 ============ */
body::before {
    /* 极淡的纸质纹理感（用 SVG noise 替代图片） */
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(184,146,74,.06), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(160,20,25,.04), transparent 40%);
    pointer-events: none;
    z-index: 0;
}
.page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 720px;
    margin: 0 auto;
    background: var(--c-paper);
    box-shadow: 0 0 32px rgba(80, 30, 10, .08);
}
.main { flex: 1; padding: 18px 16px 24px; }

/* 顶部金色细线（庄重感） */
.page::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--c-gold) 30%, var(--c-gold-light) 50%, var(--c-gold) 70%, transparent);
}

.footer {
    padding: 18px 12px 22px;
    text-align: center;
    color: var(--c-mute);
    font-size: 12px;
    border-top: 1px solid var(--c-line-soft);
    background: linear-gradient(180deg, transparent, rgba(245, 236, 217, .4));
}
.footer .line {
    display: inline-block;
    height: 1px; width: 28px;
    background: var(--c-gold);
    vertical-align: middle;
    opacity: .5;
    margin: 0 8px;
}
.footer-ended {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-line-soft);
}
.footer-ended-text {
    font-size: 13px;
    color: var(--c-red);
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.footer-support {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    color: var(--c-mute);
}
.footer-support code {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: .5px;
    background: rgba(160, 20, 25, .06);
    padding: 2px 8px;
    border-radius: 3px;
}
.btn-copy-wx {
    appearance: none;
    border: 1px solid var(--c-gold);
    background: #fff;
    color: var(--c-gold);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1.4;
}
.btn-copy-wx:hover {
    background: rgba(184, 146, 74, .1);
}
.footer-copy-tip {
    margin-top: 6px;
    font-size: 12px;
    color: var(--c-gold);
}

.demo-tip {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(160, 20, 25, .05);
    border: 1px dashed rgba(160, 20, 25, .28);
    border-radius: 4px;
    text-align: left;
}
.demo-tip-title {
    font-size: 13px;
    color: var(--c-red);
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-weight: 600;
}
.demo-tip-body {
    font-size: 13px;
    color: var(--c-ink);
    line-height: 1.85;
}
.demo-tip-body strong {
    color: var(--c-red);
    font-weight: 700;
    letter-spacing: 1px;
}
.btn-fill-demo {
    appearance: none;
    margin-top: 10px;
    border: 1px solid var(--c-gold);
    background: #fff;
    color: var(--c-gold);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 1px;
}
.btn-fill-demo:hover {
    background: rgba(184, 146, 74, .1);
}

/* ============ Banner ============ */
.banner {
    position: relative;
    color: #fff;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);
}
.banner > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 没有图片时的兜底渲染 */
.banner-bg {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 80% 30%, rgba(255,210,160,.30), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,.12), transparent 50%);
}
.banner-content {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center; padding: 6%;
    font-family: var(--font-serif);
}
.banner-subtitle {
    font-size: clamp(16px, 4.6vw, 28px);
    font-weight: 700;
    letter-spacing: 4px;
    color: #ffdd99;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    margin-bottom: 10px;
}
.banner-title { font-size: clamp(14px, 3.6vw, 22px); font-weight: 600; margin: 6px 0 2px; }
.banner-title .num {
    font-size: 1.4em; color: #ffd54a;
    font-weight: 900; margin: 0 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.banner-title2 { font-size: clamp(15px, 4vw, 24px); font-weight: 700; margin-bottom: 14px; }
.banner-host { font-size: clamp(11px, 2.8vw, 14px); color: #ffd699; opacity: .92; line-height: 1.7; font-family: var(--font-sans); }

/* ============ 卡片 ============ */
.card {
    position: relative;
    background: var(--c-paper);
    border-radius: 4px;
    padding: 22px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
    border-top: 2px solid var(--c-gold);
}
.card.plain { border-top: none; box-shadow: 0 1px 4px rgba(120,60,30,.05); }

/* 章节标题：竖红条 + 宋体 + 下方金色细线装饰 */
.section-title {
    position: relative;
    display: flex; align-items: center;
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--c-red);
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 12px;
    letter-spacing: 1px;
}
.section-title::before {
    content: ''; display: inline-block;
    width: 4px; height: 18px;
    background: linear-gradient(180deg, var(--c-red), var(--c-red-dark));
    border-radius: 2px; margin-right: 10px;
}
.section-title::after {
    content: ''; position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-line) 30%, transparent 100%);
}

.desc { color: var(--c-ink-2); font-size: 14.5px; line-height: 1.95; }
.desc strong { color: var(--c-red); font-weight: 600; }

.muted { color: var(--c-mute); }
.center { text-align: center; }

/* ============ 表单 ============ */
.form-row { margin-bottom: 18px; }
.form-row label {
    display: block; font-size: 14px;
    color: var(--c-ink-2);
    margin-bottom: 8px; font-weight: 600;
    letter-spacing: .5px;
}
.form-row label .req { color: var(--c-red); margin-left: 4px; font-weight: 700; }
.form-row input[type=text],
.form-row input[type=tel],
.form-row input[type=password],
.form-row input[type=number],
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    background: var(--c-paper);
    transition: border .2s, box-shadow .2s, background .2s;
    font-size: 15px;
    color: var(--c-ink);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    outline: none;
    border-color: var(--c-gold);
    background: #fffefb;
    box-shadow: 0 0 0 3px rgba(184, 146, 74, .15);
}
.form-row .help { font-size: 12.5px; color: var(--c-mute); margin-top: 6px; line-height: 1.6; }
.form-row .errmsg { font-size: 12.5px; color: var(--c-red); margin-top: 6px; font-weight: 600; }

.member-block {
    background: var(--c-cream);
    border: 1px solid var(--c-line-soft);
    border-left: 3px solid var(--c-gold);
    padding: 14px 16px 4px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.member-block .head {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--c-ink-2);
    margin-bottom: 12px;
    font-size: 15px;
    letter-spacing: 1px;
}

/* ============ 按钮 ============ */
.btn {
    display: inline-block;
    padding: 14px 26px;
    border: none;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--c-red-light) 0%, var(--c-red) 60%, var(--c-red-dark) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    text-align: center;
    box-shadow: var(--shadow-btn);
    transition: transform .1s, box-shadow .2s, filter .2s;
    position: relative;
    overflow: hidden;
}
.btn::before {
    /* 顶部高光线 */
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.btn:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(160, 20, 25, .35); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(160, 20, 25, .25); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }
.btn-block { display: block; width: 100%; }

.btn-gold {
    background: linear-gradient(180deg, var(--c-gold-light) 0%, var(--c-gold) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(184, 146, 74, .35);
}
.btn-gold:hover { box-shadow: 0 6px 16px rgba(184, 146, 74, .45); }

.btn-secondary {
    background: linear-gradient(180deg, #faf0d8 0%, var(--c-gold-soft) 100%);
    color: #6e4d18;
    box-shadow: 0 2px 8px rgba(184, 146, 74, .18);
}
.btn-ghost {
    background: transparent;
    color: var(--c-red);
    border: 1px solid var(--c-red);
    box-shadow: none;
    letter-spacing: 2px;
}
.btn-ghost:hover { background: rgba(160, 20, 25, .04); }

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ============ Flash 提示 ============ */
.flash {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 14px;
    border-left: 3px solid;
}
.flash-info    { background: #eef4fb; color: #14467e; border-color: #4a7eb8; }
.flash-success { background: #eef6ee; color: #1f6a30; border-color: #4a9e5e; }
.flash-error   { background: #fbedee; color: var(--c-red-dark); border-color: var(--c-red); }
.flash-warn    { background: #fdf4e2; color: #8a5e10; border-color: var(--c-gold); }

/* ============ 首页大标题（hero） ============ */
.hero {
    text-align: center;
    padding: 22px 16px 18px;
    font-family: var(--font-serif);
}
.hero .stamp {
    display: inline-block;
    border: 1.5px solid var(--c-gold);
    color: var(--c-gold);
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 2px;
    letter-spacing: 4px;
    margin-bottom: 12px;
}
.hero h1 {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--c-red);
    margin: 0 0 8px;
    letter-spacing: 3px;
    font-weight: 700;
}
.hero .sub {
    color: var(--c-ink-2);
    font-size: 14px;
    letter-spacing: 1.5px;
}
.hero .deco {
    display: flex; align-items: center; justify-content: center;
    margin-top: 14px; gap: 10px;
}
.hero .deco span { color: var(--c-gold); font-size: 12px; }
.hero .deco .line { width: 60px; height: 1px; background: var(--c-gold); opacity: .6; }

/* ============ 状态徽章 ============ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: 12px;
    letter-spacing: 1px;
    border: 1px solid transparent;
}
.badge-open    { background: #eef6ee; color: #1f6a30; border-color: #b5d5b9; }
.badge-closed  { background: #f4ede0; color: var(--c-mute); border-color: var(--c-line); }
.badge-single  { background: #eef4fb; color: #14467e; border-color: #b8cde6; }
.badge-multi   { background: #fbf0df; color: #8a5e10; border-color: #e4ca91; }
.badge-judge   { background: #f3ecfb; color: #5d3296; border-color: #c8b9e3; }

/* ============ 键值表 ============ */
.kv { display: grid; grid-template-columns: 100px 1fr; gap: 12px 18px; font-size: 14.5px; }
.kv dt { color: var(--c-mute); font-weight: 500; }
.kv dd { margin: 0; color: var(--c-ink); }

/* ============ 答题页 ============ */
.quiz-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 6px 14px;
    font-size: 13px; color: var(--c-mute);
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: 16px;
}
.quiz-bar a { color: var(--c-mute); font-size: 12px; }
.quiz-bar a:hover { color: var(--c-red); }

.quiz-header {
    background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);
    color: #fff;
    padding: 16px 20px;
    border-radius: 4px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}
.quiz-header::after {
    content: ''; position: absolute;
    top: 0; right: -20px; width: 80px; height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,.08));
    transform: skewX(-15deg);
}
.quiz-header .progress {
    font-family: var(--font-serif);
    font-size: 15px;
    letter-spacing: 2px;
}
.quiz-header .timer {
    background: rgba(255,255,255,.18);
    padding: 7px 16px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 18px;
    min-width: 80px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.2);
    font-variant-numeric: tabular-nums;
}
.quiz-header .timer.warn {
    background: #ffd54a;
    color: #7a3f00;
    border-color: #ffb84d;
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,213,74,.6); }
    50%     { box-shadow: 0 0 0 6px rgba(255,213,74,0); }
}

.q-card {
    background: var(--c-paper);
    border-radius: 4px;
    padding: 22px 20px;
    box-shadow: var(--shadow-card);
    margin-bottom: 18px;
    border-top: 2px solid var(--c-gold);
}
.q-type-tag {
    display: inline-block;
    background: #fbedee;
    color: var(--c-red);
    border: 1px solid #f3c5c8;
    border-radius: 2px;
    padding: 3px 10px;
    font-size: 12px;
    margin-right: 10px;
    letter-spacing: 1px;
    font-family: var(--font-serif);
}
.q-content {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--c-ink);
    margin: 12px 0 20px;
    line-height: 1.85;
    letter-spacing: .5px;
}
.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--c-line);
    border-radius: 3px;
    background: var(--c-paper);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.q-option:active { background: var(--c-cream); }
.q-option.selected {
    border-color: var(--c-red);
    background: #fdf3f3;
    box-shadow: inset 0 0 0 1px var(--c-red);
}
.q-option .marker {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--c-red);
    color: var(--c-red);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    font-family: var(--font-serif);
}
.q-option.selected .marker { background: var(--c-red); color: #fff; }
.q-option .text {
    flex: 1; line-height: 1.7;
    padding-top: 2px;
    font-size: 15.5px;
    color: var(--c-ink-2);
}
.q-option.selected .text { color: var(--c-ink); }

.quiz-footer {
    display: flex; gap: 12px; align-items: center;
    margin-top: 12px;
}
.quiz-footer .info { flex: 1; color: var(--c-mute); font-size: 13px; }

/* ============ 结果页 ============ */
.result-hero {
    background:
        linear-gradient(180deg, var(--c-red) 0%, var(--c-red-dark) 100%);
    color: #fff;
    border-radius: 4px;
    padding: 28px 16px 24px;
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(160, 20, 25, .25);
}
.result-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,210,140,.25), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(255,255,255,.05), transparent 40%);
    pointer-events: none;
}
.result-hero > * { position: relative; }
.result-hero .label {
    font-family: var(--font-serif);
    font-size: 14px; opacity: .85;
    letter-spacing: 3px;
    margin-bottom: 6px;
}
.result-hero .score {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    color: #ffdd99;
    text-shadow: 0 3px 10px rgba(0,0,0,.35);
    margin: 8px 0 4px;
    font-variant-numeric: tabular-nums;
}
.result-hero .score-unit { font-size: 22px; font-weight: 400; margin-left: 4px; opacity: .85; }
.result-hero .extras {
    display: flex; justify-content: center; gap: 28px;
    font-size: 13.5px; opacity: .95;
    margin-top: 12px;
    letter-spacing: 1px;
}
.result-hero .extras strong { color: #ffd699; font-size: 16px; font-weight: 700; margin: 0 2px; }

/* 团队战况卡 */
.team-status {
    background: linear-gradient(180deg, #fdf6e6 0%, var(--c-paper) 70%);
    border: 1px solid var(--c-line);
    border-top: 2px solid var(--c-gold);
}
.team-status .big-rank {
    display: flex; align-items: baseline; gap: 6px;
}
.team-status .big-rank .n {
    font-family: Georgia, serif;
    font-size: 32px;
    color: var(--c-red);
    font-weight: 700;
    line-height: 1;
}
.team-status .big-rank .unit { color: var(--c-mute); font-size: 13px; }

/* ============ 排行榜 ============ */
.rank-card {
    background: var(--c-paper);
    border-radius: 4px;
    padding: 8px 4px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
    border-top: 2px solid var(--c-gold);
}
.rank-card .section-title { padding: 4px 14px 12px; }

.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank-table th {
    background: var(--c-cream);
    color: var(--c-red);
    text-align: left;
    padding: 10px 10px;
    font-weight: 600;
    font-family: var(--font-serif);
    font-size: 13px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--c-line);
}
.rank-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-ink-2);
}
.rank-table tr:last-child td { border-bottom: none; }
.rank-table tr.me td {
    background: linear-gradient(90deg, rgba(184,146,74,.10), rgba(184,146,74,.05));
    font-weight: 600;
    color: var(--c-ink);
}
.rank-table .rk {
    width: 44px; text-align: center;
    color: var(--c-mute);
    font-weight: 700;
    font-family: Georgia, serif;
    font-size: 15px;
}
.rank-table .rk.top1 { color: #c9a227; font-size: 18px; }
.rank-table .rk.top2 { color: #909090; font-size: 17px; }
.rank-table .rk.top3 { color: #ad6b34; font-size: 16px; }
.rank-table .rk-medal {
    display: inline-block;
    width: 26px; height: 26px;
    border-radius: 50%;
    line-height: 26px;
    font-size: 12px;
    background: linear-gradient(180deg, #f0c869, #c9a227);
    color: #fff;
    box-shadow: 0 2px 6px rgba(201,162,39,.4);
}
.rank-table .rk-medal.s2 { background: linear-gradient(180deg, #d8d8d8, #909090); box-shadow: 0 2px 6px rgba(140,140,140,.4); }
.rank-table .rk-medal.s3 { background: linear-gradient(180deg, #cf9968, #ad6b34); box-shadow: 0 2px 6px rgba(173,107,52,.4); }

/* ============ 管理后台 ============ */
.admin-shell {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--c-paper);
    min-height: 100vh;
    box-shadow: 0 0 24px rgba(80, 30, 10, .06);
}
.admin-nav {
    background: linear-gradient(180deg, var(--c-red) 0%, var(--c-red-dark) 100%);
    color: #fff;
    padding: 12px 20px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border-bottom: 2px solid var(--c-gold);
}
.admin-nav .brand {
    font-family: var(--font-serif);
    font-weight: 700; font-size: 16px;
    margin-right: auto;
    letter-spacing: 2px;
}
.admin-nav a {
    color: rgba(255,255,255,.85);
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 14px;
    transition: all .15s;
}
.admin-nav a:hover, .admin-nav a.active {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.admin-body { padding: 22px; background: #f7f1e3; }

.admin-body h2 {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--c-red);
    letter-spacing: 2px;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-line);
}

.table {
    width: 100%; border-collapse: collapse;
    background: var(--c-paper);
    box-shadow: var(--shadow-card);
    border-radius: 4px;
    overflow: hidden;
}
.table th, .table td {
    border-bottom: 1px solid var(--c-line-soft);
    padding: 10px 12px; font-size: 14px;
    vertical-align: top;
}
.table th {
    background: var(--c-cream);
    text-align: left;
    color: var(--c-ink-2);
    font-family: var(--font-serif);
    letter-spacing: 1px;
    font-weight: 600;
}
.table tr:last-child td { border-bottom: none; }
.table .acts { white-space: nowrap; }
.table .acts a { margin-right: 10px; font-size: 13px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }

.switch {
    position: relative; display: inline-block; width: 50px; height: 26px;
    vertical-align: middle;
}
.switch input { display: none; }
.switch .slider {
    position: absolute; inset: 0; background: #ccbfa6; border-radius: 26px;
    transition: .2s;
}
.switch .slider::before {
    content: ''; position: absolute; height: 20px; width: 20px;
    left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
    transition: .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: linear-gradient(90deg, #4a9e5e, #2d7a40); }
.switch input:checked + .slider::before { transform: translateX(24px); }

/* 后台统计卡片 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
    background: var(--c-paper);
    padding: 18px 18px 16px;
    border-radius: 4px;
    border-top: 2px solid var(--c-gold);
    box-shadow: var(--shadow-card);
}
.stat-card .lbl {
    font-size: 13px;
    color: var(--c-mute);
    letter-spacing: 1px;
    font-family: var(--font-serif);
}
.stat-card .num {
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--c-red);
    line-height: 1.2;
    margin: 4px 0 2px;
    font-variant-numeric: tabular-nums;
}
.stat-card .extra { color: var(--c-mute); font-size: 12px; }

@media (max-width: 600px) {
    .admin-nav { padding: 10px 12px; gap: 6px 12px; }
    .admin-nav .brand { font-size: 14px; }
    .admin-nav a { padding: 4px 8px; font-size: 13px; }
    .admin-body { padding: 14px; }
    .table th, .table td { font-size: 13px; padding: 8px 10px; }
    .kv { grid-template-columns: 90px 1fr; gap: 10px 14px; }
    .hero h1 { font-size: 22px; letter-spacing: 2px; }
}