:root{
  --accent:#F63801;--accent-d:#D93000;--brown:#311E00;--ink:#1A1A1A;--bg:#FAF7F3;--line:#E6DFD6;--tint:#FDEEE6;--green:#2D6A48;--green-t:#E3F0E8;
  --amber:#B7791F;--amber-t:#FBF1DC;--muted:#7A6F63;--card:#FFFFFF;--sub:#F3EEE7;
  --display:'Archivo',system-ui,-apple-system,sans-serif;--sans:'Mulish',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --sbh:54px;--tbh:84px;--s:1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
svg{flex:none}

/* ---------- Desktop stage ---------- */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(900px 600px at 30% 35%,rgba(246,56,1,.10),transparent 60%),radial-gradient(700px 500px at 85% 10%,rgba(49,30,0,.06),transparent 60%),var(--bg)}
.backdrop .range{position:absolute;left:0;right:0;bottom:0;width:100%;height:26vh;fill:rgba(49,30,0,.05)}
.backdrop .range .r2{fill:rgba(49,30,0,.05)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px 32px}
.tb-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--muted);font-size:13px;font-weight:700}
.tb-brand img{height:30px;width:auto}
.tb-brand span{padding-left:14px;border-left:1px solid var(--line)}
.tb-links{display:flex;gap:6px}
.tb-links a{font-size:13px;font-weight:700;color:var(--brown);text-decoration:none;padding:8px 14px;border-radius:999px;transition:background .2s}
.tb-links a:hover{background:rgba(49,30,0,.06)}
.layout{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;gap:72px;padding:76px 32px 40px}
.ribbon{position:fixed;left:16px;bottom:16px;z-index:20;font-size:12px;font-weight:700;color:var(--brown);background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);padding:8px 14px;border-radius:999px;text-decoration:none;box-shadow:0 6px 20px -12px rgba(49,30,0,.35)}
.ribbon span{color:var(--accent);margin:0 2px}
.ribbon:hover{color:var(--accent)}

