:root{--bg:#f2f2f5;--card:#fff;--line:#d9d9de;--ink:#1c1c1e;--mute:#6e6e73;--soft:#ececf0;--blk:#e3e3e8;--acc:#2f6fed;--accbg:#eaf1ff;--dark:#3a3a3f;--red:#d9534f;--green:#2e9e5b}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.6}
a{color:var(--acc);text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:20px 24px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.topbar h1{font-size:20px;margin:0}
.topbar .meta{color:var(--mute);font-size:12px}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;background:var(--soft);color:var(--mute);font-size:12px;margin-left:6px;vertical-align:middle}
.tag.live{background:#e6f4ec;color:var(--green)}
.tag.wait{background:#fff4e5;color:#b26a00}
.tag.done{background:var(--accbg);color:var(--acc)}
.doc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin-bottom:18px}
.doc h2{font-size:16px;margin:22px 0 10px;padding-left:10px;border-left:3px solid var(--acc)}
.doc h2.first{margin-top:0}
.doc h3{font-size:13px;margin:16px 0 6px;color:var(--mute);font-weight:600;letter-spacing:.3px}
.doc td .mkref{margin:0}
.doc p{margin:6px 0}
.doc ol,.doc ul{margin:6px 0 6px 22px;padding:0}
.doc li{margin:4px 0}
.doc table{border-collapse:collapse;width:100%;margin:8px 0 12px;font-size:13px}
.doc th,.doc td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.doc th{background:#f7f7fa;font-weight:600}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 24px;margin:8px 0}
.kv div{font-size:13px}
.kv b{color:var(--mute);font-weight:500;margin-right:6px}
.note{background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:8px 12px;font-size:13px;margin:8px 0}
.mkref{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:var(--acc);color:#fff;font-size:11px;font-weight:700;margin-right:4px;vertical-align:middle}
/* 原型区 */
.proto{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px 24px;margin-bottom:18px}
.proto-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.proto-head h2{font-size:16px;margin:0;padding-left:10px;border-left:3px solid var(--acc)}
.legend{font-size:12px;color:var(--mute)}
.legend i{display:inline-block;width:14px;height:10px;border:2px dashed var(--acc);background:var(--accbg);vertical-align:middle;margin:0 4px 0 8px}
.sw{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.sw button{border:0;background:#fff;padding:6px 14px;font-size:13px;cursor:pointer;color:var(--mute)}
.sw button.on{background:var(--dark);color:#fff}
.stage{display:none}
.stage.on{display:block}
.stage-title{font-size:12px;color:var(--mute);margin:0 0 8px}
.stage-grid{display:grid;grid-template-columns:1fr;gap:22px}
.stage-grid.two{grid-template-columns:1fr 1fr}
@media (max-width:980px){.stage-grid.two{grid-template-columns:1fr}}
/* PC 框 */
.pc-shell{border:1px solid var(--line);border-radius:8px;background:#fafafb;overflow:hidden}
.pc-bar{height:28px;background:#e9e9ee;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11px;color:var(--mute)}
.pc-bar i{width:10px;height:10px;border-radius:50%;background:#c9c9cf;display:inline-block}
.pc-bar span{margin-left:8px;background:#fff;border-radius:4px;padding:1px 10px;flex:1}
.pc-view{position:relative;overflow:hidden}
.pc-canvas{width:1200px;transform-origin:0 0;position:relative;background:#fff;font-size:12px;color:var(--ink)}
/* H5 框 */
.phone{width:375px;height:760px;border:8px solid #2b2b2f;border-radius:34px;background:#fff;position:relative;overflow:hidden;margin:0 auto;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.phone .st{height:24px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;color:var(--ink)}
.phone .screen{position:absolute;top:24px;left:0;right:0;bottom:0;overflow:auto;background:#f6f6f8;font-size:12px}
.phone .tabbar{position:absolute;left:0;right:0;bottom:0;height:50px;background:#fff;border-top:1px solid var(--line);display:flex;z-index:5}
.phone .tabbar div{flex:1;text-align:center;font-size:10px;color:var(--mute);padding-top:6px}
.phone .tabbar div b{display:block;width:18px;height:18px;margin:0 auto 2px;background:#cfcfd6;border-radius:4px}
.phone .tabbar div.on{color:var(--ink)}
.phone .tabbar div.on b{background:var(--dark)}
.phone .navbar{height:44px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.phone .navbar .back{position:absolute;left:12px;color:var(--mute);font-weight:400}
.phone .navbar .right{position:absolute;right:12px;color:var(--mute);font-weight:400;font-size:12px}
/* 线框元素 */
.wf-img{background:repeating-linear-gradient(135deg,#e5e5ea 0 6px,#ededf1 6px 12px);border:1px solid #dcdce1;border-radius:4px}
.wf-line{height:8px;border-radius:4px;background:#d8d8de;margin:4px 0}
.wf-line.s{width:40%}.wf-line.m{width:65%}.wf-line.l{width:90%}
.avatar{width:36px;height:36px;border-radius:50%;background:#cfcfd6;display:inline-block;vertical-align:middle;position:relative;flex:none}
.avatar.sm{width:26px;height:26px}.avatar.lg{width:56px;height:56px}
.badge{position:absolute;right:-6px;bottom:-4px;background:var(--dark);color:#fff;font-size:9px;line-height:14px;padding:0 4px;border-radius:7px;white-space:nowrap}
.btn{display:inline-block;border:1px solid #b9b9c0;border-radius:6px;padding:4px 12px;font-size:12px;background:#fff;color:var(--ink);cursor:pointer;user-select:none;line-height:1.4}
.btn.p{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn.dis{opacity:.45;cursor:not-allowed}
.btn.sm{padding:2px 8px;font-size:11px}
.btn.blk{display:block;text-align:center}
.pill{display:inline-block;border:1px solid #c9c9cf;border-radius:12px;padding:1px 9px;font-size:11px;color:var(--mute);background:#fff;cursor:pointer}
.pill.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);padding:0 12px;background:#fff}
.tabs div{padding:8px 0;cursor:pointer;color:var(--mute);position:relative}
.tabs div.on{color:var(--ink);font-weight:600}
.tabs div.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--dark)}
.row{display:flex;align-items:center;gap:8px}
.row.sb{justify-content:space-between}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0}
.inp{border:1px solid #c9c9cf;border-radius:6px;padding:5px 8px;font-size:12px;background:#fff;color:var(--mute);min-width:120px;display:inline-block}
.inp.blk{display:block;width:100%}
.sel{border:1px solid #c9c9cf;border-radius:6px;padding:4px 8px;font-size:12px;background:#fff;display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-width:110px;justify-content:space-between}
.sel:after{content:"▾";color:var(--mute);font-size:11px}
.tbl{width:100%;border-collapse:collapse;font-size:11px;background:#fff}
.tbl th,.tbl td{border:1px solid var(--line);padding:5px 6px;text-align:center;white-space:nowrap}
.tbl th{background:#f4f4f7;font-weight:600}
.side{width:180px;background:#f6f6f8;border-right:1px solid var(--line);padding:12px 0;font-size:12px}
.side .grp{color:#9a9aa0;font-size:10px;padding:6px 16px 2px}
.side .it{padding:6px 16px;color:var(--mute);cursor:pointer}
.side .it.on{background:#e9e9ee;color:var(--ink);font-weight:600}
.tb{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#fff}
.tb .logo{font-weight:800;letter-spacing:1px;color:#555}
.crumb{font-size:11px;color:var(--mute);padding:8px 0}
.empty{text-align:center;color:var(--mute);padding:26px 0;font-size:12px}
.empty i{display:block;width:46px;height:36px;margin:0 auto 8px;background:#e6e6eb;border-radius:6px}
/* 改动高亮 + 标注 */
.chg{outline:2px dashed var(--acc);outline-offset:2px;background:var(--accbg);border-radius:4px;position:relative}
.mk{position:absolute;z-index:20;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:var(--acc);color:#fff;font-size:11px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}
.mk.tl{top:-9px;left:-9px}.mk.tr{top:-9px;right:-9px}.mk.bl{bottom:-9px;left:-9px}.mk.br{bottom:-9px;right:-9px}
/* 弹窗 / 底部弹层 / 提示 */
.mask{position:absolute;inset:0;background:rgba(0,0,0,.35);display:none;z-index:30;align-items:center;justify-content:center}
.mask.on{display:flex}
.ddbox{position:absolute;z-index:99;background:#fff;border:1px solid #c9c9cf;border-radius:6px;min-width:110px;box-shadow:0 4px 12px rgba(0,0,0,.14);max-height:220px;overflow:auto}
.ddbox .list-item{padding:6px 12px;cursor:pointer;white-space:nowrap}
.ddbox .list-item:hover{background:#eaf1ff}
.mask.bottom{align-items:flex-end}
.dlg{background:#fff;border-radius:10px;width:420px;max-width:92%;padding:16px 18px;font-size:12px;position:relative;max-height:90%;overflow:auto}
.dlg h4{margin:0 0 10px;font-size:14px}
.dlg .x{position:absolute;right:12px;top:10px;color:var(--mute);cursor:pointer}
.sheet{background:#fff;border-radius:14px 14px 0 0;width:100%;padding:14px 14px 20px;font-size:12px;position:relative;max-height:80%;overflow:auto}
.sheet h4{margin:0 0 10px;font-size:14px;text-align:center}
.sheet .x{position:absolute;right:12px;top:10px;color:var(--mute);cursor:pointer}
.tip{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);background:rgba(0,0,0,.78);color:#fff;padding:8px 16px;border-radius:8px;font-size:12px;z-index:40;display:none;white-space:nowrap}
.tip.on{display:block}
.ctrl{background:#f7f7fa;border:1px dashed #c9c9cf;border-radius:8px;padding:8px 12px;font-size:12px;color:var(--mute);margin:0 0 10px}
.ctrl b{color:var(--ink);font-weight:600;margin-right:6px}
.ctrl .btn{margin-right:6px;background:var(--acc);color:#fff;border-color:var(--acc)}
.list-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #eee;cursor:pointer}
.list-item:hover{background:#f7f7fa}
.list-item .radio{width:14px;height:14px;border:1px solid #999;border-radius:50%;flex:none}
.list-item.sel .radio{border:4px solid var(--dark)}
.chat-card{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;font-size:11px;width:230px}
.hint{font-size:11px;color:var(--mute)}
.bubble{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:11px;display:inline-block;max-width:240px}
.ck{display:inline-block;width:13px;height:13px;border:1px solid #999;border-radius:3px;vertical-align:middle;cursor:pointer;background:#fff}
.ck.on{background:var(--dark);border-color:var(--dark)}
.sw-tog{display:inline-block;width:30px;height:16px;border-radius:8px;background:#c9c9cf;position:relative;vertical-align:middle;cursor:pointer}
.sw-tog:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.sw-tog.on{background:var(--dark)}.sw-tog.on:after{left:16px}
.ribbon{font-size:10px;color:var(--acc);background:var(--accbg);border:1px solid #bcd1ff;border-radius:4px;padding:1px 6px;margin-left:6px}
.ribbon.red{color:#d9534f;background:#fdecec;border-color:#f5c2c2}
.grey{color:var(--mute)}
/* H5 线上同款元素 */
.pill.o{border-color:var(--dark);color:var(--dark);background:#fff;padding:2px 12px}
.ico{display:inline-block;width:26px;height:26px;border-radius:6px;background:#cfcfd6;vertical-align:middle;flex:none}
.ico.sm{width:16px;height:16px;border-radius:50%}
.ico.rd{border-radius:50%}
.icon-row{display:flex;justify-content:space-around;padding:10px 6px 6px;background:#fff;font-size:11px;text-align:center;border-bottom:8px solid #f6f6f8}
.icon-row .ico{width:34px;height:34px;border-radius:10px;margin-bottom:3px}
.tabs.scroll{overflow-x:auto;white-space:nowrap;gap:14px;scrollbar-width:none;padding-top:10px}
.tabs.scroll div{flex:none}
.h5bar{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:8px 10px;display:flex;gap:8px;align-items:center;z-index:4}
.h5bar .inp{flex:1;border-radius:16px;background:#f2f2f5;border-color:#f2f2f5}
.vcard{width:200px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#fff;font-size:11px}
.vcard .cv{min-height:140px;background:repeating-linear-gradient(135deg,#e5e5ea 0 6px,#ededf1 6px 12px);position:relative;text-align:center;padding:14px 0 8px}
.vcard .cv .tg{position:absolute;left:8px;top:8px;background:var(--dark);color:#fff;border-radius:10px;padding:0 8px;font-size:10px}
.vcard .ft{background:#4a4a50;color:#fff;padding:6px 8px;display:flex;justify-content:space-between}
.steps{display:flex;justify-content:space-between;padding:10px 18px 4px;font-size:11px;color:var(--mute);background:#fff}
.steps span{text-align:center}
.steps i{display:block;width:16px;height:16px;line-height:16px;border-radius:50%;background:#cfcfd6;color:#fff;font-style:normal;margin:0 auto 2px;font-size:10px}
.steps .on{color:var(--ink);font-weight:600}
.steps .on i{background:var(--dark)}
.fl-data{position:absolute;right:0;top:300px;background:var(--dark);color:#fff;writing-mode:vertical-rl;padding:10px 4px;border-radius:6px 0 0 6px;font-size:11px;z-index:6}
.lst{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #eee;background:#fff}
.lst .av{width:40px;text-align:center;flex:none}
.lst .av .avatar{display:block;margin:0 auto 2px}
.lst .av small{font-size:9px;background:var(--dark);color:#fff;border-radius:6px;padding:0 5px}
.mono{font-family:Menlo,Consolas,monospace;font-size:11px}
/* 索引页 */
.index-grid{display:grid;grid-template-columns:260px 1fr;gap:18px;min-height:calc(100vh - 120px)}
.menu{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 0;align-self:start;position:sticky;top:16px}
.menu .h{font-size:12px;color:var(--mute);padding:4px 16px 8px}
.menu a{display:block;padding:8px 16px;color:var(--ink);font-size:13px;border-left:3px solid transparent}
.menu a:hover{background:#f6f6f8}
.menu a.on{border-left-color:var(--acc);background:var(--accbg)}
.menu a .no{display:inline-block;width:22px;color:var(--mute);font-size:12px}
.menu a.off{color:#b0b0b6}
.frame{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:calc(100vh - 120px)}
.frame iframe{width:100%;height:calc(100vh - 120px);border:0}
@media (max-width:900px){.index-grid{grid-template-columns:1fr}.menu{position:static}}