:root {
    --cream: #F6EBDA;
    --paper: #FFFDF8;
    --ink: #3B2718;
    --muted: #8A6A52;
    --terra: #C45C26;
    --terra-dark: #9A3D16;
    --gold: #E4B45C;
    --sage: #4E8A68;
    --leaf: #E8F2E6;
    --line: #EED9BE;
    --shadow: 0 10px 28px rgba(122, 72, 28, .13);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1200px 500px at 50% -120px, rgba(227, 180, 90, .45), transparent 70%),
        linear-gradient(180deg, #f8d7a8 0%, var(--cream) 220px);
}
a { color: var(--terra-dark); }
.page {
    width: min(480px, 100%);
    margin: 0 auto;
    flex: 1 0 auto;
    padding: 18px 16px 40px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.logo-seal {
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #f6d48a, #c45c26 70%);
    color: #fff; font-weight: 800; display: grid; place-items: center;
    box-shadow: 0 6px 14px rgba(196,92,38,.28);
    flex-shrink: 0;
}
.topbar h1 { font-size: 16px; margin: 0; line-height: 1.35; }
.topbar p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.hero, .card {
    background: var(--paper);
    border: 1px solid #f1ddc3;
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.hero {
    padding: 22px 18px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero:before {
    content: "";
    position: absolute; inset: 10px;
    border: 1px dashed rgba(196,92,38,.28);
    border-radius: 14px;
    pointer-events: none;
}
.hero-slogan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f8ead3;
    color: var(--terra-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}
.hero h2 { margin: 8px 4px 6px; font-size: 20px; line-height: 1.45; text-align: center; }
.hero h2 span { display: block; }
.hero .org { color: var(--muted); font-size: 13px; }
.family-illus {
    display: block;
    width: 190px;
    height: 119px;
    margin: 8px auto 2px;
    object-fit: contain;
}
.card { padding: 16px; margin-top: 14px; }
.card h3 {
    margin: 0 0 10px;
    font-size: 15px;
    color: var(--terra-dark);
    display: flex; align-items: center; gap: 8px;
}
.card h3:before {
    content: "";
    width: 6px; height: 16px; border-radius: 4px;
    background: linear-gradient(180deg, var(--gold), var(--terra));
}
.activity-info > p { margin: 0 0 8px; color: #5b4332; font-size: 14px; line-height: 1.7; }
.rules { margin: 0; padding-left: 20px; color: #5b4332; font-size: 13px; line-height: 1.7; }
.rules li + li { margin-top: 2px; }
.btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 48px; border: 0; border-radius: 14px;
    background: linear-gradient(180deg, #d66b33, #9a3d16);
    color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
    box-shadow: 0 8px 18px rgba(154, 61, 22, .25);
    cursor: pointer;
}
.btn + .btn { margin-top: 10px; }
.nav-row .btn + .btn { margin-top: 0; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary {
    background: #fff; color: var(--terra-dark);
    border: 1px solid #e3b48a; box-shadow: none; font-weight: 600;
}
.countdown {
    margin-top: 14px; padding: 12px;
    background: #fff7ea; border-radius: 12px;
    text-align: center; color: var(--terra-dark); font-weight: 700;
}
.muted { color: var(--muted); font-size: 12px; text-align: center; }
.muted.left { text-align: left; line-height: 1.6; margin: 0 0 12px; }
.wrong-empty {
    padding: 16px; background: #fff7ea; border-radius: 12px;
    color: var(--terra-dark); font-size: 14px; line-height: 1.6; text-align: center;
}
.wrong-item {
    border: 1px solid var(--line); border-radius: 12px; padding: 12px;
    margin-bottom: 12px; background: #fff;
}
.wrong-no { font-size: 12px; color: var(--terra); font-weight: 700; margin-bottom: 6px; }
.wrong-title { font-size: 15px; line-height: 1.55; margin-bottom: 8px; color: var(--ink); }
.wrong-meta { font-size: 13px; line-height: 1.5; margin-bottom: 4px; }
.wrong-bad { color: #b33b2b; }
.wrong-ok { color: #2c6b46; }
.wrong-exp {
    margin-top: 8px; padding: 10px; background: #fbf6ee;
    border-radius: 10px; font-size: 13px; line-height: 1.6; color: #5b4332;
}
.wrong-exp b { display: block; color: var(--terra-dark); margin-bottom: 4px; font-size: 12px; }
.form-item { margin-bottom: 14px; }
.form-item label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.form-item input, .form-item select, .form-item textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 12px;
    min-height: 48px; padding: 12px 12px; font-size: 16px; background: #fff; color: var(--ink);
    font-family: inherit;
}
.form-item input:focus, .form-item select:focus, .form-item textarea:focus {
    border-color: var(--terra);
    outline: 3px solid rgba(196, 92, 38, .14);
}
.form-item textarea { min-height: 120px; resize: vertical; }
.progress-wrap { margin: 8px 0 14px; }
.progress-text { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.bar { height: 8px; background: #f3e2cc; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--terra)); }
.q-no { font-size: 12px; color: var(--terra); font-weight: 700; }
.q-title { font-size: 17px; line-height: 1.55; margin: 8px 0 14px; }
.opt {
    display: flex; gap: 10px; align-items: flex-start;
    width: 100%; text-align: left; padding: 12px;
    border: 1px solid var(--line); background: #fff; border-radius: 12px;
    margin-bottom: 10px; font-size: 15px; line-height: 1.45; cursor: pointer;
}
.opt.on { border-color: var(--terra); background: #fff4ea; box-shadow: inset 0 0 0 1px var(--terra); }
.opt b {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; background: #f6ead8; color: var(--terra-dark); font-size: 13px;
}
.opt.on b { background: var(--terra); color: #fff; }
.nav-row { display: flex; gap: 10px; margin-top: 8px; }
.nav-row .btn { flex: 1; }
.score-ring {
    width: 148px; height: 148px; margin: 10px auto 8px;
    border-radius: 50%;
    background: conic-gradient(var(--terra) calc(var(--p) * 1%), #f1e0cb 0);
    display: grid; place-items: center;
}
.score-ring span {
    width: 118px; height: 118px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; font-size: 36px; font-weight: 800; color: var(--terra-dark);
}
.result-ok { color: var(--sage); text-align: center; font-weight: 700; }
.result-fail { color: #b33b2b; text-align: center; font-weight: 700; }
.cert-box { text-align: center; }
.cert-box img { width: 100%; border-radius: 8px; box-shadow: var(--shadow); background: #fff; }
.toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    background: rgba(59,39,24,.92); color: #fff; padding: 10px 16px;
    border-radius: 999px; font-size: 13px; display: none; z-index: 20;
}
.foot-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; }
.support-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    font-size: 12px;
    line-height: 1.5;
}
.support-footer a { display: inline-block; padding: 8px; color: var(--muted); text-decoration: none; }
.support-footer a:hover { color: var(--terra-dark); text-decoration: underline; }
.support-footer a:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 4px; }
.hide { display: none !important; }
.tag { display: inline-block; background: var(--leaf); color: #2c6b46; border-radius: 6px; padding: 2px 8px; font-size: 12px; }