/* Caption panel */
.panel{width:360px;flex:none}
.p-eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.p-eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);border-radius:2px}
.p-step{font:800 13px var(--display);color:var(--muted);margin:22px 0 6px;letter-spacing:.04em}
.p-title{font:800 40px/1.02 var(--display);letter-spacing:-.02em;color:var(--brown);margin:0 0 14px}
.p-body{font-size:16px;line-height:1.6;color:#4A4036;margin:0 0 14px}
.p-why{font-size:14px;line-height:1.55;color:var(--brown);background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.p-why b{display:block;font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.p-try{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.p-try svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;margin-top:2px}
.p-title,.p-body,.p-why,.p-try{transition:opacity .25s,transform .35s var(--ease)}
.panel.swap .p-title,.panel.swap .p-body,.panel.swap .p-why,.panel.swap .p-try{opacity:0;transform:translateY(6px)}
.p-jump{margin-top:26px}
.p-label{display:block;font:800 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.p-chips{display:flex;flex-wrap:wrap;gap:6px}
.p-chips button{font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--brown);transition:all .2s}
.p-chips button:hover{border-color:var(--brown)}
.p-chips button.on{background:var(--brown);color:#fff;border-color:var(--brown)}
.p-tools{display:flex;gap:8px;margin-top:18px}
.p-tool{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;padding:9px 14px;border-radius:10px;background:var(--tint);color:var(--accent-d);transition:transform .15s}
.p-tool:nth-child(2){background:transparent;color:var(--muted);border:1px solid var(--line)}
.p-tool:active{transform:scale(.96)}
.p-tool svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-qr{display:flex;gap:14px;align-items:center;margin-top:24px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.p-qr .qr{width:84px;height:84px;flex:none;border-radius:8px;overflow:hidden;background:var(--sub)}
.p-qr .qr img,.p-qr .qr svg{width:100%;height:100%}
.p-qr b{display:block;font-size:14px;color:var(--brown);margin-bottom:3px}
.p-qr span{font-size:12.5px;line-height:1.45;color:var(--muted)}

/* Device */
.device-wrap{width:calc(414px*var(--s));height:calc(868px*var(--s));flex:none;position:relative}
.device{position:absolute;top:0;left:0;width:414px;height:868px;transform:scale(var(--s));transform-origin:0 0;border-radius:66px;padding:12px;
  background:linear-gradient(145deg,#4a4540,#1c1a18 30%,#2a2724 70%,#57514a);
  box-shadow:0 0 0 1.5px #0e0d0c,inset 0 0 0 2px rgba(255,255,255,.08),0 60px 100px -40px rgba(49,30,0,.55),0 30px 60px -30px rgba(0,0,0,.35)}
.btn-side{position:absolute;width:4px;background:#2c2926;border-radius:2px}
.btn-side.b1{left:-3px;top:140px;height:30px}.btn-side.b2{left:-3px;top:196px;height:58px}.btn-side.b3{left:-3px;top:266px;height:58px}.btn-side.b4{right:-3px;top:220px;height:92px}
.screen{position:relative;width:390px;height:844px;border-radius:54px;overflow:hidden;background:var(--bg);isolation:isolate}

/* Status bar */
.statusbar{position:absolute;top:0;left:0;right:0;height:var(--sbh);z-index:40;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 44px;pointer-events:none;color:var(--ink);transition:color .3s}
.statusbar.light{color:#fff}
.sb-time{font:700 16px/1 -apple-system,'SF Pro Text',var(--sans);letter-spacing:-.01em}
.island{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:124px;height:36px;background:#000;border-radius:20px}
.sb-icons{display:flex;gap:6px;align-items:center}
.sb-icons svg{fill:currentColor}
.batt{width:25px;height:12px;border:1.3px solid currentColor;border-radius:4px;opacity:.95;padding:1.5px;position:relative}
.batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:currentColor;border-radius:0 2px 2px 0;opacity:.5}
.batt i{display:block;height:100%;width:78%;background:currentColor;border-radius:1.5px}
.home-ind{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink);z-index:60;pointer-events:none;opacity:.9}

/* ---------- Views and transitions ---------- */
.stage{position:absolute;inset:0;overflow:hidden}
.view{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;will-change:transform}
.view .scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;padding:calc(var(--sbh) + 6px) 18px calc(var(--tbh) + 24px)}
.view .scroll::-webkit-scrollbar{display:none}
.view.notab .scroll{padding-bottom:40px}
.view.has-nav .scroll{padding-top:calc(var(--sbh) + 52px)}
.view.enter-push{animation:inR .46s var(--ease) both;box-shadow:-20px 0 40px -20px rgba(0,0,0,.18);z-index:3}
.view.leave-push{animation:outL .46s var(--ease) both}
.view.enter-pop{animation:inL .42s var(--ease) both}
.view.leave-pop{animation:outR .42s var(--ease) both;z-index:3;box-shadow:-20px 0 40px -20px rgba(0,0,0,.18)}
.view.enter-tab{animation:fadeUp .32s var(--ease) both;z-index:2}
.view.leave-tab{animation:fadeOut .2s ease both}
.view.enter-fade{animation:fadeIn .5s ease both;z-index:2}
.view.leave-fade{animation:fadeOut .35s ease both}
.view.enter-up{animation:inUp .5s var(--ease) both;z-index:3}
@keyframes inR{from{transform:translateX(100%)}to{transform:none}}
@keyframes outL{from{transform:none;filter:brightness(1)}to{transform:translateX(-28%);filter:brightness(.92)}}
@keyframes inL{from{transform:translateX(-28%);filter:brightness(.92)}to{transform:none;filter:brightness(1)}}
@keyframes outR{from{transform:none}to{transform:translateX(100%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes inUp{from{transform:translateY(100%)}to{transform:none}}

/* Nav bar for pushed screens */
.navbar{position:absolute;top:0;left:0;right:0;z-index:10;padding-top:var(--sbh);height:calc(var(--sbh) + 46px);display:flex;align-items:center;justify-content:center;background:rgba(250,247,243,.82);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent;transition:border-color .2s}
.navbar.scrolled{border-bottom-color:var(--line)}
.navbar h2{margin:0;font:800 16px var(--display);color:var(--ink);max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbar .back{position:absolute;left:8px;bottom:6px;display:flex;align-items:center;gap:2px;color:var(--accent);font-weight:700;font-size:16px;padding:6px 8px;border-radius:10px}
.navbar .back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.navbar h2{transition:opacity .2s}
.navbar.clear{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.navbar.clear h2{opacity:0}
.navbar.clear .back{background:rgba(255,255,255,.92);color:var(--ink);width:38px;height:38px;border-radius:50%;justify-content:center;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.navbar.clear .back span{display:none}
.navbar .nav-r{position:absolute;right:12px;bottom:6px}

/* Large title */
.lt{display:flex;justify-content:space-between;align-items:flex-end;margin:8px 2px 18px}
.lt .eyeb{font:800 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lt h1{margin:4px 0 0;font:800 30px/1.05 var(--display);letter-spacing:-.02em;color:var(--brown)}
.avatar-btn{width:40px;height:40px;border-radius:50%;background:var(--brown);color:#fff;display:grid;place-items:center;font:800 16px var(--display);position:relative;flex:none}
.avatar-btn .dot{position:absolute;top:0;right:0;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}

/* Tab bar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--tbh);z-index:30;display:flex;justify-content:space-around;padding:8px 6px 0;background:rgba(250,247,243,.86);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-top:1px solid rgba(49,30,0,.08);transition:transform .4s var(--ease),opacity .3s}
.tabbar.hide{transform:translateY(110%);opacity:0}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font:700 10.5px var(--sans);color:#9A8F83;position:relative;padding-top:2px;transition:color .2s}
.tabbar button svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--spring)}
.tabbar button.on{color:var(--accent)}
.tabbar button.on svg{transform:translateY(-1px) scale(1.06)}
.tabbar button:active svg{transform:scale(.86)}
.tabbar .badge{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--accent);color:#fff;font:800 10px/17px var(--sans);padding:0 5px;border:2px solid var(--bg);box-sizing:content-box;transform:scale(0);transition:transform .3s var(--spring)}
.tabbar .badge.show{transform:scale(1)}

/* ---------- Components ---------- */
.tap{transition:transform .16s var(--ease),filter .16s,background .2s;cursor:pointer;user-select:none;-webkit-user-select:none}
.tap:active,.tap.pressed{transform:scale(.97);filter:brightness(.97)}
.card{background:var(--card);border-radius:22px;border:1px solid rgba(49,30,0,.07);box-shadow:0 1px 2px rgba(49,30,0,.04),0 10px 30px -18px rgba(49,30,0,.18);padding:16px}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:26px 4px 10px}
.sec h3{margin:0;font:800 18px var(--display);color:var(--brown);letter-spacing:-.01em}
.sec a,.sec button{text-decoration:none;font-size:14px;font-weight:700;color:var(--accent)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border-radius:16px;background:var(--accent);color:#fff;font:800 16px var(--sans);letter-spacing:-.005em;box-shadow:0 8px 20px -10px rgba(246,56,1,.7);transition:transform .16s var(--ease),box-shadow .2s,background .2s}
.btn:active{transform:scale(.97);box-shadow:0 4px 10px -8px rgba(246,56,1,.7)}
.btn.block{width:100%}
.btn.dark{background:var(--brown);box-shadow:0 8px 20px -12px rgba(49,30,0,.7)}
.btn.soft{background:var(--tint);color:var(--accent-d);box-shadow:none}
.btn.ghost{background:#fff;color:var(--brown);border:1px solid var(--line);box-shadow:none}
.btn.sm{height:38px;padding:0 14px;border-radius:12px;font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--brown);white-space:nowrap;transition:all .2s var(--ease)}
.chip.on{background:var(--brown);border-color:var(--brown);color:#fff}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px}
.chips::-webkit-scrollbar{display:none}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;font:800 11px var(--sans);letter-spacing:.02em}
.tag.fix{background:var(--tint);color:var(--accent-d)}
.tag.watch{background:var(--amber-t);color:var(--amber)}
.tag.pass{background:var(--green-t);color:var(--green)}
.tag.dark{background:rgba(255,255,255,.14);color:#fff}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 17px var(--display);flex:none;background-size:cover;background-position:center 20%}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.list{background:#fff;border-radius:20px;border:1px solid rgba(49,30,0,.07);overflow:hidden}
.li{display:flex;align-items:center;gap:12px;padding:14px 16px;position:relative}
.li+.li::before{content:"";position:absolute;top:0;left:62px;right:0;height:1px;background:var(--line)}
.li .chev{width:16px;height:16px;stroke:#C4B9AD;fill:none;stroke-width:2.4}
.li-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--accent);flex:none}
.li-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.li b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.li small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

/* ---------- Onboarding ---------- */
.onb{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;z-index:5}
.onb-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.onb-track::-webkit-scrollbar{display:none}
.onb-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;padding:calc(var(--sbh) + 20px) 28px 0}
.onb-art{flex:1;display:grid;place-items:center;position:relative;min-height:0}
.onb-slide h2{font:800 34px/1.02 var(--display);letter-spacing:-.025em;color:var(--brown);margin:0 0 12px}
.onb-slide p{font-size:16.5px;line-height:1.5;color:#5B5047;margin:0 0 8px}
.onb-foot{padding:22px 28px 42px;display:flex;flex-direction:column;gap:18px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:7px;height:7px;border-radius:4px;background:#D9CFC4;transition:all .35s var(--ease)}
.dots i.on{width:22px;background:var(--accent)}
.onb-skip{position:absolute;top:calc(var(--sbh) + 6px);right:20px;z-index:3;font-weight:700;color:var(--muted);font-size:15px;padding:6px 8px}
.blob{position:absolute;width:280px;height:280px;border-radius:44% 56% 52% 48%/48% 42% 58% 52%;background:linear-gradient(150deg,#FF6A33,var(--accent));animation:blob 9s ease-in-out infinite}
@keyframes blob{50%{border-radius:56% 44% 42% 58%/52% 58% 42% 48%;transform:rotate(8deg) scale(1.03)}}
.mascot-big{position:relative;width:230px;filter:drop-shadow(0 20px 30px rgba(49,30,0,.3));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
.onb-logo{position:absolute;top:8px;left:0;height:34px}
.mini-stack{position:relative;width:280px;height:300px}
.mini{position:absolute;background:#fff;border-radius:18px;box-shadow:0 20px 40px -20px rgba(49,30,0,.35);padding:14px;font-size:13px;border:1px solid var(--line)}
.mini .row{gap:10px}
.mini b{font-size:14px}
.float1{animation:bob 5s ease-in-out infinite}.float2{animation:bob 6s ease-in-out -2s infinite}.float3{animation:bob 5.5s ease-in-out -1s infinite}

/* ---------- Home ---------- */
.live{background:linear-gradient(160deg,#3D2708,var(--brown) 55%,#241600);color:#fff;border-radius:24px;padding:16px;position:relative;overflow:hidden;box-shadow:0 20px 40px -24px rgba(49,30,0,.8)}
.live::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(246,56,1,.35),transparent 70%)}
.live .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;position:relative;z-index:1}
.pulse{display:inline-flex;align-items:center;gap:7px;font:800 12px var(--sans);letter-spacing:.04em;background:rgba(111,207,151,.16);color:#8EE3B0;padding:5px 10px 5px 8px;border-radius:999px}
.pulse i{width:8px;height:8px;border-radius:50%;background:#6FCF97;box-shadow:0 0 0 0 rgba(111,207,151,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(111,207,151,0)}100%{box-shadow:0 0 0 0 rgba(111,207,151,0)}}
.live .eta{font:800 30px/1 var(--display);letter-spacing:-.02em}
.live .eta small{font:700 13px var(--sans);opacity:.7;margin-left:4px;letter-spacing:0}
.route{position:relative;height:44px;margin:14px 0 12px;z-index:1}
.route .line{position:absolute;left:10px;right:22px;top:21px;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 11px)}
.route .done{position:absolute;left:10px;top:21px;height:3px;border-radius:2px;background:var(--accent);transition:width 1.2s var(--ease)}
.route .van{position:absolute;top:6px;width:36px;height:32px;margin-left:-18px;border-radius:10px;background:var(--accent);display:grid;place-items:center;transition:left 1.2s var(--ease);box-shadow:0 6px 14px -4px rgba(246,56,1,.8)}
.route .van svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.route .pin{position:absolute;right:6px;top:8px;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center}
.route .pin svg{width:16px;height:16px;stroke:var(--brown);fill:none;stroke-width:2.2}
.live .who{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.live .who b{display:block;font-size:15.5px}
.live .who small{display:block;font-size:12.5px;opacity:.72}
.live .acts{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1}
.live .acts button{flex:1;height:42px;border-radius:13px;background:rgba(255,255,255,.12);color:#fff;font:800 14px var(--sans);display:flex;align-items:center;justify-content:center;gap:7px}
.live .acts button:first-child{background:#fff;color:var(--brown)}
.live .acts svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.health{display:flex;gap:16px;align-items:center}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .bg{stroke:var(--sub);fill:none;stroke-width:10}
.ring .fg{stroke:url(#ringGrad);fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--ease)}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .val b{font:800 28px/1 var(--display);color:var(--brown);letter-spacing:-.02em}
.ring .val small{display:block;font-size:10.5px;color:var(--muted);font-weight:700;margin-top:2px}
.health h4{margin:0 0 4px;font:800 17px var(--display);color:var(--brown)}
.health p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
.flag{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.flag:first-of-type{margin-top:14px}
.flag .fi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.flag .fi svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flag b{display:block;font-size:14.5px}
.flag small{font-size:12.5px;color:var(--muted)}

.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--brown)}
.qa .qi{width:100%;aspect-ratio:1;border-radius:20px;background:#fff;border:1px solid rgba(49,30,0,.07);display:grid;place-items:center;box-shadow:0 6px 16px -12px rgba(49,30,0,.3);transition:transform .16s var(--ease)}
.qa button:active .qi{transform:scale(.92)}
.qa .qi svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.season{border-radius:24px;overflow:hidden;position:relative;background:#16233A;color:#fff;box-shadow:0 20px 40px -24px rgba(22,35,58,.8)}
.season .art{height:132px;position:relative}
.season .art svg{position:absolute;inset:0;width:100%;height:100%}
.season .body{padding:4px 16px 16px;position:relative}
.season .eyeb{font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#9CC3FF}
.season h4{margin:6px 0 6px;font:800 21px/1.12 var(--display);letter-spacing:-.015em}
.season p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.75)}
.season .acts{display:flex;gap:8px}
.season .btn{height:46px;font-size:14.5px;padding:0 14px;min-width:0}
.season .acts .btn:first-child{flex:1}
.season .btn.ghostw{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.season .booked{display:flex;align-items:center;gap:10px;background:rgba(111,207,151,.14);color:#BFF0D2;border-radius:14px;padding:12px 14px;font-size:14px;font-weight:700;animation:fadeUp .4s var(--ease)}
.season .booked svg{width:22px;height:22px;stroke:#6FCF97;fill:none;stroke-width:2.4}
.flake{position:absolute;top:-10px;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.8;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(160px) translateX(12px);opacity:0}}

.member-strip{display:flex;align-items:center;gap:12px;background:var(--tint);border-radius:18px;padding:14px 16px}
.member-strip b{font-size:15px;color:var(--brown)}
.member-strip small{display:block;font-size:12.5px;color:var(--accent-d);font-weight:700}
.stars{display:flex;gap:6px}
.rate-card .stars{margin-top:12px}
.star{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--sub);transition:transform .25s var(--spring),background .2s}
.star svg{width:24px;height:24px;fill:#D5CABD;transition:fill .2s}
.star.on{background:#FFF1D6}
.star.on svg{fill:#F5A300}
.star.pop{animation:starpop .4s var(--spring)}
@keyframes starpop{40%{transform:scale(1.3) rotate(-8deg)}}
.stars.big .star{width:52px;height:52px;border-radius:16px}
.stars.big .star svg{width:30px;height:30px}
.mob-ribbon{display:none;text-align:center;font-size:12px;color:var(--muted);margin-top:26px}
.mob-ribbon a{color:var(--accent);font-weight:700;text-decoration:none}

/* ---------- Honey-Do ---------- */
.composer{background:#fff;border-radius:22px;border:1px solid rgba(49,30,0,.08);padding:14px;box-shadow:0 10px 30px -20px rgba(49,30,0,.35)}
.composer .inrow{display:flex;gap:10px;align-items:center}
.composer input[type=text]{flex:1;min-width:0;border:0;outline:0;font-size:16px;font-weight:600;background:transparent;padding:8px 2px}
.composer input::placeholder{color:#B3A89C;font-weight:500}
.cam{width:40px;height:40px;border-radius:12px;background:var(--sub);display:grid;place-items:center;color:var(--brown);position:relative;overflow:hidden;flex:none}
.cam svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.addbtn{width:40px;height:40px;border-radius:12px;background:var(--accent);display:grid;place-items:center;flex:none;transition:transform .2s var(--spring),opacity .2s}
.addbtn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round}
.addbtn[disabled]{opacity:.35}
.composer .chips{margin:10px -14px 0;padding:2px 14px}
.composer .chip{height:30px;font-size:12.5px}
.composer .hint{font-size:12px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px;min-height:16px}
.hd-item{display:flex;gap:12px;align-items:center;padding:13px 14px;background:#fff;border-radius:18px;border:1px solid rgba(49,30,0,.07);margin-bottom:8px;animation:itemIn .45s var(--ease) both;position:relative;overflow:hidden}
.hd-item.out{animation:itemOut .35s var(--ease) both}
@keyframes itemIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes itemOut{to{opacity:0;transform:translateX(40px);height:0;padding-top:0;padding-bottom:0;margin:0}}
.hd-check{width:24px;height:24px;border-radius:50%;border:2px solid #D2C7BB;flex:none}
.hd-item b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.hd-meta{display:flex;gap:6px;margin-top:5px;align-items:center;flex-wrap:wrap}
.room{font-size:11.5px;font-weight:800;color:var(--muted);background:var(--sub);padding:3px 8px;border-radius:6px}
.mins{font-size:11.5px;font-weight:800;color:var(--accent-d);background:var(--tint);padding:3px 8px;border-radius:6px;display:inline-flex;gap:4px;align-items:center}
.hd-thumb{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none}
.hd-x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#B3A89C;flex:none}
.hd-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.total{position:absolute;left:12px;right:12px;bottom:calc(var(--tbh) + 10px);z-index:12;background:rgba(49,30,0,.96);backdrop-filter:blur(10px);color:#fff;border-radius:22px;padding:14px 14px 14px 16px;box-shadow:0 20px 40px -18px rgba(49,30,0,.8);transition:transform .4s var(--ease)}
.total .t1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.total .hrs{font:800 22px/1 var(--display);letter-spacing:-.02em}
.total .fit{font-size:12.5px;font-weight:800;margin-top:4px;display:flex;align-items:center;gap:6px;transition:color .3s}
.total .fit.ok{color:#8EE3B0}.total .fit.full{color:#FFC7A8}
.meter{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.14);margin:12px 0 6px;overflow:visible}
.meter i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#FF7A45,var(--accent));transition:width .6s var(--ease)}
.meter .mk{position:absolute;top:-4px;bottom:-4px;width:2px;background:rgba(255,255,255,.5);border-radius:1px}
.mlabels{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;opacity:.55}
.total .btn{height:44px;font-size:14.5px;padding:0 16px;border-radius:14px;flex:none}

/* ---------- Book ---------- */
.search{display:flex;align-items:center;gap:10px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);padding:0 14px;margin-bottom:12px}
.search svg{width:19px;height:19px;stroke:var(--muted);fill:none;stroke-width:2.2}
.search input{flex:1;border:0;outline:0;background:transparent;font-size:16px;font-weight:600;min-width:0}
.search input::placeholder{color:#A99E92;font-weight:500}
.pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pop{border-radius:20px;overflow:hidden;position:relative;height:118px;background:var(--brown);color:#fff}
.pop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(20,12,0,.78))}
.pop span{position:absolute;left:12px;bottom:10px;right:10px;z-index:1;font:800 15px/1.15 var(--display)}
.pop small{display:block;font:700 11.5px var(--sans);opacity:.85;margin-top:2px}
.pop.plain{background:linear-gradient(150deg,#3D2708,var(--brown))}
.pop.plain svg{position:absolute;right:12px;top:12px;width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:1.8;z-index:1}
.cat-h{font:800 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:22px 4px 8px}
.empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px}
.svc-hero{height:220px;margin:calc(-1 * (var(--sbh) + 52px)) -18px 0;position:relative;background:var(--brown);overflow:hidden}
.svc-hero img{width:100%;height:100%;object-fit:cover}
.svc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%,rgba(250,247,243,0) 70%)}
.svc-title{margin:18px 2px 4px;font:800 28px/1.08 var(--display);letter-spacing:-.02em;color:var(--brown)}
.svc-sub{font-size:14.5px;color:var(--muted);margin:0 2px 4px;line-height:1.5}
.price-pill{display:inline-flex;align-items:center;gap:6px;margin:10px 2px 0;font-size:13px;font-weight:800;color:var(--green);background:var(--green-t);padding:6px 10px;border-radius:9px}
.techs{display:flex;gap:10px;overflow-x:auto;margin:0 -18px;padding:4px 18px 8px;scrollbar-width:none}
.techs::-webkit-scrollbar{display:none}
.tech{flex:0 0 auto;width:112px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:12px 10px;text-align:center;transition:all .25s var(--ease);position:relative}
.tech .av{margin:0 auto 8px;width:52px;height:52px;font-size:20px}
.tech b{display:block;font-size:14px}
.tech small{display:block;font-size:11px;color:var(--muted);line-height:1.3;margin-top:2px}
.tech.on{border-color:var(--accent);background:var(--tint);box-shadow:0 8px 20px -14px rgba(246,56,1,.8)}
.tech .again{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font:800 10px var(--sans);letter-spacing:.04em;background:var(--accent);color:#fff;padding:3px 8px;border-radius:6px;white-space:nowrap}
.again-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--tint),#fff);border:1.5px solid rgba(246,56,1,.25);border-radius:20px;padding:14px;margin-bottom:12px}
.again-card .av{width:52px;height:52px}
.again-card b{display:block;font-size:15px;color:var(--brown)}
.again-card small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.again-card .tog{width:50px;height:30px;border-radius:15px;background:#D8CEC3;position:relative;transition:background .25s;flex:none}
.again-card .tog::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .3s var(--spring)}
.again-card.on .tog{background:var(--green)}
.again-card.on .tog::after{transform:translateX(20px)}
.dates{display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:4px 18px 6px;scrollbar-width:none}
.dates::-webkit-scrollbar{display:none}
.date{flex:0 0 58px;height:74px;border-radius:16px;background:#fff;border:1.5px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .22s var(--ease);position:relative}
.date small{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.date b{font:800 21px/1 var(--display);color:var(--ink)}
.date em{font-style:normal;font-size:9px;font-weight:800;color:var(--accent);position:absolute;bottom:5px}
.date.on{background:var(--brown);border-color:var(--brown)}
.date.on small,.date.on b{color:#fff}
.date.on em{color:#FFB08F}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{height:48px;border-radius:14px;background:#fff;border:1.5px solid var(--line);font-size:14.5px;font-weight:700;transition:all .22s var(--ease);display:flex;align-items:center;justify-content:center;gap:6px}
.slot.on{border-color:var(--accent);background:var(--tint);color:var(--accent-d)}
.slot.full{opacity:.4;text-decoration:line-through;pointer-events:none}
.field{width:100%;min-height:84px;resize:none;border-radius:16px;border:1px solid var(--line);background:#fff;padding:12px 14px;font-size:15px;outline:0;line-height:1.45}
.field:focus{border-color:var(--brown)}
.cta-bar{position:absolute;left:0;right:0;bottom:0;z-index:12;padding:12px 18px 34px;background:linear-gradient(180deg,rgba(250,247,243,0),var(--bg) 24%)}
.cta-sum{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);font-weight:700;margin:0 2px 8px}
.cta-sum b{color:var(--ink)}

/* Confirmation */
.done-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:20px}
.check{width:96px;height:96px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 20px 40px -16px rgba(45,106,72,.7);animation:popIn .6s var(--spring) both}
.check svg{width:48px;height:48px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .35s var(--ease) forwards}
@keyframes popIn{from{transform:scale(.3);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.done-wrap h1{font:800 30px/1.05 var(--display);color:var(--brown);margin:22px 0 8px;letter-spacing:-.02em}
.done-wrap p{font-size:15px;color:var(--muted);line-height:1.5;margin:0 12px}
.sum{width:100%;margin-top:24px;text-align:left}
.sum .li{padding:13px 16px}
.hcp{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;margin-top:12px;background:var(--green-t);border-radius:18px;padding:14px 16px;color:#214E35;font-size:13.5px;line-height:1.5}
.hcp svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:2;flex:none;margin-top:1px;stroke-linecap:round;stroke-linejoin:round}
.hcp b{display:block;font-size:14px;color:#153724}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:conf 1.8s var(--ease) forwards}
@keyframes conf{to{transform:translateY(560px) rotate(540deg);opacity:0}}

/* ---------- Segmented control + client card ---------- */
.seg{display:flex;background:var(--sub);border-radius:12px;padding:3px;position:relative;margin-bottom:16px}
.seg button{flex:1;height:34px;border-radius:9px;font-size:13.5px;font-weight:800;color:var(--muted);position:relative;z-index:1;transition:color .25s}
.seg button.on{color:var(--ink)}
.seg .thumb{position:absolute;top:3px;bottom:3px;border-radius:9px;background:#fff;box-shadow:0 2px 6px rgba(49,30,0,.12);transition:left .35s var(--ease),width .35s var(--ease)}
.mcard{border-radius:24px;padding:20px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,#4A2F07 0%,var(--brown) 45%,#1E1200 100%);box-shadow:0 24px 44px -24px rgba(49,30,0,.9);aspect-ratio:1.62}
.mcard::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 14px)}
.mcard::after{content:"";position:absolute;right:-40px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(246,56,1,.5),transparent 68%)}
.mcard>*{position:relative;z-index:1}
.mcard .mtop{display:flex;justify-content:space-between;align-items:flex-start}
.mcard .mtop img{height:28px;width:auto;filter:brightness(0) invert(1)}
.mcard .since{font-size:11.5px;font-weight:700;opacity:.7;text-align:right;line-height:1.35}
.mcard .mname{position:absolute;left:20px;bottom:20px}
.mcard .mname small{display:block;font:800 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#FFB08F}
.mcard .mname b{display:block;font:800 22px var(--display);letter-spacing:-.01em;margin-top:3px}
.mcard .chipm{position:absolute;right:20px;bottom:22px;width:40px;height:30px;border-radius:7px;background:linear-gradient(135deg,#E8C27A,#B8893A);opacity:.9}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stat{background:#fff;border-radius:18px;border:1px solid rgba(49,30,0,.07);padding:12px}
.stat b{display:block;font:800 22px/1 var(--display);color:var(--brown);letter-spacing:-.02em}
.stat small{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:5px;line-height:1.3}
.stat.hl b{color:var(--green)}
.toggle{width:50px;height:30px;border-radius:15px;background:#D8CEC3;position:relative;transition:background .25s;flex:none}
.toggle::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .3s var(--spring)}
.toggle.on{background:var(--green)}
.toggle.on::after{transform:translateX(20px)}
.join-hero{border-radius:26px;background:linear-gradient(160deg,#FF6A33,var(--accent) 55%,#D32E00);color:#fff;padding:22px 20px 20px;position:relative;overflow:hidden}
.join-hero img{position:absolute;right:-18px;bottom:-14px;width:150px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.join-hero small{font:800 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.join-hero h2{font:800 27px/1.05 var(--display);margin:8px 0 10px;max-width:210px;letter-spacing:-.02em}
.join-hero .price{font:800 40px/1 var(--display);letter-spacing:-.03em}
.join-hero .price span{font:700 15px var(--sans);opacity:.85;letter-spacing:0}
.join-hero .alt{font-size:13px;font-weight:700;opacity:.9;margin-top:4px}
.bill{display:flex;gap:8px;margin:14px 0 4px}
.bill button{flex:1;border-radius:16px;border:1.5px solid var(--line);background:#fff;padding:12px;text-align:left;transition:all .22s var(--ease)}
.bill button b{display:block;font-size:15px}
.bill button small{font-size:12px;color:var(--muted);font-weight:700}
.bill button .save{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:800;color:var(--green);background:var(--green-t);padding:2px 7px;border-radius:5px}
.bill button.on{border-color:var(--accent);background:var(--tint)}
.benefit{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.benefit+.benefit{border-top:1px solid var(--line)}
.benefit .bi{width:36px;height:36px;border-radius:11px;background:var(--tint);color:var(--accent);display:grid;place-items:center;flex:none}
.benefit .bi svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.benefit b{display:block;font-size:15px}
.benefit small{font-size:13px;color:var(--muted);line-height:1.45}

/* Report */
.rep-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.rep-bars{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin:14px 0 8px}
.rep-bars i{display:block;transition:flex .6s var(--ease)}
.legend{display:flex;gap:14px;font-size:12px;font-weight:700;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend span::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--c)}
.roomc{margin-bottom:10px;background:#fff;border-radius:20px;border:1px solid rgba(49,30,0,.07);overflow:hidden}
.roomc .rh{display:flex;align-items:center;gap:12px;padding:14px 16px;width:100%;text-align:left}
.roomc .rh b{flex:1;font-size:15.5px}
.roomc .rh .dots3{display:flex;gap:4px}
.roomc .rh .dots3 i{width:8px;height:8px;border-radius:50%}
.roomc .rh svg.chev{width:16px;height:16px;stroke:#B3A89C;fill:none;stroke-width:2.4;transition:transform .3s var(--ease)}
.roomc.open .rh svg.chev{transform:rotate(90deg)}
.roomc .rb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.roomc.open .rb{grid-template-rows:1fr}
.roomc .rb>div{overflow:hidden}
.ritem{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.ritem .grow b{display:block;font-size:14.5px}
.ritem .grow p{margin:3px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.ritem img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none}
.ritem .btn{margin-top:8px}

/* Messages */
.chat-head{position:absolute;top:0;left:0;right:0;z-index:10;padding:calc(var(--sbh) + 2px) 16px 10px;display:flex;align-items:center;gap:12px;background:rgba(250,247,243,.88);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line)}
.chat-head .logo{width:42px;height:42px;border-radius:13px;background:var(--accent);display:grid;place-items:center;overflow:hidden;flex:none}
.chat-head .logo img{width:40px;height:40px}
.chat-head b{display:block;font:800 16px var(--display)}
.chat-head small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--green);font-weight:700}
.chat-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#3BB273}
.chat-head a{margin-left:auto;width:40px;height:40px;border-radius:12px;background:var(--tint);display:grid;place-items:center;color:var(--accent)}
.chat-head a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat{padding:calc(var(--sbh) + 76px) 14px 150px}
.daysep{text-align:center;font-size:11.5px;font-weight:800;color:#A99E92;margin:16px 0 10px;letter-spacing:.04em}
.msg{display:flex;gap:8px;align-items:flex-end;margin-bottom:6px;animation:msgIn .4s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.msg .av{width:28px;height:28px;font-size:12px}
.msg .bub{max-width:76%;padding:10px 13px;border-radius:20px;font-size:15px;line-height:1.4;background:#fff;border:1px solid rgba(49,30,0,.06);border-bottom-left-radius:6px}
.msg .who{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:2px}
.msg .who em{font-style:normal;font-size:9.5px;background:var(--tint);color:var(--accent-d);padding:1px 5px;border-radius:4px;margin-left:4px;letter-spacing:.04em}
.msg.me{justify-content:flex-end}
.msg.me .bub{background:var(--accent);color:#fff;border:0;border-bottom-left-radius:20px;border-bottom-right-radius:6px}
.msg .card-in{margin-top:8px;border-radius:14px;overflow:hidden;background:var(--sub)}
.msg .card-in .map{height:96px;position:relative;background:#EDE6DC}
.msg .card-in .map svg{position:absolute;inset:0;width:100%;height:100%}
.msg .card-in .cap{padding:8px 10px;font-size:12.5px;font-weight:700;display:flex;justify-content:space-between}
.typing{display:inline-flex;gap:4px;padding:14px 14px}
.typing i{width:7px;height:7px;border-radius:50%;background:#B3A89C;animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{30%{transform:translateY(-4px);opacity:.6}}
.chat-in{position:absolute;left:0;right:0;bottom:var(--tbh);z-index:12;padding:8px 12px 10px;background:rgba(250,247,243,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.chat-in .qr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:8px}
.chat-in .qr::-webkit-scrollbar{display:none}
.chat-in .qr button{flex:none;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(246,56,1,.35);color:var(--accent-d);font-size:13px;font-weight:700;background:#fff}
.chat-in form{display:flex;gap:8px;align-items:center}
.chat-in input{flex:1;height:42px;border-radius:21px;border:1px solid var(--line);background:#fff;padding:0 16px;font-size:15.5px;outline:0;min-width:0}
.chat-in .send{width:42px;height:42px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none;transition:transform .2s var(--spring)}
.chat-in .send svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Jobs */
.job{padding:14px 16px}
.job .jt{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.job b{font-size:15.5px}
.job small{font-size:12.5px;color:var(--muted)}
.job .jb{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:700;color:var(--muted)}
.job .jb .av{width:26px;height:26px;font-size:11px}
.minist{display:inline-flex;gap:1px}
.minist svg{width:14px;height:14px;fill:#F5A300}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.photos img{width:100%;height:120px;object-fit:cover;border-radius:14px}
.note{background:var(--sub);border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.5;color:#4A4036}
.note b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

/* Sheets */
.sheet-layer{position:absolute;inset:0;z-index:50;pointer-events:none}
.sheet-bg{position:absolute;inset:0;background:rgba(20,12,0,.38);opacity:0;transition:opacity .35s ease}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:28px 28px 0 0;padding:10px 20px 38px;transform:translateY(105%);transition:transform .5s var(--ease);max-height:88%;overflow-y:auto;scrollbar-width:none;box-shadow:0 -20px 40px -20px rgba(0,0,0,.3)}
.sheet::-webkit-scrollbar{display:none}
.sheet-layer.open{pointer-events:auto}
.sheet-layer.open .sheet-bg{opacity:1}
.sheet-layer.open .sheet{transform:none}
.grab{width:38px;height:5px;border-radius:3px;background:#D5CBBF;margin:0 auto 14px}
.sheet h3{font:800 22px/1.15 var(--display);color:var(--brown);margin:4px 0 6px;letter-spacing:-.015em}
.sheet p.lead{font-size:14.5px;color:var(--muted);margin:0 0 16px;line-height:1.5}
.opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;border:1.5px solid var(--line);background:#fff;margin-bottom:8px;width:100%;text-align:left;transition:all .22s var(--ease)}
.opt b{display:block;font-size:15.5px}
.opt small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.opt .radio{width:22px;height:22px;border-radius:50%;border:2px solid #CFC4B8;flex:none;position:relative;transition:all .2s}
.opt.on{border-color:var(--accent);background:var(--tint)}
.opt.on .radio{border-color:var(--accent)}
.opt.on .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.opt .rec{font-size:10.5px;font-weight:800;color:var(--green);background:var(--green-t);padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:2px}

/* Push notification */
.push{position:absolute;left:10px;right:10px;top:calc(var(--sbh) - 2px);z-index:70;border-radius:22px;padding:12px 14px;display:flex;gap:11px;align-items:center;background:rgba(250,248,245,.82);backdrop-filter:saturate(1.8) blur(24px);-webkit-backdrop-filter:saturate(1.8) blur(24px);box-shadow:0 14px 34px -10px rgba(0,0,0,.35);transform:translateY(-140%) scale(.96);transition:transform .6s var(--spring);cursor:pointer}
.push.show{transform:none}
.push img{width:38px;height:38px;border-radius:10px;flex:none}
.push .pt{display:flex;justify-content:space-between;font-size:12.5px;color:#6B6258;font-weight:600;margin-bottom:1px}
.push b{display:block;font-size:14.5px;color:var(--ink)}
.push span.pb{display:block;font-size:13.5px;color:#3A332C;line-height:1.35}

/* Toast */
.toast{position:absolute;left:50%;bottom:calc(var(--tbh) + 16px);transform:translate(-50%,20px);z-index:65;background:var(--ink);color:#fff;font-size:14px;font-weight:700;padding:11px 16px;border-radius:14px;opacity:0;transition:all .35s var(--ease);white-space:nowrap;display:flex;align-items:center;gap:8px;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;stroke:#6FCF97;fill:none;stroke-width:2.6}

/* ---------- Mobile: real app ---------- */
@media (max-width:1100px){
  .layout{gap:40px}
  .panel{width:300px}
  .p-title{font-size:32px}
}
@media (max-width:820px){
  .layout{flex-direction:column;gap:28px;padding-top:80px}
  .panel{width:100%;max-width:440px}
  .tb-links{display:none}
}
@media (max-width:500px){
  :root{--sbh:max(env(safe-area-inset-top),12px);--tbh:calc(58px + env(safe-area-inset-bottom))}
  html,body{height:100%;overflow:hidden;background:var(--bg)}
  .backdrop,.topbar,.panel,.ribbon{display:none}
  .layout{display:block;padding:0;min-height:0;height:100%}
  .device-wrap{width:100%;height:100%;height:100dvh}
  .device{position:static;transform:none;width:100%;height:100%;border-radius:0;padding:0;background:none;box-shadow:none}
  .btn-side,.statusbar,.home-ind{display:none}
  .screen{width:100%;height:100%;border-radius:0}
  .tabbar{padding-bottom:env(safe-area-inset-bottom)}
  .mob-ribbon{display:block}
  .push{top:calc(env(safe-area-inset-top) + 6px)}
  .cta-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .onb-foot{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media (display-mode:standalone){.mob-ribbon{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.star:focus{outline:none}.star:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.star{-webkit-appearance:none;appearance:none}