/* Layout: phone-first glass app — animated light blobs behind frosted cards, glass header, floating pill tab bar */
:root{
  --bg:#e9eefc; --bg2:#f6f8ff; --fg:#0e1a3d; --muted:#56638a;
  --glass:rgba(255,255,255,.58); --glass-hi:rgba(255,255,255,.82); --glass-line:rgba(255,255,255,.85); --edge:rgba(20,40,110,.10);
  --shadow:0 10px 30px -12px rgba(25,50,140,.28);
  --blue:#2350e6; --blue2:#5b8cff; --yellow:#ffc928; --yellow2:#ff9f1c; --ink-on-blue:#ffffff; --ink-on-yellow:#1b1600;
  --blob1:#5b8cff; --blob2:#ffc928; --blob3:#9db7ff;
  --ok:#0f8a4c; --ok-bg:rgba(15,138,76,.12); --warn:#b26400; --warn-bg:rgba(255,159,28,.16); --info:#2350e6; --info-bg:rgba(35,80,230,.12);
  --display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#060a1c; --bg2:#0b1230; --fg:#eef2ff; --muted:#9ba8d0;
  --glass:rgba(24,34,72,.52); --glass-hi:rgba(34,48,98,.7); --glass-line:rgba(255,255,255,.10); --edge:rgba(255,255,255,.06);
  --shadow:0 14px 40px -14px rgba(0,0,0,.6);
  --blue:#4f7bff; --blue2:#86a6ff; --yellow:#ffcd3a; --yellow2:#ffa531; --ink-on-blue:#ffffff; --ink-on-yellow:#1b1600;
  --blob1:#2b4fd6; --blob2:#b8860b; --blob3:#3a2a9a;
  --ok:#4fe39a; --ok-bg:rgba(79,227,154,.12); --warn:#ffbe5c; --warn-bg:rgba(255,190,92,.14); --info:#9db7ff; --info-bg:rgba(157,183,255,.14); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#060a1c; --bg2:#0b1230; --fg:#eef2ff; --muted:#9ba8d0;
  --glass:rgba(24,34,72,.52); --glass-hi:rgba(34,48,98,.7); --glass-line:rgba(255,255,255,.10); --edge:rgba(255,255,255,.06);
  --shadow:0 14px 40px -14px rgba(0,0,0,.6);
  --blue:#4f7bff; --blue2:#86a6ff; --yellow:#ffcd3a; --yellow2:#ffa531; --ink-on-blue:#ffffff; --ink-on-yellow:#1b1600;
  --blob1:#2b4fd6; --blob2:#b8860b; --blob3:#3a2a9a;
  --ok:#4fe39a; --ok-bg:rgba(79,227,154,.12); --warn:#ffbe5c; --warn-bg:rgba(255,190,92,.14); --info:#9db7ff; --info-bg:rgba(157,183,255,.14); color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15.5px;line-height:1.55;overflow-x:hidden}
[lang=fr] body{font-family:var(--display)}

button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:26px;line-height:1.25;font-weight:700}
h2{font-size:18px;font-weight:600}
h3{font-size:15.5px;font-weight:600}
p{margin:0}

/* background */
.blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg))}
.blob{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(80px);opacity:.55}
.b1{background:var(--blob1);top:-30vmax;inset-inline-start:-25vmax}
.b2{background:var(--blob2);bottom:-35vmax;inset-inline-end:-30vmax;opacity:.45}
.b3{background:var(--blob3);top:30%;inset-inline-start:40%;width:45vmax;height:45vmax;opacity:.4}

