/* Layout: phone-frame prototype in the centre, viewing guide beside it; one deliberate dark look — black glass lit by white light */
:root{
  --bg:#030304;
  --fg:#f5f5f7;
  --muted:rgba(235,235,245,.64);
  --faint:rgba(235,235,245,.38);
  --line:rgba(255,255,255,.13);
  --glass:rgba(255,255,255,.07);
  --glass-2:rgba(255,255,255,.13);
  --sheet:rgba(22,22,26,.9);
  --head:rgba(3,3,4,.66);
  --sub:rgba(3,3,4,.94);
  --ink:#0b0b0d;
  --paper:#f5f5f7;
  --gold:#dcc08a;
  --gold-bg:rgba(220,192,138,.11);
  --gold-line:rgba(220,192,138,.32);
  --ok:#34c759;
  --ok-bg:rgba(52,199,89,.13);
  --bad:#ff6b6b;
  --tg-bg:#0e1621;
  --tg-bubble:#182533;
  --link:#7cc4ff;
  --f-display:"Unbounded",-apple-system,"Segoe UI",sans-serif;
  --f-body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --top:96px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-body);font-size:14px;line-height:1.45;padding-inline:16px;padding-block:20px 32px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--link)}
:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}
.ic{flex:none;display:block}

/* page around the phone */
.page{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.top h1{margin:0;font-family:var(--f-display);font-weight:300;font-size:18px;letter-spacing:.02em}
.top p{margin:2px 0 0;color:var(--muted);font-size:13px}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--glass);border:1px solid var(--line)}
.seg button{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.layout{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;align-items:flex-start}
.device{flex:none;width:min(392px,100%);height:clamp(640px,calc(100dvh - 120px),844px);padding:10px;border-radius:56px;background:linear-gradient(150deg,#2b2b30,#0b0b0d 45%,#1c1c20);box-shadow:0 0 0 1px #3b3b41,0 0 0 2px #0a0a0b,0 50px 90px -20px rgba(0,0,0,.9)}
.screen{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:var(--bg);isolation:isolate}
.guide{flex:1 1 300px;max-width:400px;display:flex;flex-direction:column;gap:16px;padding-top:6px}
.guide h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:16px}
.guide ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.guide li b{color:var(--fg);font-weight:500}
.note{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--glass);color:var(--muted);font-size:13px;display:grid;gap:8px}
.note p{margin:0}
.note b{color:var(--fg);font-weight:500}

/* phone chrome */
#waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.chrome{position:absolute;top:0;left:0;right:0;z-index:30;background:var(--head);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06)}
.statusbar{position:relative;height:46px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 36px;font-weight:600;font-size:15px}
.island{position:absolute;left:50%;top:11px;width:112px;height:32px;border-radius:20px;background:#000;transform:translateX(-50%)}
.sb-icons{display:flex;gap:6px;align-items:center}
.tghead{height:50px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px}
.hbtn{display:inline-flex;align-items:center;gap:2px;font-size:15px;color:var(--link);height:36px}
.hright{justify-self:end;display:flex;gap:4px}
.hicon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--fg)}
.hicon.gear{background:var(--gold-bg);color:var(--gold)}
.htitle{text-align:center;line-height:1.15}
.htitle b{font-weight:600;font-size:15px}
.htitle small{display:block;color:var(--faint);font-size:11.5px}

/* views */
.stage{position:absolute;inset:0;z-index:1}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-top:var(--top);padding-bottom:110px;scrollbar-width:none;transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .42s ease}
.view::-webkit-scrollbar{display:none}
.view.sub{transform:translateX(102%);background:var(--sub)}
.view.on{transform:none}
.view.under{transform:translateX(-24%);opacity:0;pointer-events:none}
.vpad{padding:0 16px;display:flex;flex-direction:column;gap:16px}
.vhead{padding-top:14px}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.vtitle{margin:4px 0 0;font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.15;text-wrap:balance}
.vsub{margin:6px 0 0;color:var(--muted);font-size:13px}
.center{text-align:center}
.muted{color:var(--muted)}
.hint{font-size:12.5px;color:var(--muted);margin:0}
.warn{color:var(--gold);font-size:12px}
.grow{flex:1;min-width:0}

