:root{
  --paper:#F7F3E9;
  --paper2:#FFFDF7;
  --ink:#1B1712;
  --ink2:#3A322A;
  --ink3:#6F6048;
  --muted:#8A7C68;
  --gold:#B08D46;
  --gold-l:#C9A227;
  --cinnabar:#A93226;
  --line:rgba(176,141,70,.26);
  --serif:"Songti SC","STSong","SimSun",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(176,141,70,.06), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(169,50,38,.045), transparent 46%);
}
.wrap{max-width:520px;margin:0 auto;padding:0 20px 56px;min-height:100vh}

/* 顶部 */
.top{padding:28px 0 6px;text-align:center}
.brand{font-family:var(--serif);font-size:12px;letter-spacing:.42em;color:var(--gold);text-indent:.42em}
.title{font-family:var(--serif);font-size:26px;color:var(--ink);letter-spacing:.05em;margin-top:14px;line-height:1.45}
.title em{font-style:normal;color:var(--cinnabar)}
.sub{font-size:12px;color:var(--muted);margin-top:12px;letter-spacing:.04em}
.rule{width:36px;height:2px;background:var(--gold);opacity:.55;margin:20px auto 0}

/* 返回栏 */
.navbar{display:flex;align-items:center;height:48px;font-size:13px;color:var(--muted)}
.navbar a{color:var(--ink3);text-decoration:none;display:flex;align-items:center;gap:6px}
.navbar .bk{font-size:18px;line-height:1;color:var(--gold)}

/* 卡片 */
.card{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:14px}
.sec{font-family:var(--serif);font-size:14px;color:var(--ink2);letter-spacing:.16em;margin:28px 0 12px;display:flex;align-items:center}
.sec::after{content:"";flex:1;height:1px;background:var(--line);margin-left:14px}

/* 应一手 */
.hero-act{background:linear-gradient(158deg,#2A241D,#1B1712);border-radius:18px;padding:26px 22px 42px;margin-top:18px;
  border:1px solid rgba(176,141,70,.38);position:relative;overflow:hidden}
.hero-act::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(232,188,106,.05) 1px,transparent 1px),
                   linear-gradient(rgba(232,188,106,.05) 1px,transparent 1px);
  background-size:26px 26px}