.glass{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border:1px solid var(--glass-line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.35)}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-block:10px 0}
header .bar{max-width:600px;margin:0 auto;border-radius:20px;padding:8px 10px 8px 14px;display:flex;align-items:center;gap:8px}
.logo{font-family:"Readex Pro",sans-serif;font-weight:700;font-size:19px;direction:ltr;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.logo .a{color:var(--blue)} .logo .l{color:var(--yellow2)}
.logo small{font-size:10px;letter-spacing:2.5px;color:var(--muted);font-weight:600}
.hspace{flex:1}
.lang{border:1px solid var(--edge);background:var(--glass-hi);border-radius:12px;padding:5px 10px;font-weight:600;font-size:13px;cursor:pointer}
.seg{display:flex;background:var(--edge);border-radius:12px;padding:3px;position:relative}
.seg a{position:relative;z-index:1;text-decoration:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:5px 9px;border-radius:9px;transition:color .25s}
.seg a.on{color:var(--ink-on-blue);background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 4px 12px -4px var(--blue)}

/* page */
.wrap{position:relative;z-index:1;max-width:600px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 120px}
.page{display:grid;gap:16px}
.demo{font-size:12px;color:var(--muted);text-align:center}
.card{border-radius:22px;padding:18px;display:grid;gap:12px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* hero */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:22px 20px;display:grid;gap:10px;color:var(--ink-on-blue);background:linear-gradient(140deg,var(--blue) 0%,#3a63f0 55%,var(--blue2) 100%);box-shadow:0 20px 40px -18px var(--blue)}
.hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--yellow) 0%,transparent 65%);opacity:.55;inset-inline-end:-70px;top:-80px}
.hero p{opacity:.9;max-width:34ch}
.hero .chips{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.hero .chips span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.hero h1{position:relative;z-index:1;font-size:27px}

/* category tiles */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cat{border-radius:20px;padding:14px 6px 12px;display:grid;justify-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:13.5px;text-align:center}
.ib{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -8px currentColor}
.ib svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.g-plumb{background:linear-gradient(135deg,#2b7bff,#00b3ff)} .g-elec{background:linear-gradient(135deg,#ffb300,#ff7a00)}
.g-paint{background:linear-gradient(135deg,#a855f7,#ec4899)} .g-build{background:linear-gradient(135deg,#f97316,#dc2626)}
.g-lock{background:linear-gradient(135deg,#10b981,#0d9488)} .g-pack{background:linear-gradient(135deg,var(--blue),var(--yellow2))}
.g-diag{background:linear-gradient(135deg,#64748b,#334155)}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qbtn{border-radius:20px;padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:start;text-decoration:none;color:inherit}
.qbtn .ib{width:40px;height:40px;border-radius:13px}
.qbtn .ib svg{width:22px;height:22px}
.qbtn b{display:block;font-size:14px}
.qbtn span{font-size:12px;color:var(--muted)}
.g-wa{background:linear-gradient(135deg,#22c55e,#059669)}

.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.list{display:grid;gap:10px}
.svc{border-radius:20px;padding:14px;display:flex;gap:12px;align-items:center;cursor:pointer;text-align:start;width:100%}
.svc .t{flex:1;min-width:0;display:grid;gap:2px}
.svc .d{font-size:13px;color:var(--muted)}
.svc{transition:border-color .2s,transform .2s}
.svc:hover{border-color:color-mix(in srgb,var(--blue2) 60%,transparent)}
.svc .ib{width:44px;height:44px;border-radius:14px;flex:none}
.svc h3{font-size:15.5px}
.svc .pr{display:grid;justify-items:end;gap:3px;flex:none}
.svc .pr .price{background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:var(--ink-on-yellow);padding:5px 10px;border-radius:11px;font-size:14.5px;box-shadow:0 6px 14px -8px var(--yellow2)}
.svc .pr small{font-size:11px;color:var(--muted);font-weight:500}
.chev{flex:none;width:8px;height:8px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);margin-inline-start:2px;opacity:.7}
[dir=rtl] .chev{transform:rotate(-135deg)}
.areasel{font-weight:700;font-size:13.5px;color:var(--blue2);background:color-mix(in srgb,var(--blue) 14%,transparent);padding:5px 11px;border-radius:999px}
.areaq{padding:10px 14px}
.areas{display:flex;flex-wrap:wrap;gap:8px;max-height:212px;overflow:auto;padding:2px;scrollbar-width:thin}
.achip{border:1px solid var(--edge);background:var(--glass-hi);color:var(--fg);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:background .2s,transform .15s}
.achip.on{background:linear-gradient(135deg,var(--blue),var(--blue2));color:var(--ink-on-blue);border-color:transparent;box-shadow:0 8px 18px -10px var(--blue)}
.achip[hidden]{display:none}
.price{font-family:var(--display);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{font-weight:500;font-size:11.5px;color:var(--muted)}
.pk{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;justify-self:start;background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:var(--ink-on-yellow)}
.hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.packcard{flex:0 0 78%;max-width:320px;scroll-snap-align:start;border-radius:22px;padding:16px;display:grid;gap:8px;cursor:pointer;text-align:start;position:relative;overflow:hidden}
.packcard::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,201,40,.22),transparent 55%);pointer-events:none}

/* buttons */
.btn{border:0;border-radius:16px;padding:14px 18px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,var(--blue),var(--blue2));color:var(--ink-on-blue);box-shadow:0 10px 22px -10px var(--blue);text-decoration:none;text-align:center;display:inline-flex;justify-content:center;align-items:center;gap:6px}
.btn.y{background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:var(--ink-on-yellow);box-shadow:0 10px 22px -10px var(--yellow2)}
.btn.gl{background:var(--glass-hi);color:var(--fg);box-shadow:none;border:1px solid var(--edge)}
.btn.sm{padding:9px 14px;font-size:13.5px;border-radius:13px}
.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.back{background:var(--glass-hi);border:1px solid var(--edge);border-radius:12px;padding:6px 12px;cursor:pointer;justify-self:start;font-size:13.5px;font-weight:600}
.back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;vertical-align:-3px}
[dir=rtl] .back svg{transform:scaleX(-1)}

/* stepper */
.stepper{display:flex;align-items:center;gap:6px}
.stepper .dot{flex:1;height:6px;border-radius:3px;background:var(--edge);overflow:hidden;position:relative}
.stepper .dot i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--blue2));transform:scaleX(0);transform-origin:var(--org,left);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .stepper .dot i{--org:right}
.stepper .dot.on i{transform:scaleX(1)}

/* inputs */
label{display:grid;gap:6px;font-size:13.5px;font-weight:600}
input,select,textarea{font:inherit;font-weight:400;color:var(--fg);background:var(--glass-hi);border:1px solid var(--edge);border-radius:14px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1px solid var(--edge);background:var(--glass-hi);border-radius:14px;padding:10px 14px;cursor:pointer;font-weight:600;font-size:14px;display:grid;gap:0;text-align:center;flex:1;min-width:88px}
.pill small{font-weight:500;color:var(--muted);font-size:11.5px}
.pill.on{background:linear-gradient(135deg,var(--blue),var(--blue2));color:var(--ink-on-blue);border-color:transparent;box-shadow:0 8px 18px -10px var(--blue)}
.pill.on small{color:inherit;opacity:.85}
.toggle{display:flex;align-items:center;gap:12px;border-radius:18px;padding:14px;cursor:pointer;border:1px solid var(--edge);background:var(--glass-hi);text-align:start;width:100%}
.toggle .tx{flex:1;display:grid}
.toggle .tx span{font-size:12.5px;color:var(--muted);font-weight:500}
.sw{width:46px;height:28px;border-radius:999px;background:var(--edge);position:relative;transition:background .25s;flex:none}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:inset-inline-start .25s cubic-bezier(.3,1.4,.5,1)}
.toggle.on .sw{background:linear-gradient(135deg,var(--yellow),var(--yellow2))}
.toggle.on .sw::after{inset-inline-start:21px}
.attach{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.att{position:relative;border:1.5px dashed var(--edge);border-radius:16px;padding:12px;display:flex;gap:8px;align-items:center;justify-content:center;cursor:pointer;font-weight:600;font-size:13.5px;background:var(--glass-hi);overflow:hidden}
.att input{position:absolute;inset:0;opacity:0;cursor:pointer}
.att svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.att.has{border-style:solid;border-color:var(--ok);color:var(--ok)}
.att.has svg{stroke:var(--ok)}
.sumrow{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.sumrow span:first-child{color:var(--muted)}
.sumrow.tot{border-top:1px dashed var(--edge);padding-top:10px;font-size:16px}

/* orders */
.order{border-radius:20px;padding:16px;display:grid;gap:10px}
.otop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.st{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.st.new{background:var(--warn-bg);color:var(--warn)} .st.assigned,.st.onway{background:var(--info-bg);color:var(--info)} .st.done{background:var(--ok-bg);color:var(--ok)}
.urg{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(239,68,68,.14);color:#e11d48}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:4px}
.track .line{position:absolute;top:9px;inset-inline:12.5%;height:3px;background:var(--edge);border-radius:2px}
.track .line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--yellow2));transform-origin:var(--org,left);transform:scaleX(var(--p,0));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .track .line i{--org:right}
.track .stp{display:grid;justify-items:center;gap:6px;position:relative;z-index:1;font-size:11px;color:var(--muted);text-align:center}
.track .stp b{width:20px;height:20px;border-radius:50%;background:var(--glass-hi);border:2px solid var(--edge)}
.track .stp.on b{background:var(--blue);border-color:var(--blue)}
.track .stp.cur b{box-shadow:0 0 0 0 var(--blue);animation:pulse 1.6s infinite}
.track .stp.on{color:var(--fg);font-weight:600}
.procard{display:flex;gap:12px;align-items:center;border-radius:16px;padding:10px;background:var(--glass-hi);border:1px solid var(--edge)}
.av{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:18px;flex:none}
.procard .tx{flex:1;min-width:0;display:grid}
.stars{color:var(--yellow2);font-weight:700;font-size:13px}
.ver{font-size:11.5px;font-weight:600;color:var(--ok);display:inline-flex;gap:4px;align-items:center}
.ver svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.warranty{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ok);font-weight:600}
.warranty svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{border-radius:20px;padding:14px;display:grid;gap:2px}
.stat span{font-size:12.5px;color:var(--muted);font-weight:500}
.stat b{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.stat.hl{background:linear-gradient(140deg,var(--blue),var(--blue2));color:var(--ink-on-blue);border:0}
.stat.hl span{color:inherit;opacity:.85}
.stat.hy{background:linear-gradient(140deg,var(--yellow),var(--yellow2));color:var(--ink-on-yellow);border:0}
.stat.hy span{color:inherit;opacity:.8}
.tbl{overflow-x:auto;border-radius:20px}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:460px}
th,td{padding:10px 12px;border-bottom:1px solid var(--edge);text-align:start}
th{font-size:12px;color:var(--muted);font-weight:600}
td input{padding:7px 9px;width:84px;font-variant-numeric:tabular-nums;border-radius:10px}
.mg{font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--muted);padding:26px 10px}

/* nav */
nav.tabs{position:fixed;z-index:25;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));border-radius:24px;padding:6px;display:flex;gap:4px;max-width:calc(100% - 32px)}
nav.tabs button{background:none;border:0;cursor:pointer;border-radius:18px;padding:8px 16px;display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted);transition:background .3s,color .3s}
nav.tabs button.on{background:linear-gradient(135deg,var(--blue),var(--blue2));color:var(--ink-on-blue);box-shadow:0 8px 18px -8px var(--blue)}
nav.tabs svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.tabs .lbl{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s}
nav.tabs button.on .lbl{max-width:120px}

