/* ============================================================ 养老金测算 · 移动端权威样式层 (mobile.css) —— 方向 C1「淡青」 ------------------------------------------------------------ 移动端唯一可信的样式来源。统一覆盖：开屏 / 进度条 / 第1-3步表单 / 推荐问题 / 答案卡 / 寿命矩阵 / 底部栏 / 选择器。 要改手机端外观，只改这个文件。 设计语言：淡青底（#f3f9fa）+ 上浮白卡 + 品牌青描边/主操作。 轻盈、干净、产品级；不用灰底，不用微信绿。 品牌色：青 #01BCD6（主） / 橙 #FF9900（强调，克制使用）。 触发：（app.js 在 ?wx=1 / 窄屏 / 小程序环境下自动添加）。 ============================================================ */ html.mobile-viewport { --m-bg: #f3f9fa; /* 页面淡青底 */ --m-bg-top: #e8f7fa; /* 顶部更淡的青（进度条区） */ --m-card: #ffffff; /* 白卡 */ --m-line: #eef3f4; /* 卡内分割线 */ --m-line-soft: #f1f5f6; --m-text: #102a31; /* 主文字（带一点青调的深色） */ --m-sub: #6d8990; /* 次要 / 说明 */ --m-faint: #9fb6bc; /* 分组小标题 */ --m-ph: #aebfc4; /* 占位符 */ --m-cyan: #01bcd6; /* 品牌青 */ --m-cyan-deep: #0596ab; /* 青·按下 / 选中文字 */ --m-cyan-tint: #f1fcfe; /* 青·极淡填充 */ --m-cyan-tint2: rgba(1, 188, 214, 0.1); --m-orange: #ff9900; --m-tap: rgba(1, 100, 120, 0.05); --m-shadow: 0 10px 30px rgba(10, 90, 105, 0.08); --m-shadow-sm: 0 4px 16px rgba(10, 90, 105, 0.06); --m-gutter: 16px; --m-radius: 18px; --m-radius-ctrl: 12px; --m-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; } /* ====== 页面骨架 ====== */ html.mobile-viewport, html.mobile-viewport body { background: var(--m-bg) !important; color: var(--m-text) !important; font-family: var(--m-font) !important; -webkit-font-smoothing: antialiased; } html.mobile-viewport .main { max-width: none !important; margin: 0 !important; padding: 0 0 calc(88px + env(safe-area-inset-bottom)) !important; background: var(--m-bg) !important; } html.mobile-viewport .form-card { max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html.mobile-viewport .step-panel.active { display: block !important; padding: 4px 0 10px !important; background: transparent !important; } /* —— 分屏切换：开始测算前只看开屏，开始后只看流程 —— */ html.mobile-viewport body:not(.flow-started) .main { display: none !important; } html.mobile-viewport body:not(.flow-started) .footer { display: none !important; } html.mobile-viewport body.flow-started .hero { display: none !important; } html.mobile-viewport body.flow-started .hero-cta-bar { display: none !important; } html.mobile-viewport body.flow-started .data-badge { display: none !important; } html.mobile-viewport body.flow-started .disclaimer { display: none !important; } html.mobile-viewport body.flow-started #app { min-height: 100dvh !important; } html.mobile-viewport body.flow-started .wizard-progress { top: 0 !important; z-index: 55 !important; } html.mobile-viewport .disclaimer { margin: 0 !important; padding: 12px var(--m-gutter) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--m-sub) !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; } html.mobile-viewport .footer { padding: 18px var(--m-gutter) calc(20px + env(safe-area-inset-bottom)) !important; background: transparent !important; color: var(--m-faint) !important; font-size: 12px !important; line-height: 1.55 !important; text-align: center !important; } html.mobile-viewport .data-badge { margin: 0 !important; padding: 6px var(--m-gutter) 0 !important; background: transparent !important; color: var(--m-faint) !important; font-size: 11px !important; text-align: center !important; } /* ====== 开屏 Hero ====== */ html.mobile-viewport .hero-cta-bar { padding: 12px var(--m-gutter) calc(12px + env(safe-area-inset-bottom)) !important; background: transparent !important; } html.mobile-viewport .hero-cta { width: 100% !important; min-height: 50px !important; border: 0 !important; border-radius: 14px !important; background: var(--m-cyan) !important; color: #fff !important; font-size: 17px !important; font-weight: 600 !important; box-shadow: 0 10px 24px rgba(1, 188, 214, 0.28) !important; } html.mobile-viewport .hero-cta:active { background: var(--m-cyan-deep) !important; transform: translateY(1px); } /* ====== 步骤进度条 ====== */ html.mobile-viewport .wizard-progress { position: sticky !important; top: 0 !important; z-index: 50 !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; align-items: start !important; gap: 0 !important; height: auto !important; margin: 0 !important; padding: 11px 8px 10px !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; background: rgba(243, 249, 250, 0.92) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none !important; } html.mobile-viewport .progress-line { display: none !important; } html.mobile-viewport .progress-step { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; opacity: 1 !important; } html.mobile-viewport .step-num { width: 23px !important; height: 23px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: #d4ebef !important; color: #6d9aa5 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; transition: background 0.2s ease !important; } html.mobile-viewport .progress-step.done .step-num { background: var(--m-cyan) !important; color: #fff !important; } html.mobile-viewport .progress-step.active .step-num { background: var(--m-cyan) !important; color: #fff !important; box-shadow: 0 0 0 4px var(--m-cyan-tint2) !important; } html.mobile-viewport .step-text { text-align: center !important; } html.mobile-viewport .step-text strong { display: block !important; color: var(--m-faint) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; } html.mobile-viewport .progress-step.active .step-text strong { color: var(--m-cyan-deep) !important; font-weight: 600 !important; } html.mobile-viewport .progress-step.done .step-text strong { color: var(--m-sub) !important; } html.mobile-viewport .step-text small { display: none !important; } /* ====== 步骤标题 ====== */ html.mobile-viewport .step-header { margin: 0 !important; padding: 22px var(--m-gutter) 6px !important; border: 0 !important; background: transparent !important; } html.mobile-viewport .step-header h2 { margin: 0 !important; color: var(--m-text) !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } html.mobile-viewport .step-intro { margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--m-sub) !important; font-size: 14px !important; line-height: 1.55 !important; } /* ====== “去哪查”整页指南 ====== */ html.mobile-viewport .lookup-guide { margin: 12px var(--m-gutter) !important; border: 0 !important; border-radius: var(--m-radius) !important; background: var(--m-card) !important; box-shadow: var(--m-shadow-sm) !important; overflow: hidden !important; } html.mobile-viewport .lookup-guide-summary { display: flex !important; align-items: center !important; min-height: 48px !important; padding: 0 var(--m-gutter) !important; border: 0 !important; background: var(--m-card) !important; color: var(--m-cyan-deep) !important; font-size: 15px !important; font-weight: 500 !important; list-style: none !important; } html.mobile-viewport .lookup-guide-summary::-webkit-details-marker { display: none !important; } html.mobile-viewport .lookup-guide[open] .lookup-guide-summary { border-bottom: 1px solid var(--m-line) !important; } html.mobile-viewport .lookup-guide-body { padding: 12px var(--m-gutter) 14px !important; color: var(--m-sub) !important; font-size: 13px !important; line-height: 1.6 !important; } /* ====== 分组标题 ====== */ html.mobile-viewport .form-section, html.mobile-viewport .form-section-core, html.mobile-viewport .gap-section.form-section, html.mobile-viewport #multi-career-fields.form-section { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html.mobile-viewport .form-section-head { margin: 0 !important; padding: 20px var(--m-gutter) 8px !important; background: transparent !important; } html.mobile-viewport .form-section-title { margin: 0 !important; color: var(--m-faint) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; } html.mobile-viewport .form-section-lead { margin: 5px 0 0 !important; color: var(--m-sub) !important; font-size: 12px !important; line-height: 1.55 !important; } /* ====== 录入白卡 + 字段 ====== */ html.mobile-viewport .field-grid, html.mobile-viewport .field-grid-tight, html.mobile-viewport .field-grid-core, html.mobile-viewport .field-grid-3, html.mobile-viewport .gap-fields-grid, html.mobile-viewport #workspace-inputs .field-grid, html.mobile-viewport .sub-section .field-grid { display: block !important; margin: 8px var(--m-gutter) !important; padding: 0 !important; border: 0 !important; border-radius: var(--m-radius) !important; background: var(--m-card) !important; box-shadow: var(--m-shadow) !important; overflow: hidden !important; } html.mobile-viewport .field { display: block !important; position: relative !important; margin: 0 !important; padding: 14px var(--m-gutter) 15px !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html.mobile-viewport .field-grid > .field:last-child, html.mobile-viewport .field-grid-tight > .field:last-child, html.mobile-viewport .field-grid-core > .field:last-child, html.mobile-viewport .field-grid-3 > .field:last-child, html.mobile-viewport .gap-fields-grid > .field:last-child, html.mobile-viewport .sub-section .field-grid > .field:last-child { border-bottom: 0 !important; } html.mobile-viewport .field.hidden { display: none !important; } html.mobile-viewport .field-label-row { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; margin: 0 0 8px !important; } html.mobile-viewport .field > label, html.mobile-viewport .field-label-row > label, html.mobile-viewport .field-label { display: block !important; margin: 0 0 8px !important; padding: 0 !important; color: var(--m-text) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; } html.mobile-viewport .field-label-row > label { margin: 0 !important; } html.mobile-viewport .field-hint-inline { color: var(--m-sub) !important; font-size: 12px !important; font-weight: 400 !important; } /* 控件 */ html.mobile-viewport .field > input:not([type="radio"]):not([type="checkbox"]), html.mobile-viewport .field > textarea, html.mobile-viewport .field > .mobile-select-button, html.mobile-viewport .field > select:not(.mobile-native-select) { -webkit-appearance: none !important; appearance: none !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 0 14px !important; border: 1.5px solid #e7eced !important; border-radius: var(--m-radius-ctrl) !important; background: #fff !important; color: var(--m-text) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; text-align: left !important; box-shadow: none !important; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important; } html.mobile-viewport .field > textarea { min-height: 80px !important; padding: 12px 14px !important; line-height: 1.5 !important; resize: none !important; font-weight: 400 !important; } html.mobile-viewport select.mobile-native-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } html.mobile-viewport .field > .mobile-select-button { justify-content: space-between !important; } html.mobile-viewport .mobile-select-button::after { content: "" !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; margin-left: 8px !important; background: var(--m-faint) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 13px no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 13px no-repeat !important; } html.mobile-viewport .mobile-select-button.is-placeholder, html.mobile-viewport .field > input::placeholder, html.mobile-viewport .field > textarea::placeholder { color: var(--m-ph) !important; font-weight: 400 !important; } html.mobile-viewport .field > input:focus, html.mobile-viewport .field > textarea:focus, html.mobile-viewport .field > .mobile-select-button:focus-visible { outline: none !important; border-color: var(--m-cyan) !important; background: var(--m-cyan-tint) !important; box-shadow: 0 0 0 3px var(--m-cyan-tint2) !important; } html.mobile-viewport .field > .mobile-select-button:active { background: var(--m-tap) !important; } /* 已选中（有值）的控件：淡青描边提示 */ html.mobile-viewport .field > .mobile-select-button:not(.is-placeholder) { border-color: #cfeef4 !important; } /* 校验错误 */ html.mobile-viewport .field-invalid, html.mobile-viewport .field input.field-invalid, html.mobile-viewport .field .mobile-select-button.field-invalid { border-color: #fa5151 !important; box-shadow: 0 0 0 3px rgba(250, 81, 81, 0.1) !important; } html.mobile-viewport .field-error { margin: 6px 0 0 !important; color: #fa5151 !important; font-size: 12px !important; } /* “在哪查” / 提示 */ html.mobile-viewport .field-lookup { margin: 0 !important; border: 0 !important; background: transparent !important; } html.mobile-viewport .field-lookup > summary { display: inline-flex !important; align-items: center !important; min-height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--m-cyan-deep) !important; font-size: 13px !important; font-weight: 400 !important; list-style: none !important; } html.mobile-viewport .field-lookup > summary::-webkit-details-marker { display: none !important; } html.mobile-viewport .field-lookup > summary::before { content: "?" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 15px !important; height: 15px !important; margin-right: 5px !important; border-radius: 50% !important; background: var(--m-cyan) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; } html.mobile-viewport .field-lookup p { margin: 8px 0 0 !important; color: var(--m-sub) !important; font-size: 13px !important; line-height: 1.6 !important; } html.mobile-viewport .field > .field-hint, html.mobile-viewport .field-hint, html.mobile-viewport .field-hint-compact, html.mobile-viewport .province-source-banner, html.mobile-viewport .account-balance-estimate { margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--m-sub) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; } html.mobile-viewport .gap-section-lead, html.mobile-viewport .career-mode-field > .field-hint { padding: 0 var(--m-gutter) !important; } html.mobile-viewport .btn-link { margin: 8px 0 0 !important; padding: 0 !important; background: transparent !important; color: var(--m-cyan-deep) !important; font-size: 13px !important; font-weight: 400 !important; } /* ====== 单选卡：缴费经历 / 空窗期 ====== */ html.mobile-viewport .career-mode-field { padding: 4px 0 0 !important; border: 0 !important; background: transparent !important; } html.mobile-viewport .career-mode-field > .field-label { display: block !important; padding: 16px var(--m-gutter) 8px !important; color: var(--m-faint) !important; font-size: 13px !important; font-weight: 600 !important; } html.mobile-viewport .career-mode-toggle { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 0 var(--m-gutter) !important; padding: 0 !important; } html.mobile-viewport .career-mode-card { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-height: 48px !important; padding: 0 10px !important; border: 1.5px solid #e2eaeb !important; border-radius: 12px !important; background: var(--m-card) !important; box-shadow: var(--m-shadow-sm) !important; color: var(--m-text) !important; font-size: 15px !important; font-weight: 400 !important; } html.mobile-viewport .career-mode-radio { width: 16px !important; height: 16px !important; border: 1.5px solid #c4d3d5 !important; border-radius: 50% !important; } html.mobile-viewport .career-mode-option input:checked + .career-mode-card { border-color: var(--m-cyan) !important; background: var(--m-cyan-tint) !important; color: var(--m-cyan-deep) !important; font-weight: 600 !important; } html.mobile-viewport .career-mode-option input:checked + .career-mode-card .career-mode-radio { border-color: var(--m-cyan) !important; background: var(--m-cyan) !important; box-shadow: inset 0 0 0 3px #fff !important; } html.mobile-viewport .gap-situation-picker { display: grid !important; gap: 10px !important; margin: 8px var(--m-gutter) !important; } html.mobile-viewport .gap-situation-option { display: block !important; } html.mobile-viewport .gap-situation-card { display: block !important; padding: 13px 15px !important; border: 1.5px solid #e2eaeb !important; border-radius: 14px !important; background: var(--m-card) !important; box-shadow: var(--m-shadow-sm) !important; } html.mobile-viewport .gap-situation-card strong { display: block !important; color: var(--m-text) !important; font-size: 15px !important; font-weight: 600 !important; } html.mobile-viewport .gap-situation-card small { display: block !important; margin-top: 4px !important; color: var(--m-sub) !important; font-size: 12px !important; line-height: 1.5 !important; } html.mobile-viewport .gap-situation-option input { position: absolute !important; opacity: 0 !important; } html.mobile-viewport .gap-situation-option input:checked + .gap-situation-card { border-color: var(--m-cyan) !important; background: var(--m-cyan-tint) !important; } html.mobile-viewport .gap-situation-option input:checked + .gap-situation-card strong { color: var(--m-cyan-deep) !important; } /* ====== 可折叠：特殊身份补充 ====== */ html.mobile-viewport .form-section-details { margin: 8px var(--m-gutter) !important; border: 0 !important; border-radius: var(--m-radius) !important; background: var(--m-card) !important; box-shadow: var(--m-shadow) !important; overflow: hidden !important; } html.mobile-viewport .form-section-details > summary { display: flex !important; align-items: center !important; min-height: 50px !important; padding: 0 var(--m-gutter) !important; color: var(--m-text) !important; font-size: 15px !important; font-weight: 500 !important; list-style: none !important; } html.mobile-viewport .form-section-details > summary::-webkit-details-marker { display: none !important; } html.mobile-viewport .form-section-details[open] > summary { border-bottom: 1px solid var(--m-line) !important; } html.mobile-viewport .form-section-details > .form-section-lead { padding: 10px var(--m-gutter) 0 !important; } html.mobile-viewport .form-section-details .field-grid { margin: 8px 0 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ====== 横幅 ====== */ html.mobile-viewport .gap-guidance-banner:not(.hidden), html.mobile-viewport .contribution-eligibility-banner:not(.hidden), html.mobile-viewport .policy-banner { margin: 8px var(--m-gutter) !important; padding: 12px 15px !important; border: 0 !important; border-radius: 12px !important; background: var(--m-cyan-tint) !important; color: var(--m-cyan-deep) !important; font-size: 13px !important; line-height: 1.6 !important; } html.mobile-viewport .multi-career-summary, html.mobile-viewport #multi-career-summary { color: var(--m-cyan-deep) !important; } /* ====== 分段重复行：缴费段 / 参保省 ====== */ html.mobile-viewport .career-segments { margin: 8px var(--m-gutter) !important; display: grid !important; gap: 10px !important; } html.mobile-viewport .career-segment, html.mobile-viewport .province-tenure-row { padding: 12px 14px !important; border: 0 !important; border-radius: 14px !important; background: var(--m-card) !important; box-shadow: var(--m-shadow-sm) !important; } html.mobile-viewport #btn-add-segment, html.mobile-viewport #btn-add-province-tenure { margin: 0 var(--m-gutter) !important; } /* ====== 第 3 步：推荐问题 ====== */ html.mobile-viewport .question-spotlight-label, html.mobile-viewport .question-spotlight-label#question-spotlight-label { margin: 16px var(--m-gutter) 8px !important; color: var(--m-faint) !important; font-size: 13px !important; font-weight: 600 !important; } html.mobile-viewport .question-featured { display: grid !important; gap: 10px !important; margin: 0 var(--m-gutter) !important; } html.mobile-viewport .question-card { display: block !important; width: 100% !important; text-align: left !important; padding: 15px 16px !important; border: 1.5px solid #e2eaeb !important; border-radius: 16px !important; background: var(--m-card) !important; box-shadow: var(--m-shadow-sm) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } html.mobile-viewport .question-card:active { border-color: var(--m-cyan) !important; background: var(--m-cyan-tint) !important; } html.mobile-viewport .question-card.selected, html.mobile-viewport .question-card[aria-pressed="true"] { border-color: var(--m-cyan) !important; background: var(--m-cyan-tint) !important; box-shadow: 0 6px 20px rgba(1, 188, 214, 0.14) !important; } html.mobile-viewport .question-card strong { display: block !important; color: var(--m-text) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; } html.mobile-viewport .question-card span, html.mobile-viewport .question-hook, html.mobile-viewport .question-teaser { display: block !important; margin-top: 5px !important; color: var(--m-sub) !important; font-size: 13px !important; line-height: 1.5 !important; } html.mobile-viewport .question-card-featured { border-color: var(--m-cyan) !important; } html.mobile-viewport .question-card-featured strong { color: var(--m-cyan-deep) !important; } html.mobile-viewport .question-card-body { display: block !important; } /* 工作区 + 子节标题 */ html.mobile-viewport .question-workspace { margin-top: 6px !important; } html.mobile-viewport .sub-section { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html.mobile-viewport .sub-section > h3 { margin: 0 !important; padding: 18px var(--m-gutter) 6px !important; color: var(--m-faint) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; } html.mobile-viewport .sub-section > .field-hint { padding: 0 var(--m-gutter) !important; } /* 工作区操作 */ html.mobile-viewport .workspace-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; margin: 14px var(--m-gutter) 4px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html.mobile-viewport .workspace-action-hint { width: 100% !important; margin: 2px 0 0 !important; color: var(--m-sub) !important; font-size: 12px !important; } /* ====== 答案卡 ====== */ html.mobile-viewport .inline-answer { margin: 12px var(--m-gutter) 0 !important; } html.mobile-viewport .answer-result-stack { display: grid !important; gap: 12px !important; } html.mobile-viewport .answer-panel, html.mobile-viewport .answer-summary-card, html.mobile-viewport .answer-detail-card, html.mobile-viewport .answer-verdict { margin: 0 !important; padding: 16px !important; border: 0 !important; border-radius: var(--m-radius) !important; background: var(--m-card) !important; box-shadow: var(--m-shadow) !important; } /* 核心结论卡：青色描边强调 */ html.mobile-viewport .answer-summary-card { border-top: 3px solid var(--m-cyan) !important; background: linear-gradient(180deg, var(--m-cyan-tint) 0%, #fff 60%) !important; } html.mobile-viewport .answer-result-eyebrow, html.mobile-viewport .answer-eyebrow { display: inline-block !important; margin: 0 0 6px !important; color: var(--m-cyan-deep) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } html.mobile-viewport .answer-main { margin: 0 !important; color: var(--m-text) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.65 !important; } html.mobile-viewport .answer-main strong { color: var(--m-cyan-deep) !important; } html.mobile-viewport .answer-list { margin: 10px 0 0 !important; padding-left: 18px !important; color: var(--m-sub) !important; font-size: 14px !important; line-height: 1.7 !important; } html.mobile-viewport .answer-list li { margin: 4px 0 !important; } html.mobile-viewport .answer-detail-head strong { color: var(--m-text) !important; font-size: 15px !important; font-weight: 600 !important; } html.mobile-viewport .answer-tag-group { display: inline-flex !important; gap: 6px !important; margin-bottom: 8px !important; } html.mobile-viewport .answer-tag { display: inline-flex !important; align-items: center !important; padding: 2px 9px !important; border-radius: 999px !important; background: var(--m-cyan-tint2) !important; color: var(--m-cyan-deep) !important; font-size: 11px !important; font-weight: 600 !important; } html.mobile-viewport .answer-tag-recommend { background: rgba(255, 153, 0, 0.14) !important; color: #c9710b !important; } html.mobile-viewport .answer-head { margin: 0 var(--m-gutter) !important; padding: 16px 0 0 !important; } html.mobile-viewport .answer-head h2 { margin: 4px 0 0 !important; color: var(--m-text) !important; font-size: 19px !important; font-weight: 700 !important; } html.mobile-viewport .answer-verdict-error { border-top-color: #fa5151 !important; } html.mobile-viewport .answer-verdict-label { color: #fa5151 !important; font-weight: 600 !important; } /* 答案明细 / 表格 */ html.mobile-viewport .answer-details > summary { color: var(--m-cyan-deep) !important; font-size: 14px !important; font-weight: 500 !important; list-style: none !important; padding: 8px 0 !important; } html.mobile-viewport .answer-details > summary::-webkit-details-marker { display: none !important; } html.mobile-viewport .answer-table-wrap { margin-top: 10px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 10px !important; } html.mobile-viewport .answer-table, html.mobile-viewport .matrix-table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; } html.mobile-viewport .answer-table th, html.mobile-viewport .matrix-table th { padding: 8px 10px !important; background: var(--m-cyan-tint) !important; color: var(--m-cyan-deep) !important; font-weight: 600 !important; white-space: nowrap !important; text-align: left !important; border-bottom: 1px solid var(--m-line) !important; } html.mobile-viewport .answer-table td, html.mobile-viewport .matrix-table td { padding: 8px 10px !important; color: var(--m-text) !important; border-bottom: 1px solid var(--m-line-soft) !important; white-space: nowrap !important; } html.mobile-viewport .answer-subtable-title { margin: 12px 0 6px !important; color: var(--m-faint) !important; font-size: 12px !important; font-weight: 600 !important; } /* ====== 寿命矩阵抽屉 ====== */ html.mobile-viewport .matrix-drawer { margin: 12px var(--m-gutter) 0 !important; border: 0 !important; border-radius: var(--m-radius) !important; background: var(--m-card) !important; box-shadow: var(--m-shadow) !important; overflow: hidden !important; } html.mobile-viewport .matrix-drawer > summary { display: flex !important; align-items: center !important; min-height: 50px !important; padding: 0 16px !important; color: var(--m-cyan-deep) !important; font-size: 15px !important; font-weight: 500 !important; list-style: none !important; } html.mobile-viewport .matrix-drawer > summary::-webkit-details-marker { display: none !important; } html.mobile-viewport .matrix-drawer[open] > summary { border-bottom: 1px solid var(--m-line) !important; } html.mobile-viewport .matrix-tab-hint, html.mobile-viewport .matrix-scroll-hint { padding: 10px 16px 0 !important; color: var(--m-sub) !important; font-size: 12px !important; } html.mobile-viewport .summary-card, html.mobile-viewport .break-even-box { margin: 12px 16px !important; padding: 12px 14px !important; border-radius: 12px !important; background: var(--m-cyan-tint) !important; color: var(--m-text) !important; font-size: 14px !important; line-height: 1.6 !important; } html.mobile-viewport .matrix-mobile-list { margin: 0 16px 12px !important; } html.mobile-viewport .matrix-full-table { margin: 0 16px 14px !important; } html.mobile-viewport .matrix-full-table > summary { color: var(--m-cyan-deep) !important; font-size: 14px !important; padding: 8px 0 !important; list-style: none !important; } html.mobile-viewport .matrix-full-table > summary::-webkit-details-marker { display: none !important; } html.mobile-viewport .table-wrap, html.mobile-viewport .matrix-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* ====== 底部操作栏 ====== */ html.mobile-viewport .form-actions { position: sticky !important; bottom: 0 !important; z-index: 40 !important; display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 10px var(--m-gutter) max(10px, env(safe-area-inset-bottom)) !important; border: 0 !important; border-top: 1px solid var(--m-line) !important; background: rgba(255, 255, 255, 0.97) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -4px 20px rgba(10, 90, 105, 0.05) !important; } html.mobile-viewport .form-actions .action-right { display: flex !important; align-items: center !important; gap: 10px !important; margin-left: auto !important; } html.mobile-viewport .step-indicator { color: var(--m-sub) !important; font-size: 12px !important; white-space: nowrap !important; } html.mobile-viewport .btn-flow-back { display: none !important; } html.mobile-viewport .form-card[data-current-step="4"] .btn-flow-back, html.mobile-viewport .form-card[data-current-step="3"] .btn-flow-back { display: inline-flex !important; } /* ====== 按钮系统 ====== */ html.mobile-viewport .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 0 22px !important; border: 0 !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: none !important; transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease !important; } html.mobile-viewport .btn:active { transform: translateY(1px); } html.mobile-viewport .btn-sm { min-height: 40px !important; font-size: 14px !important; padding: 0 16px !important; } html.mobile-viewport .btn-primary, html.mobile-viewport .btn-accent { background: var(--m-cyan) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(1, 188, 214, 0.24) !important; } html.mobile-viewport .btn-primary:active, html.mobile-viewport .btn-accent:active { background: var(--m-cyan-deep) !important; } html.mobile-viewport .btn-primary:disabled { background: #cfe0e3 !important; color: #fff !important; opacity: 1 !important; box-shadow: none !important; } html.mobile-viewport .btn-ghost, html.mobile-viewport .btn-secondary { background: #eaf4f6 !important; color: var(--m-cyan-deep) !important; } html.mobile-viewport .btn-ghost:active, html.mobile-viewport .btn-secondary:active { background: #ddeef1 !important; } html.mobile-viewport .form-actions .action-right .btn-primary { flex: 0 0 auto !important; min-width: 118px !important; } /* ====== 底部选择器面板 ====== */ html.mobile-viewport .mobile-picker-sheet { border-radius: 16px 16px 0 0 !important; background: var(--m-card) !important; } html.mobile-viewport .mobile-picker-head { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 52px !important; padding: 0 var(--m-gutter) !important; border-bottom: 1px solid var(--m-line) !important; } html.mobile-viewport .mobile-picker-head strong { color: var(--m-text) !important; font-size: 16px !important; font-weight: 600 !important; } html.mobile-viewport .mobile-picker-head button { border: 0 !important; background: transparent !important; color: var(--m-cyan-deep) !important; font-size: 15px !important; font-weight: 400 !important; } html.mobile-viewport .mobile-picker-option { display: flex !important; align-items: center !important; min-height: 50px !important; padding: 0 var(--m-gutter) !important; border-bottom: 1px solid var(--m-line) !important; color: var(--m-text) !important; font-size: 16px !important; font-weight: 400 !important; } html.mobile-viewport .mobile-picker-option:active { background: var(--m-tap) !important; } html.mobile-viewport .mobile-picker-option.active { color: var(--m-cyan-deep) !important; font-weight: 600 !important; } html.mobile-viewport .mobile-picker-search-wrap { padding: 10px var(--m-gutter) !important; } html.mobile-viewport .mobile-picker-search-wrap input { width: 100% !important; min-height: 42px !important; padding: 0 12px !important; border: 1.5px solid var(--m-line) !important; border-radius: 10px !important; background: #f5fafb !important; font-size: 16px !important; } /* ============================================================ 特异性加固层 —— 压过 styles.css 残留的高特异性旧规则 ============================================================ */ html.mobile-viewport .field > .field-lookup, html.mobile-viewport .field-label-row > .field-lookup, html.mobile-viewport .field-grid > .field > .field-lookup { display: block !important; margin-top: 8px !important; } html.mobile-viewport .field-label-row > .field-lookup { margin-top: 0 !important; } html.mobile-viewport .field-grid > .field > label, html.mobile-viewport .field-grid-core > .field > label, html.mobile-viewport .gap-fields-grid > .field > label, html.mobile-viewport #workspace-inputs .field-grid > .field > label, html.mobile-viewport .field > .field-label-row > label { margin: 0 0 8px !important; color: var(--m-text) !important; font-size: 15px !important; font-weight: 500 !important; white-space: normal !important; letter-spacing: 0 !important; } html.mobile-viewport .field > .field-label-row > label { margin: 0 !important; } html.mobile-viewport .field-grid > .field, html.mobile-viewport .field-grid-core > .field, html.mobile-viewport .field-grid-3 > .field, html.mobile-viewport .gap-fields-grid > .field, html.mobile-viewport #workspace-inputs .field-grid > .field { display: block !important; grid-template-columns: none !important; min-height: 0 !important; } /* ============================================================ 欢迎页最终覆盖 — 小程序 web-view 首屏 ============================================================ */ html.mobile-viewport body:not(.flow-started) { background: radial-gradient(270px 200px at 86% 12%, rgba(176, 234, 241, 0.42), transparent 72%), linear-gradient(180deg, #e9f8fc 0%, #ffffff 42%, #f7fcfd 100%) !important; } html.mobile-viewport body:not(.flow-started) #app { min-height: 100dvh !important; overflow-x: hidden !important; background: radial-gradient(280px 190px at 104% 6%, rgba(94, 211, 224, 0.18), transparent 70%), radial-gradient(270px 200px at -16% 72%, rgba(152, 225, 236, 0.16), transparent 72%), linear-gradient(180deg, #eaf9fd 0%, #ffffff 36%, #f8fdfe 100%) !important; } html.mobile-viewport body:not(.flow-started) .welcome-hero { position: relative !important; overflow: hidden !important; padding: 0 var(--m-gutter) !important; border: 0 !important; background: transparent !important; color: #162934 !important; } html.mobile-viewport body:not(.flow-started) .welcome-inner { position: relative !important; z-index: 1 !important; width: 100% !important; max-width: 430px !important; margin: 0 auto !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; overflow: hidden !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual img { position: absolute !important; top: 18px !important; right: -56px !important; width: 340px !important; max-width: none !important; height: auto !important; object-fit: contain !important; user-select: none !important; -webkit-user-drag: none !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, rgba(247, 252, 253, 0.88) 0%, rgba(247, 252, 253, 0.42) 40%, rgba(247, 252, 253, 0.04) 72%), linear-gradient(180deg, rgba(247, 252, 253, 0) 0%, rgba(247, 252, 253, 0.08) 52%, #ffffff 88%) !important; } html.mobile-viewport .welcome-copy { position: relative !important; z-index: 1 !important; min-height: 282px !important; padding-top: 112px !important; } html.mobile-viewport .welcome-title { margin: 0 !important; color: #162934 !important; font-size: 34px !important; font-weight: 850 !important; line-height: 1.22 !important; letter-spacing: 0 !important; text-wrap: initial !important; } html.mobile-viewport .welcome-title span { display: block !important; } html.mobile-viewport .welcome-title span span { display: inline !important; } html.mobile-viewport .welcome-emphasis { color: #079aa6 !important; } html.mobile-viewport .welcome-subtitle { max-width: 260px !important; margin: 18px 0 0 !important; color: #647782 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.55 !important; letter-spacing: 0 !important; } html.mobile-viewport .welcome-feature-card { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 2px !important; padding: 24px 10px 22px !important; border: 1px solid rgba(215, 239, 244, 0.74) !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 18px 42px rgba(39, 114, 129, 0.08) !important; } html.mobile-viewport .welcome-feature { display: flex !important; min-width: 0 !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } html.mobile-viewport .welcome-feature-icon { width: 52px !important; height: 52px !important; margin-bottom: 13px !important; border-radius: 50% !important; color: #079aa6 !important; background: #edfafd !important; } html.mobile-viewport .welcome-feature strong { color: #162934 !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: 0 !important; } html.mobile-viewport .welcome-feature span:last-child { margin-top: 6px !important; color: #8698a2 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } html.mobile-viewport .welcome-outcomes { margin: 46px 17px 0 !important; } html.mobile-viewport .welcome-outcomes h2 { margin: 0 !important; color: #162934 !important; font-size: 21px !important; font-weight: 850 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } html.mobile-viewport .welcome-title-rule { display: block !important; width: 38px !important; height: 6px !important; margin-top: 12px !important; border-radius: 999px !important; background: #ffc24a !important; } html.mobile-viewport .welcome-outcome-list { display: grid !important; gap: 22px !important; margin: 35px 0 0 !important; padding: 0 !important; list-style: none !important; } html.mobile-viewport .welcome-outcome-list li { display: flex !important; min-width: 0 !important; align-items: center !important; gap: 15px !important; color: #334650 !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.45 !important; letter-spacing: 0 !important; } html.mobile-viewport .welcome-list-icon { width: 29px !important; height: 29px !important; flex: 0 0 29px !important; border-radius: 50% !important; color: #09b7c2 !important; background: #edfbfd !important; } html.mobile-viewport .welcome-cta-bar { width: 100% !important; max-width: 430px !important; margin: 0 auto !important; padding: 40px 24px calc(24px + env(safe-area-inset-bottom)) !important; background: transparent !important; } html.mobile-viewport .welcome-cta-bar .hero-cta { display: flex !important; width: 100% !important; max-width: none !important; min-height: 62px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, #08aeb9 0%, #07b9c5 58%, #05a6b2 100%) !important; box-shadow: 0 14px 32px rgba(4, 165, 177, 0.26) !important; color: #fff !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; } html.mobile-viewport .welcome-cta-bar .hero-cta:active { background: linear-gradient(135deg, #079aa6 0%, #06919c 100%) !important; transform: translateY(1px) !important; } html.mobile-viewport .welcome-safe-note { display: flex !important; min-width: 0 !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 18px 0 0 !important; color: #90a0a8 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.45 !important; text-align: center !important; letter-spacing: 0 !important; } html.mobile-viewport .welcome-safe-icon { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; color: #88b5bf !important; } html.mobile-viewport .legacy-hero-bindings, html.mobile-viewport body:not(.flow-started) .data-badge, html.mobile-viewport body:not(.flow-started) .disclaimer { display: none !important; } /* 参考图还原覆盖：浅蓝渐变开屏 + 无框卖点 + 白色结果卡 */ html.mobile-viewport body:not(.flow-started) { background: radial-gradient(330px 230px at 84% 7%, rgba(179, 231, 241, 0.48), transparent 72%), radial-gradient(260px 210px at -12% 76%, rgba(170, 229, 236, 0.2), transparent 72%), linear-gradient(180deg, #edfaff 0%, #ffffff 38%, #f7fcfd 100%) !important; } html.mobile-viewport body:not(.flow-started) #app { background: radial-gradient(320px 220px at 100% 5%, rgba(87, 206, 222, 0.16), transparent 70%), radial-gradient(320px 220px at -18% 73%, rgba(146, 225, 236, 0.16), transparent 72%), linear-gradient(180deg, #edfaff 0%, #ffffff 38%, #f8fdfe 100%) !important; } html.mobile-viewport body:not(.flow-started) .welcome-hero { padding-inline: 24px !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual img { top: 10px !important; right: -78px !important; width: 390px !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual::after { background: linear-gradient(90deg, rgba(247, 252, 253, 0.9) 0%, rgba(247, 252, 253, 0.5) 38%, rgba(247, 252, 253, 0.08) 70%), linear-gradient(180deg, rgba(247, 252, 253, 0) 0%, rgba(247, 252, 253, 0.02) 58%, #ffffff 92%) !important; } html.mobile-viewport .welcome-copy { min-height: 188px !important; padding-top: 68px !important; } html.mobile-viewport .welcome-emphasis { background: linear-gradient(90deg, #169aa5 0%, #59c5c7 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } html.mobile-viewport .welcome-subtitle { max-width: 318px !important; font-size: 17px !important; font-weight: 650 !important; } html.mobile-viewport .welcome-feature-card { gap: 12px !important; margin: 0 !important; padding: 22px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html.mobile-viewport .welcome-feature-icon { width: 58px !important; height: 58px !important; margin-bottom: 15px !important; background: rgba(237, 250, 253, 0.92) !important; box-shadow: 0 12px 30px rgba(30, 165, 178, 0.08) !important; } html.mobile-viewport .welcome-feature strong { font-size: 16px !important; } html.mobile-viewport .welcome-feature span:last-child { font-size: 13px !important; } html.mobile-viewport .welcome-outcomes { margin: 38px 0 0 !important; padding: 26px 22px 24px !important; border: 1px solid rgba(226, 241, 244, 0.82) !important; border-radius: 22px !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 22px 58px rgba(34, 125, 140, 0.11) !important; } html.mobile-viewport .welcome-outcomes-head { display: flex !important; align-items: center !important; gap: 10px !important; } html.mobile-viewport .welcome-title-rule { width: 4px !important; height: 24px !important; flex: 0 0 4px !important; margin: 0 !important; background: linear-gradient(180deg, #58c4c9 0%, #079aa6 100%) !important; } html.mobile-viewport .welcome-outcome-list { gap: 0 !important; margin: 26px 0 0 !important; } html.mobile-viewport .welcome-outcome-list li { gap: 20px !important; padding: 22px 0 !important; border-top: 1px solid rgba(213, 226, 231, 0.74) !important; color: #162934 !important; font-size: initial !important; font-weight: initial !important; line-height: 1.35 !important; } html.mobile-viewport .welcome-outcome-list li:first-child { padding-top: 10px !important; border-top: 0 !important; } html.mobile-viewport .welcome-outcome-list li:last-child { padding-bottom: 0 !important; } html.mobile-viewport .welcome-list-icon { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; color: #48aeb6 !important; background: #edfafd !important; } html.mobile-viewport .welcome-outcome-copy { display: grid !important; min-width: 0 !important; gap: 8px !important; } html.mobile-viewport .welcome-outcome-copy strong { color: #162934 !important; font-size: 19px !important; font-weight: 850 !important; line-height: 1.35 !important; } html.mobile-viewport .welcome-outcome-copy span { color: #758894 !important; font-size: 15px !important; font-weight: 520 !important; line-height: 1.45 !important; } html.mobile-viewport .welcome-cta-bar { padding: 34px 34px calc(24px + env(safe-area-inset-bottom)) !important; } html.mobile-viewport .welcome-cta-bar .hero-cta { background: linear-gradient(135deg, #49bbc0 0%, #26adbd 48%, #31aeca 100%) !important; box-shadow: 0 16px 34px rgba(34, 166, 186, 0.23) !important; font-size: 20px !important; } html.mobile-viewport .welcome-safe-note { margin-top: 20px !important; color: #81909b !important; } @media (max-width: 374px) { html.mobile-viewport body:not(.flow-started) .welcome-hero { padding-inline: 14px !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual img { top: 8px !important; right: -92px !important; width: 360px !important; } html.mobile-viewport .welcome-copy { min-height: 184px !important; padding-top: 62px !important; } html.mobile-viewport .welcome-title { font-size: 31px !important; } html.mobile-viewport .welcome-subtitle { max-width: 286px !important; font-size: 14px !important; } html.mobile-viewport .welcome-feature-card { gap: 6px !important; padding-top: 18px !important; } html.mobile-viewport .welcome-feature-icon, html.mobile-viewport .welcome-list-icon { width: 52px !important; height: 52px !important; } html.mobile-viewport .welcome-list-icon { flex-basis: 52px !important; } html.mobile-viewport .welcome-feature strong { font-size: 13px !important; } html.mobile-viewport .welcome-feature span:last-child { font-size: 11px !important; } html.mobile-viewport .welcome-outcomes { padding: 24px 18px 22px !important; } html.mobile-viewport .welcome-outcome-list li { gap: 14px !important; } html.mobile-viewport .welcome-outcome-copy strong { font-size: 17px !important; } html.mobile-viewport .welcome-outcome-copy span { font-size: 14px !important; } html.mobile-viewport .welcome-cta-bar { padding-inline: 24px !important; } } /* v33 欢迎页精准还原层：最高优先级，按 1024px 参考图折算 */ html.mobile-viewport body:not(.flow-started) { background: radial-gradient(230px 190px at 88% 2%, rgba(178, 232, 242, 0.5), transparent 74%), radial-gradient(230px 210px at 0% 76%, rgba(181, 235, 240, 0.22), transparent 74%), linear-gradient(180deg, #edfaff 0%, #ffffff 38%, #f7fcfd 100%) !important; } html.mobile-viewport body:not(.flow-started) #app { max-width: 430px !important; min-height: 100dvh !important; overflow-x: hidden !important; background: radial-gradient(220px 180px at 96% 2%, rgba(91, 202, 221, 0.14), transparent 72%), linear-gradient(180deg, #effbff 0%, #ffffff 39%, #f8fdfe 100%) !important; } html.mobile-viewport body:not(.flow-started) .welcome-hero { padding-inline: clamp(20px, 5.08vw, 22px) !important; } html.mobile-viewport body:not(.flow-started) .welcome-inner { max-width: 430px !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual img { top: 0 !important; right: 0 !important; width: clamp(175px, 44.92vw, 193px) !important; opacity: 0.96 !important; } html.mobile-viewport body:not(.flow-started) .welcome-visual::after { background: linear-gradient(90deg, rgba(247, 252, 253, 0.96) 0%, rgba(247, 252, 253, 0.66) 44%, rgba(247, 252, 253, 0.04) 72%), linear-gradient(180deg, rgba(247, 252, 253, 0) 0%, rgba(247, 252, 253, 0.02) 68%, #ffffff 96%) !important; } html.mobile-viewport .welcome-copy { min-height: clamp(171px, 43.75vw, 188px) !important; padding-top: clamp(50px, 12.99vw, 56px) !important; } html.mobile-viewport .welcome-title { font-size: clamp(28px, 7.3vw, 31px) !important; font-weight: 850 !important; line-height: 1.08 !important; } html.mobile-viewport .welcome-subtitle { max-width: clamp(300px, 76.07vw, 327px) !important; margin-top: clamp(10px, 2.73vw, 12px) !important; font-size: clamp(12px, 3.08vw, 13px) !important; font-weight: 680 !important; line-height: 1.5 !important; } html.mobile-viewport .welcome-feature-card { position: relative !important; height: clamp(103px, 26.37vw, 113px) !important; margin: 0 !important; padding: clamp(15px, 3.91vw, 17px) clamp(12px, 3.13vw, 13px) !important; gap: 0 !important; border: 1px solid rgba(229, 242, 245, 0.76) !important; border-radius: clamp(12px, 3.12vw, 13px) !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 18px 48px rgba(33, 130, 145, 0.11) !important; } html.mobile-viewport .welcome-feature { position: relative !important; justify-content: flex-start !important; } html.mobile-viewport .welcome-feature:not(:last-child)::after { content: "" !important; position: absolute !important; top: clamp(18px, 4.69vw, 20px) !important; right: 0 !important; width: 1px !important; height: clamp(56px, 14.45vw, 62px) !important; background: rgba(205, 224, 230, 0.84) !important; } html.mobile-viewport .welcome-feature-icon { width: clamp(41px, 10.55vw, 45px) !important; height: clamp(41px, 10.55vw, 45px) !important; margin-bottom: clamp(8px, 2.34vw, 10px) !important; } html.mobile-viewport .welcome-feature strong { font-size: clamp(11px, 2.92vw, 12px) !important; line-height: 1.2 !important; } html.mobile-viewport .welcome-feature span:last-child { max-width: 98% !important; margin-top: clamp(5px, 1.56vw, 7px) !important; font-size: clamp(10px, 2.62vw, 11px) !important; line-height: 1.25 !important; } html.mobile-viewport .welcome-outcomes { height: clamp(199px, 51.07vw, 220px) !important; margin: clamp(10px, 2.34vw, 10px) 0 0 !important; padding: clamp(15px, 3.91vw, 17px) clamp(14px, 3.52vw, 15px) !important; border: 1px solid rgba(229, 242, 245, 0.8) !important; border-radius: clamp(12px, 3.12vw, 13px) !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 18px 50px rgba(33, 130, 145, 0.1) !important; } html.mobile-viewport .welcome-outcomes-head { gap: clamp(8px, 2.15vw, 9px) !important; } html.mobile-viewport .welcome-outcomes h2 { font-size: clamp(14px, 3.52vw, 15px) !important; line-height: 1.25 !important; } html.mobile-viewport .welcome-title-rule { width: clamp(3px, 0.78vw, 4px) !important; height: clamp(17px, 4.3vw, 18px) !important; } html.mobile-viewport .welcome-outcome-list { margin-top: clamp(13px, 3.32vw, 14px) !important; } html.mobile-viewport .welcome-outcome-list li { gap: clamp(14px, 3.52vw, 15px) !important; min-height: clamp(48px, 11.72vw, 50px) !important; padding: clamp(5px, 1.37vw, 6px) 0 !important; } html.mobile-viewport .welcome-list-icon { width: clamp(33px, 8.4vw, 36px) !important; height: clamp(33px, 8.4vw, 36px) !important; flex-basis: clamp(33px, 8.4vw, 36px) !important; } html.mobile-viewport .welcome-outcome-copy { gap: clamp(4px, 1.17vw, 5px) !important; } html.mobile-viewport .welcome-outcome-copy strong { font-size: clamp(12px, 3.18vw, 14px) !important; line-height: 1.2 !important; } html.mobile-viewport .welcome-outcome-copy span { font-size: clamp(10px, 2.62vw, 11px) !important; line-height: 1.2 !important; } html.mobile-viewport .welcome-cta-bar { max-width: 430px !important; padding: clamp(14px, 3.52vw, 15px) 0 calc(18px + env(safe-area-inset-bottom)) !important; } html.mobile-viewport .welcome-cta-bar .hero-cta { width: 74.1% !important; min-height: clamp(42px, 10.64vw, 46px) !important; margin-inline: auto !important; border-radius: 999px !important; font-size: clamp(16px, 4.08vw, 17px) !important; background: linear-gradient(135deg, #12aab8 0%, #21c4cf 58%, #38bbd8 100%) !important; box-shadow: 0 14px 30px rgba(19, 173, 194, 0.23) !important; } html.mobile-viewport .welcome-safe-note { margin-top: clamp(18px, 4.69vw, 20px) !important; font-size: clamp(10px, 2.62vw, 11px) !important; } /* ============================================================ 第 1 步基础信息页 — 小程序 cell 表单视觉 ============================================================ */ html.mobile-viewport { --base-bg: #f2fbfd; --base-bg-2: #ffffff; --base-ink: #142b36; --base-muted: #8299a4; --base-faint: #a6b8c0; --base-line: rgba(197, 221, 227, 0.46); --base-card: rgba(255, 255, 255, 0.94); --base-cyan: #16aabc; --base-cyan-deep: #0798a8; --base-cyan-soft: #eaf8fb; --base-control: #f4f8f9; --base-yellow: #d8be3e; } html.mobile-viewport body.flow-started { background: radial-gradient(360px 260px at 88% 0%, rgba(176, 233, 242, 0.32), transparent 72%), linear-gradient(180deg, #f7fdff 0%, var(--base-bg) 48%, #ffffff 100%) !important; } html.mobile-viewport body.flow-started #app { background: radial-gradient(320px 220px at -12% 20%, rgba(174, 230, 239, 0.22), transparent 76%), linear-gradient(180deg, #f9feff 0%, #f3fbfd 54%, #ffffff 100%) !important; } html.mobile-viewport body.flow-started .main { max-width: 430px !important; margin: 0 auto !important; padding: 0 0 18px !important; background: transparent !important; } /* 顶部四步进度 */ html.mobile-viewport body.flow-started .wizard-progress { position: relative !important; top: auto !important; z-index: 10 !important; display: grid !important; grid-template-columns: 52px minmax(18px, 1fr) 52px minmax(18px, 1fr) 52px minmax(18px, 1fr) 52px !important; align-items: start !important; gap: 0 !important; width: 100% !important; margin: 0 !important; padding: 26px 46px 24px !important; border: 0 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } html.mobile-viewport body.flow-started .progress-line { display: block !important; width: 100% !important; height: 2px !important; margin-top: 13px !important; border: 0 !important; background: rgba(194, 218, 224, 0.55) !important; } html.mobile-viewport body.flow-started .progress-step { display: flex !important; width: 52px !important; min-width: 0 !important; min-height: 54px !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html.mobile-viewport body.flow-started .step-num { order: 1 !important; width: 27px !important; height: 27px !important; border-radius: 50% !important; background: #e5f0f3 !important; color: #7f9aa4 !important; font-size: 14px !important; font-weight: 850 !important; line-height: 1 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; } html.mobile-viewport body.flow-started .progress-step::after { content: "" !important; order: 2 !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #b8cbd1 !important; } html.mobile-viewport body.flow-started .progress-step.active::after { background: var(--base-cyan) !important; } html.mobile-viewport body.flow-started .progress-step.active .step-num { background: linear-gradient(145deg, #23b7c7 0%, #0798a8 100%) !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(7, 152, 168, 0.22) !important; } html.mobile-viewport body.flow-started .progress-step.done .step-num { background: #dff2f5 !important; color: var(--base-cyan-deep) !important; box-shadow: none !important; } html.mobile-viewport body.flow-started .step-text { order: 3 !important; width: 62px !important; margin: 0 !important; text-align: center !important; } html.mobile-viewport body.flow-started .step-text strong { display: block !important; color: #95abb4 !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.25 !important; white-space: nowrap !important; } html.mobile-viewport body.flow-started .progress-step.active .step-text strong { color: var(--base-cyan-deep) !important; } html.mobile-viewport body.flow-started .step-text small { display: none !important; } /* 第 1 步标题和提示条 */ html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] { padding: 0 0 18px !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .step-header { margin: 0 !important; padding: 0 22px 10px !important; background: transparent !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .step-header h2 { margin: 0 !important; color: var(--base-ink) !important; font-size: 25px !important; font-weight: 900 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .step-subtitle { display: block !important; margin: 10px 0 0 !important; color: #8298a2 !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.4 !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] > .lookup-guide { margin: 0 20px 20px !important; border: 1px solid rgba(219, 239, 244, 0.62) !important; border-radius: 9px !important; background: rgba(255, 255, 255, 0.58) !important; box-shadow: none !important; overflow: hidden !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] > .lookup-guide > .lookup-guide-summary { display: flex !important; min-height: 40px !important; align-items: center !important; gap: 10px !important; padding: 0 16px !important; color: var(--base-cyan-deep) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.45 !important; list-style: none !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] > .lookup-guide > .lookup-guide-summary::before { content: "" !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important; background: #69c2cf !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.2 8.5-7 10-3.8-1.5-7-5-7-10V6l7-3z'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.2 8.5-7 10-3.8-1.5-7-5-7-10V6l7-3z'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] > .lookup-guide > .lookup-guide-summary::after { content: "" !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; margin-left: auto !important; background: #8aa1aa !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] > .lookup-guide[open] > .lookup-guide-summary { border-bottom: 1px solid rgba(215, 235, 240, 0.72) !important; } /* 第 1 步白色表单卡 */ html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .field-grid-tight { display: block !important; margin: 0 16px !important; padding: 0 !important; border: 1px solid rgba(219, 237, 242, 0.74) !important; border-radius: 14px !important; background: var(--base-card) !important; box-shadow: 0 18px 44px rgba(24, 105, 120, 0.1) !important; overflow: hidden !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .base-info-field, html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] #female-type-field.hidden, html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] #custom-base-field.hidden { display: grid !important; grid-template-columns: 28px minmax(116px, 32%) minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 8px !important; row-gap: 0 !important; min-height: 65px !important; margin: 0 !important; padding: 12px 32px 12px 14px !important; border: 0 !important; border-bottom: 1px solid var(--base-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .base-info-field:last-child { border-bottom: 0 !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .base-info-field::before { content: "" !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background-color: #eaf8fb !important; background-image: var(--base-field-icon) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 16px 16px !important; } html.mobile-viewport .base-field-identity { --base-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316aabc' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='12' rx='2'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M4 12h16'/%3E%3C/svg%3E"); } html.mobile-viewport .base-field-gender { --base-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316aabc'%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3Cpath d='M4.8 20.5a7.2 7.2 0 0 1 14.4 0H4.8z'/%3E%3C/svg%3E"); } html.mobile-viewport .base-field-retire-age, html.mobile-viewport .base-field-birth-month { --base-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316aabc' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 10h16M8.2 14h.1M12 14h.1M15.8 14h.1'/%3E%3C/svg%3E"); } html.mobile-viewport .base-field-birth-year { --base-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316aabc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12h10v7H7z'/%3E%3Cpath d='M5 12h14M8 12V9.5a2 2 0 1 1 4 0V12M16 12V9.5a2 2 0 1 0-4 0V12M9 16h6'/%3E%3C/svg%3E"); } html.mobile-viewport .base-field-household { --base-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316aabc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6-5.1 6-10a6 6 0 1 0-12 0c0 4.9 6 10 6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E"); } html.mobile-viewport .base-field-province { --base-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316aabc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.8-3 8.4-7 10-4-1.6-7-5.2-7-10V6l7-3z'/%3E%3Cpath d='M12 8v7M8.8 11.2l3.2-3.2 3.2 3.2'/%3E%3C/svg%3E"); } html.mobile-viewport .base-field-base { --base-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316aabc' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='16' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M12 8v9M9.5 15h5'/%3E%3C/svg%3E"); } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .field-label-row, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > label { grid-column: 2 !important; grid-row: 1 / span 2 !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field label { display: block !important; margin: 0 !important; padding: 0 !important; color: var(--base-ink) !important; font-size: 12.6px !important; font-weight: 850 !important; line-height: 1.22 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-helper, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-hint-inline { display: block !important; margin-top: 4px !important; color: #829aa4 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.22 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > select.mobile-native-select, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > input:not([type="radio"]):not([type="checkbox"]), html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .mobile-select-button { position: relative !important; grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: center !important; width: 100% !important; min-width: 0 !important; min-height: 38px !important; margin: 0 !important; padding: 0 18px 0 12px !important; border: 0 !important; border-radius: 9px !important; background: var(--base-control) !important; color: #273e48 !important; font-size: 11.2px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: left !important; justify-content: flex-start !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .mobile-select-button::after { position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; flex: none !important; width: 15px !important; height: 15px !important; margin-left: 0 !important; background: #6f8993 !important; -webkit-mask-size: 13px !important; mask-size: 13px !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .mobile-select-button.is-placeholder, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > input::placeholder { color: var(--base-faint) !important; font-weight: 700 !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > input:not([type="radio"]):not([type="checkbox"]) { padding-right: 12px !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .field-lookup, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .field-label-row > .field-lookup { position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-lookup > summary { display: flex !important; width: 20px !important; height: 20px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #6cc9d4 !important; color: #ffffff !important; font-size: 0 !important; font-weight: 900 !important; line-height: 1 !important; list-style: none !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-lookup > summary::before { content: "i" !important; font-size: 13px !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-lookup > summary::after { display: none !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-lookup p { position: absolute !important; z-index: 3 !important; left: 20px !important; right: 20px !important; top: calc(100% - 12px) !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid rgba(180, 218, 226, 0.72) !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.98) !important; color: #607781 !important; font-size: 12px !important; line-height: 1.55 !important; box-shadow: 0 10px 24px rgba(22, 90, 105, 0.12) !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .province-source-banner { grid-column: 3 !important; grid-row: 3 !important; margin: 8px 0 0 !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-error { grid-column: 3 !important; grid-row: 3 !important; margin: 8px 0 0 !important; color: #e15b5b !important; font-size: 12px !important; } /* 第 1 步底部按钮 */ html.mobile-viewport .form-card[data-current-step="1"] .form-actions { position: relative !important; bottom: auto !important; z-index: 1 !important; display: grid !important; grid-template-columns: 1fr 0.86fr 1.28fr !important; align-items: center !important; gap: 10px !important; margin: 18px 14px 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.mobile-viewport .form-card[data-current-step="1"] .form-actions .action-right { display: contents !important; } html.mobile-viewport .form-card[data-current-step="1"] #btn-flow-back.hidden, html.mobile-viewport .form-card[data-current-step="1"] #btn-prev.hidden, html.mobile-viewport .form-card[data-current-step="1"] #btn-next { display: inline-flex !important; } html.mobile-viewport .form-card[data-current-step="1"] #btn-flow-back { grid-column: 1 !important; order: 1 !important; } html.mobile-viewport .form-card[data-current-step="1"] #btn-prev { grid-column: 2 !important; order: 2 !important; } html.mobile-viewport .form-card[data-current-step="1"] #btn-next { grid-column: 3 !important; order: 3 !important; } html.mobile-viewport .form-card[data-current-step="1"] #step-indicator { grid-column: 1 / -1 !important; order: 4 !important; margin-top: 10px !important; color: #91a6af !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; white-space: nowrap !important; } html.mobile-viewport .form-card[data-current-step="1"] .form-actions .action-right #step-indicator { grid-column: 1 / -1 !important; order: 4 !important; } html.mobile-viewport .form-card[data-current-step="1"] .form-actions .action-right #btn-next { grid-column: 3 !important; order: 3 !important; } html.mobile-viewport .form-card[data-current-step="1"] .form-actions .btn { min-width: 0 !important; min-height: 54px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 850 !important; line-height: 1 !important; white-space: nowrap !important; } html.mobile-viewport .form-card[data-current-step="1"] #btn-flow-back, html.mobile-viewport .form-card[data-current-step="1"] #btn-prev { border: 1.5px solid rgba(48, 178, 193, 0.38) !important; background: rgba(255, 255, 255, 0.82) !important; color: var(--base-cyan-deep) !important; box-shadow: none !important; } html.mobile-viewport .form-card[data-current-step="1"] #btn-next { border: 0 !important; background: linear-gradient(135deg, #20b8c8 0%, #079aaa 100%) !important; color: #ffffff !important; box-shadow: 0 10px 24px rgba(7, 154, 170, 0.24) !important; } /* 第 1 步底部说明卡 */ html.mobile-viewport #app:has(.form-card[data-current-step="1"]) .footer { position: relative !important; display: grid !important; grid-template-columns: 26px minmax(0, 1fr) !important; gap: 4px 12px !important; max-width: 398px !important; margin: 16px auto calc(24px + env(safe-area-inset-bottom)) !important; padding: 17px 18px 17px 22px !important; border: 1px solid rgba(218, 239, 244, 0.72) !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.58) !important; color: #78909a !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.65 !important; text-align: left !important; box-shadow: none !important; } html.mobile-viewport #app:has(.form-card[data-current-step="1"]) .footer::before { content: "" !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 24px !important; height: 24px !important; align-self: start !important; margin-top: 2px !important; background: #6fc5d2 !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.2 8.5-7 10-3.8-1.5-7-5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.2 8.5-7 10-3.8-1.5-7-5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat !important; } html.mobile-viewport #app:has(.form-card[data-current-step="1"]) .footer span { grid-column: 2 !important; display: block !important; } @media (max-width: 414px) { html.mobile-viewport body.flow-started .wizard-progress { grid-template-columns: 50px minmax(16px, 1fr) 50px minmax(16px, 1fr) 50px minmax(16px, 1fr) 50px !important; padding: 26px 38px 24px !important; } html.mobile-viewport body.flow-started .progress-step { width: 50px !important; } html.mobile-viewport body.flow-started .step-text { width: 60px !important; margin-left: 0 !important; } html.mobile-viewport body.flow-started .step-text strong { font-size: 10.5px !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .base-info-field, html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] #female-type-field.hidden, html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] #custom-base-field.hidden { grid-template-columns: 26px minmax(112px, 34%) minmax(0, 1fr) !important; column-gap: 7px !important; min-height: 65px !important; padding: 11px 32px 11px 14px !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .field-grid-tight { margin-inline: 10px !important; } html.mobile-viewport .form-card[data-current-step="1"] .step-panel[data-step="1"] .base-info-field::before { width: 26px !important; height: 26px !important; background-size: 15px 15px !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field label { font-size: 12.2px !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field .field-helper { font-size: 9.8px !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > select.mobile-native-select, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > input:not([type="radio"]):not([type="checkbox"]), html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .mobile-select-button { min-height: 38px !important; padding-left: 9px !important; padding-right: 16px !important; font-size: 10.6px !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .field-lookup, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .field-label-row > .field-lookup { right: 8px !important; } html.mobile-viewport .form-card[data-current-step="1"] .form-actions { gap: 8px !important; } html.mobile-viewport .form-card[data-current-step="1"] .form-actions .btn { font-size: 14px !important; padding-inline: 8px !important; } } /* 第 1 步 label 包装层修正：让右侧 ? 稳定落在最右列 */ html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .field-label-row { display: contents !important; } html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > .field-label-row > label, html.mobile-viewport .form-card[data-current-step="1"] .base-info-field > label { grid-column: 2 !important; grid-row: 1 / span 2 !important; min-width: 0 !important; align-self: center !important; } html.mobile-viewport body:not(.flow-started) .footer { display: none !important; } html.mobile-viewport body:not(.flow-started) #app:has(.form-card[data-current-step="1"]) .footer { display: none !important; }