.hero-act .q{font-family:var(--serif);font-size:17px;color:#F2E6CC;letter-spacing:.08em;position:relative;text-align:center}
.hero-act .q2{font-size:12px;color:#9C8F76;text-align:center;margin-top:8px;position:relative;line-height:1.8}
.hero-act .st{position:absolute;border-radius:50%}
.hero-act .s1{width:15px;height:15px;background:radial-gradient(circle at 34% 30%,#fff,#D8D2C4 55%,#8E877A);right:18px;bottom:13px;opacity:.45}
.hero-act .s2{width:12px;height:12px;background:radial-gradient(circle at 34% 30%,#4A443C,#17140F 70%);right:41px;bottom:25px;opacity:.4}

/* 四门 */
.men{background:var(--paper2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mrow{display:flex;align-items:center;gap:14px;padding:15px 16px;text-decoration:none;color:inherit;transition:.16s;position:relative}
.mrow+.mrow{border-top:1px solid rgba(176,141,70,.16)}
.mrow:active{background:rgba(176,141,70,.06)}
.mrow .zi{flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:rgba(176,141,70,.12);
  font-family:var(--serif);font-size:22px;color:#8A7345;display:flex;align-items:center;justify-content:center}
.mrow.done .zi{background:var(--cinnabar);color:#FFF6E6}
.mrow .b{flex:1;min-width:0}
.mrow .h{font-family:var(--serif);font-size:16px;color:var(--ink);letter-spacing:.05em;display:flex;align-items:baseline;gap:8px}
.mrow .h small{font-size:10.5px;color:var(--muted);font-family:-apple-system,sans-serif;letter-spacing:.06em}
.mrow .d{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}
.mrow .ar{flex:0 0 auto;color:#C4B69D;font-size:15px}
.mrow.done .ar{color:#3D7A55}

/* 数字条 */
.nums{display:flex;text-align:center;padding:18px 0 6px}
.nums .n{flex:1}
.nums .v{font-family:var(--serif);font-size:24px;color:var(--cinnabar);line-height:1.2}
.nums .k{font-size:10.5px;color:var(--muted);letter-spacing:.1em;margin-top:4px}

/* 列表行 */
.li{display:flex;align-items:center;gap:12px;padding:14px 0;text-decoration:none;color:inherit}
.li+.li{border-top:1px solid rgba(176,141,70,.14)}
.li .t{flex:1;min-width:0}
.li .t b{font-weight:400;font-family:var(--serif);font-size:15px;color:var(--ink2);display:block}
.li .t span{font-size:11.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.6}
.li .ar{color:#C4B69D;font-size:14px;flex:0 0 auto}

/* 表单 */
.field{margin-top:16px}
.label{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:8px}
input[type=text],textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;
  padding:13px 14px;font-size:16px;color:var(--ink);font-family:inherit;outline:none;line-height:1.7;
}
input[type=text]{height:48px;padding:0 14px}
input[type=text]:focus,textarea:focus{border-color:var(--cinnabar)}
textarea{resize:vertical;min-height:120px}
.hint{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.7}

/* 按钮 */
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;
  border:none;border-radius:11px;background:var(--cinnabar);color:#FDF6E8;
  font-family:var(--serif);font-size:17px;letter-spacing:.22em;text-indent:.22em;
  margin-top:20px;cursor:pointer;transition:.18s;box-shadow:0 4px 14px rgba(169,50,38,.22)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(169,50,38,.2)}
.btn[disabled]{opacity:.45;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink3);border:1px solid var(--line);box-shadow:none;
  font-size:14px;letter-spacing:.14em;text-indent:.14em;height:44px;margin-top:12px}
.btn.sm{height:40px;font-size:14px;letter-spacing:.1em;text-indent:.1em;margin-top:0;width:auto;padding:0 18px}

/* 凭证 */
.cert{background:linear-gradient(158deg,#2A241D,#1B1712);border-radius:16px;padding:26px 22px;
  color:#F2E6CC;border:1px solid rgba(176,141,70,.4);position:relative;overflow:hidden;margin-top:16px}
.cert::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(232,188,106,.05) 1px,transparent 1px),
                   linear-gradient(rgba(232,188,106,.05) 1px,transparent 1px);
  background-size:26px 26px}
.cert .en{font-family:var(--serif);font-size:9px;letter-spacing:.34em;color:#C9A227;text-align:center;position:relative}
.cert .nm{font-family:var(--serif);font-size:25px;text-align:center;margin-top:16px;letter-spacing:.14em;color:#F4EAD6;position:relative;padding:0 76px}
.cert .lvname{font-size:11px;text-align:center;color:#E8BC6A;letter-spacing:.2em;margin-top:8px;position:relative}
.cert .kv{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(214,191,150,.22);font-size:11px;position:relative}
.cert .kv .row{display:flex;justify-content:space-between;gap:14px;padding:6px 0}
.cert .kv .k{color:#8E8269;flex:0 0 auto}
.cert .kv .v{color:#D9CBB0;font-family:ui-monospace,Menlo,monospace;font-size:10px;text-align:right;word-break:break-all}
.cert .foot{margin-top:18px;padding-top:14px;border-top:1px dashed rgba(214,191,150,.22);
  font-size:10px;color:#8E8269;text-align:center;line-height:1.8;position:relative}
.seal{position:absolute;right:16px;top:56px;width:74px;height:74px;border-radius:50%;
  border:2px solid rgba(214,86,70,.75);color:#D4564A;transform:rotate(-9deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px;line-height:1.32;letter-spacing:.1em;opacity:.95;text-indent:.1em}

/* Tab */
.tabs{display:flex;border-bottom:1px solid var(--line);margin:8px 0 0}
.tabs .t{font-family:var(--serif);font-size:14px;color:#8A7C68;letter-spacing:.1em;
  padding:10px 0;margin-right:26px;position:relative;cursor:pointer}
.tabs .t.on{color:var(--cinnabar)}
.tabs .t.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cinnabar)}

/* 名册 */
.rost{margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper2)}
.rrow{display:flex;align-items:center;gap:8px;padding:12px 13px;font-size:12px;color:var(--ink3)}
.rrow+.rrow{border-top:1px solid rgba(176,141,70,.14)}
.rrow .nm{flex:1;min-width:0;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .tag{font-size:10px;padding:2px 6px;border-radius:99px;background:rgba(176,141,70,.14);color:#8A7345;flex:0 0 auto;white-space:nowrap}
.rrow .h{flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#B0A18A;width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .ts{flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#B0A18A}

/* 作品卡 */
.wcard{background:var(--paper2);border:1px solid var(--line);border-radius:13px;padding:14px 15px;margin-top:10px}
.wcard .hd{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.wcard .hd .nm{color:var(--ink2);font-family:var(--serif);font-size:13.5px;letter-spacing:.05em}
.wcard .hd .kd{font-size:10px;padding:2px 7px;border-radius:99px;background:rgba(176,141,70,.14);color:#8A7345}
.wcard .tx{font-size:13px;color:var(--ink3);line-height:1.8;margin-top:8px}
.wcard audio,.wcard video{width:100%;margin-top:10px;border-radius:9px;display:block}

/* 进度 */
.bar{height:6px;background:rgba(176,141,70,.18);border-radius:99px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--cinnabar);border-radius:99px;transition:width .4s}

/* 录音 */
.rec{border:1px solid var(--line);border-radius:14px;background:var(--paper2);padding:20px;text-align:center;margin-top:14px}
.rec .dot{width:64px;height:64px;border-radius:50%;background:var(--cinnabar);margin:6px auto 14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(169,50,38,.28);transition:.2s}
.rec .dot svg{width:26px;height:26px;fill:none;stroke:#FDF6E8;stroke-width:1.6}
.rec.on .dot{animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.rec .st{font-size:13px;color:var(--ink2);letter-spacing:.06em}
.rec .tm{font-family:ui-monospace,Menlo,monospace;font-size:26px;color:var(--cinnabar);margin-top:6px;letter-spacing:.06em}
.rec .tip{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.7}

/* 分段选择 */
.seg{display:flex;gap:8px;margin-top:12px}
.seg .s{flex:1;text-align:center;padding:11px 0;border:1px solid var(--line);border-radius:11px;
  font-size:13.5px;color:var(--ink3);font-family:var(--serif);letter-spacing:.06em;background:var(--paper2);cursor:pointer}
.seg .s.on{background:var(--cinnabar);color:#FFF6E6;border-color:var(--cinnabar)}

/* 免责/同意 */
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px;border:1px solid var(--line);
  border-radius:11px;background:rgba(176,141,70,.05)}
.consent input{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--cinnabar)}
.consent label{font-size:12px;color:var(--ink3);line-height:1.7}
.consent a{color:var(--cinnabar);text-decoration:none;border-bottom:1px solid rgba(169,50,38,.3)}

/* 提示条 */
.notice{background:rgba(176,141,70,.08);border-left:3px solid var(--gold);border-radius:0 9px 9px 0;
  padding:12px 14px;font-size:12px;color:var(--ink3);line-height:1.8;margin-top:16px}
.notice b{color:var(--ink2)}

/* 杂项 */
.note{font-size:11.5px;color:var(--muted);line-height:1.9;margin-top:16px}
.note b{color:var(--ink2);font-weight:600}
.foot{text-align:center;font-size:10.5px;color:#B0A18A;line-height:2;margin-top:36px}
.link{color:var(--cinnabar);text-decoration:none;border-bottom:1px solid rgba(169,50,38,.3)}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
  background:rgba(27,23,18,.92);color:#F2E6CC;font-size:13px;padding:11px 20px;
  border-radius:99px;opacity:0;transition:.25s;pointer-events:none;z-index:99;max-width:82vw;text-align:center}
.toast.show{opacity:1;bottom:46px}
.hide{display:none!important}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(253,246,232,.35);
  border-top-color:#FDF6E8;border-radius:50%;animation:sp .7s linear infinite;margin-right:9px}
@keyframes sp{to{transform:rotate(360deg)}}
.okmark{width:52px;height:52px;border-radius:50%;border:2px solid rgba(61,122,85,.55);color:#3D7A55;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}
.empty{text-align:center;font-size:12.5px;color:var(--muted);padding:30px 0}