/* liquid glass */
.glass{position:relative;border-radius:22px;background:radial-gradient(120% 80% at 10% 0%,rgba(255,255,255,.13),transparent 55%),linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 30px -12px rgba(0,0,0,.7);transition:transform .2s cubic-bezier(.3,.7,.4,1);overflow:hidden}
.glass.lite{backdrop-filter:none;-webkit-backdrop-filter:none}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 35%,rgba(255,255,255,.03) 65%,rgba(255,255,255,.24));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
button.glass:active{transform:scale(.975)}

/* hero */
.hero{padding-top:16px;text-align:center;display:flex;flex-direction:column;align-items:center}
.wordmark{font-family:var(--f-display);font-weight:300;font-size:40px;letter-spacing:.01em;line-height:1.05;background:linear-gradient(100deg,#8e8e96 0%,#fff 30%,#c7c7cf 50%,#fff 70%,#8e8e96 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}
.wordmark b{font-weight:500}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.tagline{margin-top:8px;color:var(--muted);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.carousel{position:relative;width:100%;height:262px;perspective:1000px;margin-top:6px}
.carousel::before{content:"";position:absolute;left:50%;top:46%;width:250px;height:250px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.11),transparent);pointer-events:none}
.carousel::after{content:"";position:absolute;left:50%;bottom:2px;width:160px;height:16px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent);pointer-events:none}
.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:rotateY(-75deg) scale(.85);transition:opacity .7s ease,transform 1s cubic-bezier(.2,.7,.1,1);pointer-events:none}
.slide.on{opacity:1;transform:none}
.slide.out{opacity:0;transform:rotateY(75deg) scale(.85)}
.spin{width:190px;height:238px;display:grid;place-items:center;transform-style:preserve-3d;animation:sway 7s ease-in-out infinite}
.slide:not(.on) .spin{animation-play-state:paused}
.spin svg,.spin img{width:100%;height:100%;object-fit:contain;border:0;outline:1px solid transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@keyframes sway{0%,100%{transform:rotateY(-26deg) translateY(0)}50%{transform:rotateY(26deg) translateY(-7px)}}
.spin.pic{display:block;position:relative;width:230px;height:236px;animation-name:floaty;animation-duration:8s}
.spin.pic img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
@keyframes floaty{0%,100%{transform:rotateY(-11deg) rotateZ(-1.5deg) translateY(0)}50%{transform:rotateY(11deg) rotateZ(1.5deg) translateY(-9px)}}
.cap{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:44px}
.cap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.cap b{font-size:17px;font-weight:500}
.dots{display:flex;gap:6px;margin-top:10px}
.dots button{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
.dots button.on{width:18px;background:var(--paper)}

/* quick nav + sections */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:18px;padding:5px;border-radius:20px}
.qb{display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:15px;font-size:13.5px;font-weight:500;color:var(--fg);transition:background .25s,transform .15s}
.qb:active{background:var(--glass-2);transform:scale(.96)}
.qb.on{background:var(--glass-2);color:var(--fg)}
.sec{display:flex;flex-direction:column;gap:12px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 2px 0}
.sec-h h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:20px}
.sec-h span{font-size:12px;color:var(--faint)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{min-height:108px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;text-align:left}
.tile.wide{grid-column:span 2}
.tile.big{min-height:150px;padding-right:128px}
.t-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.06),0 6px 14px -6px rgba(0,0,0,.7)}
.t-ar{position:absolute;top:12px;right:12px;color:var(--faint)}
.tile b{font-size:15.5px;font-weight:600;display:block}
.tile small{color:var(--muted);font-size:12.5px;display:block;margin-top:2px}
.tile .art{position:absolute;right:-4px;bottom:-34px;width:128px;height:160px;transform:rotate(-12deg);pointer-events:none}
.tile .art svg,.tile .art img{width:100%;height:100%;object-fit:contain;border:0;outline:1px solid transparent}
.foot{margin-top:18px;text-align:center;color:var(--faint);font-size:12px;line-height:1.6}

