* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f2f4f8; color: #222; font-size: 15px; }
.page { max-width: 560px; margin: 0 auto; padding: 0 0 40px; }

.topbar { background: #fff; border-bottom: 3px solid #c9a227; padding: 24px 20px 18px; text-align: center; }
.logo { font-size: 22px; font-weight: 700; letter-spacing: 2px; color: #1a1a2e; }
.topbar h1 { font-size: 17px; font-weight: 600; margin-top: 6px; color: #1a1a2e; }
.notice { font-size: 12px; color: #999; margin-top: 8px; line-height: 1.5; }

.progress { background: #fff; padding: 12px 14px 10px; border-bottom: 1px solid #eee; }
.steps { display: flex; justify-content: space-between; }
.step { display: flex; align-items: center; font-size: 11px; color: #aaa; flex-direction: column; gap: 4px; flex: 1; }
.step .dot { width: 22px; height: 22px; border-radius: 50%; background: #e8e8ec; color: #999; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.step.active { color: #1a1a2e; font-weight: 600; }
.step.active .dot { background: #c9a227; color: #fff; }
.step.done .dot { background: #4a90d9; color: #fff; }
.bar { height: 4px; background: #ececf0; border-radius: 2px; margin-top: 10px; overflow: hidden; }
.bar-fill { height: 100%; width: 20%; background: linear-gradient(90deg, #c9a227, #4a90d9); border-radius: 2px; transition: width .3s; }

.panel { display: none; padding: 16px 16px 24px; }
.panel.active { display: block; }
.panel h2 { font-size: 15px; font-weight: 600; color: #1a1a2e; margin: 18px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.panel h2:first-child { margin-top: 0; }
.panel .tip { font-size: 12px; color: #999; font-weight: 400; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; }
.field label i { color: #e24b4a; font-style: normal; }
.input { width: 100%; border: 1px solid #d8d8de; border-radius: 8px; padding: 11px 12px; font-size: 15px; background: #fff; outline: none; transition: border .2s; }
.input:focus { border-color: #4a90d9; }
textarea.input { resize: vertical; }

.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-row.big .radio { flex: 1; min-width: 70px; }
.radio { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8d8de; border-radius: 8px; padding: 9px 14px; background: #fff; cursor: pointer; font-size: 14px; }
.radio input { display: none; }
.radio span { color: #555; }
.radio:has(input:checked) { border-color: #4a90d9; background: #eef5fc; }
.radio:has(input:checked) span { color: #185FA5; font-weight: 600; }

.photo-box { width: 130px; height: 160px; border: 2px dashed #c9c9d4; border-radius: 10px; overflow: hidden; position: relative; background: #fff; }
.photo-box input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; z-index: 2; }
.photo-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #999; text-align: center; line-height: 1.6; }
.photo-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.entry { background: #fff; border: 1px solid #e6e6ec; border-radius: 10px; padding: 12px; margin-bottom: 12px; position: relative; }
.entry .del { position: absolute; top: 8px; right: 10px; color: #e24b4a; font-size: 20px; background: none; border: none; cursor: pointer; line-height: 1; }
.entry .entry-title { font-size: 12px; color: #999; margin-bottom: 8px; }

.btn { display: block; width: 100%; border: none; border-radius: 10px; padding: 13px; font-size: 16px; font-weight: 600; cursor: pointer; }
.btn.primary { background: #1a1a2e; color: #fff; }
.btn.primary.next { margin-top: 8px; }
.btn.primary:active { background: #33334d; }
.btn.submit { background: #c9a227; color: #fff; }
.btn.submit:active { background: #b38f1f; }
.btn.ghost { background: #fff; color: #185FA5; border: 1px dashed #85B7EB; font-weight: 500; font-size: 14px; padding: 11px; }
.btn.prev { background: #f0f0f4; color: #666; font-weight: 500; font-size: 15px; padding: 12px; }
.nav-btns { display: flex; gap: 10px; margin-top: 20px; }
.nav-btns .btn { flex: 1; margin-top: 0; }

.promise { background: #fafafc; border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; }
.promise p { font-size: 12px; color: #666; line-height: 1.7; margin-bottom: 8px; text-align: justify; }
.promise p:last-child { margin-bottom: 0; }
.promise .bold { color: #333; font-weight: 600; }

.agree { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; font-size: 13px; color: #444; line-height: 1.5; }
.agree input { width: 18px; height: 18px; margin-top: 1px; accent-color: #c9a227; }

.success { text-align: center; padding: 60px 30px; }
.success .check { width: 72px; height: 72px; border-radius: 50%; background: #2ecc71; color: #fff; font-size: 38px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.success h2 { font-size: 20px; color: #1a1a2e; margin-bottom: 12px; }
.success p { color: #777; font-size: 14px; line-height: 1.8; }

.hidden { display: none !important; }
.err-msg { color: #e24b4a; font-size: 13px; margin: 8px 0 0; }