:root {
  --ink: #21362f;
  --muted: #66756e;
  --paper: #f8f5ed;
  --card: #fffdf8;
  --jade: #39775f;
  --jade-dark: #1e5944;
  --jade-pale: #e3f0e7;
  --gold: #e9a53b;
  --gold-pale: #fff2d5;
  --red: #bf5e49;
  --line: #dfe3d8;
  --shadow: 0 12px 34px rgba(37, 58, 47, .09);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: "Nunito Sans", "Noto Serif SC", sans-serif; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }

.app-shell { max-width: 1120px; min-height: 100vh; margin: 0 auto; padding: 22px 22px 44px; position: relative; overflow: hidden; }
.app-shell::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(215,234,215,.72), transparent 68%); top: -230px; right: -180px; pointer-events: none; }
.topbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 18px; letter-spacing: .04em; }
.brand, .main-nav a { text-decoration: none; color: inherit; }.main-nav { display: flex; gap: 17px; margin-left: auto; }.main-nav a { color: var(--muted); font-size: 13px; font-weight: 800; }.main-nav a:hover { color: var(--jade); }
.sync-button { border: 1px solid #c9dfce; background: #f4faf4; color: var(--jade-dark); min-height: 33px; padding: 0 10px; border-radius: 18px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.seal { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; background: var(--jade); color: white; font-family: "Ma Shan Zheng", cursive; font-size: 23px; transform: rotate(-4deg); box-shadow: 3px 3px 0 #bfd5c4; }
.topbar-right { display: flex; gap: 8px; align-items: center; }
.streak { background: var(--gold-pale); color: #9a6512; padding: 7px 10px; font-size: 12px; font-weight: 800; border-radius: 20px; }
.icon-button { width: 35px; height: 35px; border-radius: 50%; background: #fffdfa; color: var(--jade); display: grid; place-items: center; border: 1px solid var(--line); font-size: 18px; }

.eyebrow { margin: 0 0 7px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--jade); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Noto Serif SC", serif; }
h1 { margin-bottom: 10px; font-size: clamp(29px, 5vw, 43px); line-height: 1.22; letter-spacing: -.04em; }
h2 { font-size: 22px; margin-bottom: 6px; }
.lead { color: var(--muted); line-height: 1.75; margin-bottom: 0; }
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; align-items: end; margin: 44px 0 29px; }
.hero-card { padding: 30px; background: rgba(255,253,248,.82); border: 1px solid rgba(223,227,216,.9); border-radius: 24px; box-shadow: var(--shadow); }
.hero-graphic { height: 230px; border-radius: 24px; background: #d7eade; position: relative; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(57,119,95,.08); }
.hero-graphic::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(57,119,95,.35); border-radius: 17px; }
.orb { width: 120px; height: 120px; border: 14px solid #fefcf4; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 8px #a8cfb2, 0 12px 20px rgba(30,89,68,.2); position: relative; }
.orb::after { content: "方"; position: absolute; color: white; font: 63px "Ma Shan Zheng", cursive; top: 14px; left: 25px; }
.leaf { position: absolute; width: 64px; height: 30px; border: 3px solid var(--jade); border-radius: 60px 5px 60px 5px; opacity: .7; }
.leaf.one { transform: rotate(35deg); top: 45px; right: 25px; }.leaf.two { transform: rotate(215deg); bottom: 43px; left: 33px; }

.button-primary, .button-secondary { min-height: 47px; padding: 0 19px; border-radius: 13px; font-weight: 800; transition: transform .16s, background .16s; }
.button-primary { background: var(--jade); color: #fff; box-shadow: 0 7px 15px rgba(30,89,68,.18); }.button-primary:hover { background: var(--jade-dark); transform: translateY(-1px); }
.button-secondary { background: var(--jade-pale); color: var(--jade-dark); }.button-secondary:hover { background: #d6e9db; }
.button-outline { min-height: 43px; padding: 0 15px; background: transparent; color: var(--jade); border: 1px solid #b8d0bf; border-radius: 12px; font-weight: 800; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }
.daily-hero { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 32px 0 24px; padding: clamp(23px, 5vw, 40px); background: linear-gradient(135deg, #fffdf8 20%, #e8f3e9); overflow: hidden; }.daily-hero h1 { margin-bottom: 9px; }.daily-hero .lead { max-width: 620px; }.daily-stamp { width: 132px; height: 132px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border: 1px solid #b8d8c0; border-radius: 50%; background: rgba(255,255,255,.57); color: var(--jade); }.daily-stamp span { font-size: 11px; font-weight: 800; letter-spacing: .12em; }.daily-stamp strong { font: 43px "DM Mono", monospace; line-height: 1.05; }.daily-stamp small { font-size: 11px; }.daily-split { position: relative; z-index: 1; }.map-intro { margin: -5px 0 14px; color: var(--muted); font-size: 13px; }

.dashboard-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.22fr .78fr; gap: 20px; }
.card { border: 1px solid var(--line); background: var(--card); border-radius: 20px; box-shadow: 0 6px 20px rgba(40,58,47,.035); }
.today-card { padding: 23px; }.today-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.small-label { color: var(--muted); font-size: 13px; }.date-mark { color: var(--jade); font: 12px "DM Mono", monospace; }
.task-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 8px; }
.task { border: 1px solid transparent; background: #f7faf5; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; font-size: 14px; }.task.done { background: #edf7ef; color: var(--jade); }.task .task-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }.task.done .task-dot { background: var(--jade); }
.progress-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 8px; }.progress-bar { height: 8px; background: #e9eee8; border-radius: 8px; overflow: hidden; }.progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), #65aa81); border-radius: inherit; transition: width .35s ease; }
.plan-card { padding: 22px; background: var(--jade); color: white; position: relative; overflow: hidden; }.plan-card::after { content: ""; position: absolute; height: 160px; width: 160px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; right: -70px; bottom: -73px; }.plan-card h3 { font-size: 20px; margin-bottom: 5px; }.plan-card p { color: #d4e5d7; font-size: 13px; line-height: 1.6; }.days { font: 39px "DM Mono", monospace; font-weight: 500; letter-spacing: -.08em; margin: 14px 0 4px; }.plan-card .button-outline { position: relative; z-index: 1; border-color: #9dc9a9; color: #fff; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 32px 0 14px; }.section-title h2 { margin: 0; }.text-link { background: transparent; padding: 0; color: var(--jade); font-weight: 800; font-size: 13px; }
.map-card { padding: 18px; }.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.map-item { min-height: 88px; padding: 10px; border-radius: 13px; background: #f3f7f1; color: #637067; font-size: 12px; display: flex; flex-direction: column; justify-content: space-between; }.map-item.active { background: var(--jade-pale); color: var(--jade-dark); }.map-item strong { font-size: 18px; }.map-item span { font-family: "Noto Serif SC", serif; }

.setup { max-width: 620px; margin: 38px auto; }.setup-card { padding: clamp(22px, 5vw, 38px); }.steps { display: flex; gap: 7px; margin-bottom: 30px; }.step { height: 5px; flex: 1; border-radius: 5px; background: #e6ebe3; }.step.active { background: var(--jade); }.form-group { margin: 24px 0; }.form-label { display: block; font-weight: 800; margin-bottom: 10px; }.date-input { width: 100%; padding: 14px; border: 1px solid var(--line); background: #fffefb; border-radius: 12px; color: var(--ink); }.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.choice { min-height: 90px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: #fffefb; color: var(--ink); }.choice.selected { border-color: var(--jade); background: var(--jade-pale); box-shadow: inset 0 0 0 1px var(--jade); }.choice strong, .choice small { display: block; }.choice small { color: var(--muted); margin-top: 4px; font-size: 11px; }.setup-footer { display: flex; justify-content: flex-end; margin-top: 28px; }

.quiz-wrap { max-width: 810px; margin: 0 auto; }.quiz-progress { display: flex; align-items: center; gap: 12px; margin: 10px 0 22px; }.quiz-progress .progress-bar { flex: 1; }.quiz-num { font: 12px "DM Mono", monospace; color: var(--muted); white-space: nowrap; }.quiz-card { padding: clamp(19px, 4vw, 31px); }.quiz-header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 25px; }.tag { background: var(--gold-pale); color: #936012; padding: 5px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; }.tag.green { background: var(--jade-pale); color: var(--jade); }.quiz-prompt { padding: 18px; background: #f4f7f1; border-radius: 14px; margin-bottom: 25px; }.quiz-prompt h2 { margin: 5px 0 8px; font-size: 24px; }.quiz-prompt p { margin-bottom: 0; color: var(--muted); line-height: 1.65; }.question-title { font: 17px; margin-bottom: 12px; }.answer-options { display: grid; gap: 9px; }.answer-option { text-align: left; padding: 14px 15px; background: #fffdf8; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 700; }.answer-option.selected { border-color: var(--jade); background: var(--jade-pale); box-shadow: inset 0 0 0 1px var(--jade); }.answer-option.wrong { border-color: var(--red); background: #fff0ec; }.answer-option.right { border-color: var(--jade); background: var(--jade-pale); }.quiz-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.selection-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }.herb-pool, .selected-herbs { display: flex; flex-wrap: wrap; gap: 8px; }.herb { padding: 8px 11px; border: 1px solid #cdded0; border-radius: 9px; color: var(--jade-dark); background: #f5fbf5; font-family: "Noto Serif SC", serif; font-weight: 600; }.herb.chosen { background: var(--jade); border-color: var(--jade); color: #fff; }.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.role-card { min-height: 95px; padding: 10px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fcfdf9; }.role-card.selected { border-color: var(--jade); background: var(--jade-pale); }.role-name { display: block; color: var(--jade); font-size: 12px; font-weight: 800; margin-bottom: 8px; }.role-value { font-family: "Noto Serif SC", serif; font-size: 13px; }

.result-wrap { max-width: 810px; margin: 0 auto; }.result-hero { text-align: center; padding: 32px 20px 20px; }.score-ring { width: 116px; height: 116px; border-radius: 50%; margin: 8px auto 16px; background: conic-gradient(var(--jade) calc(var(--score) * 1%), #e9eee8 0); display: grid; place-items: center; }.score-ring::after { content: ""; width: 91px; height: 91px; background: var(--card); border-radius: 50%; position: absolute; }.score-ring strong { position: relative; z-index: 1; font: 30px "DM Mono", monospace; }.score-ring small { position: relative; z-index: 1; margin-left: -8px; margin-top: 38px; color: var(--muted); }.score-label { color: var(--muted); font-size: 13px; }.breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 17px 0 24px; }.metric { background: #f4f7f1; border-radius: 12px; padding: 13px 8px; text-align: center; }.metric strong { display: block; color: var(--jade); font: 21px "DM Mono", monospace; }.metric span { font-size: 11px; color: var(--muted); }.review-card { padding: 22px; margin-top: 15px; }.review-card h3 { margin-bottom: 13px; }.feedback-list { display: grid; gap: 8px; }.feedback { padding: 11px 12px; border-radius: 10px; background: #f6f8f4; font-size: 13px; line-height: 1.6; }.feedback.warning { background: #fff4e1; color: #7d5819; }.feedback.error { background: #fff0ec; color: #8f4434; }.formula-card { border-left: 4px solid var(--jade); }.formula-card p { margin-bottom: 9px; font-size: 14px; line-height: 1.7; color: #48564f; }.formula-card strong { color: var(--ink); }.result-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 24px 0; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 9; transform: translateX(-50%); padding: 11px 16px; border-radius: 30px; background: var(--ink); color: white; font-size: 13px; box-shadow: var(--shadow); animation: rise .2s ease-out; }.hidden { display: none !important; } @keyframes rise { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.auth-overlay { position: fixed; inset: 0; z-index: 20; padding: 20px; display: grid; place-items: center; background: rgba(24, 42, 34, .36); }.auth-card { position: relative; width: min(100%, 430px); padding: 28px; }.auth-card h2 { margin-bottom: 8px; }.auth-card p { color: var(--muted); line-height: 1.65; }.auth-card .button-primary { width: 100%; margin-top: 8px; }.auth-card small { display: block; margin-top: 12px; color: var(--muted); line-height: 1.5; }.auth-close { position: absolute; top: 12px; right: 13px; width: 31px; height: 31px; border-radius: 50%; background: #f2f4ef; color: var(--ink); font-size: 22px; }

@media (max-width: 680px) { .app-shell { padding: 17px 15px 32px; }.topbar { margin-bottom: 12px; flex-wrap: wrap; }.main-nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; padding: 8px 2px 0; }.topbar-right { margin-left: auto; }.hero { grid-template-columns: 1fr; margin-top: 22px; }.hero-graphic { display: none; }.hero-card { padding: 25px 21px; }.daily-hero { margin-top: 18px; align-items: flex-start; }.daily-stamp { width: 96px; height: 96px; }.daily-stamp strong { font-size: 33px; }.dashboard-grid { grid-template-columns: 1fr; }.choice-grid { grid-template-columns: 1fr; }.choice { min-height: 60px; }.roles { grid-template-columns: repeat(2, 1fr); }.breakdown { gap: 6px; }.result-hero { padding-top: 25px; }.map-item { min-height: 76px; }.setup { margin: 18px auto; } }

a.answer-option { display: block; text-decoration: none; }
a.button-primary, a.button-secondary, a.button-outline { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.map-item, a.chapter-card { text-decoration: none; }

.nav-map { display: none; }
.map-page { position: relative; z-index: 1; max-width: 940px; margin: 34px auto; }
.source-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 13px; padding: 14px 16px; margin: 24px 0; border: 1px solid #c9dfce; border-radius: 14px; background: var(--jade-pale); color: var(--jade-dark); font-size: 13px; }.source-strip span { font-weight: 800; }.source-strip strong { font-family: "Noto Serif SC", serif; }.source-strip small { color: var(--muted); }
.chapter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.chapter-card { min-height: 142px; text-align: left; padding: 15px; background: #fbfcf7; border: 1px solid var(--line); border-radius: 16px; color: #65716a; position: relative; transition: transform .16s, border-color .16s; }.chapter-card:hover { transform: translateY(-2px); border-color: #a2c4aa; }.chapter-card.ready { background: #edf7ef; border-color: #b8d9c0; color: var(--jade-dark); }.chapter-card strong, .chapter-card small, .chapter-card em { display: block; }.chapter-card strong { font-family: "Noto Serif SC", serif; font-size: 20px; margin: 11px 0 3px; }.chapter-card small { font: 11px "DM Mono", monospace; }.chapter-card em { position: absolute; bottom: 13px; color: var(--jade); font-size: 11px; font-style: normal; font-weight: 800; }.chapter-no { font: 11px "DM Mono", monospace; color: #9da8a1; }
.chapter-summary { padding: 17px 19px; margin: 22px 0; border-radius: 15px; background: #f3f7f1; color: var(--muted); line-height: 1.65; }.chapter-summary span { color: var(--jade); font-size: 12px; font-weight: 800; letter-spacing: .08em; }.chapter-summary p { margin: 5px 0 0; }
.formula-library { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.library-card { padding: 20px; }.library-card h3 { margin: 12px 0 7px; font-size: 22px; }.library-card p { color: var(--jade-dark); font-family: "Noto Serif SC", serif; margin-bottom: 7px; }.library-card small { display: block; min-height: 39px; color: var(--muted); font-size: 12px; line-height: 1.55; margin-bottom: 17px; }.empty-library { padding: 24px; border-style: dashed; background: #fbfcf8; }.empty-library h3 { margin-bottom: 7px; }.empty-library p { margin-bottom: 0; color: var(--muted); line-height: 1.7; }
.catalog-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 5px; }.catalog-stats span { border: 1px solid #c9dfce; border-radius: 999px; padding: 7px 10px; background: #f4faf4; color: var(--jade-dark); font-size: 12px; font-weight: 700; }.catalog-stats strong { font: 17px "DM Mono", monospace; }.catalog-pending { background: #fbfbf7; border-style: dashed; box-shadow: none; }.catalog-pending h3 { color: #5c6961; }.catalog-pending p { color: #89938c; }.tag.pending { background: #f1efe8; color: #75766c; }
.library-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; }.library-actions .button-secondary { min-height: 38px; padding: 0 12px; font-size: 12px; }
.detail-page { position: relative; z-index: 1; max-width: 760px; margin: 34px auto; }.detail-page h1 { margin: 10px 0 3px; }.formula-source { color: var(--muted); font-size: 13px; }.memory-card { margin-top: 25px; padding: 22px; overflow: hidden; }.memory-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 19px; }.memory-heading span { color: var(--jade); font-size: 12px; font-weight: 800; letter-spacing: .1em; }.memory-heading strong { color: var(--muted); font-size: 12px; }.memory-card dl { margin: 0; display: grid; gap: 16px; }.memory-card dl > div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; }.memory-card dt { color: var(--jade); font-size: 13px; font-weight: 800; }.memory-card dd { margin: 0; font-family: "Noto Serif SC", serif; line-height: 1.65; }.herb-summary, .roles-summary { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }.herb-summary > span, .roles-summary > span { color: var(--jade); font-size: 13px; font-weight: 800; }.herb-summary p { margin: 7px 0 0; font-family: "Noto Serif SC", serif; line-height: 1.65; }.roles-summary { display: grid; gap: 8px; }.roles-summary > span { margin-bottom: 2px; }.role-line { display: grid; grid-template-columns: 48px 1fr; gap: 7px; font-size: 13px; }.role-line span { color: var(--muted); }.role-line strong { font-family: "Noto Serif SC", serif; font-weight: 600; }.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }.detail-expand { padding: 0 20px; margin-top: 11px; }.detail-expand summary { padding: 17px 0; cursor: pointer; font-family: "Noto Serif SC", serif; font-weight: 700; }.detail-expand p { color: var(--muted); line-height: 1.8; font-size: 14px; }.detail-expand p:last-child { padding-bottom: 15px; }

@media (min-width: 681px) { .nav-map { display: inline-block; } }
@media (max-width: 680px) { .chapter-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.chapter-card { min-height: 128px; padding: 12px; }.chapter-card strong { font-size: 18px; }.formula-library { grid-template-columns: 1fr; }.map-page { margin-top: 18px; }.source-strip { align-items: flex-start; } }

.pairing-card { border-left: 4px solid var(--gold); }.pairing-card h3 { font-size: 22px; }.pairing-lead { color: #48564f; line-height: 1.85; font-family: "Noto Serif SC", serif; }.pairing-memory { display: grid; gap: 5px; margin: 17px 0; padding: 13px 14px; border-radius: 12px; background: var(--gold-pale); color: #76551a; }.pairing-memory span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }.pairing-memory strong { font-family: "Noto Serif SC", serif; line-height: 1.6; }
.planned-explain { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 20px 23px; background: #fffaf0; }.planned-explain h3 { margin: 0 0 7px; font-size: 20px; }.planned-explain p { max-width: 700px; margin: 0; color: var(--muted); line-height: 1.7; font-size: 13px; }
.planned-explain .plan-warning { margin-top: 10px; color: #935d1c; font-weight: 800; }
@media (max-width: 680px) { .planned-explain { align-items: flex-start; flex-direction: column; } }