/* splash + sheet + toast */
#splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#2f5cf0,#0a1640 70%);transition:opacity .5s,transform .6s}
#splash.out{opacity:0;transform:scale(1.08);pointer-events:none}
.sp{display:grid;justify-items:center;gap:14px}
.ring{width:110px;height:110px;border-radius:32px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:pop .8s cubic-bezier(.3,1.5,.5,1) both}
.ring svg{width:56px;height:56px}
.spw{font-family:"Readex Pro",sans-serif;font-weight:700;font-size:30px;color:#fff;direction:ltr;display:flex}
.spw span{display:inline-block;animation:drop .5s cubic-bezier(.3,1.4,.5,1) both}
.spw .l{color:#ffc928}
.sps{color:rgba(255,255,255,.7);letter-spacing:6px;font-size:11px;font-weight:600;animation:fade .6s .9s both}
.shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.shine::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(20deg);animation:sweep 1.4s .5s both}
#sheet{position:fixed;inset:0;z-index:90;display:grid;align-items:end;background:rgba(5,10,30,.35)}
#sheet .in{margin:0 auto 16px;width:calc(100% - 32px);max-width:440px;border-radius:28px;padding:22px;display:grid;gap:12px;text-align:center;animation:up .5s cubic-bezier(.2,.9,.2,1) both;margin-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;border-radius:16px;padding:10px 16px;font-size:13.5px;font-weight:600;animation:up .35s both;max-width:calc(100% - 32px)}
#fx{position:fixed;inset:0;z-index:50;pointer-events:none}
.check{width:84px;height:84px}
.check circle{stroke:var(--ok);stroke-width:4;fill:var(--ok-bg);stroke-dasharray:240;stroke-dashoffset:240;animation:draw .6s ease-out forwards}
.check path{stroke:var(--ok);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .4s .5s ease-out forwards}

/* motion */
.pg-in{animation:slide .45s cubic-bezier(.2,.8,.2,1) both}
.rv{animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.press{transition:transform .18s cubic-bezier(.3,1.4,.5,1)}
.press:active{transform:scale(.96)}
.tilt{transform-style:preserve-3d;transition:transform .25s}
@keyframes slide{from{opacity:0;transform:translateX(var(--sx,26px))}}
[dir=rtl] .pg-in{--sx:-26px}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes float1{to{transform:translate(12vmax,10vmax) scale(1.1)}}
@keyframes float2{to{transform:translate(-10vmax,-12vmax) scale(.9)}}
@keyframes float3{to{transform:translate(-14vmax,8vmax) scale(1.2)}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
@keyframes drop{from{opacity:0;transform:translateY(-24px)}}
@keyframes fade{from{opacity:0}}
@keyframes sweep{to{left:130%}}
@keyframes up{from{opacity:0;transform:translate(var(--tx,0),24px)}}
.toast{--tx:-50%}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,123,255,.55)}100%{box-shadow:0 0 0 12px rgba(79,123,255,0)}}
@media (prefers-reduced-motion:no-preference){
  .b1{animation:float1 16s ease-in-out infinite alternate}
  .b2{animation:float2 19s ease-in-out infinite alternate}
  .b3{animation:float3 23s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}
@media (max-width:380px){.seg a{padding:5px 7px;font-size:12px}.logo small{display:none}h1{font-size:23px}}

.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--edge);border-top-color:var(--blue);animation:rot .8s linear infinite;margin:30px auto}
@keyframes rot{to{transform:rotate(360deg)}}
.err{color:#e11d48;font-size:13px;font-weight:600}
.att-links{display:flex;gap:8px;flex-wrap:wrap}
.att-links a{font-size:12.5px;font-weight:600;color:var(--blue);text-decoration:none;background:var(--info-bg);padding:4px 10px;border-radius:999px}
.prob{font-size:12.5px;font-weight:600;color:#e11d48;background:rgba(239,68,68,.12);padding:6px 10px;border-radius:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cash{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:14px;background:var(--warn-bg);color:var(--warn);font-weight:600;font-size:13.5px}
.chkcell input{width:auto}
.logout{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:13px;justify-self:center}
.ratebox{display:grid;gap:10px;padding:14px;border-radius:18px;background:linear-gradient(160deg,rgba(255,201,40,.16),transparent 70%),var(--glass-hi);border:1px solid var(--edge)}
.starrow{display:flex;gap:6px;justify-content:center;direction:ltr}
.star{background:none;border:0;cursor:pointer;font-size:38px;line-height:1;color:var(--muted);opacity:.45;padding:2px 4px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),color .2s,text-shadow .2s}
.star.on{opacity:1;color:var(--yellow2);text-shadow:0 4px 14px rgba(255,159,28,.45);transform:scale(1.12)}
.star:active{transform:scale(.9)}
@media (prefers-reduced-motion:no-preference){.star.on{animation:starpop .45s cubic-bezier(.3,1.6,.5,1)}}
@keyframes starpop{0%{transform:scale(.6) rotate(-20deg)}100%{transform:scale(1.12) rotate(0)}}
.newb{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--info-bg);color:var(--info)}
.topb{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:var(--ink-on-yellow)}
.trust{border-radius:22px;padding:16px;display:grid;gap:10px}
.rev{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--edge)}
.rev:first-child{border-top:0;padding-top:0}
.trust .rev:first-of-type{border-top:1px solid var(--edge);padding-top:8px}
#sheet .in{max-height:calc(100vh - 40px);overflow:auto}
.g-c1{background:linear-gradient(135deg,#14b8a6,#0891b2)} .g-c2{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.g-c3{background:linear-gradient(135deg,#f43f5e,#e11d48)} .g-c4{background:linear-gradient(135deg,#84cc16,#16a34a)}
img.av{display:block;border-radius:15px;background:var(--edge)}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(35,80,230,.14),rgba(255,201,40,.14));border:1px dashed var(--blue)}
.codebox>div{display:grid;gap:2px;min-width:0}
.code{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:6px;direction:ltr;color:var(--blue);white-space:nowrap}
.chartwrap{overflow-x:auto}
.statrow{padding:6px 0;border-top:1px solid var(--edge)}
.statrow:first-of-type{border-top:0}
.iconpick{display:flex;flex-wrap:wrap;gap:8px}
.ipick{width:42px;height:42px;border-radius:12px;border:1px solid var(--edge);background:var(--glass-hi);display:grid;place-items:center;cursor:pointer}
.ipick svg{width:22px;height:22px;stroke:var(--fg);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ipick.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.cpick{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.cpick.on{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg) inset}
.cat.off{opacity:.45}
.pushcard,.refcard{border:1px solid rgba(255,201,40,.45)}
.notifpanel{border:1px solid rgba(79,123,255,.45)}
.delbtn{color:var(--muted);margin-inline-start:auto}

/* ===== welcome: 3D name drop → explosion → customer / craftsman ===== */
#intro{position:fixed;inset:0;z-index:120;overflow:hidden;color:#fff;background:radial-gradient(120% 80% at 50% 38%,#2047d6 0%,#0c1c5c 45%,#050a22 80%);perspective:900px;transition:opacity .5s ease;--rx:0deg;--ry:0deg}
#intro.out{opacity:0;pointer-events:none}
#itfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.it-stars{position:absolute;inset:-10%;background-image:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 78% 14%,#ffe08a,transparent),radial-gradient(1.4px 1.4px at 64% 72%,#fff,transparent),radial-gradient(1px 1px at 30% 80%,#b9c9ff,transparent),radial-gradient(1.8px 1.8px at 88% 52%,#fff,transparent),radial-gradient(1px 1px at 45% 40%,#ffe08a,transparent),radial-gradient(1.3px 1.3px at 8% 62%,#fff,transparent);opacity:.75;animation:twinkle 3.5s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.35;transform:scale(1.04)}}
.it-flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#fff 0%,rgba(255,201,40,.75) 18%,rgba(91,140,255,.35) 38%,transparent 62%)}
.it-flash.on{animation:itflash .7s ease-out both}
@keyframes itflash{0%{opacity:0;transform:scale(.2)}18%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
.it-logo{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:12px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .2s}
.it-word{display:flex;direction:ltr;font-family:"Readex Pro",sans-serif;font-weight:700;font-size:clamp(46px,15vw,92px);line-height:1;transform-style:preserve-3d}
.it-word span{display:inline-block;transform-origin:50% 100%;animation:itdrop 1s cubic-bezier(.2,1.25,.4,1) both;animation-delay:var(--d);text-shadow:0 2px 0 #c9d6ff,0 4px 0 #8ea6f5,0 7px 0 #4a6be0,0 12px 22px rgba(0,0,0,.5),0 0 40px rgba(91,140,255,.55)}
.it-word .l{color:#ffc928;text-shadow:0 2px 0 #ffd75e,0 4px 0 #f0a800,0 7px 0 #b87500,0 12px 22px rgba(0,0,0,.5),0 0 40px rgba(255,201,40,.55)}
@keyframes itdrop{0%{opacity:0;transform:translateY(-75vh) rotateX(-120deg) scale(1.5)}55%{opacity:1;transform:translateY(10px) rotateX(14deg) scale(1)}75%{transform:translateY(-6px) rotateX(-6deg)}100%{opacity:1;transform:none}}
.it-sub{letter-spacing:12px;font-size:13px;font-weight:600;color:rgba(255,255,255,.8);opacity:0;animation:itsub .7s 1.05s ease-out forwards;padding-inline-start:12px}
@keyframes itsub{from{opacity:0;letter-spacing:30px}to{opacity:1}}
.it-logo.charge .it-word{animation:itcharge .55s ease-in forwards}
@keyframes itcharge{0%{transform:none;filter:none}60%{transform:scale(1.1) rotateY(-8deg)}100%{transform:scale(1.16);filter:brightness(1.7) drop-shadow(0 0 26px #ffc928)}}
.it-logo.boom .it-word span{animation:itboom .8s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes itboom{from{opacity:1;transform:none}to{opacity:0;transform:translate(var(--bx),var(--by)) rotate(var(--br)) rotateX(var(--brx)) scale(.25)}}
.it-logo.boom .it-sub{animation:none;opacity:0;transition:opacity .15s}
.it-skip{position:absolute;z-index:5;bottom:calc(22px + env(safe-area-inset-bottom,0px));inset-inline-end:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;backdrop-filter:blur(8px)}
.it-split{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none}
.it-split.show{opacity:1;pointer-events:auto}
.it-half{position:absolute;inset:0;border:0;margin:0;cursor:pointer;color:inherit;font:inherit;display:grid;justify-items:center;text-align:center;padding:24px;perspective:700px;transition:clip-path .75s cubic-bezier(.75,0,.2,1),opacity .45s ease,transform .75s cubic-bezier(.75,0,.2,1);-webkit-tap-highlight-color:transparent}
.it-c{background:radial-gradient(90% 70% at 30% 20%,#86a6ff 0%,transparent 60%),linear-gradient(155deg,#2350e6,#3d6bff 55%,#1c3cc4);clip-path:polygon(0 0,100% 0,100% 45%,0 55%);align-content:start;padding-top:calc(13vh + env(safe-area-inset-top,0px))}
.it-p{background:radial-gradient(90% 70% at 70% 85%,#fff1b8 0%,transparent 55%),linear-gradient(330deg,#ff9f1c,#ffc928 55%,#ffd75e);color:#1b1600;clip-path:polygon(0 55%,100% 45%,100% 100%,0 100%);align-content:end;padding-bottom:calc(12vh + env(safe-area-inset-bottom,0px))}
.it-split.show .it-c{animation:itinL .85s cubic-bezier(.2,.9,.2,1) both}
.it-split.show .it-p{animation:itinR .85s .07s cubic-bezier(.2,.9,.2,1) both}
@keyframes itinL{from{transform:translate(-105%,-25%) rotate(-6deg)}}
@keyframes itinR{from{transform:translate(105%,25%) rotate(-6deg)}}
.it-inner{display:grid;justify-items:center;gap:8px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s}
.it-ico{width:88px;height:88px;border-radius:28px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 22px 40px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5);transform:translateZ(46px);animation:itfloat 3s ease-in-out infinite}
.it-p .it-ico{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.8);animation-delay:-1.5s}
@keyframes itfloat{50%{transform:translateZ(46px) translateY(-7px) rotate(-3deg)}}
.it-ico svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.it-half b{font-family:"Readex Pro",sans-serif;font-size:clamp(26px,8vw,34px);transform:translateZ(30px);text-shadow:0 3px 14px rgba(0,0,0,.25)}
.it-p b{text-shadow:0 2px 10px rgba(255,255,255,.4)}
.it-half .s{font-size:15px;opacity:.88;transform:translateZ(18px)}
.it-or{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:#0a1640;color:#fff;border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 26px -8px rgba(0,0,0,.6);pointer-events:none;animation:pop .6s .55s cubic-bezier(.3,1.5,.5,1) both}
.it-lang{position:absolute;z-index:6;top:calc(14px + env(safe-area-inset-top,0px));inset-inline-end:14px;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(5,10,34,.35);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px)}
.it-lang button{border:0;background:none;color:#fff;font:inherit;font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer}
.it-lang button.on{background:#fff;color:#0a1640}
.it-split.pick-c .it-half,.it-split.pick-p .it-half{animation:none}
.it-split.pick-c .it-c,.it-split.pick-p .it-p{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:2}
.it-split.pick-c .it-p{transform:translate(20%,40%);opacity:0}
.it-split.pick-p .it-c{transform:translate(-20%,-40%);opacity:0}
.it-split.pick-c .it-or,.it-split.pick-p .it-or,.it-split.pick-c .it-lang,.it-split.pick-p .it-lang{opacity:0;transition:opacity .2s}
.it-split.pick-c .it-c .it-inner,.it-split.pick-p .it-p .it-inner{transform:scale(1.12);transition:transform .7s cubic-bezier(.2,.9,.2,1)}

/* ===== craftsman entry ===== */
.orbit{position:relative;width:236px;height:236px;margin:4px auto -4px;display:grid;place-items:center}
.orb{position:absolute;inset:0}
.oring{position:absolute;inset:14px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--yellow2) 55%,transparent);animation:ospin 14s linear infinite}
.osat{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(104px)}
.osat .ib{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:14px;animation:ocounter 14s linear infinite,opop .5s cubic-bezier(.3,1.5,.5,1) both}
.osat .ib svg{width:21px;height:21px}
.ocore{position:relative;z-index:2;width:84px;height:84px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:var(--ink-on-yellow);box-shadow:0 18px 34px -14px var(--yellow2),0 0 0 10px color-mix(in srgb,var(--yellow) 14%,transparent);animation:pop .7s cubic-bezier(.3,1.5,.5,1) both,itfloat2 3s 1s ease-in-out infinite}
.ocore svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes ospin{to{transform:rotate(360deg)}}
@keyframes ocounter{from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) - 360deg))}}
@keyframes opop{from{opacity:0;scale:.3}}
@keyframes itfloat2{50%{transform:translateY(-6px) rotate(-4deg)}}
.tdrop{animation:tdrop .65s cubic-bezier(.2,1.25,.4,1) both;animation-delay:calc(var(--i) * 75ms + .25s);transform-origin:50% 0}
@keyframes tdrop{from{opacity:0;transform:translateY(-70px) rotateX(75deg) scale(.85)}}
.bigib{width:76px!important;height:76px!important;border-radius:24px!important}
.bigib svg{width:38px;height:38px}
.qbtn.bigq{width:100%;padding:18px;border:1px solid var(--glass-line)}
.qbtn.bigq .ib{width:48px;height:48px;border-radius:15px}
.qbtn.bigq b{font-size:16px}
.qbtn.bigq span{font-size:13px}
.cat small{font-size:10.5px}

/* ===== accounts ===== */
.accrow{display:flex;gap:12px;align-items:center}
.accrow > div{display:grid;gap:2px;min-width:0}
.avatar-me{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 10px 20px -10px var(--blue)}
.passw{display:grid;grid-template-columns:1fr auto;gap:8px}
.accerr{display:grid;gap:8px;padding:12px;border-radius:14px;background:rgba(225,29,72,.08);border:1px solid rgba(225,29,72,.3)}
.accerr .btn{white-space:normal;text-align:start}
.addrs{display:grid;gap:8px}
.addr{display:flex;gap:10px;align-items:center;text-align:start;padding:12px;border-radius:16px;border:1px solid var(--edge);background:var(--glass-hi);color:var(--fg);font:inherit;cursor:pointer}
.addr svg{width:20px;height:20px;flex:none;stroke:var(--blue2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.addr span{display:grid;min-width:0}
.addr small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr.on{border-color:transparent;background:linear-gradient(135deg,var(--blue),var(--blue2));color:var(--ink-on-blue)}
.addr.on svg{stroke:currentColor}.addr.on small{color:inherit;opacity:.85}
.slide{justify-items:center}
.slide .sl-ic{width:74px;height:74px;border-radius:24px;animation:pop .6s .15s cubic-bezier(.3,1.5,.5,1) both}
.slide .sl-ic svg{width:38px;height:38px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:9px;background:var(--edge);transition:width .3s}
.dots i.on{width:24px;background:linear-gradient(90deg,var(--blue),var(--blue2))}
.wphotos{display:flex;gap:8px;overflow-x:auto}
.wphotos img{width:92px;height:92px;object-fit:cover;border-radius:14px;border:1px solid var(--edge)}
.joinbox{border:1.5px solid color-mix(in srgb,var(--yellow2) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.it-word span,.tdrop,.oring,.osat .ib,.ocore,.it-ico,.it-stars{animation:none!important}}

/* ===== quick order ===== */
.qohead{display:flex;gap:14px;align-items:center}
.qohead h1{font-size:26px}
.att.bigatt{min-height:96px;flex-direction:column;gap:6px}
.att.bigatt svg{width:30px;height:30px}
.att.bigatt img{width:72px;height:72px;object-fit:cover;border-radius:12px}
.attach{grid-template-columns:1.4fr 1fr}
.locbtn{background:linear-gradient(135deg,#22c55e,#059669);box-shadow:0 10px 22px -10px #059669}
.locbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.locok{display:flex;gap:10px;align-items:center;padding:12px;border-radius:16px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35)}
.locok > svg{width:26px;height:26px;flex:none;stroke:#16a34a;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.locok > div{flex:1;display:grid;min-width:0}
.pricebox{border:1.5px solid color-mix(in srgb,var(--yellow2) 45%,transparent)}
.pchip{background:linear-gradient(135deg,var(--yellow),var(--yellow2));color:var(--ink-on-yellow);padding:6px 12px;border-radius:12px;font-size:16px}
.sendbig{padding:18px;font-size:17px;border-radius:18px}
.searchline{color:var(--warn);font-weight:600}
.radar{position:relative;width:170px;height:170px;display:grid;place-items:center;margin:6px auto}
.radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue2);opacity:0;animation:ping 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.radar i:nth-child(2){animation-delay:.8s}.radar i:nth-child(3){animation-delay:1.6s}
.radar .ib{width:76px;height:76px;border-radius:24px;animation:itfloat2 2.6s ease-in-out infinite}
.radar .ib svg{width:38px;height:38px}
.radar.still i{animation:none;opacity:.25;transform:scale(.8)}
@keyframes ping{0%{opacity:.8;transform:scale(.35)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.radar i,.radar .ib{animation:none}}

/* ===== prices & offers ===== */
.svlist{display:grid;gap:8px}
.svopt{display:flex;gap:10px;align-items:center;text-align:start;padding:12px;border-radius:16px;border:1px solid var(--edge);background:var(--glass-hi);color:var(--fg);font:inherit;cursor:pointer;width:100%}
.svopt .t{flex:1;display:grid;gap:2px;min-width:0}
.svopt .t small{color:var(--muted);font-size:12px}
.svopt .radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center}
.svopt.on{border-color:var(--blue2);background:color-mix(in srgb,var(--blue) 14%,var(--glass-hi))}
.svopt.on .radio{border-color:var(--blue2)}
.svopt.on .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue2)}
.pstep{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0}
.pstep > div{display:grid;justify-items:center}
.pstep > div small{color:var(--muted);font-size:12px}
.pstep > div .price{font-size:30px}
.pbtn{width:54px;height:54px;border-radius:18px;border:1px solid var(--edge);background:var(--glass-hi);color:var(--fg);font-size:28px;font-weight:700;cursor:pointer;line-height:1}
.pbtn:disabled{opacity:.35;cursor:default}
.quotebox{display:grid;gap:8px;padding:12px;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--yellow2) 55%,transparent);background:color-mix(in srgb,var(--yellow) 8%,transparent)}
.offer{animation:rise .45s cubic-bezier(.2,.9,.2,1) both}

/* ===== price feel: smooth ticks, limit bump ===== */
.pstep{position:relative}
.pstep .price.tick-down{animation:tickdown .32s cubic-bezier(.2,.9,.2,1)}
.pstep .price.tick-up{animation:tickup .32s cubic-bezier(.2,.9,.2,1)}
@keyframes tickdown{from{transform:translateY(-14px);opacity:.2;color:var(--ok)}}
@keyframes tickup{from{transform:translateY(14px);opacity:.2;color:var(--warn)}}
.pbtn{transition:transform .15s,opacity .2s,background .2s}
.pbtn:active{transform:scale(.9)}
.pbtn.atlim{opacity:.45}
.pstep.bump{animation:bump .45s cubic-bezier(.36,.07,.19,.97)}
.pstep.bump .price{color:#e11d48;transition:color .2s}
@keyframes bump{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.limtip{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%) scale(.8);opacity:0;pointer-events:none;white-space:nowrap;background:#e11d48;color:#fff;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;box-shadow:0 8px 18px -8px #e11d48}
.pstep.bump .limtip{animation:tip 1.8s ease both}
@keyframes tip{0%{opacity:0;transform:translate(-50%,-80%) scale(.8)}12%,80%{opacity:1;transform:translate(-50%,-100%) scale(1)}100%{opacity:0;transform:translate(-50%,-110%) scale(.95)}}
.savechip{justify-self:center;text-align:center;font-weight:700;font-size:14px;color:#16a34a;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);padding:6px 14px;border-radius:999px;animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
.savechip.fast{color:var(--warn);background:color-mix(in srgb,var(--yellow) 14%,transparent);border-color:color-mix(in srgb,var(--yellow2) 45%,transparent)}
.svopt{transition:border-color .25s,background .25s,transform .15s}
.svopt:active{transform:scale(.98)}
.svopt .radio::after{transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.svopt.on .radio::after{animation:pop .35s cubic-bezier(.3,1.5,.5,1)}
.locok{animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
@media (prefers-reduced-motion:reduce){.pstep.bump,.pstep .price,.savechip,.locok{animation:none!important}}

/* ===== map screen (inDrive style) ===== */
:root{--sheet:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sheet:#0f1733}}
:root[data-theme="dark"]{--sheet:#0f1733}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#map{position:fixed;left:0;right:0;top:0;bottom:calc(var(--sheetH,320px) - 26px);z-index:1;background:#dfe6f3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #map{background:#0b1230}:root:not([data-theme="light"]) #map .leaflet-tile-pane{filter:invert(1) hue-rotate(200deg) brightness(.82) contrast(.92) saturate(.55)}}
#map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.6);margin-bottom:30px}
body.mapmode{overflow:hidden}
body.mapmode .blobs{display:none}
body.mapmode header{position:fixed;left:0;right:0;top:0}
body.mapmode #tabs{display:none!important}
body.mapmode main.wrap{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:0;max-width:600px;margin:0 auto;pointer-events:none}
body.mapmode #app{pointer-events:auto;background:var(--sheet);border-radius:26px 26px 0 0;box-shadow:0 -14px 40px -14px rgba(10,20,60,.45);padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:76dvh;overflow:auto;gap:12px;overscroll-behavior:contain;animation:sheetin .45s cubic-bezier(.2,.9,.2,1)}
body.mapmode #app.pg-in{animation:sheetin .45s cubic-bezier(.2,.9,.2,1)}
@keyframes sheetin{from{transform:translateY(46px);opacity:.3}}
.grab{width:44px;height:5px;border-radius:9px;background:var(--muted);opacity:.35;justify-self:center}
#pin{position:fixed;z-index:4;left:50%;top:calc((100dvh - var(--sheetH,320px) + 26px) / 2);pointer-events:none}
#pin.pin{transform:translate(-50%,-100%);display:grid;justify-items:center;transition:transform .2s cubic-bezier(.2,.9,.2,1)}
#pin.pin.lift{transform:translate(-50%,calc(-100% - 12px))}
#pin .head{width:46px;height:46px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);display:grid;place-items:center;background:linear-gradient(135deg,var(--yellow),var(--yellow2));box-shadow:0 10px 22px -8px rgba(0,0,0,.45);border:3px solid #fff}
#pin .head svg{width:22px;height:22px;transform:rotate(45deg);stroke:#1b1600;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#pin .stem{width:3px;height:10px;background:#1b1600;border-radius:2px;margin-top:-2px}
#pin .shadow{position:absolute;bottom:-5px;width:18px;height:6px;border-radius:50%;background:rgba(0,0,0,.3);transition:transform .2s,opacity .2s}
#pin.pin.lift .shadow{transform:translateY(12px) scale(.7);opacity:.5}
#pin.radar-pin{transform:translate(-50%,-50%);width:200px;height:200px;display:grid;place-items:center}
#pin.radar-pin i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--blue2) 35%,transparent),transparent 70%);border:2px solid var(--blue2);opacity:0;animation:ping 2.4s cubic-bezier(.2,.7,.3,1) infinite}
#pin.radar-pin i:nth-child(2){animation-delay:.8s}#pin.radar-pin i:nth-child(3){animation-delay:1.6s}
#pin.radar-pin .dot{width:20px;height:20px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 25%,transparent)}
.mapbtn{position:fixed;z-index:6;width:48px;height:48px;border-radius:50%;border:0;background:var(--sheet);color:var(--fg);box-shadow:0 8px 22px -8px rgba(10,20,60,.5);display:grid;place-items:center;cursor:pointer}
.mapbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mapbtn.loc{inset-inline-end:16px;bottom:calc(var(--sheetH,320px) + 12px);color:var(--blue);transition:bottom .35s cubic-bezier(.2,.9,.2,1)}
.mapbtn.loc.busy svg{animation:ospin 1s linear infinite}
.mapbtn.top1{inset-inline-start:16px;top:calc(env(safe-area-inset-top,0px) + 76px)}
.mapbtn.top2{inset-inline-start:72px;top:calc(env(safe-area-inset-top,0px) + 76px)}
#maptools.waiting .loc{display:none}
.whereami{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:var(--glass-hi);border:1px solid var(--edge)}
.whereami > div{display:grid;min-width:0}
.whereami b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .25s}
.whereami.slim{padding:8px 12px}
#maparea.loading{opacity:.45}
.ib.mini{width:34px;height:34px;border-radius:11px;flex:none}
.ib.mini svg{width:18px;height:18px}
.shead{font-size:20px;margin-top:2px}
.trow{display:grid;grid-auto-flow:column;grid-auto-columns:80px;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;margin-inline:-4px}
.trow::-webkit-scrollbar,.schips::-webkit-scrollbar,.hchips::-webkit-scrollbar{display:none}
.tbtn{display:grid;justify-items:center;gap:6px;border:0;background:none;color:var(--fg);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer;text-align:center;animation:tdrop .55s cubic-bezier(.2,1.25,.4,1) both;animation-delay:calc(var(--i) * 55ms + .1s)}
.tbtn .ib{width:62px;height:62px;border-radius:20px;transition:transform .15s}
.tbtn:active .ib{transform:scale(.92)}
.hchips,.schips,.raise{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chip,.schip{flex:none;border:1px solid var(--edge);background:var(--glass-hi);color:var(--fg);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.schip.on{background:linear-gradient(135deg,var(--blue),var(--blue2));color:var(--ink-on-blue);border-color:transparent}
.ohead{display:flex;align-items:center;gap:10px}
.ohead b{font-size:18px;font-family:var(--display)}
.xbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--edge);background:var(--glass-hi);color:var(--fg);font-size:15px;cursor:pointer;flex:none}
.orow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.obtn{display:grid;justify-items:center;align-content:center;gap:4px;padding:10px 4px;border-radius:14px;border:1px solid var(--edge);background:var(--glass-hi);font:inherit;font-size:11.5px;font-weight:600;color:var(--fg);cursor:pointer;text-align:center;min-height:62px;position:relative;overflow:hidden;line-height:1.3}
.obtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.obtn b{font-size:18px;line-height:1}
.obtn.on{border-color:var(--blue2);color:var(--blue2);background:color-mix(in srgb,var(--blue) 10%,var(--glass-hi))}
.obtn img{width:24px;height:24px;border-radius:7px;object-fit:cover}
.obtn.static{cursor:default}
.pfixed{display:grid;justify-items:center;gap:2px;text-align:center}
.pfixed .price{font-size:30px}
.wtitle{display:grid;gap:2px;text-align:center}
.wtitle b{font-family:var(--display);font-size:19px}
.shimmer{height:4px;border-radius:9px;background:var(--edge);overflow:hidden}
.shimmer i{display:block;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--blue2),transparent);animation:shim 1.4s ease-in-out infinite}
@keyframes shim{from{transform:translateX(-120%)}to{transform:translateX(260%)}}
[dir=rtl] .shimmer i{animation-name:shimr}
@keyframes shimr{from{transform:translateX(120%)}to{transform:translateX(-260%)}}
.steps{display:flex;gap:6px}
.steps span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:7px 4px;border-radius:10px;background:var(--glass-hi);color:var(--muted);transition:background .3s,color .3s}
.steps span.on{background:var(--ok-bg);color:var(--ok)}
#offers{position:fixed;z-index:7;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 70px);display:grid;gap:8px;padding:0 12px;max-width:600px;margin:0 auto;max-height:calc(100dvh - var(--sheetH,320px) - 84px);overflow:auto;scrollbar-width:none}
.ocard{background:var(--sheet);border-radius:20px;padding:14px 12px 12px;box-shadow:0 14px 34px -12px rgba(10,20,60,.5);display:grid;gap:10px;position:relative;overflow:hidden;animation:odrop .5s cubic-bezier(.2,1.2,.4,1) both;transition:opacity .25s,transform .25s}
.ocard.gone{opacity:0;transform:translateX(40px)}
.ocard .procard{background:none;border:0;padding:0}
.otimer{position:absolute;left:0;right:0;top:0;height:4px;background:var(--edge)}
.otimer i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--yellow2));transform-origin:left;animation:otime linear forwards}
[dir=rtl] .otimer i{transform-origin:right}
@keyframes otime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes odrop{from{opacity:0;transform:translateY(-30px) scale(.96)}}
.oact{display:flex;gap:8px;align-items:center}
.oact .pchip{margin-inline-end:auto;font-size:18px}
@media (prefers-reduced-motion:reduce){#pin.radar-pin i,.shimmer i,.tbtn,.ocard{animation:none!important}}
.myoffer{position:relative;padding-top:8px}
.myoffer .otimer{border-radius:4px}
.availcard{border:1.5px solid color-mix(in srgb,var(--yellow2) 40%,transparent)}
.availcard .btn.y{font-size:16px;padding:14px 18px}

/* ===== home: trades first ===== */
.hello{display:grid;gap:2px;padding-top:4px}
.hello h1{font-size:28px}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tcard{position:relative;overflow:hidden;border-radius:22px;padding:16px 14px 14px;display:grid;gap:6px;justify-items:start;text-align:start;cursor:pointer;font:inherit;color:var(--fg);animation:tdrop .6s cubic-bezier(.2,1.25,.4,1) both;animation-delay:calc(var(--i) * 65ms + .08s);transition:transform .15s}
.tcard:active{transform:scale(.97)}
.tcard::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;inset-inline-end:-46px;top:-46px;background:radial-gradient(circle,color-mix(in srgb,var(--blue2) 22%,transparent),transparent 70%);pointer-events:none}
.tcard .ib{width:54px;height:54px;border-radius:18px;margin-bottom:4px}
.tcard .ib svg{width:28px;height:28px}
.tcard b{font-size:17px;font-family:var(--display)}
.tcard small{color:var(--muted);font-size:12.5px;min-height:1em}
.activebar{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:18px;text-align:start;cursor:pointer;font:inherit;color:var(--fg);border:1.5px solid color-mix(in srgb,var(--blue2) 45%,transparent)}
.activebar > div{flex:1;display:grid;min-width:0}
.activebar b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activebar .pulse{flex:none;width:12px;height:12px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 0 var(--blue2);animation:apulse 1.6s infinite}
@keyframes apulse{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
body.mapmode #map{animation:mapin .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes mapin{from{opacity:0;transform:scale(1.08)}}
#pin.pin{animation:pindrop .6s .25s cubic-bezier(.3,1.5,.5,1) backwards}
@keyframes pindrop{from{opacity:0;transform:translate(-50%,calc(-100% - 60px))}}
@media (prefers-reduced-motion:reduce){.tcard,body.mapmode #map,#pin.pin,.activebar .pulse{animation:none!important}}

/* ===== admin: craftsmen list ===== */
.chip.on{background:color-mix(in srgb,var(--blue) 16%,var(--glass-hi));border-color:var(--blue2);color:var(--blue2)}
.schip b,.chip b{font-weight:700;opacity:.75;margin-inline-start:2px}
.schip.joinchip:not(.on){border-color:color-mix(in srgb,var(--yellow2) 60%,transparent);color:var(--warn)}
.prows{display:grid;gap:8px}
.prow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:16px;text-align:start;cursor:pointer;font:inherit;color:var(--fg);transition:transform .12s}
.prow:active{transform:scale(.985)}
.prow[hidden]{display:none}
.prow .av{width:42px;height:42px;border-radius:14px;flex:none;font-size:17px}
.prow .pi{flex:1;display:grid;min-width:0}
.prow .pi b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pi small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .owe{flex:none;font-weight:700;font-size:13px;color:#fff;background:#e11d48;padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.prow .offb{flex:none;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--edge);padding:3px 9px;border-radius:999px}
#pf-q{padding:12px 14px}
.psheet .procard{background:none;border:0;padding:0}

/* ---------- wallet ---------- */
.freeban{display:grid;gap:4px;padding:14px 16px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#2350e6,#7b5cff 60%,#ff9f1c);box-shadow:0 10px 30px -12px rgba(35,80,230,.6)}
.freeban .muted{color:rgba(255,255,255,.82)}
.freeban.sm{padding:10px 14px}
.fcount{font:700 13px "Readex Pro",sans-serif;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.22);white-space:nowrap}
.lowban{display:grid;gap:4px;padding:12px 16px;border-radius:18px;background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.35);color:#e11d48}
.lowban .small{color:var(--fg)}
.walletc{gap:8px}
.walletbox{display:grid;gap:8px;padding:12px;border-radius:16px;background:var(--glass-hi);border:1px solid var(--edge)}
.txd summary{cursor:pointer;padding:4px 0}
.txl{display:grid;gap:2px;margin-top:6px}
.txr{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--edge)}
.txr:last-child{border-bottom:0}
.neg{font-weight:700;color:#e11d48;font-variant-numeric:tabular-nums}