:root {
  color: #26323a;
  background: #eaf0ec;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 3%, rgba(255,255,255,.96), transparent 28%),
    linear-gradient(145deg, #e7efe9 0%, #f5f1e9 100%);
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(26px, env(safe-area-inset-top)) 20px max(50px, env(safe-area-inset-bottom));
  background: #faf9f5;
  box-shadow: 0 0 70px rgba(42, 60, 49, .12);
}

.internal-mark {
  position: fixed;
  right: 10px;
  bottom: 8px;
  color: rgba(48, 63, 54, .42);
  font-size: 10px;
  letter-spacing: .08em;
  pointer-events: none;
}

.home-hero {
  padding: 8px 2px 25px;
}

.brand-kicker, .module-kicker, .step-label {
  color: #607568;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(36px, 8vw, 55px); line-height: 1.13; }
.home-subtitle { margin: 10px 0 0; color: #5f6c65; font-size: 18px; line-height: 1.55; }
.home-note { margin: 14px 0 0; color: #7a817d; font-size: 12px; line-height: 1.65; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.module-card {
  display: flex;
  min-height: 216px;
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(42, 52, 47, .08);
  border-radius: 24px;
  text-align: left;
  box-shadow: 0 12px 32px rgba(43, 59, 50, .06);
}

.module-card.child { background: #e4f1e8; color: #315945; }
.module-card.self { background: #f4e7e4; color: #724940; }
.module-card.brain { background: #e7edf6; color: #43546d; }
.module-card.dream { background: #eee8f4; color: #5d4c70; }
.module-card.gaokao { background: #e6effd; color: #31547d; }
.module-card.education { background: #e7f2ef; color: #35665c; }
.module-card.archive { grid-column: 1 / -1; min-height: 190px; background: #fff1d7; color: #6d5830; }

.module-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.module-icon {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 2px solid currentColor;
  border-radius: 17px;
  opacity: .9;
}

.icon-child::before, .icon-child::after { content: ""; position: absolute; border: 2px solid currentColor; border-radius: 50%; }
.icon-child::before { width: 14px; height: 14px; left: 9px; top: 10px; }
.icon-child::after { width: 19px; height: 19px; right: 7px; bottom: 8px; }
.icon-self::before { content: ""; position: absolute; left: 13px; bottom: 11px; width: 24px; height: 25px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: skew(-23deg); }
.icon-self::after { content: ""; position: absolute; right: 9px; top: 9px; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.icon-brain::before { content: ""; position: absolute; inset: 11px; border: 2px solid currentColor; border-radius: 50% 45% 50% 45%; }
.icon-brain::after { content: ""; position: absolute; left: 25px; top: 12px; width: 2px; height: 28px; background: currentColor; box-shadow: -9px 8px 0 -0.5px currentColor, 9px 4px 0 -0.5px currentColor; }
.icon-dream::before { content: ""; position: absolute; width: 28px; height: 28px; left: 10px; top: 10px; border: 3px solid currentColor; border-radius: 50%; }
.icon-dream::after { content: ""; position: absolute; width: 25px; height: 25px; left: 20px; top: 5px; border-radius: 50%; background: inherit; }
.icon-gaokao::before { content: ""; position: absolute; left: 10px; top: 13px; width: 30px; height: 22px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-4deg); }
.icon-gaokao::after { content: "✓"; position: absolute; right: 6px; bottom: 3px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: currentColor; color: #e6effd; font-size: 13px; font-weight: 900; }
.icon-education::before { content: ""; position: absolute; left: 9px; top: 12px; width: 32px; height: 24px; border: 2px solid currentColor; border-radius: 3px 3px 8px 8px; }
.icon-education::after { content: ""; position: absolute; left: 15px; top: 7px; width: 20px; height: 8px; border-top: 2px solid currentColor; transform: rotate(-8deg); }
.icon-archive::before { content: ""; position: absolute; left: 10px; right: 10px; top: 14px; height: 3px; background: currentColor; box-shadow: 0 10px 0 currentColor, 0 20px 0 currentColor; }

.module-index { font-size: 11px; font-weight: 750; letter-spacing: .12em; opacity: .72; }
.module-card h2 { margin: 18px 0 6px; font-size: 25px; line-height: 1.25; }
.module-subtitle { margin: 0; font-size: 13px; font-weight: 700; }
.module-description { margin: 10px 0 0; font-size: 13px; line-height: 1.65; opacity: .84; }
.enter-button {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 0 15px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: inherit;
  font-weight: 750;
}

.home-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.share-button, .share-link-button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 750;
}

.share-button {
  border: 0;
  background: #344f43;
  color: #fff;
}

.share-link-button {
  border: 1px solid #cfd8d2;
  background: rgba(255,255,255,.82);
  color: #344f43;
}

.share-message {
  margin-top: 12px;
  color: #4f6559;
  font-size: 13px;
  line-height: 1.6;
}

.share-link-panel {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #d6ddd8;
  border-radius: 16px;
  background: rgba(255,255,255,.82);
}

.share-link-panel label { font-size: 12px; font-weight: 750; }
.share-link-panel input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #c9d1cc;
  border-radius: 11px;
  background: #fff;
  color: #34443b;
  font-size: 13px;
}
.share-link-panel p { margin: 0; color: #68736d; font-size: 12px; line-height: 1.55; }

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.privacy-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid #dce1dd;
  border-radius: 18px;
  background: #fffefa;
  color: #66726b;
  font-size: 12px;
  line-height: 1.55;
}

.module-header { margin-bottom: 20px; }
.back-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #d2d7d3;
  border-radius: 12px;
  background: #fffefa;
  color: #4f5f56;
  font-weight: 700;
}
.module-heading { margin: 22px 0 0; font-size: clamp(30px, 7vw, 44px); line-height: 1.18; }
.module-lead { margin: 11px 0 0; color: #6b7570; font-size: 14px; line-height: 1.7; }

.panel, .preview-card, .result-card, .archive-card, .explain-card {
  margin-top: 15px;
  padding: 16px;
  border: 1px solid #dcddd8;
  border-radius: 19px;
  background: #fffefa;
}
.panel.soft-green { background: #eaf3ed; }
.panel.soft-rose { background: #f7ece9; }
.panel.soft-blue { background: #edf1f7; }
.panel.soft-violet { background: #f1ecf5; }
.panel.soft-gold { background: #fff5df; }
.panel h3, .preview-card h3, .result-card h3, .explain-card h3 { margin: 0 0 9px; font-size: 19px; }
.panel p, .preview-card p, .result-card p, .explain-card p { margin: 7px 0 0; color: #65706a; font-size: 13px; line-height: 1.7; }

.field { display: grid; gap: 7px; margin-top: 15px; }
.field-label { font-size: 13px; font-weight: 750; }
.text-input, .text-area, .select-input {
  width: 100%;
  border: 1px solid #cbd1cc;
  border-radius: 13px;
  background: #fff;
  color: #27323a;
}
.text-input, .select-input { min-height: 48px; padding: 0 13px; }
.text-area { min-height: 105px; padding: 12px 13px; resize: vertical; line-height: 1.65; }
.field-hint { color: #858c88; font-size: 11px; line-height: 1.55; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.choice-button, .keyword-button, .tab-button {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #ccd1cd;
  border-radius: 13px;
  background: #fff;
  color: #37423c;
}
.choice-button[aria-pressed="true"], .keyword-button[aria-pressed="true"], .tab-button[aria-selected="true"] { border-color: #657d70; background: #657d70; color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.primary-button, .secondary-button, .danger-button, .ghost-button, .path-button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 13px;
  font-weight: 750;
}
.primary-button { border: 0; background: #4f7160; color: #fff; }
.secondary-button { border: 1px solid #bdc8c1; background: #eef4f0; color: #3e5b4d; }
.danger-button { border: 1px solid #d2aaa3; background: #fff2ee; color: #8d473d; }
.ghost-button { border: 0; background: transparent; color: #6c6575; }
.actions .wide { flex: 1 1 180px; }

.compact-cover { padding: 17px; }
.compact-cover h3 { margin-top: 14px; }
.test-meta, .brain-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.test-meta span, .brain-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.2;
}
.compact-actions { margin-top: 13px; }

.basis-card {
  margin-top: 11px;
  padding: 15px 16px;
  border: 1px solid #e1d5d0;
  border-radius: 17px;
  background: #fffaf8;
}
.brain-basis { border-color: #d5dce8; background: #f8faff; }
.gaokao-basis { border-color: #cfdcf0; background: #f6f9ff; }
.education-basis { border-color: #cfe1db; background: #f6fbf9; }
.basis-label {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eee2de;
  color: #745249;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.brain-basis .basis-label { background: #e2e9f3; color: #4a5c75; }
.gaokao-basis .basis-label { background: #dfeaff; color: #3f6190; }
.education-basis .basis-label { background: #dceee8; color: #3c6b60; }
.basis-card h3 { margin: 10px 0 0; font-size: 17px; }
.basis-card p { margin: 7px 0 0; color: #65706a; font-size: 12px; line-height: 1.6; }
.reference-note { margin-top: 9px; color: #8a8581; font-size: 10px; line-height: 1.55; }

.quiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #77584f;
  font-size: 11px;
}
.quiz-progress strong { font-size: 12px; }
.self-progress { background: #a67568; }
.quiz-card {
  margin-top: 12px;
  padding: 17px;
  border: 1px solid #e0d5d1;
  border-radius: 18px;
  background: #fffdfa;
}
.quiz-card h3 { margin: 7px 0 0; font-size: 20px; line-height: 1.42; }
.quiz-lead { margin: 0; color: #8a7e78; font-size: 10px; line-height: 1.45; }
.compact-choice-grid { gap: 7px; margin-top: 13px; }
.compact-choice { min-height: 42px; padding: 8px 10px; font-size: 12px; line-height: 1.45; }
.quiz-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}
.quiz-footer span { color: #8a817d; font-size: 10px; text-align: center; }
.quiz-footer button { min-height: 41px; padding: 0 13px; font-size: 12px; }

.notice, .boundary, .success-note, .error-note {
  margin-top: 15px;
  padding: 13px 15px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.65;
}
.notice { background: #eef1ed; color: #5f6b64; }
.boundary { border: 1px solid #e0ca93; background: #fff6df; color: #6f5d34; }
.success-note { background: #e6f2ea; color: #38654d; }
.error-note { background: #f9ebe8; color: #8d473d; }
.fine-print { margin: 11px 2px 0; color: #8b918e; font-size: 10px; line-height: 1.55; }

.intake-banner {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 17px;
  border: 1px solid #bfd2f1;
  border-radius: 18px;
  background: linear-gradient(135deg, #dfeaff, #eef5ff);
  color: #305b93;
}
.intake-banner strong { font-size: 18px; line-height: 1.4; }
.intake-banner span { color: #6881a2; font-size: 11px; line-height: 1.55; }
.intake-banner.education-intake { border-color: #c4ddd5; background: linear-gradient(135deg, #deeee9, #f0f8f5); color: #35685d; }
.intake-banner.education-intake span { color: #688a82; }
.intake-form { display: grid; gap: 12px; margin-top: 12px; }
.intake-field {
  padding: 16px;
  border: 1px solid #dbe2ea;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(48, 77, 110, .045);
}
.intake-field h3 { margin: 0 0 12px; color: #33424f; font-size: 14px; line-height: 1.5; }
.required-mark { margin-right: 5px; color: #d84e49; font-weight: 900; }
.optional-mark { display: inline-flex; margin-right: 6px; padding: 2px 6px; border-radius: 999px; background: #eef1f3; color: #899097; font-size: 9px; font-weight: 650; vertical-align: 1px; }
.radio-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.radio-card { position: relative; display: block; min-width: 0; cursor: pointer; }
.radio-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.radio-card span {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid #d9e0e7;
  border-radius: 11px;
  background: #f9fbfd;
  color: #566473;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.radio-card input:focus-visible + span { outline: 2px solid #78a0d8; outline-offset: 2px; }
.radio-card input:checked + span { border-color: #527eb8; background: #527eb8; color: #fff; font-weight: 750; }
.intake-field .text-input, .intake-field .text-area { border-color: #d5dde5; border-radius: 11px; background: #fbfcfe; }
.intake-textarea { min-height: 96px; }
.sticky-submit { margin-top: 14px; padding: 10px; border: 1px solid #dce4ea; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(42, 61, 80, .08); }

.preview-list, .result-list { display: grid; gap: 11px; margin-top: 13px; }
.preview-row, .result-row { padding-top: 11px; border-top: 1px solid #e0e1dc; }
.preview-row:first-child, .result-row:first-child { padding-top: 0; border-top: 0; }
.preview-row strong, .result-row strong { display: block; font-size: 12px; }
.preview-row span, .result-row span { display: block; margin-top: 5px; color: #69736e; font-size: 13px; line-height: 1.6; }

.keyword-cloud, .card-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.keyword-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 13px; }
.keyword-button, .tab-button { min-height: 40px; padding: 7px 11px; }
.explain-themes { color: #665576; font-size: 12px; font-weight: 700; }
.question-list { margin: 13px 0 0; padding-left: 20px; color: #606a65; font-size: 13px; line-height: 1.65; }
.source-note { margin-top: 13px; padding-top: 11px; border-top: 1px solid #ddd8e1; color: #7a7480; font-size: 11px; line-height: 1.5; }

.brain-meta { color: #647086; }
.rule-map { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; font-size: 14px; }
.task-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.active-rule { margin-top: 18px; padding: 15px; border-radius: 13px; background: #2f4057; color: #fff; font-size: 15px; font-weight: 750; text-align: center; }
.path-card { display: flex; width: 230px; height: 275px; flex-direction: column; align-items: center; justify-content: center; gap: 35px; margin: 28px auto 22px; border: 1px solid #cfd5dc; border-radius: 23px; background: #fff; box-shadow: 0 14px 40px rgba(43,55,73,.08); }
.card-mark { display: grid; width: 86px; height: 86px; place-items: center; border-radius: 50%; background: #e4eee7; color: #39634f; font-size: 34px; font-weight: 750; }
.card-dots { color: #aa6a59; font-size: 25px; letter-spacing: 5px; }
.path-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.path-button { border: 1px solid #aebac9; background: #edf1f6; color: #384962; }
.progress-track { height: 7px; overflow: hidden; border-radius: 6px; background: #dce2e8; }
.progress-value { height: 100%; background: #526881; transition: width .15s ease; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 15px; }
.metric { display: flex; min-height: 110px; flex-direction: column; align-items: center; justify-content: center; padding: 12px; border: 1px solid #d7dce4; border-radius: 16px; background: #fff; text-align: center; }
.metric strong { font-size: 27px; }
.metric span { margin-top: 6px; color: #707986; font-size: 11px; }

.archive-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.archive-stat { padding: 12px 8px; border-radius: 14px; background: #fff; text-align: center; }
.archive-stat strong { display: block; font-size: 22px; }
.archive-stat span { display: block; margin-top: 5px; color: #777f7a; font-size: 10px; }
.timeline { display: grid; gap: 12px; margin-top: 16px; }
.archive-card { margin: 0; }
.archive-card.demo { border-style: dashed; background: #fbfaf6; }
.archive-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.archive-card-tag { font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.archive-card-time { color: #858b87; font-size: 11px; }
.archive-card h3 { margin: 10px 0 0; font-size: 17px; }
.archive-card p { margin: 7px 0 0; color: #66706b; font-size: 12px; line-height: 1.65; }
.demo-label { display: inline-flex; margin-top: 10px; padding: 5px 8px; border-radius: 999px; background: #eef0ec; color: #707873; font-size: 10px; }

.confirm-panel { margin-top: 15px; padding: 15px; border: 1px solid #d3aaa3; border-radius: 16px; background: #f9ece9; }
.confirm-panel p { margin: 0; color: #714139; font-size: 12px; line-height: 1.6; }

@media (max-width: 560px) {
  .app-shell { padding-top: max(18px, env(safe-area-inset-top)); padding-right: 14px; padding-left: 14px; }
  .module-grid { grid-template-columns: 1fr; }
  .module-card.archive { grid-column: auto; }
  .module-card { min-height: 198px; padding: 16px; }
  .choice-grid { grid-template-columns: 1fr; }
  .keyword-add { grid-template-columns: 1fr; }
  .archive-summary { grid-template-columns: 1fr 1fr; }
  .module-header { margin-bottom: 13px; }
  .module-heading { margin-top: 15px; font-size: 29px; }
  .module-lead { margin-top: 7px; font-size: 12px; line-height: 1.5; }
  .back-button { min-height: 37px; font-size: 12px; }
  .quiz-card { padding: 14px; }
  .quiz-card h3 { font-size: 18px; }
  .compact-choice { min-height: 39px; }
  .radio-card-grid { grid-template-columns: 1fr 1fr; }
  .intake-field { padding: 14px; }
}

@media (max-width: 370px) {
  .radio-card-grid { grid-template-columns: 1fr; }
}