:root{--bg:#FAFAF7;--card:#fff;--ink:#1F2623;--ink2:#5B6661;--ink3:#5E6A63;--line:#E7E8E3;--g:#244E40;--g2:#E8EFEB;--warn:#A4532E;--warnbg:#FBF0EA;--r:16px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);font-family:-apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;color:var(--ink)}
a{color:inherit;text-decoration:none}
.phone{width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;background:var(--bg);position:relative;overflow:hidden;overflow:clip;display:flex;flex-direction:column}
.top{height:48px;flex:none;display:flex;align-items:center;padding:0 6px}
.top h1{flex:1;text-align:center;font-size:16px;font-weight:600}
.ib{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--ink);flex:none}
.ib:active{background:var(--line)}
svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.body{flex:1;overflow:auto;padding:4px 20px 20px;scrollbar-width:none}.body::-webkit-scrollbar{display:none}
.form-scroll::after{content:"";display:block;flex:none;height:var(--scroll-space,0px);pointer-events:none}
.dock{flex:none;padding:10px 20px 28px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);background:var(--bg)}
.btn{flex:1;height:52px;border-radius:14px;border:0;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s;cursor:pointer}
.btn:active{transform:scale(.98)}
.btn.p{background:var(--g);color:#fff}.btn.s{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn.dis{background:#D9DDD9;color:#fff;pointer-events:none}
.btn.t{background:none;color:var(--g);flex:none;padding:0 10px;font-size:15px}
.btn.icon{flex:none;width:52px;background:var(--card);border:1px solid var(--line)}
.h-xl{font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.3px}
.h-l{font-size:20px;font-weight:700;line-height:1.3}
.sub{font-size:15px;color:var(--ink2);line-height:1.5;margin-top:6px}
.cap{font-size:13px;color:var(--ink3);line-height:1.5}
.lbl{font-size:13px;font-weight:600;color:var(--ink2);margin:20px 0 10px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(255,255,255,.9);color:var(--ink2)}
.link{color:var(--g);font-weight:600;font-size:14px}
.account-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;color:var(--ink2);font-size:12px;border-bottom:1px solid var(--line);background:var(--bg)}
.account-summary small{display:block;margin-top:4px;font-size:11px;color:var(--ink3)}
.account-summary .link{flex:none;min-height:44px;font-size:12px}
.account-page{padding:20px 24px 28px}.account-brand{display:flex;align-items:center;gap:9px;margin:4px 0 30px}.account-brand img{width:30px;height:30px}.account-brand b{font-size:20px}.account-brand span{margin-left:auto;color:var(--ink3);font-size:12px}
.account-page .sub{font-size:13px;margin-top:9px}.account-form{margin-top:24px;display:grid;gap:16px}.account-form>label{display:grid;gap:8px;color:var(--ink2);font-size:13px;font-weight:500}
.account-form input:not([type=checkbox]){display:block;width:100%;min-width:0;height:50px;padding:0 12px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;font-size:16px}.account-form input::placeholder{font-size:12px;color:var(--ink3)}.account-form input:focus{outline:2px solid var(--g);outline-offset:2px}
.account-form>.account-consent{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:22px;font-weight:400}.account-consent input{accent-color:var(--g);width:18px;height:18px;margin-top:2px;flex:none}.account-consent .link{font-size:12px;min-height:24px;margin-left:2px}
.account-error{min-height:18px;color:var(--warn);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.account-switch{display:block;margin:16px auto 0;min-height:44px}.account-note{font-size:12px;color:var(--ink3);line-height:1.8;margin-top:22px}.account-form .btn{width:100%}.account-form button:disabled,.sheet button:disabled{opacity:.55;cursor:wait}
.account-policy p{font-size:14px;line-height:1.9;color:var(--ink2);margin:18px 0}.account-policy .btn{width:100%;margin:24px 0 12px}.account-loading{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:var(--ink3);font-size:13px}.account-loading img{width:42px;height:42px}
.account-welcome{display:flex;flex-direction:column;padding:24px 28px 28px}
.account-welcome-brand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:260px;padding:24px 0 40px}
.account-welcome-brand>img{width:64px;height:64px}.account-welcome-brand>b{font-size:24px;margin-top:14px}.account-welcome-brand>b span{font-size:11px;letter-spacing:2px;margin-left:4px;color:var(--ink3);font-weight:400}
.account-welcome-brand h1{font-size:22px;line-height:1.4;margin-top:30px;font-weight:600}.account-welcome-brand p{font-size:14px;line-height:1.8;color:var(--ink2);margin-top:10px}
.account-welcome-actions{display:grid;gap:12px;flex:none}.account-welcome-actions .btn{width:100%;flex:none}.account-welcome-note{text-align:center;color:var(--ink3);font-size:12px;line-height:1.8;margin-top:8px}
/* tabbar */
.tabbar{flex:none;display:flex;border-top:1px solid var(--line);background:var(--card);padding:6px 0 26px}
/* home */
.hello{padding:8px 0 4px}
.privacy{display:flex;gap:6px;align-items:center;justify-content:center;font-size:12px;color:var(--ink3);margin-top:14px}
.privacy svg{width:14px;height:14px}
/* slots */
.okline{display:flex;gap:6px;align-items:center;color:var(--g);font-size:13px;margin-top:12px;font-weight:600}
.okline svg{width:16px;height:16px}
/* need */
.me{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-top:14px}
.more{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px 14px 14px;margin-top:12px;animation:dn .25s}
@keyframes dn{from{opacity:0;transform:translateY(-6px)}}
@keyframes findSlideDown{from{clip-path:inset(0 0 100% 0);opacity:.96}to{clip-path:inset(0 0 0 0);opacity:1}}
.more .lbl{margin:16px 0 10px}
.chip{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line);background:var(--card);font-size:13px;display:inline-flex;align-items:center;color:var(--ink2);white-space:nowrap}
.chip.on{background:var(--g);border-color:var(--g);color:#fff}
.sw{display:flex;gap:10px;align-items:center}
/* feed */
.fhd{display:flex;align-items:center;padding:0 4px 0 16px;height:48px;flex:none;gap:2px}
.fhd .segs{flex:1;display:flex;gap:20px;justify-content:center;margin-left:36px}
.fhd-find{flex:none;height:32px;padding:0 10px;border:0;border-radius:16px;background:transparent;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.fhd-find:active{background:var(--line)}
.filters{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 32px 10px 12px;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);flex:none;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.filters .chip{height:30px;font-size:12px;background:#F0F1EC;border-color:transparent}
.filters .chip.on{background:var(--g2);color:var(--g);border-color:transparent;font-weight:600}
.feed-shell{flex:1;min-height:0;display:flex;flex-direction:column}
.feed-content{flex:1;min-height:0;position:relative}
.feed{height:100%;overflow:auto;overscroll-behavior-y:contain;padding:4px 6px 8px;scrollbar-width:none;background:#F2F2EE;container-type:size}.feed::-webkit-scrollbar{display:none}
.cols{display:flex;gap:6px;align-items:flex-start}.col{flex:1;min-width:0}.post{break-inside:avoid;background:var(--card);border-radius:10px;overflow:hidden;margin-bottom:6px;display:block}
.post .im{position:relative;aspect-ratio:3/4;overflow:hidden}
.post .im img{width:100%;height:100%;display:block;object-fit:cover;background:#E9E8E3}
.post .t{font-size:13px;font-weight:600;line-height:1.4;height:42px;padding:6px 8px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .tg{padding:2px 8px 0;font-size:11px;line-height:16px;color:var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post .au{display:flex;align-items:center;gap:5px;padding:5px 8px 7px;font-size:11px;line-height:18px;color:var(--ink3)}
.av{width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700;flex:none}
.editorial-avatar{background:#fff;overflow:hidden;border:1px solid var(--line)}
.editorial-avatar img{display:block;width:100%;height:100%;object-fit:contain}
.feed-channel-bar{height:46px;flex:none;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 6px 0 12px;gap:6px}
.feed-channels{flex:1;display:flex;align-items:center;gap:18px;overflow:auto;scrollbar-width:none}
.feed-channels button{flex:none;background:transparent;font-size:14px;color:var(--ink2);position:relative;padding:0 2px}
.feed-channels button.on{color:var(--g);font-weight:600}
.feed-channels button.on:after{content:'';position:absolute;bottom:5px;height:2px;border-radius:2px;left:8px;right:8px;background:var(--g)}
.feed-more{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;color:var(--ink2)}
.feed-more svg{width:18px;height:18px}
.feed-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.feed-more.filtered{color:var(--g)}.feed-more i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--g);top:8px;right:8px}
.feed-backdrop{position:absolute;inset:0;width:100%;height:100%;background:rgba(24,34,29,.32);z-index:1}
.feed-menu{position:absolute;inset:0 0 auto;max-height:100%;display:flex;flex-direction:column;background:var(--bg);z-index:2;border-radius:0 0 16px 16px;box-shadow:0 8px 16px #1f262314}
.feed-menu-scroll{overflow:auto;overscroll-behavior:contain;padding:2px 16px 8px;min-height:0}
.feed-menu fieldset{border:0;margin:12px 0 0;min-width:0}
.feed-menu legend{font-size:14px;font-weight:600;margin-bottom:8px}.feed-menu legend small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:8px}
.feed-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.feed-options button{border-radius:8px;background:#F0F1EC;font-size:13px;color:var(--ink2);padding:0 4px;text-align:center}
.feed-options button.on{background:var(--g2);color:var(--g);font-weight:600;box-shadow:inset 0 0 0 1px #244e4026}
.feed-menu .fmine{padding:10px 0 0;margin:4px 0 0;border:0}
.feed-menu-actions{display:flex;gap:10px;padding:10px 16px 12px;border-top:1px solid var(--line);flex:none}
.feed-menu-actions .btn{height:44px;font-size:14px;border-radius:10px}.feed-menu-actions .btn.s{flex:0 0 30%}
.post .au .lk{margin-left:auto;display:flex;align-items:center;gap:2px}
.post .au svg{width:14px;height:14px}
/* post detail */
.pauthor{display:flex;align-items:center;gap:8px;flex:1}
.pauthor .av{width:30px;height:30px;font-size:12px}
.pauthor b{font-size:14px}.pauthor span{font-size:11px;color:var(--ink3);display:block}
.hero{position:relative;aspect-ratio:3/4;background:#E9E8E3;flex:none}
.hero img{width:100%;height:100%;object-fit:contain;display:block}
.post-detail{padding:0 0 20px}
.post-hero{width:100%;height:clamp(200px,42vh,350px);height:clamp(200px,42svh,350px);aspect-ratio:auto;border:0;padding:0;display:block;cursor:zoom-in}
.photo-zoom{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:4px;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.92);color:var(--ink2);font-size:12px}
.photo-zoom svg{width:14px;height:14px}
.post-detail .pviews button{height:72px;aspect-ratio:auto}
.post-detail .pviews img{object-fit:contain}
.history-retention{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:18px;font-size:14px;line-height:1.5;cursor:pointer}
.history-retention input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--g)}
.history-retention small{display:block;margin-top:4px;font-size:12px;color:var(--ink3);font-weight:400}
.color-status{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.92);font-size:13px;color:var(--ink2)}
.color-error{font-size:13px;color:var(--warn);display:flex;align-items:center;justify-content:space-between;gap:8px}
.length-note{margin-top:10px;line-height:1.6}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.facts div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.facts span{font-size:12px;color:var(--ink3)}.facts b{display:block;font-size:14px;margin-top:2px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px 16px 14px;margin-top:14px}
.row{display:grid;grid-template-columns:56px 1fr;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.row:last-of-type{border:0}
.row span{color:var(--ink3);font-size:13px}
.never{background:var(--warnbg);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:13px;margin-top:10px;line-height:1.5}
.never b{display:block;font-size:12px}
.act{flex:none;display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--ink2);width:40px}
.act svg{width:22px;height:22px}
.act.on{color:var(--warn)}.act.on svg{fill:var(--warn);stroke:var(--warn)}
/* sheet */
.mask{position:absolute;inset:0;background:rgba(20,24,22,.45);animation:fd .2s;z-index:5}
@keyframes fd{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:20px 20px 0 0;padding:10px 20px 30px;z-index:6;animation:up .3s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
/* wait */
.wimg{height:420px;border-radius:20px;overflow:hidden;position:relative;margin-top:6px}
.wimg img{width:100%;height:100%;object-fit:cover;display:block}
.shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:250% 100%;animation:shine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes shine{from{background-position:130% 0}to{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.shine{animation:none;opacity:0}}
.steps{margin-top:18px}
.steps div{display:flex;gap:10px;align-items:center;padding:9px 0;font-size:15px;color:var(--ink3)}
.steps div.d{color:var(--ink2)}.steps div.n{color:var(--ink);font-weight:600}
.steps i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:11px}
.steps .d i{background:var(--g);border-color:var(--g);color:#fff}.steps .n i{border-color:var(--g);border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:4px;border-radius:2px;background:var(--line);margin-top:14px;overflow:hidden}.bar i{display:block;height:100%;width:60%;background:var(--g);border-radius:2px}
/* result */
.hint{font-size:12px;color:var(--ink3);margin-top:8px}
.toast{position:absolute;left:20px;right:20px;bottom:104px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font-size:14px;display:flex;justify-content:space-between;animation:up .3s;z-index:7}
/* card */
/* me */
.err{width:56px;height:56px;border-radius:50%;background:var(--warnbg);color:var(--warn);display:grid;place-items:center;margin:28px 0 16px}
.chk{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.chk i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--warnbg);color:var(--warn);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
/* v4 */
/* need */
.q{margin-top:22px}.q .lbl{margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline}
.q .lbl em{font-style:normal;font-weight:400;color:var(--ink3);font-size:12px}
.cards{display:grid;gap:8px}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}
.ck{min-height:64px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;text-align:center;position:relative}
.ck b{font-size:15px}.ck span{font-size:11px;color:var(--ink3);line-height:1.3}
.ck.on{border-color:var(--g);background:var(--g2)}.ck.on b{color:var(--g)}
.ck.on:after{content:"";position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--g)}
.ck.ai b{font-weight:500;color:var(--ink2)}
.ck.big{min-height:78px}.ck.big b{font-size:20px}
.say{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 12px 10px 14px}
.say .in{display:flex;gap:10px;align-items:flex-start}
.say .ex{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.say .ex span{font-size:11px;color:var(--ink2);background:#F2F3EF;border-radius:6px;padding:3px 7px}
.sum{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sum span{font-size:12px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 8px;color:var(--ink2)}
.sum span b{color:var(--g);font-weight:600}
/* result */
.ptabs{display:flex;gap:6px;margin:2px 0 10px}
.stage{position:relative;height:410px;border-radius:20px;overflow:hidden;background:#ddd;flex:none;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.stage>img,.stage .lay img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stage .lay{position:absolute;inset:0;transition:opacity .18s}
.stage.orig .lay{opacity:0}
.stage-zoom{position:absolute;inset:0;width:100%;height:100%;padding:0;border-radius:inherit;cursor:zoom-in}
.ba{position:absolute;left:10px;top:10px;display:flex;background:rgba(31,38,35,.55);border-radius:14px;padding:3px;backdrop-filter:blur(6px)}
.mini{position:absolute;right:10px;bottom:10px;width:62px;height:80px;border-radius:10px;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.mini img{width:100%;height:100%;object-fit:cover}.mini span{position:absolute;left:0;right:0;bottom:0;font-size:10px;color:#fff;text-align:center;background:rgba(0,0,0,.45);padding:1px 0}
.nav2{position:absolute;top:50%;width:44px;height:44px;transform:translateY(-50%);border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;color:var(--ink)}
.nav2 svg{width:18px;height:18px}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:5px}
.dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.55)}.dots i.on{width:16px;background:#fff}
.vw{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.vw img{width:100%;height:100%;object-fit:cover}
.vw .view-caption{position:absolute;left:6px;bottom:5px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.why{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:12px}
.why b{font-size:15px}.why p{font-size:13px;color:var(--ink2);line-height:1.6;margin-top:4px}
/* card + shops */
.shops{margin-top:22px;padding-top:16px;border-top:8px solid #F2F2EE;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
.shophd{display:flex;align-items:baseline;justify-content:space-between}
.shop{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.shop .ic{width:46px;height:46px;border-radius:12px;background:var(--g2);color:var(--g);flex:none;font-weight:700;object-fit:cover}
.shop span.ic{display:grid;place-items:center}
.shop img.ic{display:block}
.shop div{flex:1;min-width:0}.shop b{font-size:15px}.shop p{font-size:12px;color:var(--ink3);margin-top:3px}
.shop .nv{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--g);color:var(--g);font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px;flex:none}
.shop .nv svg{width:14px;height:14px}
/* me */

/* v4 implementation additions */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top{padding-top:env(safe-area-inset-top)}.tabbar{padding-bottom:max(10px,env(safe-area-inset-bottom))}.dock{padding-bottom:max(16px,env(safe-area-inset-bottom))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink3);padding:2px 0}
.tabbar button.on{color:var(--g);font-weight:700}
.btn.sm{height:36px;flex:none;padding:0 16px;font-size:14px;border-radius:12px}
.btn svg{width:18px;height:18px}
a.btn{display:flex}
.link.sm{font-size:12px;margin-left:4px}
.lbl.row2{display:flex;justify-content:space-between}.lbl.row2 span{font-weight:400;color:var(--ink3)}
.sw button{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);flex:none}
.sw button.on{box-shadow:0 0 0 2px var(--g)}
.sw .chip{width:auto;height:30px;border-radius:15px;margin-left:auto;font-size:12px;box-shadow:none;border:1px solid var(--line)}
.sw .chip.on{box-shadow:none}
.say textarea{flex:1;width:100%;border:0;resize:none;background:none;font:inherit;font-size:14px;line-height:1.5;color:var(--ink);min-height:42px}
.say textarea::placeholder{color:var(--ink3)}
.say .ex button{font-size:12px;color:var(--ink2);background:#F2F3EF;border-radius:6px;padding:4px 8px}
.consent{text-align:center;margin-top:8px}
.fhd .segs button{font-size:16px;color:var(--ink3);padding:10px 0;position:relative}
.fhd .segs button.on{color:var(--ink);font-weight:700}
.fhd .segs button.on:after{content:"";position:absolute;left:50%;bottom:4px;width:18px;height:3px;border-radius:2px;background:var(--g);transform:translateX(-50%)}
.searchbar{padding:0 12px 6px}.searchbar input{width:100%;height:36px;border-radius:18px;border:0;background:#F0F1EC;padding:0 14px;font:inherit;font-size:14px}
.filters .chip{flex:none}
.post{width:100%;text-align:left}.post .au .lk.on{color:var(--warn)}.post .au .lk.on svg{fill:var(--warn);stroke:var(--warn)}
.empty{text-align:center;color:var(--ink3);font-size:14px;padding:48px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}.empty b{color:var(--ink);font-size:15px}
.trycolor{position:relative}.trycolor>.cap{display:block;margin-bottom:6px}
.trycolor .sw>.cap{position:absolute;top:0;right:0}
.act{background:none}
.ptabs button{flex:1;text-align:center;font-size:13px;color:var(--ink3);padding:6px 0;border-radius:10px;min-width:0}
.ptabs button b{display:block;font-size:14px;color:var(--ink2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.ptabs button.on{background:var(--ink);color:#C9D2CD}.ptabs button.on b{color:#fff}
.stage{height:min(410px,52vh)}
.ba button,.ba span{height:26px;padding:0 12px;display:grid;place-items:center;font-size:12px;color:#fff;border-radius:12px}
.ba .on{background:#fff;color:var(--ink);font-weight:700}
.mini{cursor:pointer;touch-action:none}
.ph-wait{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#ECEDE8;color:var(--ink2);font-size:14px;text-align:center;padding:24px}
.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--g);animation:spin 1s linear infinite;vertical-align:-4px}
.vw button{position:relative;height:96px;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#ECEDE8}
.vw button.on{border-color:var(--g)}.vw.v4{grid-template-columns:repeat(4,1fr)}.vw.v4 button{height:84px}
.vw .view-caption{padding:3px 6px;border-radius:4px;background:rgba(20,30,25,.55);text-shadow:none}
.view-art{width:40px;height:48px;color:#6C8174;stroke-width:1.7;flex:none}
.view-art .head-fill{fill:#E0E7E1;stroke:none}
.base-art{display:grid;place-items:center}.base-art svg{width:32px;height:32px}
.view-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink2);background:#F0F3EF}
.view-placeholder .view-art{width:32px;height:36px}
.view-placeholder b{font-size:12px;font-weight:600;color:var(--ink)}
.view-placeholder small{font-size:10px;line-height:1.3;color:var(--ink2)}
.ph-wait .view-art{width:72px;height:88px}.ph-wait p{font-size:13px;line-height:1.6;color:var(--ink2)}
.ib.on{color:var(--warn)}
.shops .btn{width:100%;flex:none}
.shop img.ic{object-fit:cover;padding:0}
.sheet b{font-size:17px}
.toast span{flex:1}

/* v5: home */
.home .hello{padding:12px 0 6px}
.hero-entry{position:relative;display:block;width:100%;flex:1 0 250px;margin-top:16px;border-radius:22px;overflow:hidden;background:#d9dcd6;text-align:left;transition:transform .15s}
.hero-entry:active,.row-entry:active{transform:scale(.985)}
.hero-entry img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero-entry .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,26,0) 40%,rgba(20,30,26,.78) 100%)}
.hero-entry .tx{position:absolute;left:20px;right:20px;bottom:20px;color:#fff}
.hero-entry b{font-size:22px;font-weight:700;display:block}
.hero-entry p{font-size:14px;opacity:.88;margin-top:4px}
.hero-entry .cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;height:40px;padding:0 18px;border-radius:20px;background:#fff;color:var(--g);font-size:15px;font-weight:600}
.hero-entry .cta svg{width:16px;height:16px}
.row-entry{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:14px 14px 14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:left;transition:transform .15s}
.row-entry .ic{width:40px;height:40px;border-radius:12px;background:var(--g2);color:var(--g);display:grid;place-items:center;flex:none}
.row-entry .ic svg{width:20px;height:20px}
.row-entry div{flex:1;min-width:0}.row-entry b{font-size:15px;font-weight:600}.row-entry p{font-size:13px;color:var(--ink3);margin-top:2px}
.row-entry>svg{width:16px;height:16px;color:var(--ink3);flex:none}
.h-xl,.h-l{margin:0}
/* v5: barber card — 3 sizes (22/15/13), 2 weights */
.bc{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}
.card-title{font-size:22px;font-weight:600;line-height:1.3;margin-top:18px}
.addons{display:flex;gap:6px;margin-top:8px}.addons span{font-size:13px;color:var(--g);background:var(--g2);border-radius:6px;padding:2px 8px}
.spec{margin-top:10px}
.spec .row,.bc .row{grid-template-columns:52px 1fr;padding:12px 0;font-size:15px;line-height:1.55}
.spec .row span{font-size:13px;line-height:1.75}
.sec{font-size:13px;color:var(--ink3);margin-top:18px}
.talk{font-size:15px;line-height:1.6;margin-top:6px;color:var(--ink)}
.bc .never{font-size:15px;margin-top:16px;padding:12px 14px}.bc .never b{font-size:13px;font-weight:600;margin-bottom:2px}
.bc .shops{margin-top:24px}.shophd b{font-size:15px;font-weight:600}
.foot{text-align:center;margin-top:16px}
.trycolor .sw{gap:8px}.trycolor .sw button{width:26px;height:26px}

/* Desktop phone frame (Codex-style bezel): 390x844 screen, scaled to fit */
/* v6: home fill, strips, 我的, post views, photo capture */
.home{display:flex;flex-direction:column}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:20px 0 10px}.sec-h b{font-size:15px}
.strip{display:flex;gap:10px;overflow-x:auto;margin:0 -20px;padding:0 20px 2px;scrollbar-width:none;flex:none}.strip::-webkit-scrollbar{display:none}
.sp{flex:none;width:104px;text-align:left}.sp img{width:104px;height:132px;border-radius:12px;object-fit:cover;object-position:50% 20%;display:block;background:#e3e6e1}.sp span{display:block;font-size:12px;color:var(--ink2);margin-top:6px}
.recent{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:left;flex:none}
.recent img,.recent .ph0{width:48px;height:60px;border-radius:10px;object-fit:cover;flex:none}.recent .ph0{background:var(--g2);color:var(--g);display:grid;place-items:center}
.recent div{flex:1;min-width:0}.recent b{display:block;font-size:14px}.recent span{font-size:12px;color:var(--ink3)}.recent>svg{width:16px;height:16px;color:var(--ink3)}
.home .privacy{margin-top:auto;padding-top:16px}
.sheet .btn{width:100%;flex:none;margin-top:8px}.sheet .btn.t{width:100%;padding:0}.sheet .danger{color:var(--warn)}
.sheet .in input{width:100%;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--card);padding:0 14px;font-size:16px}
.row-btns{display:flex;gap:10px;margin-top:12px}.row-btns .btn{flex:1;margin:0}
.pviews{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 20px 4px}
.single-view-note{padding:10px 20px 4px;font-size:13px;color:var(--ink3)}
.pviews button{position:relative;border-radius:12px;overflow:hidden;border:2px solid transparent;aspect-ratio:3/3.2;background:#e3e6e1}
.pviews button.on{border-color:var(--g)}
.pviews img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.pviews span{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:600;background:rgba(255,255,255,.9);padding:1px 7px;border-radius:6px}
.note{margin-top:14px;font-size:11px;color:var(--ink3)}
.side-card{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;border:1px dashed #C7CCC8;background:var(--card)}
.side-card .ic{width:36px;height:36px;border-radius:10px;background:var(--g2);color:var(--g);display:grid;place-items:center;flex:none}.side-card .ic svg{width:18px;height:18px}
.side-card img{width:36px;height:44px;border-radius:8px;object-fit:cover;flex:none}
.side-card .tx{flex:1;min-width:0}.side-card b{display:block;font-size:13px}.side-card span{font-size:11px;color:var(--ink3)}
/* v7 layout */
.body.need{display:flex;flex-direction:column}.need .consent{margin-top:auto;padding-top:16px}
.pair{display:flex;align-items:center;gap:12px;margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px}
.pair img{width:84px;aspect-ratio:3/4;border-radius:12px;object-fit:cover;flex:none}.pair .ar{color:var(--ink3);font-size:18px}
.pair .tx{flex:1;min-width:0}.pair .tx b{display:block;font-size:15px}.need .ck.big{min-height:84px}
.me img{width:52px;height:64px;border-radius:10px;object-fit:cover}
/* v8 design system: 4/8 spacing, 12/14/16/20/24 type, radius 8/12/16, one filled primary, gray-filled secondary */
:root{--bg:#F6F6F3;--fill:#EEEFEA;--r:16px;--r2:12px}
.btn{height:48px;border-radius:var(--r2);font-size:16px}
.btn.s{background:var(--fill);border:0;color:var(--ink)}
.btn.g{background:rgba(255,255,255,.16);color:#fff;border:0}
.btn.sm{height:36px;font-size:14px;border-radius:10px;padding:0 14px}
.btn.fit{flex:none;padding:0 20px}
.top h1{font-size:17px}
.step{width:44px;text-align:center;font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums}
.dock{border-top:0;box-shadow:0 -1px 0 var(--line)}
.me,.more,.side-card{border:0;box-shadow:0 1px 2px rgba(20,30,25,.04)}
.lbl{font-size:14px;color:var(--ink);margin:24px 0 12px}
/* step 1: reference picker, album-grid pattern (小红书/醒图 import grid, album tile first) */
.refbar{flex:none;display:flex;gap:8px;padding:4px 16px 12px}
.refbar button{height:32px;padding:0 16px;border-radius:16px;background:var(--fill);font-size:14px;color:var(--ink2)}
.refbar button.on{background:var(--ink);color:#fff;font-weight:600}
.rgrid-wrap{padding:0 2px 12px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.rt{position:relative;aspect-ratio:3/4;overflow:hidden;background:#ddd;display:block}
.rt img{width:100%;height:100%;object-fit:cover;display:block}
.rt .nm{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:12px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.rt.album{background:#25302B;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.rt.album svg{width:28px;height:28px}.rt.album span{font-size:14px;font-weight:600}.rt.album em{font-style:normal;font-size:11px;opacity:.6}
.rt.on:after{content:"";position:absolute;inset:0;border:3px solid var(--g);pointer-events:none}
.ck2{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center}.ck2 svg{width:14px;height:14px;stroke-width:2.4}
.dthumb{width:40px;height:52px;border-radius:8px;object-fit:cover;flex:none}
.dtx{flex:1;min-width:0}.dtx b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dtx span{font-size:12px;color:var(--ink3)}
/* needs: what you picked, tappable to change */
.pair{display:flex;align-items:center;gap:8px;margin-top:4px;background:var(--card);border-radius:var(--r);padding:12px;box-shadow:0 1px 2px rgba(20,30,25,.04)}
.pair button{position:relative;flex:none;border-radius:10px;overflow:hidden}
.pair img{width:88px;aspect-ratio:3/4;object-fit:cover;display:block}
.pair button span{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:2px 0}
.pair .ar{color:var(--ink3)}.pair .ar svg{width:16px;height:16px}
.pair .tx{flex:1;min-width:0;padding-left:4px}.pair .tx b{display:block;font-size:16px;margin-bottom:2px}
/* 帮我设计 photo */
.photo-card{width:100%;height:168px;margin-top:8px;border-radius:var(--r);background:var(--card);border:1.5px dashed #C9CEC9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.photo-card .ph0{width:52px;height:52px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;margin-bottom:6px}
.photo-card b{font-size:16px}
.me-l img{width:60px;height:80px;border-radius:10px}
/* camera: full-bleed viewfinder, controls float on top (抖音/Instagram/系统相机) */
.cam{position:absolute;inset:0;z-index:20;background:#000;color:#fff}
.cam-view{position:absolute;inset:0;overflow:hidden;background:#111}
.cam-view video,.cam-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-view video.mir{transform:scaleX(-1)}
.cam-view .guide{position:absolute;inset:56px 0 0;width:100%;height:calc(100% - 56px);pointer-events:none;overflow:visible}.cam-view .guide ellipse{fill:none;stroke:#fff;stroke-width:2;stroke-opacity:.9}
.cam-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 24px;padding-top:max(8px,env(safe-area-inset-top));font-size:16px;font-weight:600;background:linear-gradient(rgba(0,0,0,.45),transparent)}.cam-top .ib{color:#fff}
.cam-tip{position:absolute;left:50%;top:76px;transform:translateX(-50%);white-space:nowrap;font-size:13px;padding:6px 14px;border-radius:16px;background:rgba(0,0,0,.45)}
.cam-err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}.cam-err b{font-size:17px}.cam-err p{font-size:14px;opacity:.7;margin-bottom:8px}.cam-err .btn{width:220px;flex:none}
.cam-resume{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0006}.cam-resume .btn{flex:none;width:200px}
.shutter[aria-disabled="true"]{opacity:.45}
.cam-bar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;padding:24px 24px 32px;padding-bottom:max(32px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.55))}
.cam-alb{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:12px}
.cam-alb svg{width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(255,255,255,.18);stroke-width:1.6}
.shutter{width:76px;height:76px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(0,0,0,.25),0 0 0 8px #fff}.shutter[aria-disabled=true]{opacity:.4}.shutter:active{transform:scale(.94)}
.cam-txt{color:#fff;font-size:17px;padding:10px 4px}.cam-txt.b{font-weight:700}
@media (min-width:501px){
html,body{height:100%;overflow:hidden;background:#edf2ef}
.phone{position:fixed;left:50%;top:50%;width:390px;max-width:none;height:844px;box-sizing:content-box;border:10px solid #203c33;border-radius:48px;box-shadow:0 0 0 1px #bfcec4,0 10px 35px #203c3314;transform:translate(-50%,-50%) scale(var(--phone-scale,1));transform-origin:center;margin:0}
}
/* camera examples: one row of real photos, ✓ do / ✗ don't (ID-photo apps, YouCam tips) */
.cam.ex{--sb:max(24px,env(safe-area-inset-bottom));--ex:156px}
.cam.ex .cam-view{bottom:calc(var(--sb) + 88px + var(--ex))}
.cam.ex .cam-bar{background:#000;padding:12px 24px var(--sb)}
.cam-ex{position:absolute;left:0;right:0;bottom:calc(var(--sb) + 88px);height:var(--ex);box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 20px 8px;margin:0;list-style:none;background:#000}
.cam-ex li{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.cam-ex .im{position:relative;width:72px;height:96px}
.cam-ex img{width:72px;height:96px;border-radius:12px;object-fit:cover;display:block}
.cam-ex li.no img{opacity:.9}
.cam-ex i{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2px #000}
.cam-ex i svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none}
.cam-ex .ok i{background:#2F8F5B}.cam-ex .no i{background:#C2483A}
.cam-ex span{font-size:12px;line-height:16px;color:rgba(255,255,255,.9);text-align:center}
/* ---------- 我的 v3: immersive header, stats, quick entries, sticky tabs over 3-column grids (抖音/小红书/红果 profile) ---------- */
.body.me3{padding:0;background:var(--bg)}
.mhero{position:relative;color:#fff;padding:max(8px,env(safe-area-inset-top)) 0 34px;overflow:hidden;cursor:pointer}
.mbg{position:absolute;inset:0;background:linear-gradient(160deg,#2F5A4B 0%,#22463A 55%,#1B3A30 100%) center 30%/cover}
.mhero.own .mbg:after,.mhero.blur .mbg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,27,.3),rgba(20,32,27,.62))}
.mhero.blur .mbg{filter:blur(18px) saturate(.9);transform:scale(1.25)}
.mhero.plain .mbg:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 90% 0%,rgba(255,255,255,.12),transparent 60%)}
.mhero>*:not(.mbg){position:relative;z-index:1}
.mnav{display:flex;justify-content:flex-end;gap:10px;padding:4px 16px 0}
.hb{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hb svg{width:19px;height:19px}
.mprof{display:flex;align-items:center;gap:16px;padding:10px 20px 0}
.mava{width:80px;height:80px;border-radius:50%;border:2.5px solid rgba(255,255,255,.9);background:#E9EEE9 center/cover;flex:none;position:relative;display:grid;place-items:center;color:#2F5A4B;font-size:30px;font-weight:600}
.mava .badge{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:#fff;color:#22463A;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}.mava .badge svg{width:14px;height:14px;stroke-width:2}
.mpn{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.mname{font-size:22px;font-weight:700;letter-spacing:.3px;color:#fff;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.msub{font-size:12.5px;opacity:.8;margin-top:5px}
.mcur{margin-top:9px;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#fff;background:rgba(255,255,255,.16);padding:4px 7px 4px 6px;border-radius:12px;max-width:100%;white-space:nowrap}
.mcur img{width:18px;height:18px;border-radius:50%;object-fit:cover}.mcur svg{width:12px;height:12px;opacity:.7}
.mstats{display:flex;align-items:center;padding:18px 20px 0;gap:20px}
.mst{display:flex;align-items:baseline;gap:4px;font-size:12.5px;color:rgba(255,255,255,.92);white-space:nowrap}.mst b{font-size:17px;font-weight:700;color:#fff}.mst.due b{color:#FFD9A8}
.medit{margin-left:auto;height:32px;padding:0 14px;border-radius:16px;border:1px solid rgba(255,255,255,.55);font-size:13px;color:#fff;white-space:nowrap;flex:none}
.mmain{position:relative;margin-top:-18px;padding-top:4px;background:var(--bg);border-radius:18px 18px 0 0;z-index:1;padding-bottom:24px;min-height:calc(100% - 120px)}
.mtip{margin:12px 14px 2px;background:var(--card);border-radius:14px;display:flex;align-items:center;gap:8px;padding:10px;box-shadow:0 1px 2px rgba(20,30,25,.05)}
.mtip-m{flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left}
.mtip-m img,.mtip-m .pvi{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.mtip-m b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtip-m>span{min-width:0}.mtip-m>span>span{font-size:12px;color:var(--ink3);margin-top:3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtip .go{height:32px;padding:0 13px;border-radius:16px;background:var(--warnbg);color:var(--warn);font-size:13px;font-weight:600;white-space:nowrap;flex:none}
.mtip .x{color:#B3B8B5;width:28px;height:32px;display:grid;place-items:center;flex:none}.mtip .x svg{width:15px;height:15px}
.pvi{display:grid;place-items:center;background:var(--g2);color:var(--g)}
.mtabs{position:sticky;top:0;border-radius:18px 18px 0 0;z-index:3;background:var(--bg);display:flex;align-items:center;padding:4px 6px 0 8px;margin-top:0;border-bottom:.5px solid var(--line)}
.mtabs button{height:46px;padding:0 10px;font-size:16px;color:var(--ink3);position:relative;white-space:nowrap}
.mtabs button.on{color:var(--ink);font-weight:700}
.mtabs button.on:after{content:"";position:absolute;left:50%;bottom:0;width:22px;height:3px;border-radius:2px;background:var(--g);transform:translateX(-50%)}
.mtabs sup{font-size:11px;color:#9AA29E;font-weight:400;margin-left:2px;vertical-align:4px}
.mtabs .msr{margin-left:auto;color:var(--ink2);width:40px;padding:0;display:grid;place-items:center}.mtabs .msr.on{color:var(--g)}.mtabs .msr:after{display:none}
.msearch{display:flex;align-items:center;gap:8px;padding:10px 14px 0}
.msearch input{flex:1;height:36px;border-radius:18px;border:0;background:var(--fill);padding:0 14px;font-size:15px;font-family:inherit;color:var(--ink)}
.msearch button{font-size:14px;color:var(--ink2);height:36px}
.mchips{display:flex;align-items:center;gap:8px;padding:12px 14px 4px}
.mcl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}.mcl::-webkit-scrollbar{display:none}
.mchips .chip{height:30px;padding:0 13px;border-radius:15px;border:0;background:#E9EAE5;font-size:13px;color:#4A534F;flex:none;gap:2px}
.mchips .chip.on{background:var(--g2);color:var(--g);font-weight:600}.mchips .chip.add{background:none;color:var(--g);padding:0 6px}
.chip.add svg,.mrow svg{width:16px;height:16px}
.mcr{display:flex;gap:12px;font-size:13.5px;color:var(--ink2);flex:none;align-items:center}.mcr button{height:30px}.mcr .addc{display:flex;align-items:center;gap:2px;color:var(--g);font-weight:600}.mcr .addc svg{width:15px;height:15px}.mcr i{width:1px;height:12px;background:#D5D7D2}
.mgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px;padding:10px 14px 0}
.gi{text-align:left;min-width:0;-webkit-touch-callout:none;user-select:none}
.gi .ph{aspect-ratio:3/4;border-radius:8px;background:#DDE0DA;position:relative;overflow:hidden}
.gi .ph img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.gi .tg{position:absolute;right:5px;top:5px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.45);padding:1px 6px;border-radius:4px;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gi .tg.pin{background:var(--g)}
.gi .ph.txt{background:var(--card);padding:10px 8px;display:flex;flex-direction:column;gap:5px;border:.5px solid var(--line)}
.gi .ph.txt b{font-size:13px;line-height:1.3}.gi .ph.txt p{font-size:10.5px;color:#6E7773;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gi .ph.txt p span{color:var(--ink3);margin-right:4px}.gi .ph.txt .nv{margin-top:auto;color:var(--warn)}
.gi .ph.txt .ti{width:30px;height:30px;border-radius:50%;background:var(--g2);color:var(--g);display:grid;place-items:center;margin-top:18px}.gi .ph.txt .ti svg{width:16px;height:16px}
.gi .t{font-size:13px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.gi .s{font-size:11.5px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gi .s.w{color:var(--warn)}
.gi.sel .ph{outline:2px solid var(--g);outline-offset:-2px}
.bk{position:absolute;left:6px;top:6px;width:20px;height:20px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.2)}
.bk.on{background:var(--g);border-color:var(--g)}
.bk.on:after{content:"";position:absolute;left:5.5px;top:2.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hsum3{display:flex;margin:12px 14px 0;background:var(--card);border-radius:14px;padding:12px 0}
.hsum3 button{flex:1;min-width:0;text-align:center;border-right:.5px solid #ECEDE9;padding:0 4px}.hsum3 button:last-child{border:0}
.hsum3 b{font-size:18px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hsum3 span{font-size:11.5px;color:var(--ink3)}
.hlist{padding:0 14px}
.hy{font-size:13px;color:var(--ink3);margin:14px 2px 8px;font-weight:600}
.hr{position:relative;background:var(--card);border-radius:14px;margin-bottom:8px}.hr.sel{outline:2px solid var(--g);outline-offset:-2px}
.hr-m{display:flex;gap:12px;padding:10px;width:100%;text-align:left;-webkit-touch-callout:none;user-select:none}
.hr .ims{display:flex;gap:3px;flex:none}
.hr .ims img{width:58px;height:76px;border-radius:7px;object-fit:cover;display:block}
.hr .nop{width:58px;height:76px;border-radius:7px;display:grid;place-items:center;color:#A7AEAA;font-size:11px;background:#F1F2EE}
.hr .in{flex:1;min-width:0;display:flex;flex-direction:column;margin:0}
.hr .in b{font-size:15px;padding-right:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hr .m{font-size:12px;color:var(--ink3);margin-top:4px}
.hr .n{font-size:12px;color:var(--ink2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr .ft{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px}.hr .ft .m{margin:0}
.mood{font-size:11px;padding:1px 6px;border-radius:4px;background:var(--g2);color:var(--g)}.mood.bad{background:var(--warnbg);color:var(--warn)}.mood.ok{background:#EFEFEA;color:#6E7773}
.hr .again{position:absolute;right:10px;top:10px;font-size:12.5px;color:var(--g);font-weight:600;height:28px;padding:0 10px;border-radius:14px;background:var(--g2)}
.hr>.bk{left:auto;right:12px;top:12px;border-color:#C9CCC7}
.mempty{padding:40px 40px 20px;text-align:center}
.mempty .ill{width:120px;height:120px;margin:0 auto 14px;border-radius:50%;background:#E9ECE7;overflow:hidden}.mempty .ill img{width:100%;height:100%;object-fit:cover;opacity:.9}
.mempty b{font-size:15.5px;display:block}.mempty p{font-size:13px;color:var(--ink3);margin-top:6px;line-height:1.6}
.mempty .bts{display:flex;gap:10px;justify-content:center;margin-top:18px}
.mempty .bts button{height:38px;padding:0 18px;border-radius:19px;background:#E9EAE5;font-size:14px;font-weight:600}.mempty .bts button.p{background:var(--g);color:#fff}
.fempty{padding:36px 30px;text-align:center;font-size:13px;color:var(--ink3);line-height:1.6}
.mbatch{flex:none;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);background:var(--card);padding:10px 14px 30px}
.ball{flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);height:40px}.ball .bk{position:relative;left:0;top:0;border-color:#C9CCC7;background:none;flex:none}.ball .bk.on{background:var(--g);border-color:var(--g)}
.bb{height:40px;padding:0 16px;border-radius:20px;background:#E9EAE5;font-size:14px;font-weight:600;white-space:nowrap}.bb.d{background:var(--warnbg);color:var(--warn)}.bb[aria-disabled=true]{opacity:.4}
/* sheets */
.sheet{max-height:86%;overflow:auto}
.shd{font-size:17px;padding:0 4px 4px}.shs{font-size:13px;color:var(--ink3);padding:0 4px 8px;line-height:1.55}
.mrow{display:flex;align-items:center;gap:6px;width:100%;height:52px;border-bottom:1px solid var(--line);font-size:16px;padding:0 4px;text-align:left}
.mrow.danger,.link.danger{color:var(--warn)}
.mcancel{display:block;text-align:center;width:calc(100% + 40px);margin:12px -20px -30px;height:56px;border-top:8px solid var(--fill);font-size:15px;color:var(--ink2);padding-bottom:6px}
.sheet .pv{display:flex;gap:12px;padding:0 4px 14px;align-items:center}
.sheet .pv img,.sheet .pv .pvi{width:52px;height:68px;border-radius:8px;object-fit:cover;flex:none}
.sheet .pv div{min-width:0}.sheet .pv b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sheet .pv span{display:block;font-size:12px;color:var(--ink3);margin-top:4px}
.ops{display:grid;grid-template-columns:repeat(4,1fr);padding:4px 0 6px;border-top:.5px solid var(--line);row-gap:6px}
.ops button{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--ink2);padding-top:12px}
.oi{width:48px;height:48px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--g)}.oi.r{color:var(--warn)}
.sav{width:36px;height:36px;border-radius:50%;background:var(--g2) center/cover;color:var(--g);display:grid;place-items:center;font-style:normal;font-weight:700}
.blist{margin-top:4px}
.brow{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;border-bottom:1px solid var(--line);text-align:left;padding:8px 4px}
.bava{width:38px;height:38px;border-radius:50%;background:#EFE9E0;color:#7A5A2E;display:grid;place-items:center;font-weight:700;flex:none}
.btx{flex:1;min-width:0}.btx b{display:block;font-size:15px}.btx span{font-size:12px;color:var(--ink3)}.brow>svg{width:16px;height:16px;color:var(--ink3)}
.gpick{display:flex;flex-wrap:wrap;gap:8px;padding:4px 4px 6px}.gpick .chip{height:34px;gap:4px}
.grow{display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--line);padding:0 4px}.grow span{flex:1;font-size:16px}.grow em{font-style:normal;font-size:12px;color:var(--ink3);margin-left:6px}
.tsum{display:flex;flex-wrap:wrap;gap:6px;padding:2px 4px 8px}.tsum span{font-size:12px;background:var(--fill);border-radius:6px;padding:3px 8px;color:var(--ink2)}
.sheet .in{display:block;margin-top:12px}
.set{margin-top:8px}
.set-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;border-bottom:1px solid var(--line);text-align:left;font-size:16px;padding:8px 0}
.set-row>span{flex:1}.set-row small{display:block;font-size:12px;color:var(--ink3);margin-top:2px}.set-row em{font-style:normal;color:var(--ink3);font-size:14px}.set-row>svg{width:16px;height:16px;color:var(--ink3)}
.set-row.col{flex-direction:column;align-items:stretch;gap:10px;padding:12px 0}
.seg2{display:flex;background:var(--fill);border-radius:10px;padding:3px}.seg2 button{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:0;height:34px;border-radius:8px;font-size:14px;color:var(--ink2)}.seg2 button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg2.wide{margin-top:10px}
.tg2{width:44px;height:26px;border-radius:13px;background:#D5D8D3;position:relative;flex:none;transition:background .2s}.tg2:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tg2.on{background:var(--g)}.tg2.on:after{transform:translateX(18px)}
.pnote{display:flex;gap:8px;font-size:12px;color:var(--ink3);line-height:1.6;padding:14px 0}.pnote svg{width:14px;height:14px;flex:none;margin-top:3px}
/* 我剪了 form */
.cutf .lbl em{font-style:normal;font-weight:400;color:var(--ink3);font-size:12px;margin-left:6px}
.cslots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cslot{aspect-ratio:3/4;border-radius:12px;overflow:hidden;position:relative;background:var(--card)}
.cslot img{width:100%;height:100%;object-fit:cover}
.cslot .add{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink3);font-size:13px;border:1.5px dashed #D5D8D3;border-radius:12px}
.cslot .x{position:absolute;right:4px;top:4px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center}.cslot .x svg{width:14px;height:14px}
.cutf .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.cutf .chips .chip{height:32px;gap:6px}.cutf .chips .chip i{font-style:normal;font-size:11px;opacity:.7}
.field{display:block}.field input,.field textarea{width:100%;height:48px;border-radius:12px;border:0;background:var(--card);padding:0 14px;font-size:16px;font-family:inherit;color:var(--ink);box-shadow:0 1px 2px rgba(20,30,25,.05)}
.field textarea{height:auto;padding:12px 14px;line-height:1.5;resize:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.cutf .ck{min-height:48px}
/* cut detail */
.cvhero{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;max-height:52vh;width:100%;background:#E9EAE5}.cvhero img{width:100%;height:100%;object-fit:cover}
.cutv .card-title{margin-top:16px}
.link-row{width:100%;text-align:left;align-items:center;display:grid;grid-template-columns:52px 1fr 16px!important}.link-row p{color:var(--g);font-weight:600}.link-row svg{width:16px;height:16px;color:var(--ink3)}
.addph{display:flex;align-items:center;gap:8px;width:100%;margin-top:20px;padding:14px;border-radius:12px;border:1.5px dashed #D5D8D3;color:var(--ink2);font-size:14px}.addph svg{width:18px;height:18px}
/* barber card v2 */
.card-title.solo{margin-top:8px;font-size:26px}
.lastcut{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;color:var(--g);font-weight:600}.lastcut svg{width:16px;height:16px}
/* share overlay */
.shareov{position:absolute;inset:0;background:#141816;z-index:9;display:flex;flex-direction:column;animation:fd .2s}
.sv-top{display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.8);font-size:14px;padding:max(8px,env(safe-area-inset-top)) 6px 4px 20px}.sv-top .ib{color:#fff}
.sv-img{flex:1;min-height:0;overflow:auto;padding:8px 24px;display:flex;flex-direction:column}.sv-img img{width:100%;margin:auto 0;border-radius:12px;display:block;flex:none;-webkit-touch-callout:default;user-select:auto}
.sv-views{display:flex;justify-content:center;gap:8px;padding:8px 20px;flex:none}
.shareov .sv-views button{min-width:64px;border-radius:8px;background:#28372F;color:#DDE5DF;font-size:14px}.sv-views button.on{background:#fff;color:#244E40}
.sv-bar{padding:12px 20px max(16px,env(safe-area-inset-bottom))}.sv-bar .btn{width:100%}
.mpane{min-height:calc(100dvh - 126px)}
@media (min-width:501px){.mpane{min-height:718px}}
/* 头发档案 */
.hcount{width:40px;text-align:right;padding-right:10px;font-size:13px;color:var(--ink3)}
.hairp{padding-bottom:24px}
.hprog{padding:4px 0 6px}.hprog span{display:block;font-size:12px;color:var(--ink3);margin-top:8px}
.hbar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}.hbar i{display:block;height:100%;background:var(--g);border-radius:2px;transition:width .25s}
.hsec{margin-top:18px;background:var(--card);border-radius:var(--r);padding:4px 14px 14px}
.hsec h3{font-size:13px;font-weight:600;color:var(--ink3);padding:12px 0 2px}
.hf{padding-top:12px}.hl{font-size:14px;font-weight:600;margin-bottom:9px;display:flex;align-items:baseline;gap:6px}.hl em{font-style:normal;font-weight:400;font-size:12px;color:var(--ink3)}
.hch{display:flex;flex-wrap:wrap;gap:8px}
.hc{height:34px;padding:0 14px;border-radius:17px;background:var(--fill,#EEEFEA);border:1px solid transparent;font-size:13px;color:var(--ink2)}
.hc.on{background:var(--g2);border-color:var(--g);color:var(--g);font-weight:600}
.hairp .pnote{margin-top:16px}
.sgl{font-size:12px;color:var(--ink3);margin:6px 2px 6px}
.set+.sgl{margin-top:16px}
.set-row .hpct{width:44px;height:4px;border-radius:2px;background:var(--line);overflow:hidden;flex:none;margin-right:6px;padding:0}.set-row .hpct i{display:block;height:100%;background:var(--g)}
.mhair{display:inline-flex;align-items:center;gap:2px;margin-top:6px;height:24px;padding:0 6px 0 10px;border-radius:12px;background:rgba(255,255,255,.9);color:var(--g);font-size:12px;font-weight:600;width:fit-content}.mhair svg{width:14px;height:14px}
.hnudge{display:flex;align-items:center;margin-top:12px;background:var(--g2);border-radius:12px;font-size:13px;color:var(--ink2)}
.hnudge .go{flex:1;display:flex;justify-content:space-between;align-items:center;padding:11px 4px 11px 14px;text-align:left;color:var(--ink2);font-size:13px}.hnudge .go b{color:var(--g)}
.hnudge .x{width:40px;height:40px;color:var(--ink3);font-size:18px}
.fmine{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 32px);margin:2px 16px 6px;font-size:12px;color:var(--ink3)}
.fmine .tg2{transform:scale(.8);transform-origin:right center}
.hobt{justify-content:space-between}.hskip{padding:0 14px;height:40px;color:var(--ink3);font-weight:400}
.hdots{display:flex;gap:6px}.hdots i{width:18px;height:3px;border-radius:2px;background:var(--line)}.hdots i.on{background:var(--g)}
.hob{padding-top:18px}.hob .hobn{font-size:12px;color:var(--ink3)}.hob h2{font-size:24px;font-weight:700;margin:6px 0 4px}.hob>.cap{margin-bottom:14px}
.hob .hf{padding-top:18px}.hob .hc{height:40px;padding:0 18px;border-radius:20px;font-size:14px}
.hobp{margin-top:28px;display:flex;align-items:center;gap:4px}.hobp svg{width:13px;height:13px}

.brandbar{display:flex;align-items:center;gap:7px;padding:10px 0 2px;color:#111}.brandbar img{width:26px;height:26px;display:block;margin:-3px -4px -3px -5px}.brandbar b{font-size:16px;font-weight:600;letter-spacing:.08em}.brandbar span{font-size:10px;font-weight:500;letter-spacing:.22em;color:#8a8a85;padding-top:2px}

/* ---------- 找店 ---------- */
.find-top{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px 6px;border-bottom:1px solid var(--line);background:var(--bg)}
.find-top.v2{gap:8px}
.find-kw{flex:1;min-width:0}
.find-kw input{width:100%;height:36px;border-radius:18px;border:1px solid var(--line);background:#F0F1EC;padding:0 14px;font-size:14px;color:var(--ink)}
.find-kw input::placeholder{color:var(--ink3)}
.find-top .maplink{flex:none;padding:0 8px;font-size:14px}
.find-toolbar{display:flex;flex:none;align-items:stretch;background:var(--card);border-bottom:1px solid var(--line);position:relative;z-index:2}
.find-bar{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 4px 4px 10px;scrollbar-width:none}
.find-bar::-webkit-scrollbar{display:none}
.find-bar .fdrop{flex:none;max-width:104px;min-width:44px;height:44px;padding:0 6px;border:0;border-radius:6px;background:transparent;font-size:13px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:4px;white-space:nowrap}
.find-bar .fdrop>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.find-chevron{display:flex;flex:none}.find-chevron svg{width:12px;height:12px;stroke-width:2}
.fdrop[aria-expanded="true"] .find-chevron{transform:rotate(180deg)}
.find-bar .fdrop.on{color:var(--g);background:var(--g2)}
.find-bar .chip{height:44px;min-width:44px;font-size:12px;background:transparent;border:0;flex:none;padding:0 8px;position:relative;isolation:isolate}
.find-bar .chip::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:6px;background:#F0F1EC}
.find-bar .chip.on{background:transparent;color:var(--g);font-weight:600}
.find-bar .chip.on::before{background:var(--g2)}
.find-toolbar .ffunnel{flex:none;position:relative;width:44px;min-width:44px;margin:4px 4px 4px 0;padding:0;border-left:1px solid var(--line);background:var(--card);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.find-toolbar .ffunnel svg{width:22px;height:22px;stroke-width:1.6}
.find-toolbar .ffunnel.on{color:var(--g)}
.filter-count{position:absolute;top:0;right:0;background:var(--g);color:#fff;min-width:16px;height:16px;padding:0 3px;border:1px solid var(--card);border-radius:8px;display:grid;place-items:center;font-size:10px}
.find-content{flex:1;min-height:0;position:relative;isolation:isolate;overflow:hidden}
.find-results{height:100%;display:flex;flex-direction:column}
.body.find{flex:1;min-height:0;overflow:auto;padding:0 16px 88px;position:relative}
.mask.soft{background:rgba(20,30,25,.28)}
.find-content .find-drop{inset:0;background:rgba(20,30,25,.28);animation:none;z-index:4}
.find-panel{position:absolute;left:0;right:0;top:0;z-index:5;margin:0;background:var(--card);border-radius:0 0 16px 16px;box-shadow:0 12px 20px rgba(20,30,25,.10);max-height:calc(100% - 64px);overflow:hidden;display:flex;flex-direction:column;animation:findDropdownIn .16s ease-out;transform-origin:top center}
.find-panel.near,.find-panel.filter-options{height:min(560px,calc(100% - 64px));padding:0}
.find-panel.sort{padding:6px 0 10px;overflow:auto}
.find-panel-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:18px 20px 8px}
.filter-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.filter-heading b{font-size:17px}.filter-heading span{font-size:12px;color:var(--ink3)}
.find-panel.filter-options .np-sec{margin-bottom:24px}
.find-panel.filter-options .np-h{font-size:14px;color:var(--ink);display:flex;gap:8px;align-items:center}
.find-panel.filter-options .np-h span{font-size:12px;font-weight:400;color:var(--ink3)}
.find-panel.filter-options .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.find-panel.filter-options .chip{justify-content:center;padding:0 4px;border-radius:8px;min-width:0}
.filter-note{font-size:12px;color:var(--ink3);line-height:1.5;margin-top:8px}
.find-summary{padding:14px 0 2px;font-size:13px;color:var(--ink2)}
.find-summary span{display:block;font-size:12px;color:var(--ink3);margin-top:3px}
@keyframes findDropdownIn{from{opacity:.5;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.find-panel{animation:none}}
.np-body{display:flex;flex:1;min-height:0;overflow:hidden}
.np-body.three .np-cats{width:88px}
.np-cats{width:104px;flex:none;background:#F0F1EC;overflow:auto;scrollbar-width:none}
.np-cats button{display:block;width:100%;text-align:left;padding:14px 10px;border:0;background:transparent;font-size:13px;color:var(--ink2);border-left:3px solid transparent}
.np-cats button.on{background:var(--bg);color:var(--ink);font-weight:700;border-left-color:var(--g)}
.np-mid{width:96px;flex:none;background:#F5F5F1;overflow:auto;scrollbar-width:none}
.np-mid button{display:block;width:100%;text-align:left;padding:13px 10px;border:0;background:transparent;font-size:13px;color:var(--ink2)}
.np-mid button.on{background:var(--bg);color:var(--ink);font-weight:700}
.np-right{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;padding:10px 12px 12px;scrollbar-width:none;background:var(--card)}
.np-right-in{display:flex;flex-direction:column;gap:8px;min-height:100%}
.np-pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit}
.np-pick:last-child{border-bottom:0}
.np-pick-t{flex:1;min-width:0}
.np-pick-t b{display:block;font-size:14px;font-weight:500}
.np-pick.on .np-pick-t b{font-weight:700;color:var(--g)}
.np-pick-t span{font-size:12px;color:var(--ink3)}
.np-mark{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #C9CEC9;display:grid;place-items:center;color:transparent}
.np-mark.box{border-radius:5px}
.np-mark.on{background:var(--g);border-color:var(--g);color:#fff}
.np-mark svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none}
.np-gps{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:10px;text-align:left}
.np-gps:disabled{opacity:.55}
.np-gps-ic{flex:none;width:36px;height:36px;border-radius:18px;background:var(--g2);color:var(--g);display:grid;place-items:center}
.np-gps-ic svg{width:18px;height:18px}
.np-gps-t{flex:1;min-width:0}
.np-gps-t b{display:block;font-size:14px}
.np-gps-t em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-gps-act{flex:none;font-size:13px;font-weight:600;color:var(--g)}
.np-sec{margin-bottom:8px}
.np-h{font-size:12px;font-weight:600;color:var(--ink3);margin:4px 0 10px}
.chips.wrap{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;padding:0;mask-image:none;-webkit-mask-image:none;cursor:default}
.chips.wrap .chip{height:32px;background:#F0F1EC;border-color:transparent}
.chips.wrap .chip.on{background:var(--g2);color:var(--g);font-weight:600}
.reloc{margin:14px 0 6px;display:inline-flex}
.np-list{display:flex;flex-direction:column}
.np-foot{flex:none;display:flex;gap:10px;padding:12px 16px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.np-foot .btn.s{flex:0 0 30%}
.np-foot .btn{height:46px;border-radius:12px;font-size:15px}
.sopt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;border:0;background:var(--card);font-size:15px;color:var(--ink);text-align:left}
.sopt.on{font-weight:700;color:var(--g)}
.sopt svg{width:18px;height:18px;color:var(--g)}
.find-search input{width:100%;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);padding:0 14px;font-size:14px}
.recent-places{margin:10px 0 6px;display:flex;flex-wrap:wrap;gap:8px;overflow:visible;padding:0;mask-image:none;-webkit-mask-image:none}
.tips{margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.tip{display:block;width:100%;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:var(--card)}
.tip:last-child{border-bottom:0}
.tip b{display:block;font-size:14px}
.tip span{font-size:12px;color:var(--ink3)}
.slist{margin-top:2px}
.shop{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;color:inherit}
.shop.v2{display:flex;cursor:pointer}
.shop .ic{width:72px;height:72px;border-radius:14px;background:#F0F1EC;color:var(--ink2);flex:none;font-weight:700;font-size:22px;object-fit:cover}
.shop img.ic{display:block;width:72px;height:72px}
.shop span.ic{display:grid;place-items:center}
.shop .ic.ph{border:1px dashed #C9CEC9;background:var(--card)}
.shop .stx{flex:1;min-width:0}
.shop .srow{display:flex;align-items:baseline;gap:10px}
.shop .srow b{flex:1;min-width:0;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop .sdist{flex:none;font-size:12px;color:var(--ink3);font-weight:500}
.shop .smeta{font-size:12px;color:var(--ink2);margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.shop .smeta i{font-style:normal;margin:0 5px;color:var(--ink3);opacity:.55}
.shop .smeta .rate{font-style:normal;font-weight:700;color:var(--ink);background:#F0F1EC;border-radius:4px;padding:0 5px;height:18px;display:inline-flex;align-items:center}
.shop .sopen{font-size:12px;color:var(--ink2);margin-top:3px}
.shop p.addr{font-size:12px;color:var(--ink3);margin-top:3px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop .sbadges{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.sbadges{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;vertical-align:middle;margin-left:6px}
.sbadge{font-size:11px;font-weight:600;font-style:normal;height:20px;padding:0 7px;border-radius:6px;background:#F0F1EC;color:var(--ink2);display:inline-flex;align-items:center}
.sbadge.fav{background:#E8F0EA;color:var(--g)}
.shop.sm{align-items:center}
.shop.sm .stx b{font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;white-space:normal}
.shop.sm p{font-size:12px;color:var(--ink3);margin-top:4px;line-height:1.45}
.shop .nv{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px;flex:none;background:var(--card)}
.shop .nv svg{width:14px;height:14px}
.shop-main{flex:1;min-width:0;display:flex;gap:12px;align-items:flex-start;background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer}
.shop-main .stx{flex:1;min-width:0}
.findmore{width:100%;flex:none;margin:14px 0 4px}
.emptyset{padding:36px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.emptyset p{font-size:14px;color:var(--ink2);line-height:1.55;max-width:260px}
.emptyset .btn{width:100%;max-width:280px}
.cap.mid{text-align:center;padding:40px 0}
.cap.mid-sm{text-align:center;padding:24px 8px;font-size:13px}
.find-fab{position:absolute;right:16px;bottom:max(18px,env(safe-area-inset-bottom));z-index:3;height:40px;padding:0 14px;border-radius:20px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;box-shadow:0 8px 20px rgba(20,30,25,.22);pointer-events:auto}
.find-fab svg{width:15px;height:15px;stroke:#fff}
@media (max-width:375px){
  .find-fab{height:36px;padding:0 12px;font-size:12px;bottom:max(14px,env(safe-area-inset-bottom))}
  .body.find{padding-bottom:96px}
}
.shop-sheet .sphotos{display:flex;gap:8px;overflow:auto;margin:4px 0 12px;scrollbar-width:none}
.shop-sheet .sphotos img{width:112px;height:84px;border-radius:12px;object-fit:cover;flex:none;background:#F0F1EC}
.shop-sheet .shd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shop-sheet .btn.p{width:100%;margin-top:8px}
.shop-sheet .row-btns{margin-top:10px}
.shop-sheet .row-btns .btn,.shop-sheet .row-btns a.btn{margin:0}
.shop-sheet .btn.t{width:100%;margin-top:4px}
.picked{margin:8px 0 12px;padding:12px;border-radius:14px;background:#F5F5F1;border:1px solid var(--line)}
.picked-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.picked-h b{font-size:13px;font-weight:600;color:var(--ink2)}
.picked .shop{border-bottom:0;padding:8px 0 0}
.shops .shop .ic{width:56px;height:56px;border-radius:12px;font-size:18px}
.shops .shop img.ic{width:56px;height:56px;display:block}
.shops .findmore{margin-top:8px}
@media (max-width:375px){
  .shop .ic{width:64px;height:64px}
  .shop img.ic{width:64px;height:64px}
  .find-kw input{font-size:13px}
  .np-cats{width:84px}
  .np-body.three .np-cats{width:78px}
  .np-mid{width:88px}
  .np-body{/* flex fill; height from .find-panel.near */}
}

/* Me: 沟通卡用店 + 收藏门店 */

.reference-rule{margin:20px 0;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);line-height:1.65}
.reference-rule p{margin-top:10px;color:var(--ink2);font-size:15px}
.angles-btn{width:100%;margin:14px 0 8px}
.resume{width:100%;margin-top:14px}
.phone button,.phone a.btn{min-height:44px;min-width:44px}
.phone .chip{height:44px}
.phone .link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px}
.phone .sw{flex-wrap:wrap;gap:4px}
.phone .sw button{width:44px;height:44px;border:7px solid var(--bg);box-shadow:none}
.phone .sw button.on{box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--g)}
.phone .sw .chip{border:1px solid var(--line);width:auto;padding:0 12px}
.phone .trycolor .sw{flex-wrap:nowrap;justify-content:space-between;gap:6px}
.phone .ck span,.phone .tabbar button{font-size:13px}
.bc .card-name{margin:0 0 8px;font-size:24px;line-height:1.35}
.card-views-head{display:flex;justify-content:space-between;gap:8px;margin:18px 0 8px;color:var(--ink2);font-size:12px}
.card-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.card-photos.single{grid-template-columns:minmax(0,190px);justify-content:center}
.card-view{padding:0;border:0;background:transparent;color:var(--ink);text-align:center;min-width:0}
.card-view-image{display:flex;position:relative;aspect-ratio:3/4;width:100%;border-radius:10px;background:#F0F3EF;overflow:hidden;align-items:center;justify-content:center}
.card-view-image img{width:100%;height:100%;object-fit:contain;display:block}
.card-view.missing .card-view-image{flex-direction:column;gap:8px;border:1px dashed #C7D1C9}
.card-view-image small{font-size:11px;color:var(--ink2)}
.card-view-label{display:block;margin:7px 0 0;font-size:13px;font-weight:500;line-height:1.4}
.card-complete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin:12px 0;padding:6px 10px;border-radius:8px;background:var(--g2);font-size:12px;color:var(--ink2)}
.card-complete .link{font-size:13px}.card-complete>span{line-height:1.6}
.bc .talk,.bc .spec p,.card-details p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.7}
.bc .sec.row2{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.bc .card-talk .talk{margin:0 0 8px}
.card-reminders{margin:18px 0;padding:2px 0 2px 12px;border-left:2px solid var(--warn)}
.card-reminders>b{font-size:14px;color:var(--warn)}
.card-reminders ul{padding-left:16px;margin-top:8px}.card-reminders li{font-size:14px;line-height:1.65;overflow-wrap:anywhere;margin:4px 0}
.card-details{margin:10px 0;border-bottom:1px solid var(--line)}
.card-details summary{min-height:44px;display:flex;align-items:center;font-size:15px;color:var(--g);cursor:pointer}
.card-details summary:after{content:'＋';margin-left:auto}
.card-details[open] summary:after{content:'−'}
.card-details p{padding:0 0 14px}
.card-details .row{grid-template-columns:72px minmax(0,1fr);gap:12px}
.card-preview-note{margin-top:12px}
.bc.large .talk,.bc.large .spec p,.bc.large .card-details p{font-size:18px;line-height:1.75}
.bc.large .card-reminders li{font-size:17px;line-height:1.75}
.sv-bar{display:flex;flex-wrap:wrap;gap:8px}
.sv-bar .btn{flex:1 1 40%;width:auto}
.sv-bar p{width:100%;color:#E3E8E4;font-size:13px;line-height:1.5;text-align:center}

.find-panel-scroll::-webkit-scrollbar{display:none}