* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif; background:#F5F6F7; color:#1D2129; padding:22px 20px 40px; }
.wrap { max-width:1300px; margin:0 auto; }
.top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.top h1 { font-size:20px; font-weight:600; letter-spacing:.3px; }
.top .meta { font-size:12px; color:#86909C; }
.lead { font-size:12px; color:#4E5969; margin-bottom:18px; line-height:1.8; }
.lead b { color:#1D2129; font-weight:600; }
.main { display:grid; grid-template-columns:190px 430px 1fr; gap:18px; align-items:start; }
.side { background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:14px 12px; position:sticky; top:20px; }
.side .gh { font-size:10px; color:#86909C; letter-spacing:1px; margin:12px 0 7px 6px; }
.side .gh:first-child { margin-top:2px; }
.nav { display:block; width:100%; text-align:left; border:0; background:transparent; font-size:12.5px; color:#4E5969; padding:8px 10px; border-radius:6px; cursor:pointer; line-height:1.3; font-family:inherit; }
.nav:hover { background:#F2F3F5; }
.nav.on { background:#E8F0FF; color:#245BDB; font-weight:600; }
.nav .n { display:inline-block; width:20px; color:#86909C; font-size:10px; font-weight:400; }
.nav.on .n { color:#245BDB; }
.sidehint { font-size:10.5px; color:#86909C; line-height:1.7; border-top:1px solid #F0F1F3; margin-top:14px; padding:12px 6px 2px; }
.stage { display:flex; flex-direction:column; align-items:center; }
.phone { width:390px; height:788px; background:#1D2129; border-radius:40px; padding:9px; box-shadow:0 14px 40px rgba(29,33,41,.18); flex:none; }
.screen { width:100%; height:100%; background:#F5F6F7; border-radius:32px; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.status { height:34px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:11px; font-weight:600; flex:none; }
.status .r { display:flex; gap:5px; align-items:center; font-size:10px; color:#4E5969; font-weight:500; }
.bars { display:inline-flex; gap:2px; align-items:flex-end; height:10px; }
.bars i { display:block; width:3px; background:#1D2129; border-radius:1px; }
.bars i:nth-child(1){height:4px}.bars i:nth-child(2){height:6px}.bars i:nth-child(3){height:8px}.bars i:nth-child(4){height:10px}
.bat { width:20px; height:10px; border:1px solid #86909C; border-radius:2px; position:relative; }
.bat:after { content:""; position:absolute; right:-3px; top:3px; width:2px; height:4px; background:#86909C; border-radius:1px; }
.bat i { display:block; height:100%; width:78%; background:#1D2129; }
.appbar { height:48px; background:#fff; border-bottom:1px solid #F0F1F3; display:flex; align-items:center; padding:0 16px; gap:10px; flex:none; }
.appbar .bk { font-size:17px; color:#4E5969; cursor:pointer; width:20px; }
.appbar .tt { font-size:15px; font-weight:600; flex:1; }
.appbar .ac { font-size:11px; color:#3370FF; cursor:pointer; }
.body { flex:1; overflow-y:auto; padding:14px 14px 22px; }
.body::-webkit-scrollbar { width:0; }
.homebar { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:110px; height:4px; background:#1D2129; opacity:.75; border-radius:3px; }
.cap { font-size:11px; color:#86909C; margin-top:12px; text-align:center; max-width:390px; line-height:1.7; }
.cap b { color:#4E5969; }
.page { display:none; } .page.on { display:block; }
.hd { font-size:12px; color:#86909C; margin:2px 0 10px; line-height:1.6; }
.sec { font-size:11px; font-weight:600; color:#4E5969; margin:16px 0 8px; letter-spacing:.5px; }
.card { background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:13px 14px; margin-bottom:10px; }
.card.tight { padding:11px 12px; }
.btn { display:block; width:100%; border:0; border-radius:8px; background:#3370FF; color:#fff; font-size:14px; font-weight:600; padding:12px; cursor:pointer; font-family:inherit; }
.btn:active { background:#245BDB; }
.btn.ghost { background:#fff; color:#4E5969; border:1px solid #E5E6EB; font-weight:500; }
.btn.warn { background:#FFF3E8; color:#D97A00; border:1px solid #FFE7B0; }
.btn.sm { padding:9px; font-size:12px; }
.btn:disabled { background:#C9CDD4; cursor:default; }
.rowbtn { display:flex; gap:9px; } .rowbtn .btn { flex:1; }
.hero { background:linear-gradient(135deg,#3370FF,#5B8DEF); color:#fff; border-radius:12px; padding:16px 16px 14px; margin-bottom:12px; }
.hero .l1 { font-size:11px; opacity:.85; letter-spacing:1px; }
.hero .l2 { font-size:19px; font-weight:600; margin:5px 0 3px; }
.hero .l3 { font-size:11px; opacity:.85; }
.hero .nums { display:flex; gap:20px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.25); }
.hero .nums div { font-size:10px; opacity:.85; } .hero .nums b { display:block; font-size:18px; font-weight:600; opacity:1; margin-top:2px; }
.rolebar { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #E5E6EB; border-radius:8px; padding:9px 11px; font-size:11px; color:#4E5969; margin-bottom:12px; }
.rolebar .rb { width:8px; height:8px; border-radius:50%; background:#3370FF; }
.rolebar b { color:#1D2129; }
.rolebar .sw2 { margin-left:auto; font-size:10px; color:#3370FF; cursor:pointer; }
.entry { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #E5E6EB; border-radius:11px; padding:13px; margin-bottom:10px; cursor:pointer; }
.entry:hover { border-color:#3370FF; box-shadow:0 3px 12px rgba(51,112,255,.10); }
.entry .ic { width:38px; height:38px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.ic.a { background:#3370FF; } .ic.b { background:#00B8A9; } .ic.c { background:#7F3BF5; }
.entry .tx { flex:1; } .entry .t1 { font-size:13.5px; font-weight:600; margin-bottom:3px; }
.entry .t2 { font-size:11px; color:#646A73; line-height:1.6; }
.entry .t3 { font-size:10px; color:#86909C; margin-top:5px; }
.entry .arw { color:#C9CDD4; font-size:16px; align-self:center; }
.qitem { background:#fff; border:1px solid #E5E6EB; border-radius:9px; padding:11px 12px; margin-bottom:8px; cursor:pointer; }
.qitem:hover { border-color:#3370FF; }
.qitem .q1 { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.qitem .q1 b { font-size:12.5px; font-weight:600; }
.qitem .q2 { font-size:10.5px; color:#86909C; line-height:1.6; }
.st { font-size:9.5px; padding:2px 7px; border-radius:10px; white-space:nowrap; }
.st.w1 { background:#FFF3E8; color:#D97A00; } .st.w2 { background:#E8F0FF; color:#245BDB; }
.st.ok { background:#E8F7EE; color:#0B8A3C; } .st.bad { background:#FFECE8; color:#D93026; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.chip { font-size:10.5px; padding:5px 10px; border:1px solid #E5E6EB; border-radius:14px; color:#4E5969; cursor:pointer; background:#fff; }
.chip.on { background:#E8F0FF; border-color:#3370FF; color:#245BDB; font-weight:600; }
.fm { background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:4px 13px; margin-bottom:11px; }
.frow { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #F2F3F5; min-height:42px; }
.frow:last-child { border-bottom:0; }
.frow .fl { width:88px; flex:none; font-size:11.5px; color:#4E5969; }
.frow .fv { flex:1; font-size:11.5px; color:#1D2129; }
.frow input[type=text] { width:100%; border:0; outline:0; font-size:11.5px; font-family:inherit; color:#1D2129; background:transparent; }
.up { border:1px dashed #C9CDD4; border-radius:8px; padding:15px; text-align:center; font-size:10.5px; color:#86909C; background:#fff; margin-bottom:10px; }
.tip { background:#FFF8E8; border:1px solid #FFE7B0; color:#8A5A00; font-size:10.5px; line-height:1.7; border-radius:8px; padding:9px 11px; margin:11px 0; }
.note { background:#E8F0FF; border:1px solid #D6E4FF; color:#245BDB; font-size:10.5px; line-height:1.7; border-radius:8px; padding:9px 11px; margin:11px 0; }
.shotgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shot { background:#fff; border:1px dashed #C9CDD4; border-radius:10px; height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; }
.shot .cam { font-size:24px; color:#C9CDD4; line-height:1; margin-bottom:7px; }
.shot .nm { font-size:11px; color:#4E5969; font-weight:600; }
.shot .hint { font-size:9.5px; color:#86909C; margin-top:3px; }
.shot.filled { border:1px solid #E5E6EB; background:#EDF2FF; }
.shot .ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:600; background:linear-gradient(140deg,#8FA8D8,#4E6FA8); }
.recrow { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:12px; margin:11px 0; cursor:pointer; }
.recbtn2 { width:46px; height:46px; border-radius:50%; background:#F54A45; color:#fff; font-size:10px; border:0; flex:none; font-family:inherit; }
.recrow .rt { flex:1; font-size:11.5px; font-weight:600; }
.recrow .rs { font-size:10px; color:#86909C; margin-top:3px; font-weight:400; }
.fld { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #E5E6EB; border-left:3px solid #C9CDD4; border-radius:7px; padding:8px 10px; margin-bottom:7px; }
.fld .fk { width:80px; flex:none; font-size:10.5px; color:#646A73; line-height:1.35; }
.fld input { flex:1; border:0; outline:0; font-size:12px; color:#1D2129; font-family:inherit; background:transparent; min-width:0; }
.fld .tag { flex:none; font-size:9px; padding:2px 5px; border-radius:3px; white-space:nowrap; }
.fld.o { border-left-color:#34C724; } .fld.a { border-left-color:#7F3BF5; } .fld.m { border-left-color:#F54A45; } .fld.u { border-left-color:#3370FF; }
.tg-o { background:#E8F7EE; color:#0B8A3C; } .tg-a { background:#F3EAFF; color:#722ED1; }
.tg-m { background:#FFECE8; color:#D93026; } .tg-u { background:#E8F0FF; color:#245BDB; } .tg-w { background:#FFF3E8; color:#D97A00; }
.fld.warn { background:#FFFCF7; }
.attach { display:flex; gap:7px; margin-top:4px; }
.attach div { flex:1; background:#F2F3F5; border-radius:6px; padding:9px 6px; text-align:center; font-size:9.5px; color:#4E5969; }
.attach b { display:block; font-size:14px; color:#3370FF; margin-bottom:3px; font-weight:600; }
.flowstep { background:#fff; border:1px solid #E5E6EB; border-radius:9px; padding:11px 12px; margin-bottom:0; }
.flowstep .fh { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.flowstep .fi { width:22px; height:22px; border-radius:6px; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.flowstep .fn { font-size:12px; font-weight:600; }
.flowstep .fb { font-size:10.5px; color:#4E5969; line-height:1.65; padding-left:30px; }
.flowstep .fb b { color:#1D2129; }
.arrow { text-align:center; font-size:13px; color:#C9CDD4; padding:3px 0; }
.mx { width:100%; border-collapse:collapse; font-size:9.8px; }
.mx th { text-align:left; color:#86909C; font-weight:500; padding:6px 4px; border-bottom:1px solid #E5E6EB; }
.mx td { padding:7px 4px; border-bottom:1px solid #F2F3F5; color:#4E5969; }
.mx td:first-child { color:#1D2129; font-weight:500; }
.mx td.c { text-align:center; }
.y { color:#0B8A3C; font-weight:600; } .n2 { color:#C9CDD4; }
.logline { display:flex; gap:9px; font-size:10.5px; color:#4E5969; padding:6px 0; border-bottom:1px dashed #E5E6EB; line-height:1.5; }
.logline:last-child { border-bottom:0; }
.logline .lt { color:#86909C; white-space:nowrap; }
.logline b { color:#1D2129; font-weight:600; }
.done { text-align:center; padding:24px 10px 10px; }
.done .di { width:60px; height:60px; border-radius:50%; background:#E8F7EE; color:#0B8A3C; font-size:28px; font-weight:600; line-height:60px; margin:0 auto 14px; }
.done.gray .di { background:#FFF3E8; color:#D97A00; }
.done .dt { font-size:16px; font-weight:600; }
.done .ds { font-size:11px; color:#86909C; margin-top:7px; line-height:1.8; }
.done .dcard { background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:13px; text-align:left; margin-top:18px; }
.done .dcard .dl { display:flex; justify-content:space-between; font-size:11px; padding:6px 0; border-bottom:1px solid #F5F6F7; }
.done .dcard .dl:last-child { border-bottom:0; }
.done .dcard .dl span { color:#86909C; } .done .dcard .dl b { font-weight:500; }
.loginhd { text-align:center; padding:22px 8px 14px; }
.loginhd .lg1 { width:52px; height:52px; border-radius:14px; background:#3370FF; color:#fff; font-size:20px; font-weight:700; line-height:52px; margin:0 auto 12px; }
.loginhd .lg2 { font-size:17px; font-weight:600; }
.loginhd .lg3 { font-size:11px; color:#86909C; margin-top:6px; line-height:1.7; }
.rolecard { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:13px; margin-bottom:9px; cursor:pointer; }
.rolecard:hover { border-color:#3370FF; box-shadow:0 3px 12px rgba(51,112,255,.10); }
.rolecard .ri { width:36px; height:36px; border-radius:9px; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.rolecard .rt { flex:1; } .rolecard .rt b { display:block; font-size:13px; font-weight:600; }
.rolecard .rt span { font-size:10.5px; color:#86909C; display:block; margin-top:3px; line-height:1.5; }
.rolecard .ra { color:#C9CDD4; font-size:16px; }
.notes { display:flex; flex-direction:column; gap:12px; }
.panel { background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:15px 16px; }
.pt { font-size:13px; font-weight:600; margin-bottom:3px; }
.ps { font-size:10.5px; color:#86909C; margin-bottom:12px; line-height:1.6; }
.lg { display:flex; align-items:flex-start; font-size:11px; color:#4E5969; margin-bottom:9px; line-height:1.5; }
.lg .sw2 { width:10px; height:10px; border-radius:2px; margin:3px 9px 0 0; flex:none; }
.lg b { color:#1D2129; font-weight:600; margin-right:6px; min-width:62px; }
.qline { font-size:11px; color:#4E5969; line-height:1.8; border-bottom:1px dashed #E5E6EB; padding:6px 0; }
.qline:last-child { border-bottom:0; }
.qline b { color:#245BDB; font-weight:600; }
.fl2 { display:flex; align-items:center; gap:9px; font-size:11px; color:#4E5969; }
.fl2 .fb2 { flex:1; background:#F7F8FA; border-radius:6px; padding:8px 10px; line-height:1.55; }
.fl2 .fb2 b { color:#1D2129; }
.toast { position:absolute; left:50%; top:70px; transform:translateX(-50%); background:rgba(29,33,41,.9); color:#fff; font-size:11px; padding:9px 15px; border-radius:8px; z-index:5; display:none; white-space:nowrap; }
.foot { margin-top:20px; font-size:11px; color:#86909C; line-height:1.9; }
.foot b { color:#4E5969; font-weight:600; }
@media (max-width:1100px){ .main { grid-template-columns:175px 1fr; } .notes { grid-column:1/-1; } .stage { align-items:flex-start; } }

/* ==== 真系统覆盖：手机全屏，不再套模拟器外壳 ==== */
body { padding:0; background:#F5F6F7; }
.wrap { max-width:520px; margin:0 auto; min-height:100vh; background:#F5F6F7; }
.appbar { position:sticky; top:0; z-index:10; }
.body { padding:14px 14px 30px; min-height:calc(100vh - 48px); overflow:visible; }
.toast { position:fixed; }
.hidden { display:none !important; }
.mini { font-size:10px; color:#86909C; line-height:1.6; }
.field-edit { width:100%; border:0; outline:0; font-size:12px; font-family:inherit; background:transparent; color:#1D2129; }
.badge-mock { display:inline-block; font-size:9px; padding:1px 6px; border-radius:3px; background:#FFF3E8; color:#D97A00; margin-left:6px; }
.retry { background:#FFF3E8; border:1px solid #FFE7B0; color:#8A5A00; font-size:11px; border-radius:8px; padding:9px 11px; margin-bottom:10px; }

/* ==== 录音入口 + 全屏倒计时浮层 + 驳回补充 ==== */
.st.bad { background:#FFF3E8; color:#D97A00; }
.warnbox { background:#FFF8E8; border:1px solid #FFE7B0; color:#8A5A00; border-radius:9px; padding:11px 12px; font-size:11px; line-height:1.75; margin-bottom:11px; }
.warnbox b { color:#D97A00; }
.draftphoto { display:flex; align-items:center; gap:10px; background:#fff; border:1px dashed #C9CDD4; border-radius:10px; padding:12px; margin:0 0 11px; cursor:pointer; }
.draftphoto .dp-ic { width:34px; height:34px; border-radius:8px; background:#EDF2FF; color:#3370FF; font-size:16px; display:flex; align-items:center; justify-content:center; flex:none; }
.draftphoto .dp-tx { font-size:11.5px; color:#4E5969; font-weight:600; }
.recbox { background:#fff; border:1px solid #E5E6EB; border-radius:11px; padding:11px; margin:0 0 11px; }
.rec-main { display:flex; align-items:center; gap:12px; background:#FFF1F0; border:1px solid #FFCCC7; border-radius:9px; padding:11px 12px; cursor:pointer; }
.rec-main:active { background:#FFE0DE; }
.rec-dot { width:44px; height:44px; border-radius:50%; background:#F54A45; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; flex:none; }
.rec-txt { flex:1; min-width:0; text-align:left; }
.rec-t1 { font-size:13px; font-weight:600; color:#1D2129; }
.rec-t2 { font-size:10.5px; color:#86909C; margin-top:3px; line-height:1.4; }
.rec-count { font-size:19px; color:#F54A45; flex:none; }
.rec-limit { display:flex; justify-content:space-between; font-size:10px; color:#86909C; margin-top:9px; }
.rec-ok { color:#0B8A3C; font-weight:600; }
.recmask { position:fixed; inset:0; z-index:999; background:rgba(20,24,32,.86); display:flex; align-items:center; justify-content:center; padding:20px; }
.recpanel { width:100%; max-width:360px; background:#fff; border-radius:16px; padding:24px 20px 20px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.28); }
.rec-h { font-size:16px; font-weight:600; color:#1D2129; }
.rec-sub { font-size:11px; color:#86909C; margin-top:6px; line-height:1.6; }
.rec-clock { font-size:62px; font-weight:700; color:#F54A45; font-variant-numeric:tabular-nums; letter-spacing:1px; margin:18px 0 14px; line-height:1; }
.recbar { height:6px; background:#F2F3F5; border-radius:4px; overflow:hidden; }
.recbar > i { display:block; height:100%; width:0; background:#F54A45; border-radius:4px; transition:width .2s linear; }
.rec-foot { display:flex; justify-content:space-between; font-size:10px; color:#86909C; margin:9px 0 18px; }
.rec-tip { font-size:10px; color:#86909C; line-height:1.7; margin-top:13px; }
.recpanel .btn { background:#F54A45; }
.recpanel .btn:disabled { background:#C9CDD4; }