/* UI proposal tab · clickable 390×844 phone mocks (pattern from /question-demo) */
#pane-ui .lead{font-size:14.5px;color:var(--sub);margin:0 0 14px}
#pane-ui .prin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 6px}
#pane-ui .prin div{border:1px solid var(--line);border-radius:10px;padding:12px 13px;background:var(--panel);border-top:3px solid var(--brand)}
#pane-ui .prin b{display:block;font-size:13.5px;margin-bottom:3px}
#pane-ui .prin span{display:block;font-size:12.5px;color:var(--sub);line-height:1.5}
#pane-ui .navcmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 4px}
#pane-ui .navcmp>div{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--panel)}
#pane-ui .navcmp h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
#pane-ui .tbmini{display:flex;justify-content:space-around;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 4px 6px;font:600 10.5px "Open Sans",sans-serif;color:#637381}
#pane-ui .tbmini span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px}
#pane-ui .tbmini svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#pane-ui .tbmini .on{color:#8845BD}
#pane-ui .tbmini .plus{width:38px;height:38px;border-radius:50%;background:#8845BD;color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-14px;min-width:0}
#pane-ui .tbmini .plus svg{stroke:#fff}
#pane-ui .navcmp p{font-size:12.5px;color:var(--sub);margin:8px 0 0}

#pane-ui .tgrow{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;position:sticky;top:calc(var(--tbh,52px) - 2px);z-index:6;background:var(--bg,#fff);padding:10px 0;box-shadow:0 1px 0 var(--line)}
#uiarea,#uimode{display:flex;flex-wrap:wrap;gap:6px}
#uimode{margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--card,#fff)}
#uiarea button{border:1px solid var(--line);background:var(--card,#fff);color:var(--ink);border-radius:999px;padding:5px 12px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
#uiarea button i{font-style:normal;color:var(--muted);margin-left:6px}
#uiarea button.on{background:var(--brand);border-color:var(--brand);color:#fff}#uiarea button.on i{color:#fff;opacity:.8}
#uimode button{border:0;background:none;border-radius:999px;padding:5px 13px;font-family:inherit;font-size:13px;font-weight:600;color:var(--sub);cursor:pointer}
#uimode button.on{background:var(--brand);color:#fff}

