:root {
  --ink: #173930;
  --green: #1f5a49;
  --deep: #113d33;
  --mint: #eaf3ee;
  --paper: #fbfaf6;
  --gold: #b48a4a;
  --line: #dfe6df;
  --muted: #687870;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
button, input, select { font: inherit; }
button, a { transition: .22s ease; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.nav { height: 72px; display: flex; align-items: center; gap: 50px; padding: 0 max(4vw, 24px); border-bottom: 1px solid #e5e9e4; background: rgba(251, 250, 246, .92); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: 2px; }
.brand span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--green); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-weight: 800; }
.nav nav { display: flex; gap: 34px; color: #53675f; font-size: 14px; }
.nav nav a:hover { color: var(--green); }
.nav-cta { margin-left: auto; padding: 10px 18px; border: 1px solid #b9c9c1; border-radius: 5px; color: var(--green); font-size: 13px; font-weight: 700; }
.nav-cta:hover { color: #fff; background: var(--green); }

.hero { min-height: 690px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; padding: 90px max(7vw, 28px); position: relative; overflow: hidden; }
.hero-copy { max-width: 680px; position: relative; z-index: 2; }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 3px; }
.hero h1 { margin: 20px 0 24px; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: clamp(44px, 5.2vw, 72px); font-weight: 900; line-height: 1.18; letter-spacing: -2px; }
.hero h1 em { color: var(--green); font-style: normal; position: relative; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 9px; background: #cbdcd3; z-index: -1; }
.hero-copy > p { max-width: 610px; margin: 0; color: var(--muted); font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; gap: 28px; padding: 15px 24px; border-radius: 5px; font-size: 14px; font-weight: 800; }
.button.primary { color: #fff; background: var(--green); box-shadow: 0 12px 28px rgba(31, 90, 73, .18); }
.button.primary:hover { background: var(--deep); transform: translateY(-2px); }
.text-link { color: var(--green); border-bottom: 1px solid #a8bcb2; padding-bottom: 3px; font-size: 13px; font-weight: 700; }
.trust-row { display: flex; gap: 23px; margin-top: 30px; color: #77867f; font-size: 12px; }
.hero-glow { width: 440px; height: 440px; border-radius: 50%; filter: blur(8px); position: absolute; opacity: .58; }
.glow-one { left: -220px; bottom: -230px; background: #dcebe3; }
.glow-two { right: -180px; top: -210px; background: #f0e8d7; }
.hero-art { width: 440px; height: 460px; justify-self: center; border: 1px solid rgba(31, 90, 73, .14); background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(235,244,239,.82)); position: relative; transform: rotate(1deg); box-shadow: 0 30px 80px rgba(23, 57, 48, .1); }
.hero-art::before, .hero-art::after { content: ""; position: absolute; border: 1px solid #9db5aa; width: 90px; height: 90px; opacity: .35; }
.hero-art::before { top: 25px; left: 25px; border-right: 0; border-bottom: 0; }
.hero-art::after { right: 25px; bottom: 25px; border-left: 0; border-top: 0; }
.seal { width: 110px; height: 110px; display: grid; place-items: center; margin: 68px auto 12px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); font: 800 56px "Microsoft YaHei", sans-serif; }
.hero-art > p { text-align: center; color: #74847c; font-family: "Microsoft YaHei", sans-serif; letter-spacing: 8px; }
.name-slip { width: 160px; padding: 14px 18px; border: 1px solid #dbe4de; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px rgba(28, 65, 54, .1); position: absolute; }
.name-slip b { display: block; font: 800 24px "Microsoft YaHei", sans-serif; letter-spacing: 2px; }
.name-slip small { color: #8c9892; font-size: 10px; letter-spacing: 1px; }
.slip-one { left: -34px; top: 255px; transform: rotate(-5deg); }
.slip-two { right: -28px; top: 205px; transform: rotate(5deg); }
.slip-three { left: 142px; bottom: 28px; transform: rotate(-1deg); }

.section { max-width: 1180px; margin: 0 auto; padding: 94px 24px; }
.section-title { text-align: center; margin-bottom: 42px; }
.section-title.left { text-align: left; }
.section-title h2, .form-intro h2, .result-heading h2, .final-cta h2 { margin: 11px 0; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 36px; font-weight: 900; letter-spacing: -1px; }
.section-title p { color: var(--muted); font-size: 14px; }
.why-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.why-copy h2 { margin: 16px 0 18px; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 38px; line-height: 1.35; letter-spacing: -1px; }
.why-copy h2 em { color: var(--green); font-style: normal; }
.why-copy > p { max-width: 520px; color: var(--muted); font-size: 14px; line-height: 2; }
.quote-line { display: grid; gap: 5px; margin-top: 30px; padding-left: 16px; border-left: 2px solid #c49b57; color: #8a8172; font-size: 13px; }
.quote-line b { color: var(--green); font-size: 15px; }
.why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.why-cards article { min-height: 220px; padding: 21px 18px; border: 1px solid #eadfcd; border-radius: 8px; background: linear-gradient(155deg, #fffdf8, #fbfaf6); }
.why-cards i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--mint); color: var(--green); font-style: normal; font-size: 11px; font-weight: 800; }
.why-cards h3 { margin: 20px 0 10px; font-size: 19px; }
.why-cards p { min-height: 72px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.why-cards b { color: var(--green); font-size: 11px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { min-height: 390px; padding: 28px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); position: relative; overflow: hidden; }
.service-card::after { content: ""; width: 150px; height: 150px; border-radius: 50%; background: var(--mint); position: absolute; right: -80px; top: -80px; transition: .3s ease; }
.service-card:hover, .service-card.active { transform: translateY(-7px); border-color: #89a99a; box-shadow: 0 22px 48px rgba(23, 57, 48, .11); }
.service-card:hover::after, .service-card.active::after { transform: scale(1.35); }
.service-card .number { float: right; color: #b4beb8; font: 700 16px "Microsoft YaHei", sans-serif; position: relative; z-index: 2; }
.service-card i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--green); font: 800 22px "Microsoft YaHei", sans-serif; }
.service-card h3 { margin: 25px 0 10px; font: 800 25px "Microsoft YaHei", sans-serif; }
.service-card > p { min-height: 78px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.candidate-explanation { grid-column: 3 / -1; color: var(--muted); font-size: 12px; line-height: 1.7; }
.candidate-explanation p { margin: 3px 0; }
.candidate-explanation b { color: var(--ink); }
.name-analysis { margin: 10px 0; padding: 12px; border: 1px solid #e1e9e4; border-radius: 12px; background: #f7faf8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.name-analysis h4 { grid-column: 1 / -1; margin: 0; color: var(--green); font-size: 13px; }
.name-analysis h4 small { margin-left: 8px; color: #a87931; font-weight: 500; }
.feedback-actions { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.feedback-actions button { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); padding: 5px 9px; font-size: 11px; cursor: pointer; }
.feedback-actions button:hover { border-color: var(--green); color: var(--green); background: var(--mint); }
.feedback-message { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: 360px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--green); box-shadow: 0 12px 28px rgba(23, 57, 48, .12); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 35px; }
.chips span { padding: 6px 9px; border-radius: 3px; background: #f4f5f1; color: #6d7973; font-size: 11px; }
.enter { display: flex; justify-content: space-between; color: var(--green); font-size: 13px; }

.form-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; padding: 100px max(8vw, 28px); background: #edf4f0; }
.form-intro { position: sticky; top: 120px; padding-top: 30px; }
.form-intro h2 { font-size: 44px; }
.form-intro > p { max-width: 430px; color: var(--muted); line-height: 1.9; }
.mini-points { margin-top: 45px; display: grid; gap: 14px; }
.mini-points div { display: flex; align-items: center; gap: 16px; color: #52665d; font-size: 13px; }
.mini-points b { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #aac0b5; border-radius: 50%; color: var(--green); font: 700 11px "Microsoft YaHei", sans-serif; }
.form-card { max-width: 760px; padding: 36px 40px 40px; border-radius: 10px; background: #fff; box-shadow: 0 24px 60px rgba(23, 57, 48, .08); }
.form-heading { display: flex; align-items: center; gap: 14px; padding-bottom: 25px; border-bottom: 1px solid #edf0ed; }
.form-heading > div span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-family: "Microsoft YaHei", sans-serif; font-weight: 800; }
.form-heading section { flex: 1; }
.form-heading section small { color: #8a9890; font-size: 10px; }
.form-heading h3 { margin: 3px 0 0; font-size: 18px; }
.form-heading button { border: 0; background: transparent; color: var(--green); font-size: 12px; }
.business-types { margin-top: 24px; }
.business-types > label, .preference > label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.business-types div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.business-types button { padding: 10px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #62726a; font-size: 12px; }
.business-types button.active { border-color: var(--green); background: var(--mint); color: var(--green); font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 25px 0; }
.form-grid label { color: #42564e; font-size: 12px; font-weight: 700; }
.form-grid label strong { color: #b56c55; }
.form-grid input, .form-grid select { width: 100%; margin-top: 9px; padding: 13px 14px; outline: none; border: 1px solid #dbe3dd; border-radius: 5px; background: #fff; color: #58675f; }
.form-grid input:focus, .form-grid select:focus { border-color: #709888; box-shadow: 0 0 0 3px #e9f3ee; }
.preference { margin-top: 5px; }
.style-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-options input { display: none; }
.style-options span { display: block; padding: 11px 6px; text-align: center; border: 1px solid var(--line); border-radius: 4px; color: #6c7973; font-size: 11px; }
.style-options input:checked + span { border-color: #7a9e8e; background: var(--mint); color: var(--green); font-weight: 700; }
.form-grid.compact { margin-bottom: 20px; }
.culture-check { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 5px; background: #f6f8f5; font-size: 12px; }
.culture-check span { display: grid; gap: 4px; }
.culture-check small { color: #89948e; line-height: 1.5; }
.generate-button { width: 100%; display: flex; justify-content: center; gap: 25px; margin-top: 24px; padding: 16px; border: 0; border-radius: 5px; background: var(--green); color: #fff; font-weight: 800; }
.generate-button:hover { background: var(--deep); }
.generate-button:disabled { cursor: wait; opacity: .72; }
.form-error { margin: 12px 0 0; color: #a34f3b; text-align: center; font-size: 12px; }

.results { scroll-margin-top: 70px; }
.loading { padding: 55px; text-align: center; }
.loading i { width: 42px; height: 42px; display: block; margin: 0 auto 20px; border: 3px solid #dce9e2; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
.loading h3 { margin-bottom: 5px; }
.loading p { color: var(--muted); font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.result-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 32px; }
.result-heading h2 { margin-bottom: 0; }
.analysis-note { max-width: 720px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.result-heading button { padding: 10px 15px; border: 1px solid #b8c9c0; border-radius: 4px; background: transparent; color: var(--green); font-size: 12px; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.result-card { padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.result-top { display: flex; justify-content: space-between; color: #acb7b1; font: 700 13px "Microsoft YaHei", sans-serif; }
.result-top button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--green); }
.result-top button.saved { color: #b27058; background: #fbf3ef; }
.result-card h3 { margin: 15px 0 3px; font: 900 31px "Microsoft YaHei", sans-serif; letter-spacing: 2px; }
.result-card > small { color: #89958f; font-size: 10px; letter-spacing: 1px; }
.result-card .tag { display: inline-block; margin: 20px 0 10px; padding: 5px 8px; border-radius: 3px; background: var(--mint); color: var(--green); font-size: 10px; }
.result-card > p { min-height: 68px; color: #5d6f67; font-size: 12px; line-height: 1.8; }
.score-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-top: 22px; color: #7c8983; font-size: 10px; }
.score-row > div { height: 3px; background: #e8ece9; }
.score-row > div i { display: block; height: 100%; background: var(--gold); }
.score-row b { color: var(--gold); font: 800 18px "Microsoft YaHei", sans-serif; }
.result-note { margin-top: 18px; padding: 12px; text-align: center; background: #faf7ef; color: #887350; font-size: 10px; }

.method { padding-top: 50px; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.method-grid article { padding: 30px 34px; border-right: 1px solid var(--line); }
.method-grid article:last-child { border: 0; }
.method-grid b { color: var(--gold); font: 800 21px "Microsoft YaHei", sans-serif; }
.method-grid h3 { margin: 24px 0 10px; }
.method-grid p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.final-cta { padding: 80px 24px; text-align: center; background: var(--deep); color: #fff; }
.final-cta > span { color: #d3b37b; font-size: 12px; letter-spacing: 4px; }
.final-cta h2 { margin: 15px 0 28px; font-size: 39px; }
.button.light { color: var(--deep); background: #d5b473; }
.button.light:hover { background: #e0c58f; transform: translateY(-2px); }
footer { max-width: 1180px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; margin: 0 auto; padding: 58px 24px 28px; color: #687870; }
footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; font-size: 12px; }
footer > div > b { color: var(--ink); font-size: 13px; margin-bottom: 4px; }
.footer-main p { max-width: 330px; line-height: 1.8; }
.legal { grid-column: 1 / -1; margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 10px; line-height: 1.7; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-copy { text-align: center; margin: auto; }
  .hero-actions, .trust-row { justify-content: center; }
  .hero-art { width: min(440px, 85vw); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card > p { min-height: 0; }
  .form-section { grid-template-columns: 1fr; gap: 35px; }
  .form-intro { position: static; text-align: center; }
  .form-intro > p { margin-left: auto; margin-right: auto; }
  .mini-points { grid-template-columns: repeat(3, 1fr); }
  .mini-points div { flex-direction: column; }
  .form-card { margin: auto; width: 100%; }
  .result-grid { grid-template-columns: 1fr; }
  .why-section { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 620px) {
  .nav { height: 62px; padding: 0 15px; }
  .nav nav { display: none; }
  .nav-cta { padding: 8px 12px; }
  .hero { min-height: auto; padding: 60px 18px 75px; }
  .hero h1 { font-size: 43px; }
  .hero-copy > p { font-size: 14px; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .trust-row { flex-wrap: wrap; gap: 8px 14px; }
  .hero-art { height: 405px; margin-top: 20px; }
  .slip-one { left: -8px; }
  .slip-two { right: -7px; }
  .slip-three { left: 90px; }
  .section { padding: 70px 16px; }
  .why-section { padding-top: 55px; padding-bottom: 55px; }
  .why-copy h2 { font-size: 31px; }
  .why-cards { grid-template-columns: 1fr; }
  .why-cards article { min-height: 0; }
  .why-cards p { min-height: 0; }
  .section-title h2, .form-intro h2, .result-heading h2, .final-cta h2 { font-size: 32px; }
  .service-card { padding: 24px; }
  .form-section { padding: 70px 12px; }
  .mini-points { gap: 6px; }
  .mini-points div { font-size: 10px; }
  .form-card { padding: 26px 18px; }
  .business-types div { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .style-options { grid-template-columns: 1fr 1fr; }
  .result-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-grid article { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0; }
  footer { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-main, .legal { grid-column: 1 / -1; }
}

/* Focused naming workspace: a distinct, calmer layout from the reference form. */
.form-section { display: block; padding: 88px 24px 104px; background: linear-gradient(180deg, #edf4f0 0%, #f5f8f4 100%); }
.form-intro { max-width: 1080px; margin: 0 auto 30px; padding: 0; text-align: left; position: static; display: flex; align-items: flex-end; gap: 44px; }
.form-intro h2 { margin: 8px 0 6px; font-size: 41px; }
.form-intro > p { max-width: 420px; margin: 0 0 5px; font-size: 13px; }
.mini-points { display: flex; gap: 18px; margin: 0 0 4px auto; }
.mini-points div { display: flex; align-items: center; gap: 8px; color: #587066; white-space: nowrap; font-size: 11px; }
.mini-points b { width: 28px; height: 28px; font-size: 10px; }
.form-card { max-width: 1080px; margin: 0 auto; padding: 34px 42px 38px; border: 1px solid #dce7df; border-radius: 14px; box-shadow: 0 26px 65px rgba(21, 65, 51, .10); }
.form-heading { padding-bottom: 22px; }
.form-heading > div span { width: 48px; height: 48px; background: #e4f0e9; color: var(--green); border: 1px solid #c6ddd1; }
.form-heading h3 { font-size: 20px; }
.form-card .form-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 22px; }
.form-card .form-grid.compact { grid-template-columns: 1fr 1fr; }
.form-card .form-grid .form-field-wide,
.form-card .form-grid .calendar-note { grid-column: 1 / -1; }
.calendar-note { margin: -3px 0 0; padding: 11px 13px; border-left: 3px solid #b98a47; background: #faf7ef; color: #796e5a; font-size: 12px; font-weight: 500; line-height: 1.65; }
.business-types { padding: 14px 0 4px; }
.business-types div { grid-template-columns: repeat(4, 1fr); max-width: 620px; }
.style-options { grid-template-columns: repeat(4, 1fr); }
.culture-check { margin-top: 18px; border: 1px solid #e7eee8; background: #f7faf7; }
.generate-button { max-width: 420px; margin: 26px auto 0; }
.form-error { max-width: 420px; margin-left: auto; margin-right: auto; }
.results-dashboard { max-width: none; padding: 90px max(4vw, 24px) 100px; background: #f6f8f4; scroll-margin-top: 70px; }
.dashboard-head { max-width: 1240px; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 auto 28px; }
.dashboard-head h2 { margin: 10px 0 5px; font-family: "Microsoft YaHei", sans-serif; font-size: 34px; letter-spacing: -1px; }
.dashboard-head p { margin: 0; color: var(--muted); font-size: 12px; }
.refresh-results { padding: 11px 17px; border: 1px solid #b8cfc3; border-radius: 5px; background: #fff; color: var(--green); font-size: 12px; }
.refresh-results:hover { background: var(--mint); }
.dashboard-grid { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr); gap: 18px; margin: auto; }
.candidate-panel, .analysis-panel { border: 1px solid #e0e8e1; border-radius: 10px; background: #fff; box-shadow: 0 12px 36px rgba(24, 60, 48, .05); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #edf1ed; }
.panel-title > div { display: grid; gap: 5px; }
.panel-title b { font-size: 15px; }
.panel-title small { color: #8a9890; font-size: 10px; font-weight: 400; }
.panel-title > span, .panel-title > button { color: var(--green); border: 0; background: transparent; font-size: 10px; }
.candidate-list { padding: 0 18px; }
.candidate-row { min-height: 93px; display: grid; grid-template-columns: 20px 24px 120px 52px 72px minmax(170px, 1fr) 50px; align-items: center; gap: 10px; border-bottom: 1px solid #edf1ed; }
.candidate-row:last-child { border-bottom: 0; }
.candidate-row > input { accent-color: var(--green); }
.star-button { border: 0; background: transparent; color: #a6b1ab; font-size: 20px; }
.star-button.saved { color: #c3914a; }
.candidate-name h3 { margin: 0; font: 700 23px "Microsoft YaHei", sans-serif; letter-spacing: 2px; }
.candidate-name small { display: block; margin-top: 4px; color: #919c96; font-size: 9px; }
.candidate-score { text-align: center; }
.candidate-score b { display: block; color: var(--gold); font: 800 22px "Microsoft YaHei", sans-serif; }
.candidate-score small { color: #85928b; font-size: 9px; }
.candidate-elements { display: flex; gap: 4px; }
.candidate-elements span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #edf5ef; color: var(--green); font-size: 10px; }
.candidate-row p { margin: 0; color: #63736b; font-size: 11px; line-height: 1.65; }
.candidate-row em { padding: 5px 7px; border-radius: 99px; background: #edf5ef; color: #528063; font-size: 9px; font-style: normal; text-align: center; }
.analysis-panel { overflow: hidden; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 18px; border-bottom: 1px solid #edf1ed; }
.pillars > div { display: grid; justify-items: center; gap: 6px; border-right: 1px solid #edf1ed; }
.pillars > div:last-child { border: 0; }
.pillars small { color: #8b9791; font-size: 10px; }
.pillars strong { font-size: 17px; letter-spacing: 2px; }
.pillars span { color: var(--gold); font-size: 10px; }
.empty-analysis { padding: 26px 22px; color: #7c8a83; font-size: 12px; line-height: 1.8; border-bottom: 1px solid #edf1ed; }
.analysis-summary { padding: 20px 22px; border-bottom: 1px solid #edf1ed; }
.analysis-summary h3 { margin: 0 0 14px; font-size: 13px; }
.element-bars { display: grid; gap: 9px; }
.element-bars > div { display: grid; grid-template-columns: 16px 1fr 15px; align-items: center; gap: 7px; color: #7f8c85; font-size: 10px; }
.element-bars i { height: 5px; display: block; overflow: hidden; border-radius: 99px; background: #ecf0ed; }
.element-bars i b { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.element-bars small { text-align: right; font-size: 9px; }
.analysis-summary > p { margin: 14px 0 0; color: #65776e; font-size: 10px; }
.compare-panel { padding-bottom: 14px; }
.compare-list { min-height: 68px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 8px 22px; }
.compare-list > span { padding: 8px 9px; border: 1px solid #a9c3b5; border-radius: 5px; color: var(--green); font-size: 11px; }
.compare-list > span button { margin-left: 7px; border: 0; background: transparent; color: #9ba9a2; }
.compare-empty { color: #9aa59f; font-size: 10px; padding: 12px 0; }

@media (max-width: 1050px) {
  .candidate-row { grid-template-columns: 20px 24px 105px 48px 65px minmax(120px, 1fr); }
  .candidate-row em { grid-column: 6; justify-self: start; }
}
@media (max-width: 820px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .analysis-panel { order: -1; }
}
@media (max-width: 620px) {
  .results-dashboard { padding: 66px 12px 76px; }
  .dashboard-head { align-items: flex-start; flex-direction: column; }
  .dashboard-head h2 { font-size: 29px; }
  .candidate-list { padding: 0 12px; }
  .candidate-row { grid-template-columns: 18px 22px 1fr 50px; gap: 7px; padding: 13px 0; }
  .candidate-name h3 { font-size: 20px; }
  .candidate-elements { grid-column: 3 / 5; }
  .candidate-row p { grid-column: 3 / 5; }
  .candidate-row em { grid-column: 4; grid-row: 1; }
  .pillars { padding: 17px 10px; }
}

@media (max-width: 900px) {
  .form-intro { display: block; text-align: center; }
  .form-intro > p { margin: 0 auto 18px; }
  .mini-points { justify-content: center; margin: 18px 0 0; }
  .form-card .form-grid { grid-template-columns: 1fr 1fr; }
  .style-options { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .form-section { padding: 66px 14px 78px; }
  .form-intro h2 { font-size: 34px; }
  .mini-points { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .mini-points div { flex-direction: column; gap: 5px; font-size: 10px; }
  .form-card { padding: 24px 17px 28px; border-radius: 10px; }
  .form-card .form-grid, .form-card .form-grid.compact { grid-template-columns: 1fr; }
  .business-types div { grid-template-columns: 1fr 1fr; }
  .style-options { grid-template-columns: 1fr 1fr; }
}

/* Landing introduction and the separate naming workspace. */
.nav nav button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #53675f;
}
.nav nav button:hover { color: var(--green); }
.nav nav span { color: #8b9892; font-size: 12px; }
button.nav-cta { background: transparent; }

.naming-overview {
  max-width: 1360px;
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 7vw, 105px);
  align-items: center;
  margin: 0 auto;
  padding: 105px max(5vw, 24px);
  border-top: 1px solid #eee9de;
  background:
    radial-gradient(circle at 12% 18%, rgba(215, 230, 220, .55), transparent 26%),
    linear-gradient(135deg, #fbfaf6 0%, #f7f4ec 100%);
}
.overview-lead h2 {
  margin: 16px 0 20px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(34px, 3.5vw, 48px);
  line-height: 1.38;
  letter-spacing: -1.5px;
}
.overview-lead > p {
  max-width: 510px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}
.overview-quote {
  display: grid;
  gap: 7px;
  margin-top: 30px;
  padding: 3px 0 3px 17px;
  border-left: 2px solid var(--gold);
}
.overview-quote small { color: #8d8374; font-size: 12px; }
.overview-quote b { color: var(--green); font-size: 16px; }
.overview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.overview-cards article {
  min-height: 280px;
  padding: 24px 22px;
  border: 1px solid #e7dcc9;
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 14px 36px rgba(70, 63, 47, .035);
}
.overview-cards article > span {
  display: block;
  color: #c0ad8a;
  font: 800 11px "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
}
.overview-cards i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-top: 20px;
  border-radius: 9px;
  background: var(--mint);
  color: var(--green);
  font-style: normal;
  font-weight: 800;
}
.overview-cards h3 { margin: 22px 0 11px; font-size: 18px; }
.overview-cards p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }

.method { padding-top: 88px; padding-bottom: 100px; }
.method-grid { grid-template-columns: repeat(4, 1fr); }
.workspace-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px max(7vw, 24px);
  border-bottom: 1px solid #dbe7e0;
  background: #edf4f0;
  color: #718078;
  font-size: 12px;
}
.workspace-top button,
.workspace-bottom button {
  padding: 9px 14px;
  border: 1px solid #b9cec3;
  border-radius: 5px;
  background: rgba(255, 255, 255, .72);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}
.workspace-top button:hover,
.workspace-bottom button:hover { background: #fff; }
.workspace-top b { color: var(--green); }
.workspace-top + .form-section { padding-top: 48px; }
.workspace-bottom {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 20px 46px;
  background: #f6f8f4;
}
.workspace-bottom p { margin: 0; color: #87938d; font-size: 10px; }

@media (max-width: 980px) {
  .naming-overview { grid-template-columns: 1fr; }
  .overview-lead { max-width: 650px; }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .method-grid article:nth-child(2) { border-right: 0; }
}

@media (max-width: 680px) {
  .naming-overview { gap: 36px; padding: 72px 18px; }
  .overview-cards { grid-template-columns: 1fr; }
  .overview-cards article { min-height: 0; }
  .method-grid { grid-template-columns: 1fr; }
  .method-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace-top { padding: 16px; }
  .workspace-top span { display: none; }
  .workspace-top + .form-section { padding-top: 34px; }
}

/* Single-product landing, readable typography and real candidate comparison. */
body { font-size: 16px; line-height: 1.7; }
.nav nav, .nav nav button, .nav-cta { font-size: 14px; }
.eyebrow { font-size: 13px; }
.intro-copy > p,
.section-title p,
.overview-lead > p { font-size: 16px; line-height: 1.9; }
.intro-cards p,
.overview-cards p,
.method-grid p,
.footer-main p { font-size: 14px; line-height: 1.85; }
.intro-cards b,
.overview-quote small,
.method-grid b,
footer > div,
.legal { font-size: 13px; }
.text-link, .button { font-size: 15px; }

.services { max-width: 1240px; }
.single-service {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  overflow: hidden;
  border: 1px solid #d9e5de;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(23, 57, 48, .08);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.single-service:hover, .single-service:focus-visible { transform: translateY(-5px); border-color: #8cac9d; box-shadow: 0 32px 76px rgba(23, 57, 48, .13); outline: none; }
.single-service-copy {
  padding: clamp(38px, 5vw, 64px);
  background:
    radial-gradient(circle at 95% 5%, rgba(204, 226, 214, .72), transparent 31%),
    linear-gradient(145deg, #f9fcfa, #eef6f1);
}
.service-mark { display: flex; align-items: center; gap: 14px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.service-mark i { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--green); font: 800 22px "Microsoft YaHei", sans-serif; box-shadow: 0 8px 22px rgba(31, 90, 73, .1); }
.single-service-copy h3 { max-width: 520px; margin: 28px 0 18px; font-size: clamp(28px, 3vw, 39px); line-height: 1.35; letter-spacing: -1px; }
.single-service-copy > p { max-width: 590px; margin: 0; color: #53675e; font-size: 16px; line-height: 1.95; }
.service-audience { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 30px; }
.service-audience span { padding: 7px 11px; border: 1px solid #d4e2da; border-radius: 99px; background: rgba(255,255,255,.75); color: #587066; font-size: 13px; }
.single-service-button { display: inline-flex; align-items: center; gap: 34px; padding: 15px 22px; border: 0; border-radius: 6px; background: var(--green); color: #fff; font-size: 15px; font-weight: 800; }
.single-service-button:hover { background: var(--deep); transform: translateY(-2px); }
.single-service-detail { display: grid; align-content: center; gap: 28px; padding: clamp(36px, 4.5vw, 58px); }
.single-service-detail section > small { display: block; margin-bottom: 14px; color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.service-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-features article { min-height: 128px; padding: 18px; border: 1px solid #e2e9e4; border-radius: 10px; background: #fbfcfa; }
.service-features b { font-size: 16px; }
.service-features p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.service-output > div { display: flex; flex-wrap: wrap; gap: 8px; }
.service-output span { padding: 7px 10px; border-radius: 4px; background: var(--mint); color: var(--green); font-size: 13px; font-weight: 700; }
.service-promise { margin: 0; padding-top: 20px; border-top: 1px solid #e5ebe7; color: #7a8881; font-size: 13px; }

.form-intro > p { font-size: 15px; }
.mini-points div, .form-grid label, .business-types > label, .preference > label { font-size: 14px; }
.form-grid input, .form-grid select, .style-options span, .culture-check, .generate-button { font-size: 14px; }
.form-heading section small, .form-heading button, .workspace-top, .workspace-top button { font-size: 13px; }
.dashboard-head p, .refresh-results { font-size: 14px; }
.panel-title b { font-size: 17px; }
.panel-title small, .panel-title > span, .panel-title > button { font-size: 12px; }
.candidate-name h3 { font-size: 29px; font-weight: 800; }
.candidate-name small { font-size: 13px; }
.candidate-score small, .candidate-row em { font-size: 12px; }
.candidate-row p, .candidate-explanation { font-size: 16px; line-height: 1.82; }
.candidate-explanation p { margin: 7px 0; }
.name-analysis { padding: 17px; gap: 10px 22px; }
.name-analysis h4 { font-size: 17px; }
.feedback-actions button { padding: 7px 11px; font-size: 13px; }
.empty-analysis { font-size: 16px; }
.analysis-summary h3 { font-size: 17px; }
.element-bars > div, .analysis-summary > p { font-size: 14px; line-height: 1.75; }
.element-bars small { font-size: 13px; }
.result-note { font-size: 12px; line-height: 1.7; }

.compare-panel { padding-bottom: 20px; }
.compare-panel > .compare-empty { min-height: 110px; padding: 24px 22px; font-size: 13px; line-height: 1.8; }
.comparison-wrap { width: 100%; overflow-x: auto; padding: 14px 14px 4px; }
.compare-bazi-context-web { margin-bottom: 14px; padding: 16px 18px; border: 1px solid #d9e7df; border-radius: 14px; background: #edf6f1; color: #526c60; }
.compare-bazi-context-web h3 { margin: 0 0 10px; color: #174d3e; font-size: 18px; }
.compare-bazi-context-web p { margin: 7px 0; line-height: 1.65; }
.compare-bazi-context-web b { color: #23604f; }
.comparison-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.comparison-table th, .comparison-table td { padding: 11px 9px; border-right: 1px solid #e4ebe6; border-bottom: 1px solid #e4ebe6; text-align: left; vertical-align: top; line-height: 1.65; overflow-wrap: anywhere; }
.comparison-table tr > *:first-child { width: 96px; border-left: 1px solid #e4ebe6; background: #f7faf8; color: #63766d; font-weight: 700; }
.comparison-table thead th { border-top: 1px solid #dce6e0; background: #f1f7f3; color: var(--green); text-align: center; }
.comparison-table thead th:first-child { border-top-left-radius: 8px; }
.comparison-table thead th:last-child { border-top-right-radius: 8px; }
.comparison-table thead strong { font-size: 17px; letter-spacing: 1px; }
.comparison-table thead button { margin-left: 6px; border: 0; background: transparent; color: #8fa098; font-size: 14px; }
.comparison-score { color: var(--gold); font-size: 20px; }
.comparison-hint { margin: 10px 2px 6px; color: #84928b; font-size: 12px; }

@media (max-width: 900px) {
  .single-service { grid-template-columns: 1fr; }
  .single-service-detail { padding-top: 38px; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .intro-copy > p, .section-title p, .overview-lead > p, .single-service-copy > p { font-size: 15px; }
  .single-service { border-radius: 12px; }
  .single-service-copy, .single-service-detail { padding: 28px 20px; }
  .service-features { grid-template-columns: 1fr; }
  .service-features article { min-height: 0; }
  .single-service-button { width: 100%; justify-content: center; }
  .candidate-row p, .candidate-explanation { font-size: 13px; }
  .feedback-actions { grid-column: 3 / 5; }
}