/* catalog */
.search{display:flex;align-items:center;gap:8px;padding:0 12px;height:42px;border-radius:14px;background:var(--glass);border:1px solid var(--line);color:var(--faint)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);height:100%}
.chips{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font-size:13px;color:var(--muted);white-space:nowrap}
.chip.on{background:var(--paper);color:var(--ink);border-color:transparent}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:30px 0}
.pcard{display:flex;flex-direction:column;gap:3px;padding:10px 10px 12px;border-radius:20px;text-align:left;min-width:0}
.pimg{position:relative;height:130px;border-radius:14px;background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent);display:grid;place-items:center;margin-bottom:5px}
.pimg svg{height:116px;width:auto}
.pimg img{max-height:122px;max-width:100%;object-fit:contain;border-radius:10px}
.lim{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;line-height:1;padding:5px 8px;border-radius:999px;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-line);white-space:nowrap}
.pimg .lim{position:absolute;left:4px;top:4px}
.pname{font-weight:600;font-size:14px;line-height:1.25}
.pspec{font-size:12px;color:var(--muted);line-height:1.3}
.prow{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.price{font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sw{display:flex;padding-left:4px}
.sw i{width:11px;height:11px;border-radius:50%;margin-left:-4px;border:1.5px solid var(--bg);box-shadow:0 0 0 .5px rgba(255,255,255,.35)}
.unk{background:repeating-linear-gradient(45deg,#5a5a60 0 2px,#26262a 2px 4px)}
.tag{display:inline-block;font-size:11.5px;color:var(--muted);padding:3px 8px;border-radius:999px;background:var(--glass-2);white-space:nowrap}
.tag.zero{color:var(--ok);background:var(--ok-bg)}
.uchips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.demo{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:999px;border:1px dashed var(--faint);color:var(--faint);white-space:nowrap}
.pimg .demo{position:absolute;right:4px;top:4px}
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:var(--gold-bg);border:1px solid var(--gold-line);color:var(--gold);font-size:12.5px}

/* sheets */
.sheet-wrap{position:absolute;inset:0;z-index:50}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s}
.sheet-wrap.on .sheet-bg{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:90%;overflow-y:auto;overflow-x:hidden;border-radius:30px 30px 0 0;background:var(--sheet);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);border-top:1px solid var(--line);transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);padding:8px 18px 30px;scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.sheet-wrap.on .sheet{transform:none}
.grab{width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:0 auto 10px}
.sheet-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);z-index:2}
.sheet-body{display:flex;flex-direction:column;gap:16px}
.ps-img{height:228px;display:grid;place-items:center;perspective:900px}
.ps-img .spin{width:168px;height:210px;animation-duration:9s}
.ps-img img{max-height:220px;max-width:100%;object-fit:contain;border-radius:16px}
.gal{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;scrollbar-width:none}
.gal img{height:220px;border-radius:16px;scroll-snap-align:center;flex:none}
.ps-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.2;text-wrap:balance;padding-right:36px}
.ps-sub{color:var(--muted);font-size:13px;margin-top:4px}
.opt{display:flex;flex-direction:column;gap:8px}
.opt-l{font-size:11.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;gap:10px}
.opt-l em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0;font-size:12.5px;text-align:right}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.o{padding:9px 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);font-size:13.5px;font-weight:500;transition:border-color .2s,background .2s}
.o.on{border-color:var(--fg);background:var(--glass-2)}
.alt{opacity:.45}
.cs{width:36px;height:36px;border-radius:50%;padding:3px;border:1.5px solid transparent;transition:border-color .2s}
.cs.on{border-color:var(--fg)}
.cs i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font-style:normal;font-size:12px;color:var(--fg)}
.buybar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.bigprice{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.pricenote{font-size:12px;color:var(--muted);margin-top:5px}
.avail{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none}
.dot.lim{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.dot.off{background:var(--faint);box-shadow:none}

/* buttons + forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 20px;border-radius:16px;font-weight:600;font-size:15px;text-decoration:none;color:var(--fg);transition:transform .15s,opacity .2s;position:relative;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--paper);color:var(--ink)}
.btn.ghost{background:var(--glass);border:1px solid var(--line)}
.btn.block{width:100%}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:11px;font-weight:500}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.4;pointer-events:none}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:12px;color:var(--faint);letter-spacing:.03em}
.inp{height:44px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);outline:0;color:var(--fg);width:100%;min-width:0}
textarea.inp{height:auto;min-height:84px;padding:10px 12px;resize:vertical}
select.inp{background-color:#1a1a1e}
.inp:focus{border-color:rgba(255,255,255,.42);box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.segc{display:flex;flex-wrap:wrap;gap:6px}
.segc label{position:relative}
.segc input{position:absolute;opacity:0;width:1px;height:1px}
.segc span{display:inline-block;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--glass);font-size:13px;cursor:pointer}
.segc input:checked+span{background:var(--paper);color:var(--ink);border-color:transparent}
.segc input:focus-visible+span{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}
.sw-row b{font-weight:500;display:block}
.sw-row small{display:block;color:var(--muted);font-size:12px}
.switch{position:relative;width:50px;height:30px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.18);transition:background .2s;pointer-events:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.switch input:checked+i{background:var(--ok)}
.switch input:checked+i::after{transform:translateX(20px)}
.switch input:focus-visible+i{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}
.range{width:100%;accent-color:#f5f5f7}
.photos{display:flex;gap:10px;flex-wrap:wrap}
.phw{position:relative}
.ph{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--line);display:block}
.phx{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:#000;border:1px solid var(--line);display:grid;place-items:center;font-size:14px;line-height:1}
.addph{width:64px;height:64px;border-radius:12px;border:1px dashed var(--faint);display:grid;place-items:center;color:var(--muted);position:relative;cursor:pointer}
.addph input{position:absolute;inset:0;opacity:0;cursor:pointer}
.colorpick{display:flex;gap:8px;align-items:center}
.colorpick input[type=color]{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:none;padding:3px;flex:none;cursor:pointer}

/* rows, info, cart */
.rows{display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line);overflow:hidden}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--glass)}
.row+.row{border-top:1px solid var(--line)}
.row.today{background:var(--glass-2)}
.info{display:flex;flex-direction:column;gap:14px}
.info h3{margin:4px 0 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500}
.info p{margin:0;color:var(--muted)}
.ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ul li{display:flex;gap:10px;align-items:flex-start}
.ul li .ic{color:var(--ok);margin-top:1px}
.ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:n}
.ol li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;gap:12px}
.ol li::before{content:counter(n);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);font-size:13px;font-weight:600}
.ol b{display:block;font-weight:600}
.ol span{color:var(--muted);font-size:13px}
.card{padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--glass);display:grid;gap:6px}
.card b{font-weight:600}
.links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone-big{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;user-select:all}
.status{display:inline-flex;gap:8px;align-items:center;font-size:13.5px}
.cline{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.cthumb{width:56px;height:56px;border-radius:14px;background:var(--glass);display:grid;place-items:center;overflow:hidden;flex:none}
.cthumb svg{height:48px;width:auto}
.cthumb img{width:100%;height:100%;object-fit:cover}
.cthumb.lg{width:84px;height:84px}
.cthumb.lg svg{height:74px}
.ctitle{font-weight:600;font-size:14px;line-height:1.25}
.cdesc{font-size:12px;color:var(--muted)}
.cprice{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.stepper{display:inline-flex;align-items:center;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
.stepper button{width:30px;height:30px;display:grid;place-items:center}
.stepper span{min-width:18px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}
.pay{display:grid;gap:8px}
.payo{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;border:1px solid var(--line);background:var(--glass);width:100%}
.payo.on{border-color:var(--fg);background:var(--glass-2)}
.payo .r{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--faint);flex:none}
.payo.on .r{border:5px solid var(--paper)}
.payo b{font-weight:500;display:block;font-size:14px}
.payo small{color:var(--muted);font-size:12px}
.payo .pv{font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;white-space:nowrap}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.total b{font-size:24px;font-variant-numeric:tabular-nums}

/* reviews */
.rsum{display:flex;align-items:center;gap:16px;padding:16px;flex-wrap:wrap}
.rsum .big{font-family:var(--f-display);font-size:40px;font-weight:300;line-height:1}
.stars{display:inline-flex;gap:2px;color:var(--gold)}
.rv{padding:14px;display:flex;flex-direction:column;gap:8px;border-radius:18px;border:1px solid var(--line);background:var(--glass)}
.rv-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.rv-n{font-weight:600}
.rv-d{font-size:12px;color:var(--faint)}
.rv p{margin:0}
.reply{padding:10px 12px;border-radius:14px;background:var(--glass-2);font-size:13px;color:var(--muted)}
.reply b{color:var(--fg);font-weight:600;display:block;font-size:12px;margin-bottom:2px}
.rv.hid{opacity:.5}
.pill{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--glass-2);color:var(--muted)}
.pill.new{background:var(--gold-bg);color:var(--gold)}
.starpick{display:flex;gap:6px}
.starpick button{color:var(--faint)}
.starpick button.on{color:var(--gold)}
.acts{display:flex;gap:6px;flex-wrap:wrap}

/* manager preview */
.chat{border-radius:20px;padding:14px;background:var(--tg-bg);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.chat-h{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);line-height:1.3}
.chat-h b{color:var(--fg);font-size:13.5px}
.ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#4a4a52,#111);display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;flex:none}
.bubble{align-self:flex-start;max-width:100%;padding:10px 12px;border-radius:16px 16px 16px 4px;background:var(--tg-bubble);white-space:pre-wrap;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.ibtn{display:block;text-align:center;padding:9px;border-radius:10px;background:rgba(255,255,255,.07);font-size:13px;color:var(--link)}
.okmark{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok);margin:18px auto 0}

/* admin */
.arow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--line);text-align:left;width:100%}
.arow .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .s{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vcard{padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--glass);display:flex;flex-direction:column;gap:12px}
.vcard-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.vact{display:flex;gap:6px}
.edphoto{display:flex;gap:14px;align-items:center}
.edphoto small{display:block;color:var(--muted);font-size:12px;margin:2px 0 8px}
.slrow{display:flex;gap:12px;align-items:center}
.list{display:flex;flex-direction:column;gap:8px}

.sheet-wrap:not(.on),.view.sub:not(.on){pointer-events:none}

/* toast + main button */
.toast{position:absolute;left:50%;top:calc(var(--top) + 10px);z-index:80;transform:translate(-50%,-12px);opacity:0;padding:10px 16px;border-radius:999px;background:rgba(40,40,46,.94);border:1px solid var(--line);font-size:13px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.mainbtn{position:absolute;left:14px;right:14px;bottom:16px;z-index:20;height:56px;border-radius:18px;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:600;font-size:15px;box-shadow:0 18px 40px -10px rgba(0,0,0,.85)}
.mainbtn .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--ink);color:var(--paper);font-size:12px;margin-left:8px;padding:0 6px}
.mainbtn span{display:flex;align-items:center}

@media (max-width:520px){
  :root{--top:50px}
  body{padding-block:14px 20px}
  .device{padding:0;border-radius:30px;background:none;box-shadow:0 0 0 1px var(--line);height:calc(100dvh - 130px);min-height:560px}
  .screen{border-radius:30px}
  .statusbar{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}