#uigal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 18px;margin:18px 0 6px}
#uigal .cell{min-width:0}
#uigal .cell h4{margin:0 0 2px;font-size:14px}
#uigal .cell .vn{font-size:12.5px;color:var(--muted);margin:0 0 8px;line-height:1.45;min-height:36px}
#uigal .cell .chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
#uigal .cell .chips span{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code);border-radius:4px;padding:1px 6px;color:var(--sub)}
#uigal .pair{display:flex;gap:12px}
#uigal .pair figure{margin:0}
#uigal .pair figcaption{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 5px}
#uigal.cmp{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
#uigal.cmp .mmstage{--s:.52}
#uigal.one{grid-template-columns:auto;justify-content:center}
#uigal.one .mmstage{--s:1}
#uigal.one .cell .vn{min-height:0}
.mmstage{--s:.64;width:calc(390px*var(--s));height:calc(844px*var(--s));overflow:clip;border-radius:calc(46px*var(--s));flex:none}
.mmstage .pp,.mmstage .phimg{transform:scale(var(--s));transform-origin:top left}
.phimg{width:390px;height:844px;border-radius:46px;border:10px solid #1f2329;overflow:hidden;background:#fff;box-sizing:border-box}
.phimg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.protolist{display:flex;flex-direction:column;gap:6px;min-width:190px}
.protolist button{text-align:left;border:1px solid var(--line);background:var(--card,#fff);border-radius:8px;padding:7px 11px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.protolist button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.protowrap{display:flex;gap:22px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
@media (max-width:720px){#pane-ui .prin{grid-template-columns:1fr}#pane-ui .navcmp{grid-template-columns:1fr}
 #pane-ui .tgrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#pane-ui .tgrow::-webkit-scrollbar{display:none}
 #uiarea{flex-wrap:nowrap}#uiarea button,#uimode button{white-space:nowrap}#uimode{margin-left:0;flex:none}
 #uigal,#uigal.cmp{grid-template-columns:1fr;justify-items:center}#uigal .mmstage{--s:.78}#uigal .cell{width:calc(390px*.78)}
 #uigal.cmp .cell{width:auto}#uigal.cmp .mmstage{--s:.42}#uigal.one .mmstage{--s:.86}#uigal.one .cell{width:auto}.protolist{display:none}}

/* ── phone ─────────────────────────────────────────── */
.pp{--ink:#212B36;--sub:#637381;--faint:#919EAB;--line:#DFE3E8;--bg:#F9FAFB;--card:#fff;--brand:#8845BD;--brand-d:#572695;--bsoft:#F4ECFB;
 --ok:#1B806A;--okbg:#E3F6EF;--warn:#9A6700;--warnbg:#FFF4CC;--err:#B72136;--errbg:#FFE7E4;--info:#0C53B7;--infobg:#E1F0FF;
 position:relative;width:390px;height:844px;border-radius:46px;border:10px solid #1f2329;background:var(--bg);overflow:hidden;box-sizing:border-box;
 font:15px/1.4 "Open Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);text-align:left;-webkit-font-smoothing:antialiased}
.pp *{box-sizing:border-box}
.pp button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.pp svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pp .sb{height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;font-weight:700;font-size:15px;position:relative;z-index:3}
.pp .sb .di{position:absolute;left:50%;top:9px;width:118px;height:32px;margin-left:-59px;background:#000;border-radius:20px}
.pp .sb .ic{display:flex;gap:5px;align-items:center}
.pp .sb .ic i{display:block;width:17px;height:11px;border-radius:2px;background:var(--ink)}
.pp .sb .ic i.b{width:24px;height:12px;border-radius:4px;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--ink) 70%,transparent 70%);background-clip:content-box;padding:1.5px}
.pp .scr{position:absolute;inset:47px 0 0 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:0 16px 120px}
.pp .scr::-webkit-scrollbar{display:none}
.pp.notab .scr{padding-bottom:110px}
/* header */
.pp .hdr{display:flex;align-items:center;gap:11px;padding:6px 0 10px}
.pp .av{width:40px;height:40px;border-radius:50%;background:var(--bsoft);color:var(--brand);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.pp .av.lg{width:58px;height:58px;font-size:19px}
.pp .hdr-t{flex:1;min-width:0}.pp .hdr-t small{display:block;font-size:12.5px;color:var(--sub)}.pp .hdr-t b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em}
.pp .ib{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.pp .ib .dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--err);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg)}
.pp .nav{display:flex;align-items:center;gap:8px;padding:4px 0 8px;min-height:44px}
.pp .nav .bk{display:flex;align-items:center;gap:2px;color:var(--brand);font-weight:600;font-size:15px;margin-left:-6px}
.pp .nav .sp{flex:1}
.pp .nav .x{width:34px;height:34px;border-radius:50%;background:#EEF0F3;display:flex;align-items:center;justify-content:center}
.pp h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:2px 0 12px;line-height:1.15}
.pp h2{display:block;font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;line-height:1.2}
.pp .sec{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 8px}
.pp .sec b{font-size:16.5px;font-weight:800}.pp .sec b .n{display:inline-block;margin-left:6px;background:var(--errbg);color:var(--err);font-size:12px;border-radius:10px;padding:0 7px;vertical-align:2px}
.pp .sec a,.pp .lnk{color:var(--brand);font-weight:600;font-size:13.5px;text-decoration:none;cursor:pointer}
.pp .pchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.pp .pchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pp .pchip svg.i{width:15px;height:15px}
.pp .pchips{display:flex;gap:7px;flex-wrap:wrap}
.pp .pchips.sc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.pp .pchips.sc::-webkit-scrollbar{display:none}
.pp .ptag{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:700;white-space:nowrap}
.pp .t-err{background:var(--errbg);color:var(--err)}.pp .t-warn{background:var(--warnbg);color:var(--warn)}.pp .t-ok{background:var(--okbg);color:var(--ok)}.pp .t-info{background:var(--infobg);color:var(--info)}.pp .t-b{background:var(--bsoft);color:var(--brand)}.pp .t-n{background:#EEF0F3;color:var(--sub)}
/* cards */
.pp .pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 10px}
.pp .pcard.tap{cursor:pointer}
.pp .row{display:flex;align-items:center;gap:10px}
.pp .row .grow{flex:1;min-width:0}
.pp .ttl{font-weight:700;font-size:15px;line-height:1.3}
.pp .meta{font-size:13px;color:var(--sub);margin-top:2px}
.pp .ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.pp .ico.err{background:var(--errbg);color:var(--err)}.pp .ico.warn{background:var(--warnbg);color:var(--warn)}.pp .ico.info{background:var(--infobg);color:var(--info)}.pp .ico.b{background:var(--bsoft);color:var(--brand)}.pp .ico.ok{background:var(--okbg);color:var(--ok)}
.pp .bar{height:6px;border-radius:3px;background:#EEF0F3;overflow:hidden;margin-top:9px}
.pp .bar i{display:block;height:100%;background:var(--brand);border-radius:3px}
.pp .bar.err i{background:var(--err)}.pp .bar.ok i{background:var(--ok)}
.pp .acts{display:flex;gap:8px;margin-top:12px}
.pp .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:10px;padding:0 14px;font-weight:700;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.pp .btn.p{background:var(--brand);border-color:var(--brand);color:#fff}
.pp .btn.s{background:var(--bsoft);border-color:var(--bsoft);color:var(--brand)}
.pp .btn.f{flex:1}
.pp .btn svg.i{width:17px;height:17px}
.pp .cta{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 30px;background:linear-gradient(180deg,rgba(249,250,251,0),var(--bg) 26%);display:flex;gap:10px;z-index:4}
.pp .cta .btn{height:50px;border-radius:14px;font-size:16px;flex:1}
.pp .kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pp .kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.pp .kpi small{display:block;font-size:12px;color:var(--sub);font-weight:600}
.pp .kpi b{display:block;font-size:22px;font-weight:800;letter-spacing:-.01em;margin-top:2px;font-variant-numeric:tabular-nums}
.pp .kpi em{font-style:normal;font-size:12px;font-weight:700}
.pp .kpi em.up{color:var(--ok)}.pp .kpi em.dn{color:var(--err)}
.pp .kpis.k3{grid-template-columns:1fr 1fr 1fr}.pp .kpis.k3 b{font-size:19px}
.pp .hs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.pp .hs::-webkit-scrollbar{display:none}
.pp .hs .pcard{min-width:200px;margin:0}
.pp .seg{display:flex;background:#EEF0F3;border-radius:11px;padding:3px;margin:4px 0 12px}
.pp .seg button{flex:1;height:32px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--sub);display:flex;align-items:center;justify-content:center;gap:5px}
.pp .seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.pp .seg .n{font-size:11.5px;background:var(--errbg);color:var(--err);border-radius:8px;padding:0 6px}
.pp .seg button:not(.on) .n.g{background:#E3E6EA;color:var(--sub)}
.pp .list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 0 10px}
.pp .li{display:flex;align-items:center;gap:11px;padding:12px 14px;border-top:1px solid #EEF0F3;min-height:52px}
.pp .li:first-child{border-top:0}
.pp .li .grow{flex:1;min-width:0}
.pp .li .t{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .li .m{font-size:12.5px;color:var(--sub)}
.pp .li .chev{color:var(--faint)}
.pp .li.danger .t{color:var(--err)}
.pp .grphd{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 8px}
.pp .grphd b{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
.pp .hbar{display:grid;grid-template-columns:92px 1fr 34px;align-items:center;gap:8px;font-size:13px;margin:7px 0}
.pp .hbar span:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.pp .hbar .tr{height:8px;border-radius:4px;background:#EEF0F3;overflow:hidden}.pp .hbar .tr i{display:block;height:100%;background:var(--brand);border-radius:4px}
.pp .search{display:flex;align-items:center;gap:8px;height:42px;border-radius:12px;background:#EEF0F3;padding:0 12px;color:var(--sub);font-size:15px;margin:0 0 12px}
.pp .field{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 10px}
.pp .field .li{min-height:50px}
.pp .lbl{font-size:12.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin:14px 2px 7px}
.pp .tg{width:46px;height:28px;border-radius:14px;background:#D6DADF;position:relative;flex:none}
.pp .tg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.pp .tg.on{background:var(--ok)}.pp .tg.on::after{left:21px}
.pp .thumb{width:64px;height:64px;border-radius:12px;flex:none;display:flex;align-items:flex-end;padding:6px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.03em}
.pp .ring{width:86px;height:86px;flex:none;position:relative}
.pp .ring svg{width:86px;height:86px;transform:rotate(-90deg)}
.pp .ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;font-weight:800;line-height:1}
.pp .ring b small{font-size:11px;color:var(--sub);font-weight:600;margin-top:3px}
.pp .banner{display:flex;gap:10px;align-items:flex-start;background:var(--warnbg);border-radius:14px;padding:12px;margin:0 0 10px;font-size:13.5px}
.pp .banner .grow{flex:1}
.pp .banner b{display:block}
.pp .pnote{font-size:12.5px;color:var(--sub);margin:6px 2px 0}
.pp .pscore{display:flex;align-items:baseline;gap:6px}
.pp .pscore b{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pp .pscore span{font-size:17px;color:var(--sub);font-weight:700}
.pp .fix{font-size:13.5px;line-height:1.5}
.pp .fix del{color:var(--err);text-decoration-thickness:1.5px}
.pp .fix ins{color:var(--ok);text-decoration:none;font-weight:700;background:var(--okbg);border-radius:4px;padding:0 3px}
.pp .cam{height:300px;border-radius:18px;background:linear-gradient(160deg,#30343b,#1b1e23);position:relative;overflow:hidden;margin:0 0 10px}
.pp .cam .pg{position:absolute;left:58px;right:58px;top:34px;bottom:58px;background:#f4f1ea;border-radius:4px;transform:rotate(-3deg);box-shadow:0 10px 30px rgba(0,0,0,.4);padding:16px 14px}
.pp .cam .pg i{display:block;height:5px;border-radius:3px;background:#b9b4a8;margin:0 0 9px}
.pp .cam .fr{position:absolute;left:44px;right:44px;top:22px;bottom:46px;border:2px dashed rgba(255,255,255,.75);border-radius:10px}
.pp .cam .camhint{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#fff;font-size:12.5px;font-weight:600}
.pp .cam .sh{position:absolute;right:14px;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.25)}
.pp .paper{width:58px;height:74px;border-radius:8px;background:#f4f1ea;border:1px solid var(--line);padding:9px 7px;flex:none}
.pp .paper i{display:block;height:3px;border-radius:2px;background:#c9c4b8;margin:0 0 6px}
.pp .addph{width:58px;height:74px;border-radius:8px;border:1.5px dashed var(--faint);display:flex;align-items:center;justify-content:center;color:var(--faint);flex:none}
/* tab bar */
.pp .tb{position:absolute;left:0;right:0;bottom:0;height:84px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:flex-start;padding-top:8px;z-index:5}
.pp .tb button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--faint);min-width:60px}
.pp .tb button svg.i{width:24px;height:24px}
.pp .tb button.on{color:var(--brand)}
.pp .tb .plus{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:0 6px 16px rgba(136,69,189,.35);min-width:0}
.pp .tb .plus svg.i{width:26px;height:26px;stroke-width:2.2}
.pp .hi{position:absolute;bottom:8px;left:50%;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#111;z-index:9}
/* sheet + toast */
.pp .dim{position:absolute;inset:0;background:rgba(17,24,39,.42);z-index:7;display:none}
.pp .sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;z-index:8;padding:8px 16px 36px;transform:translateY(105%);transition:transform .22s ease}
.pp.sheet-on .dim{display:block}.pp.sheet-on .sheet{transform:none}
.pp .sheet .grab{width:38px;height:5px;border-radius:3px;background:#D6DADF;margin:0 auto 12px}
.pp .sheet h3{font-size:18px;font-weight:800;margin:0 0 10px}
.pp .toast{position:absolute;left:16px;right:16px;bottom:98px;background:#212B36;color:#fff;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;display:flex;gap:9px;align-items:center;z-index:9;opacity:0;transform:translateY(8px);transition:all .2s;pointer-events:none}
.pp .toast.on{opacity:1;transform:none}
.pp .toast svg.i{color:#7EE2B8}
.upd{display:inline-block;background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;vertical-align:middle;margin-left:8px;white-space:nowrap;letter-spacing:0}
.updlog{font-size:13.5px;color:var(--muted);margin:-6px 0 12px}
.pp.hascta .cta{bottom:84px;padding:10px 16px 10px}
.pp.hascta .scr{padding-bottom:170px}
.pp .cta .btn{white-space:nowrap;font-size:15.5px}
.pp .cta .btn:not(.p){flex:0 0 auto;padding:0 18px}
.phimg.none{display:flex;align-items:center;justify-content:center;background:#F4F6F8;color:#637381;text-align:center;font:700 22px "Open Sans",sans-serif;padding:30px}
.phimg.none small{display:block;font-size:15px;font-weight:600;margin-top:8px;color:#919EAB}