:root { --ink:#29241d; --muted:#786f62; --paper:#f5efe3; --paper2:#fffaf0; --red:#872722; --line:rgba(69,54,38,.17); }
* { box-sizing:border-box; }
html { background:#ddd4c4; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 10% 0,rgba(255,255,255,.75),transparent 28%),var(--paper); font-family:"Noto Serif SC","Songti SC",SimSun,serif; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
.name-app { width:min(100%,520px); min-height:100vh; margin:auto; padding:env(safe-area-inset-top) 17px max(32px,env(safe-area-inset-bottom)); }
.topbar { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; min-height:70px; border-bottom:1px solid var(--line); }
.topbar>div { text-align:center; }
.topbar h1 { margin:2px 0 0; font-size:19px; letter-spacing:.15em; }
.kicker,.eyebrow { color:var(--red); font:700 8px/1.2 Arial,sans-serif; letter-spacing:.25em; }
.back { display:grid; place-items:center; min-width:42px; min-height:42px; font-size:20px; }
.name-intro { padding:28px 2px 24px; }
.name-intro h2 { margin:8px 0; font-size:27px; letter-spacing:.08em; }
.name-intro>p { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.name-form { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:18px 4px 18px 4px; background:rgba(255,251,242,.78); }
.name-form label { display:block; margin:0 0 8px 3px; color:var(--muted); font-size:12px; }
.input-row { display:block; }
.input-row input { min-width:0; height:50px; padding:0 12px; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--paper2); font-size:15px; }
.submit-button { width:100%; height:50px; margin-top:14px; border:0; border-radius:4px 14px 4px 14px; color:#fff8eb; background:var(--red); cursor:pointer; letter-spacing:.12em; }
.name-form>small { display:block; margin:9px 3px 0; color:var(--muted); font-size:11px; }
.gender-field { display:flex; align-items:center; gap:18px; margin:14px 0 0; padding:11px 3px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gender-field legend { float:left; margin-right:9px; color:var(--muted); font-size:12px; }
.gender-field label { display:flex; align-items:center; gap:5px; margin:0; color:var(--ink); font-size:14px; }
.gender-field input { width:16px; height:16px; margin:0; accent-color:var(--red); }
.birth-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:13px; }
.birth-fields label { margin:0; }
.birth-fields label span { display:block; margin:0 0 7px 3px; font-size:12px; }
.birth-fields input { width:100%; height:48px; padding:0 9px; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--paper2); font-size:14px; }
.name-results { margin:0 -17px; padding:22px 12px 12px; border-top:1px solid var(--line); background:#e9dfcd; }
.naming-empty,.naming-card { margin-bottom:12px; padding:16px; border:1px solid #d8c4a8; background:#fffaf1; box-shadow:0 4px 12px rgba(74,54,31,.05); }
.naming-empty small,.naming-card>small { color:var(--red); letter-spacing:.12em; }
.naming-empty h3,.naming-card h3 { margin:7px 0 10px; color:#8d261f; font-size:23px; }
.naming-empty.is-error { border-color:#d99b94; background:#fff2ee; }
.naming-overview { position:relative; padding-right:108px; }
.naming-overview>h3 { font-size:30px; }
.naming-score { position:absolute; top:17px; right:18px; display:grid; place-items:center; width:76px; height:76px; color:#fff9ef; border-radius:50%; background:#982723; }
.naming-score b { font-size:27px; line-height:1; }
.naming-score span { font-size:11px; }
.naming-score-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:14px; }
.naming-score-grid span { padding:9px; background:#f5eadb; font-size:13px; }
.naming-score-grid b { float:right; color:#8d261f; }
.naming-source { margin:12px 0 0; color:#7d7265; font-size:12px; }
.naming-grid-list { display:grid; gap:8px; }
.naming-grid-list section { padding:12px; border-left:3px solid #a12a24; background:#f8f0e5; }
.naming-grid-list section span,.naming-grid-list section b { display:block; }
.naming-grid-list section span { color:#756858; font-size:12px; }
.naming-grid-list section b { margin:3px 0 5px; font-size:15px; }
.naming-grid-list section p,.naming-card>p,.naming-verdict p,.name-char-list p,.naming-empty p { margin:5px 0; font-family:Arial,"Microsoft YaHei",sans-serif; font-size:14px; line-height:1.8; }
.naming-verdict { margin-top:10px; padding:12px; border-left:3px solid #b55236; background:#fff1e8; }
.naming-verdict>b,.naming-verdict>small { display:block; font-size:15px; }
.naming-verdict>small { margin-top:3px; color:#766b5e; font-size:12px; }
.name-char-list p { padding:8px 0; border-top:1px dotted #d8c8b5; }
footer { padding:26px 0 8px; color:var(--muted); text-align:center; font-size:11px; }
@media (min-width:700px) { body { padding:26px 0; } .name-app { min-height:calc(100vh - 52px); border:1px solid rgba(73,59,43,.1); border-radius:24px; box-shadow:0 22px 70px rgba(66,52,36,.13); } }
@media (max-width:350px) { .birth-fields { grid-template-columns:1fr; } }