﻿
*{box-sizing:border-box;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 提交后校验失败的字段高亮（身份字段出错时尤其突出） */
.field.field-err>label{color:var(--err-fg,#e5484d);font-weight:600}
.field.field-err>input,.field.field-err>textarea,.field.field-err>select{border-color:var(--err-fg,#e5484d)!important;box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.field.field-err{outline:1px solid var(--err-fg,#e5484d);outline-offset:3px;border-radius:10px;padding:4px 2px}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* 统一图标：真源 assets/js/icons.js（24×24 线性、currentColor 继承，自动适配亮/暗主题） */
.ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-2px}
.ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap="round";stroke-linejoin="round"}
.alert .ico,.win-bar .ico{margin-right:6px}
/* 背景光斑（叠加在整页蓝紫渐变之上，透明度收敛避免抢卡片） */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-deco span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45}
.bg-deco span:nth-child(1){width:560px;height:560px;background:radial-gradient(circle,#93a5ff,transparent 70%);top:-180px;left:-140px}
.bg-deco span:nth-child(2){width:480px;height:480px;background:radial-gradient(circle,#b79dff,transparent 70%);top:35%;right:-180px}
.bg-deco span:nth-child(3){width:620px;height:620px;background:radial-gradient(circle,#7cc7ff,transparent 70%);bottom:-260px;left:28%}
.wrap{max-width:620px;margin:0 auto;padding:34px max(20px,env(safe-area-inset-left, 0px)) max(32px,env(safe-area-inset-bottom, 0px)) max(20px,env(safe-area-inset-right, 0px));display:flex;flex-direction:column;gap:18px;min-height:100vh;min-height:100dvh}
/* ===== 品牌头（方案③：刊头式 —— 图标在左，底部一条渐变收口线）=====
   不用外框、不用实底：靠「图标 + 标题 + 收口线」建立识别，
   收口线在 92% 处淡出，避免整条硬线把页面切成两半 */
.brand-head{position:relative;display:flex;align-items:center;gap:13px;padding:0 0 15px}
.brand-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2) 45%,transparent 92%)}
.bh-logo{position:relative;width:42px;height:42px;flex:none}
.bh-logo .ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--primary) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.bh-logo .ic svg{width:22px;height:22px}
.bh-logo .badge{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--ok);color:#fff;border:2px solid var(--card)}
.bh-logo .badge svg{width:8px;height:8px}
.bh-txt{flex:1;min-width:0;text-align:left}
.bh-txt h1{margin:0;font-size:19px;font-weight:700;line-height:1.35;color:var(--text);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-sub{margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.bh-tag{flex:none;flex-shrink:0;margin-left:auto;align-self:center;font-size:11.5px;font-weight:500;color:var(--primary-fg);
  padding:3px 11px;border-radius:var(--r-pill);background:var(--primary-soft);border:1px solid var(--primary-bd)}
/* 底部行：副标题居左、「在线填报」徽标在右下角，两者水平对齐 */
.bh-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.bh-bottom .bh-tag{margin-left:auto;flex:none;align-self:center}
/* Banner 为 column + flex-start，子项宽度会收缩 → 文本块必须显式铺满，徽标才能推到最右 */
body.fz-fill:not(.step-choose) .bh-txt{width:100%}
/* 表单主题 Banner 色带（一期）：非入口页时品牌头变主题渐变带，白卡片叠压其上 */
body.fz-fill:not(.step-choose) .brand-head{flex-direction:column;align-items:flex-start;gap:5px;background:var(--primary-grad);color:var(--on-primary);border-radius:18px;padding:20px 24px 24px;box-shadow:0 18px 40px -18px rgba(15,23,42,.35)}
body.fz-fill:not(.step-choose) .brand-head::after{display:none}
body.fz-fill:not(.step-choose) .bh-logo{width:40px;height:40px}
body.fz-fill:not(.step-choose) .bh-logo .ic{background:rgba(255,255,255,.22);box-shadow:none}
body.fz-fill:not(.step-choose) .bh-txt h1{color:var(--on-primary);font-size:22px;white-space:normal}
body.fz-fill:not(.step-choose) .bh-sub{color:rgba(255,255,255,.85)}
body.fz-fill:not(.step-choose) .bh-tag{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35)}
body.fz-fill:not(.step-choose) .card{margin-top:-18px}
/* ===== 表单背景层（二期）：纹理 / 头图 / 全屏背景，带遮罩对比度保护 ===== */
/* 纹理：光斑颜色跟随主题主色（原本硬编码蓝紫，切主题后跟随） */
body[data-form-bg="texture"] .bg-deco span{background:radial-gradient(circle,var(--primary),transparent 70%)}
/* 全屏背景图：图作 body 背景，遮罩层用页面底色压暗/压浅，卡片仍为毛玻璃实体 → 文字对比度不受背景干扰
   （注意：body 背景本体在下方 492 行 body.fz-fill 渐变之后二次声明，否则会被同特异性后置规则覆盖） */
body[data-form-bg="image-full"] .bg-deco{display:none}
body[data-form-bg="image-full"]::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg);opacity:calc(var(--form-mask,35)/100);pointer-events:none}
/* 头图：图片填入顶部 Banner 色带，深色遮罩随滑块加深，Banner 白字始终可读 */
body[data-form-bg="image-head"]:not(.step-choose) .brand-head{
  background:linear-gradient(rgba(15,23,42,calc(var(--form-mask,35)/100*1.15)),rgba(15,23,42,calc(var(--form-mask,35)/100*1.15))),
             var(--form-bg) center/cover no-repeat}
/* 卡片：毛玻璃质感 + 蓝紫色调投影，渐变背景上更精致 */
.card{position:relative;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.72);border-radius:20px;
  box-shadow:0 30px 70px -30px rgba(88,80,236,.38),0 6px 18px -10px rgba(31,41,55,.10);
  padding:32px 30px 28px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme="dark"] .card{background:rgba(22,29,44,.84);border-color:rgba(255,255,255,.08);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65)}
.card-title{margin:0 0 16px;font-size:18px;font-weight:600;color:var(--text);text-align:center}
/* 提示框 */
.alert{border-radius:var(--r-lg);padding:11px 14px;margin-bottom:18px;font-size:13.5px;line-height:1.65}
.alert.err{background:var(--err-soft);color:var(--err-fg);border:1px solid var(--err-bd)}
.alert.ok{background:var(--ok-soft);color:var(--ok-fg);border:1px solid var(--ok-bd)}
.alert.info{background:var(--primary-soft);color:var(--primary-fg);border:1px solid var(--primary-bd)}
.alert.warn{background:var(--warn-soft);color:var(--warn-fg);border:1px solid var(--warn-bd)}
/* VIP 专属提示（金色尊贵感）：金色流光「VIP用户」+ 金色胶囊名牌（绑定用户） */
.alert.vip-note{background:linear-gradient(135deg,#fef9c3,#fde68a);border:1px solid #f0c94a;color:#854d0e}
html[data-theme="dark"] .alert.vip-note{background:rgba(101,68,10,.28);border-color:#8a6d1f;color:#fcd34d}
.vip-tag{background:linear-gradient(90deg,#b45309,#f59e0b,#b45309);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vipShine 2.8s linear infinite;font-weight:800}
@keyframes vipShine{to{background-position:200% center}}
.vip-name{display:inline-block;padding:1px 10px;margin:0 3px;border-radius:999px;background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;font-weight:800;letter-spacing:.5px;box-shadow:0 2px 8px -2px rgba(217,119,6,.55);text-shadow:0 1px 2px rgba(120,60,0,.35)}
@media (prefers-reduced-motion: reduce){.vip-tag{animation:none}}
/* 填报截止提醒条（页面内红色横幅 + 抖动，不打断输入） */
.win-bar{position:sticky;top:max(8px,env(safe-area-inset-top, 0px));z-index:9;box-shadow:0 10px 22px -12px rgba(0,0,0,.28)}
.win-shake{animation:winShake .8s ease-in-out infinite}
.win-pulse{animation:winPulse 1.4s ease-in-out infinite}
@keyframes winShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes winPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
#fillForm.locked{opacity:.72;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.win-shake{animation:none}}
/* 字段容器（fz_render_fields 输出 .field） */
.field{margin-bottom:18px}
.field>label{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px;font-weight:500}
.field>label>b{color:var(--err);margin-right:2px}
.field input[type=text],.field input[type=number],.field input[type=date],
.field input[type=time],.field input[type=datetime-local],
.field input[type=email],.field input[type=tel],.field input[type=password],
.field input:not([type]),.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;
  font-size:16px;color:var(--text);background:var(--bg-2);transition:all .18s;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);background-color:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
.field textarea{min-height:92px;resize:vertical}
.field input[type=file]{font-size:13px;padding:8px 0}
/* 日期 / 时间控件：iOS 上默认居中且按固有宽度撑破卡片，这里强制左对齐并允许收缩 */
.field input[type=date],.field input[type=time],.field input[type=datetime-local]{
  display:block;width:100%;min-width:0;max-width:100%;text-align:left;box-sizing:border-box}
.field input[type=date]::-webkit-date-and-time-value,
.field input[type=time]::-webkit-date-and-time-value,
.field input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;min-width:0}
.field input[type=date]::-webkit-datetime-edit,
.field input[type=time]::-webkit-datetime-edit,
.field input[type=datetime-local]::-webkit-datetime-edit{text-align:left;min-width:0}
.field input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.7}
/* 自定义下拉箭头 */
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
/* 单/多选样式 */
.field input[type=radio],.field input[type=checkbox]{width:auto;margin-right:6px;transform:scale(1.05);accent-color:var(--primary)}
.field .opt{display:inline-flex;align-items:center;margin-right:18px;margin-bottom:6px;font-size:14px;color:var(--text-2);cursor:pointer}
/* 选项字母标识符：拆成独立节点后统一字体/字号/颜色，避免个别项字母发灰、大小不一 */
.field .opt-no{display:inline;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);margin-right:2px;line-height:inherit;white-space:nowrap}
.field .opt-txt{font-size:14px;color:var(--text-2);line-height:inherit}
/* 必填星标 */
.field .req{color:var(--err);margin-right:3px}
/* 图片选项（image_radio / image_checkbox） */
.img-opts{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.img-opt{display:inline-flex;flex-direction:column;align-items:center;gap:6px;width:104px;padding:8px;
  border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:.15s;background:var(--bg-2)}
.img-opt:hover{border-color:var(--primary);background:var(--primary-soft)}
.img-opt input{width:auto;margin:0;accent-color:var(--primary)}
.img-opt img{width:88px;height:72px;object-fit:contain;border:1px solid var(--border);border-radius:6px;background:var(--card)}
.img-opt input:checked + img{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.img-opt span{font-size:12.5px;color:var(--text-2);text-align:center;line-height:1.3;word-break:break-all}
/* 下拉多选 */
.field select[multiple]{height:auto;min-height:110px;padding:6px}
.field select[multiple] option{padding:6px 8px;border-radius:5px}
/* 电子签名 */
.sig-box{margin-top:2px}
.sig-box canvas{width:100%;height:150px;border:1.5px solid var(--border);border-radius:10px;
  /* 有意保持浅色：签名会被导出为 PNG 存库，若跟随暗色变成深底，
     深色墨迹将不可见、导出的签名图也不可打印。 */
  background-color:#f1f5f9;touch-action:none;display:block}
/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;border:none;font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none;transition:all .18s;font-family:inherit;line-height:1.4}
.btn-primary{background:var(--primary-grad);color:var(--on-primary);width:100%;padding:13px;font-size:15px;font-weight:600;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 45%,transparent);margin-top:6px}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px -10px color-mix(in srgb,var(--primary) 55%,transparent)}
.btn-primary:active{transform:translateY(0)}
.btn-sm{padding:6px 12px;font-size:12.5px;background:var(--bg-3);color:var(--text-2);border:1px solid var(--border)}
.btn-sm:hover{background:var(--bg-hover)}
.btn-link{background:transparent;color:var(--primary-fg);padding:6px 4px;font-size:13px}
.btn-link:hover{color:var(--primary-fg)}
/* 协议链接：主题色胶囊样式，替代默认下划线蓝链 */
.agr-link{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--primary,#4f7cff) 12%,transparent);color:var(--primary-fg,#2563eb);
  font-size:12.5px;font-weight:500;text-decoration:none;transition:all .15s}
.agr-link:hover{background:color-mix(in srgb,var(--primary,#4f7cff) 22%,transparent);text-decoration:none}
/* 步骤指示 */
.steps{display:flex;justify-content:center;gap:6px;margin-bottom:20px}
.steps span{width:6px;height:6px;border-radius:3px;background:var(--border);transition:.2s}
.steps span.on{width:26px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
/* 空状态 */
.empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:14px;background:var(--bg-2);border-radius:var(--r-lg);border:1px dashed var(--border)}
/* 提交记录卡片列表 */
.sub-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.sub-list .item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:.18s}
.sub-list .item:hover{border-color:var(--primary);background:var(--card);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--primary) 35%,transparent);transform:translateY(-1px)}
.sub-list .idx{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--primary-grad);color:var(--on-primary);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -4px color-mix(in srgb,var(--primary) 40%,transparent)}
.sub-list .meta{flex:1;min-width:0}
.sub-list .meta .t1{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-list .meta .t2{font-size:12px;color:var(--muted);margin-top:3px}
/* 工具栏 */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:18px;padding-top:18px;border-top:1px dashed var(--border)}
.toolbar .alert{flex:1 0 100%;margin:8px 0 0}
/* 完成页 */
.done{text-align:center;padding:24px 0 8px}
.done .check{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#34d399,#10b981);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 14px 36px -12px rgba(16,185,129,.55);animation:pop .5s cubic-bezier(.22,1.4,.36,1)}
.done .check svg{width:44px;height:44px}
@keyframes pop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.done h3{margin:6px 0 4px;font-size:19px;color:var(--text);font-weight:600}
.done p{color:var(--muted);margin:6px 0 22px;font-size:14px}
.done .btn-primary{width:auto;min-width:160px;display:inline-flex}
/* 页脚 */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 18px;
  text-align:center;font-size:12px;color:var(--muted);line-height:1.9}
.foot a{color:inherit;text-decoration:none;transition:.18s}
.foot a:hover{color:var(--primary-fg)}
.foot .sep{margin:0 8px;color:var(--border)}
.admin-link{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12.5px;text-decoration:none;padding:6px 14px;border-radius:8px;background:var(--card);border:1px solid var(--border);transition:.18s;margin-top:4px;box-shadow:0 2px 6px -3px rgba(0,0,0,.06)}
.admin-link:hover{color:var(--primary-fg);border-color:var(--primary);background:var(--card)}
/* ===== 入口页（choose）hero 文字区 + 双栏布局 =====
   参考「左文右卡」排版但不照搬：kicker 小标 + 双行大标题（第二行渐变字）
   + 特性点，留白克制；PC ≥900px 左文右卡，移动端单列堆叠 */
body.fz-fill{background:linear-gradient(165deg,#f0f4ff 0%,#f2edff 46%,#e9f2ff 100%) fixed}
html[data-theme="dark"] body.fz-fill{background:linear-gradient(165deg,#0d1220 0%,#141736 52%,#0d1526 100%) fixed}
/* 全屏背景图（二期）：必须写在上面两条渐变之后——同特异性按出现顺序，靠后者胜，
   才能同时压过明/暗两套渐变（暗色那条含 html[data-theme] 维度，此处用 body.fz-fill+属性 对齐并更靠后） */
body.fz-fill[data-form-bg="image-full"]{background:var(--form-bg) center/cover no-repeat fixed}
/* 大标题（方案稿）：行1 站点名深色粗黑，行2 关键词渐变高亮（图3 文字样式） */
.brand-head .hero-title{margin:0;font-size:26px;font-weight:800;line-height:1.36;color:var(--text);letter-spacing:.3px;white-space:normal;overflow:visible}
.hero-title .hl{font-style:normal;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .hl-a{background-image:linear-gradient(100deg,#f97316,#ef4444)}
.hero-title .hl-b{background-image:linear-gradient(100deg,#0ea5e9,#14b8a6)}
/* 行1 站点名（后台设置）：深色微渐变，色相与页面蓝紫背景同族；
   暗色下换亮色渐变，保持可读与和谐 */
.brand-head .hero-title .t1{background-image:linear-gradient(115deg,#1f2937 0%,#312e81 55%,#4f46ba 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .brand-head .hero-title .t1{background-image:linear-gradient(115deg,#e8edf8 0%,#b7c2ff 60%,#a78bfa 100%)}
.hero-sub{list-style:none;margin:14px 0 0;padding:0;font-size:13.5px;color:var(--muted);letter-spacing:.02em;line-height:1.6}
.hero-sub li{display:flex;align-items:center;gap:9px}
.hero-sub li+li{margin-top:5px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.d-a{background:#f97316}.d-b{background:#14b8a6}.d-c{background:#6366f1}
/* 数据行：彩点 + 数字强调（表单数取真实数据） */
.hero-stats{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 0;padding:0}
.hero-stats li{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.hero-stats b{font-size:14px;color:var(--text);font-weight:700}
/* 数据行小图标：沿用圆点的三色语义（橙/青/蓝），比圆点更有辨识度 */
.s-ico{width:18px;height:18px}
.s-ico svg{width:15px;height:15px}
.i-a{color:#f97316}.i-b{color:#0f9d8f}.i-c{color:#6366f1}
/* 动态插画区（参考图1）：三张能力卡片 + 虚线连接，整排错峰漂浮、互不遮挡 */
.hero-illus{display:flex;align-items:stretch;margin-top:30px}
.hcard{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);border-radius:16px;
  padding:18px 8px 14px;box-shadow:0 22px 44px -22px rgba(88,80,236,.35);
  animation:hFloat 4.2s ease-in-out infinite alternate}
.hcard:nth-of-type(3){animation-delay:-1.4s}
.hcard:nth-of-type(5){animation-delay:-2.8s}
.hico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%}
.hico .ico svg{width:24px;height:24px}
.c-blue .hico{background:#e3edff;color:#2f6bff}
.c-teal .hico{background:#dcf6f1;color:#0f9d8f}
.c-purple .hico{background:#ece5ff;color:#7c5cff}
.hlabel{font-size:13px;font-weight:600;color:var(--text)}
.hlink{flex:0 0 36px;display:flex;align-items:center;justify-content:center}
.hlink i{position:relative;display:block;width:100%;border-top:2px dashed #a5b4fc}
.hlink i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:3px;background:#fff;border:2px solid #93a5ff}
@keyframes hFloat{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.hcard{animation:none}}
html[data-theme="dark"] .hcard{background:rgba(28,37,64,.85);border-color:rgba(255,255,255,.08);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
html[data-theme="dark"] .hlink i{border-color:#3b4a7a}
html[data-theme="dark"] .hlink i::after{background:#161d2c;border-color:#4a5c9e}
@media(max-width:899px){
  .hero-illus{margin-top:24px;margin-bottom:8px}
  .hcard{padding:12px 6px 10px;border-radius:13px;gap:7px}
  .hico{width:42px;height:42px}
  .hico .ico svg{width:20px;height:20px}
  .hlabel{font-size:11.5px}
  .hlink{flex-basis:20px}
}
/* 入口页专属：隐藏刊头图标与步骤点，卡片右上角改用徽标 */
body.step-choose .bh-logo{display:none}
body.step-choose .steps{display:none}
body.step-choose .brand-head{padding-bottom:0;position:relative;z-index:1}
body.step-choose .brand-head::after{display:none}
.card-badge{position:absolute;top:36px;right:20px;font-size:11.5px;font-weight:500;color:var(--primary-fg);
  padding:4px 12px;border-radius:var(--r-pill);background:var(--primary-soft);border:1px solid var(--primary-bd)}
/* 卡片居中小标题：加大字号，三色渐变字，与右上徽标水平对齐 */
.card-sub{margin:4px 0 16px;text-align:center;font-size:21px;font-weight:700;letter-spacing:.08em;
  background:linear-gradient(95deg,#3b82f6 0%,#8b5cf6 52%,#06b6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ===== 入口页卡片：营销活动风，表单卡是页面第一视觉 =====
   蓝紫渐变描边（参考图外圈）+ 角落粉/青光斑 + 细弧装饰线；内容层 z-index 抬高避免被盖住 */
body.step-choose .card{overflow:hidden;border:1.5px solid transparent;
  background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) padding-box,
             linear-gradient(135deg,#a5c4ff 0%,#c4a5ff 45%,#8de8f5 100%) border-box;
  box-shadow:0 34px 80px -30px rgba(88,80,236,.45),0 6px 18px -10px rgba(31,41,55,.10)}
body.step-choose .card::before{content:"";position:absolute;top:-70px;right:-60px;width:210px;height:210px;z-index:0;
  border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.32),rgba(56,189,248,0) 68%);pointer-events:none}
body.step-choose .card::after{content:"";position:absolute;bottom:-80px;left:-70px;width:240px;height:240px;z-index:0;
  border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.26),rgba(244,114,182,0) 68%);pointer-events:none}
body.step-choose .card .card-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.card-deco .ln{position:absolute;display:block;border:1.5px solid transparent;border-radius:50%}
.card-deco .ln.a{width:230px;height:130px;top:30px;left:-70px;transform:rotate(-16deg);border-top-color:rgba(139,124,246,.38)}
.card-deco .ln.b{width:210px;height:120px;bottom:42px;right:-60px;transform:rotate(-18deg);border-top-color:rgba(103,232,249,.45)}
body.step-choose .card>h3,body.step-choose .card>form,body.step-choose .card>.steps,
body.step-choose .card>.alert,body.step-choose .card>.empty{position:relative;z-index:1}
html[data-theme="dark"] body.step-choose .card{
  background:linear-gradient(rgba(22,29,44,.92),rgba(22,29,44,.92)) padding-box,
             linear-gradient(135deg,#33518f 0%,#6d4fc4 45%,#1f7a8c 100%) border-box;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.65)}
html[data-theme="dark"] body.step-choose .card::before{background:radial-gradient(circle,rgba(56,189,248,.16),rgba(56,189,248,0) 68%)}
html[data-theme="dark"] body.step-choose .card::after{background:radial-gradient(circle,rgba(244,114,182,.13),rgba(244,114,182,0) 68%)}
html[data-theme="dark"] .card-deco .ln.a{border-top-color:rgba(139,124,246,.30)}
html[data-theme="dark"] .card-deco .ln.b{border-top-color:rgba(103,232,249,.28)}
@media(min-width:900px){
  body.step-choose .wrap{display:grid;grid-template-columns:minmax(0,1fr) 448px;grid-template-rows:1fr auto;
    gap:18px 60px;align-items:center;max-width:1040px;padding-top:16px;padding-bottom:16px}
  body.step-choose .foot{grid-column:1/-1}
  .brand-head .hero-title{font-size:38px}
  .hero-sub{font-size:14.5px}
}
/* 响应式 */
@media(max-width:600px){
  .wrap{padding:26px max(14px,env(safe-area-inset-left, 0px)) max(20px,env(safe-area-inset-bottom, 0px)) max(14px,env(safe-area-inset-right, 0px));gap:14px}
  /* 头部与表单卡分割更清楚：间距加大，让卡片独立成视觉主体 */
  body.step-choose .wrap{gap:36px 14px}
  .card{padding:22px 18px 20px;border-radius:16px}
  .brand-head{gap:11px;padding-bottom:13px}
  .bh-txt h1{font-size:17px}
  .bh-sub{font-size:11.5px}
  .sub-list .item{flex-wrap:wrap}
  .sub-list .meta{min-width:0}
  /* 移动端触控友好：48px 最小触控高度 + 16px 字号（防 iOS 聚焦自动放大） */
  .field input[type=text],.field input[type=number],.field input[type=date],
  .field input[type=time],.field input[type=datetime-local],
  .field input[type=email],.field input[type=tel],.field input[type=password],
  .field input:not([type]),.field select,.field textarea{min-height:48px;padding:12px 14px;font-size:16px}
  .field select{background-position:right 12px center}
  .btn{padding:12px 18px}
  .btn-primary{padding:15px;font-size:16.5px;border-radius:12px}
  .btn-primary:active{transform:scale(.985)}
  /* 备案/版权始终沉底保留在页脚区域 */
  .foot{margin-top:auto;padding-top:22px}
}
@media(max-width:400px){
  .wrap{padding:20px max(10px,env(safe-area-inset-left, 0px)) max(16px,env(safe-area-inset-bottom, 0px)) max(10px,env(safe-area-inset-right, 0px));gap:12px}
  body.step-choose .wrap{gap:30px 12px}
  .card{padding:18px 14px;border-radius:14px}
  .brand-head{gap:10px;padding-bottom:12px}
  .bh-logo{transform:scale(.9);transform-origin:left center}
  .bh-txt h1{font-size:16px}
  .bh-sub{font-size:11px}
  .bh-tag{font-size:11px;padding:2px 9px}
  .steps span{width:10px;height:10px}
  .field input,.field select,.field textarea{font-size:16px}
}
@media(max-width:380px){
  .bh-tag{display:none}
}
/* ===================== 暗色模式 =====================
   由 assets/js/theme.js 依据 fz_theme 解析后写到 <html data-theme>，
   与后台（assets/js/fzui.js）共用同一套键值，因此两种模式全局共存、可随时切换。
   这里不用媒体查询：主题在首屏前就已被解析成 light/dark 写进属性，
   同时保留媒体查询会出现"属性=light 但系统=暗色"两套规则打架。 */

/* 背景光斑：暗色下降低亮度避免刺眼 */
html[data-theme="dark"] .bg-deco span{opacity:.22}
/* 图片选项悬停：浅色版的 #f4f8ff 在暗色下过亮 */
html[data-theme="dark"] .img-opt:hover{background:#1c2740}
/* 下拉箭头是 SVG 内联（描边色写死 #6b7280），暗色下加深一点更协调 */
html[data-theme="dark"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
/* ===== 移动端底部固定提交条 ===== */
.fill-fab{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--card) 70%,transparent);
  border-top:1px solid var(--border)}
.fill-fab .btn{width:100%;min-height:var(--tap-min,44px);font-size:16px;font-weight:600}
@media(max-width:768px){
  /* 移动端改用表单结尾的内联提交按钮（紧贴最后一个字段），不再叠加固定底栏：
     否则会为底栏预留 88px，造成「最后一个字段到提交按钮」之间大段留白，且出现两个提交按钮 */
  .inline-submit{display:block}
  .fill-fab{display:none}
  #fillForm{padding-bottom:0}
  /* iOS 日期/时间控件按固有宽度撑破卡片，移动端强制可收缩 */
  .field input[type=date],.field input[type=time],.field input[type=datetime-local]{
    -webkit-appearance:none;appearance:none}
}
/* 无表单提示弹窗（本页未引 theme.css，自包含同款样式；scoped 到 .modal-mask 避免误伤） */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-mask.show{display:flex}
.modal-mask .modal{background:var(--card);color:var(--text);border-radius:18px;width:380px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(15,23,42,.45);animation:fzModalIn .18s ease}
@keyframes fzModalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

