/* ── Kafelki „ZLECĘ” i „UMÓW WIZYTĘ” pod „Popularnymi kategoriami” ─────────
   Każdy kafelek zajmuje szerokość dwóch kafelków kategorii: ta sama siatka
   (cztery kolumny, te same odstępy), kafelek przez dwie kolumny. Od 760 px
   siatka kategorii ma sześć kolumn — kafelki stoją wtedy pośrodku, nadal po
   dwie kolumny każdy.

   Kolory: bez wybranego koloru interfejsu — ten sam niebieski gradient co
   kafelki kategorii; z `data-ui` — skala wybranego motywu (--u50…--u950), tak
   samo jak `.cats .cat`; „złoto” dostaje metaliczny połysk ikon. Motyw
   „srebro” dopisuje swoje reguły w /api/ui/srebro.css. */
.svcTiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:22px}
.svcTile{grid-column:span 2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;height:92px;padding:0 20px 0 10px;border-radius:15px;text-decoration:none;color:#fff;border:1px solid #ffffff3d;background:radial-gradient(125% 95% at 20% 4%,#ffffff30,#ffffff00 60%),linear-gradient(157deg,#4585f5 0%,#2a62e0 40%,#16409f 72%,#0c2568 100%);box-shadow:0 4px 12px -2px #060d2440,0 1px 3px #060d2426,inset 0 1px 0 #ffffff42,inset 0 -1px 0 #04102e33;-webkit-tap-highlight-color:transparent;--svI1:#e8f0ff;--svI2:#0c2568;--svI3:#ffd36b}
.svcTile:active{transform:scale(.985)}
.svcTile:focus-visible{outline:2px solid #fff;outline-offset:2px}
.svcIco{width:clamp(38px,11vw,58px);height:auto;display:block}
/* Grafika kafelka: zdjęcie (wzór „wersja 3”) po lewej, wtapiające się
   w tło kafelka. Leży pod treścią i nie zajmuje miejsca w siatce — kolumna
   .svcIco trzyma tę samą szerokość co dawna ikona, więc wymiary kafelka
   i układ tekstu się nie zmieniają. */
.svcTile{position:relative;overflow:hidden;isolation:isolate}
.svcTile::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:calc(10px + clamp(38px,11vw,58px) + 30px);background:url(/kat-uslugi/zlece.webp) 50% 50%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,#000 58%,#0000);mask-image:linear-gradient(90deg,#000 58%,#0000)}
.svcTile+.svcTile::before{background-image:url(/kat-uslugi/umow-wizyte.webp)}
.svcTx{min-width:0}
.svcTx b{display:block;font-size:clamp(14px,4.6vw,21px);line-height:1;font-weight:900;letter-spacing:-.2px;text-transform:uppercase;text-shadow:0 1px 2px #00000059}
.svcTx small{display:block;margin-top:1px;font-size:clamp(9.5px,2.75vw,12.5px);line-height:1.12;font-weight:600;color:#dbe7ff;text-shadow:0 1px 1px #0000004d}
.svcArw{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;font-weight:700;opacity:.9}
@media(max-width:359px){.svcTile{padding:0 18px 0 8px;gap:5px}.svcTile::before{width:calc(8px + clamp(38px,11vw,58px) + 28px)}.svcArw{right:6px}.svcTx small{font-size:9px}}
@media(min-width:760px){
  .svcTiles{grid-template-columns:repeat(6,1fr);gap:12px;margin-top:25px}
  .svcTile:first-child{grid-column:2/span 2}
  .svcTile+.svcTile{grid-column:4/span 2}
  .svcTile{padding:0 24px 0 14px;gap:10px}
  .svcArw{right:12px}
  .svcTile::before{width:calc(14px + clamp(38px,11vw,58px) + 40px)}
}
@media(min-width:1024px){.svcTiles{gap:14px;margin-top:27px}.svcTile{height:110px}}
@media(hover:hover) and (pointer:fine){.svcTile{transition:transform .16s ease,border-color .16s ease}.svcTile:hover{transform:translateY(-3px);border-color:#ffffff70}}
html[data-ui] .svcTile{background:radial-gradient(125% 95% at 20% 4%,#ffffff30,#ffffff00 60%),linear-gradient(157deg,var(--u500) 0%,var(--u600) 40%,var(--u800) 72%,var(--u950) 100%);border-color:color-mix(in srgb,var(--u300) 55%,transparent);box-shadow:0 4px 12px -2px color-mix(in srgb,var(--u950) 45%,#00000040),0 1px 3px #00000026,0 0 14px -6px color-mix(in srgb,var(--u500) 55%,transparent),inset 0 1px 0 #ffffff42,inset 0 -1px 0 #00000033;--svI1:var(--u100);--svI2:var(--u950);--svI3:var(--u300)}
html[data-ui] .svcTx small{color:var(--u100)}
html[data-ui=zloto] .svcTile{--svI1:#fbf1d3;--svI2:#2a1f0c;--svI3:#f0cd6a;border-color:#ead08399}
html[data-ui=zloto] .svcTx b{color:#fff8e6}

/* ── Ekrany modułów ───────────────────────────────────────────────────────
   Jeden ekran (#svc) z jedną planszą naraz — kolejny krok wsuwa się z prawej,
   powrót z lewej, jak przejście między ekranami aplikacji. Pola, przyciski
   i ramki to te same klasy co w „Dodaj ogłoszenie” (.field, .main, .ghost). */
#svcRoot{max-width:720px;margin:0 auto}
.svIn{animation:svIn .22s ease-out}
.svBack{animation:svBack .22s ease-out}
@keyframes svIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes svBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.svIn,.svBack{animation:none}}
.svTop{display:flex;align-items:center;gap:8px;padding:12px 12px 0}
.svTop .back{padding:10px 6px;font-size:15px}
.svStep{margin-left:auto;font-size:12px;font-weight:800;color:var(--onbg-muted);white-space:nowrap}
.svBar{height:4px;margin:8px 16px 0;border-radius:4px;background:var(--surface2);overflow:hidden}
.svBar i{display:block;height:100%;border-radius:4px;background:var(--b);transition:width .25s ease}
html[data-ui] .svBar i{background:linear-gradient(90deg,var(--u400),var(--u600))}
.svBody{padding:14px 16px 24px}
.svBody h2{font-size:21px;line-height:1.2;margin:0 0 4px;color:var(--onbg)}
.svBody h3{font-size:15px;margin:18px 0 8px;color:var(--onbg)}
.svLead{margin:0 0 14px;font-size:13.5px;color:var(--onbg-muted);line-height:1.4}
.svSearch{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--onbg);padding:12px 13px;font-size:16px;outline:0;margin-bottom:12px}
.svSearch:focus{border-color:var(--line-strong)}
.svGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:560px){.svGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svProf{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:92px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--onbg);font-size:12px;font-weight:800;line-height:1.2;text-align:center;overflow-wrap:anywhere;hyphens:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.svProf span{font-size:30px;line-height:1}
.svProf.on,.svProf:active{border-color:var(--b);background:var(--tint)}
html[data-ui] .svProf.on{border-color:var(--u500);background:color-mix(in srgb,var(--u500) 16%,var(--card))}
.svList{display:grid;gap:8px}
.svCheck{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--onbg);font-size:15px;font-weight:700;text-align:left;line-height:1.3;cursor:pointer;-webkit-tap-highlight-color:transparent}
.svCheck .bx{flex:0 0 24px;width:24px;height:24px;border:2px solid var(--line-strong);border-radius:7px;display:grid;place-items:center;font-size:14px;color:transparent}
.svCheck.on{border-color:var(--b);background:var(--tint)}
.svCheck.on .bx{background:var(--b);border-color:var(--b);color:#fff}
html[data-ui] .svCheck.on{border-color:var(--u500);background:color-mix(in srgb,var(--u500) 14%,var(--card))}
html[data-ui] .svCheck.on .bx{background:var(--u500);border-color:var(--u500)}
.svCheck small{display:block;font-size:12px;font-weight:600;color:var(--onbg-muted)}
.svFields{margin-top:16px}
.svFields .field input,.svFields .field select,.svFields .field textarea,.svForm .field input,.svForm .field select,.svForm .field textarea{font-size:16px;color:var(--onbg)}
.svUnit{position:relative}.svUnit input{padding-right:46px!important}.svUnit em{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13px;font-weight:800;color:var(--onbg-muted)}
.svYes{display:flex;gap:8px}.svYes button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--onbg);font-weight:800;font-size:14px}
.svYes button.on{border-color:var(--b);background:var(--tint)}
html[data-ui] .svYes button.on{border-color:var(--u500);background:color-mix(in srgb,var(--u500) 14%,var(--card))}
.svChips{display:flex;flex-wrap:wrap;gap:8px}
.svChips button{min-height:42px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--onbg);font-weight:800;font-size:14px}
.svChips button.on{border-color:var(--b);background:var(--tint)}
html[data-ui] .svChips button.on{border-color:var(--u500);background:color-mix(in srgb,var(--u500) 14%,var(--card))}
.svFoot{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:5;padding:12px 0 4px;margin-top:18px;background:linear-gradient(180deg,transparent,var(--bg) 34%)}
@media(min-width:1024px){.svFoot{bottom:0}}
.svFoot .main{font-size:16px;min-height:50px}
.svFoot .main:disabled{opacity:.6}
.svErr{margin:10px 0 0;padding:10px 12px;border:1px solid #7f1d1d;border-radius:12px;background:#450a0a99;color:#fecaca;font-size:13.5px;font-weight:700}
.svErr[hidden]{display:none}
.svOk{padding:22px 16px;border:1px solid #166534;border-radius:16px;background:#052e1680;text-align:center}
.svOk .big{font-size:44px;line-height:1}
.svOk h2{margin:10px 0 6px}
.svCard{padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--card);color:var(--onbg)}
.svCard+.svCard{margin-top:9px}
.svPro{display:grid;grid-template-columns:54px minmax(0,1fr);gap:11px;align-items:start}
.svAva{width:54px;height:54px;border-radius:14px;background:var(--surface2);display:grid;place-items:center;font-size:26px;overflow:hidden}
.svAva img{width:100%;height:100%;object-fit:cover;display:block}
.svPro b{display:block;font-size:15.5px;line-height:1.25;overflow-wrap:anywhere}
.svMeta{margin:3px 0 0;font-size:12.5px;line-height:1.4;color:var(--onbg-muted);overflow-wrap:anywhere}
.svPro .act{grid-column:1/-1;display:flex;gap:8px;margin-top:4px}
.svPro .act .main,.svPro .act .ghost{margin:0;flex:1;padding:12px;font-size:14px}
.svCard.on{border-color:var(--b);box-shadow:0 0 0 2px var(--tint-line)}
html[data-ui] .svCard.on{border-color:var(--u500);box-shadow:0 0 0 2px color-mix(in srgb,var(--u500) 40%,transparent)}
.svSum{display:grid;gap:9px}
.svSum .row2{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.svSum dl{margin:6px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:13.5px}
.svSum dt{color:var(--onbg-muted)}.svSum dd{margin:0;font-weight:700;overflow-wrap:anywhere;white-space:pre-line}
.svSum h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--onbg-muted)}
.svSum p{margin:4px 0 0;font-size:14.5px;font-weight:700;overflow-wrap:anywhere}
.svThumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.svThumbs figure{position:relative;margin:0;width:78px;height:78px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--surface2)}
.svThumbs img{width:100%;height:100%;object-fit:cover;display:block}
.svThumbs .x{position:absolute;right:3px;top:3px;width:24px;height:24px;border:0;border-radius:50%;background:#0f172acc;color:#fff;font-size:12px}
.svAdd{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px dashed var(--line-strong);border-radius:12px;color:var(--onbg);font-weight:800;font-size:14px;cursor:pointer}
.svAdd input{display:none}
.svPill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;background:var(--surface2);color:var(--onbg);white-space:nowrap}
.svPill.new,.svPill.question,.svPill.reschedule{background:#78350f;color:#fde68a}
.svPill.proposed{background:#1e3a8a;color:#bfdbfe}
.svPill.confirmed,.svPill.accepted{background:#14532d;color:#bbf7d0}
.svPill.declined,.svPill.cancelled,.svPill.rejected,.svPill.closed{background:#3f3f46;color:#e4e4e7}
.svDot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;margin-left:6px;vertical-align:1px}
.svRow{display:flex;align-items:center;gap:11px;width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--onbg);text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.svRow+.svRow{margin-top:8px}
.svRow .ic{flex:0 0 auto;font-size:24px}
.svRow .tx{flex:1;min-width:0}
.svRow .tx b{display:block;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.svRow .tx small{display:block;margin-top:2px;font-size:12.5px;color:var(--onbg-muted);overflow-wrap:anywhere}
.svRow .go{flex:0 0 auto;font-size:20px;color:var(--onbg-muted)}
.svCount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:900;margin-left:6px;vertical-align:1px}
.svTabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px;scrollbar-width:none}
.svTabs::-webkit-scrollbar{display:none}
.svTabs button{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--onbg);font-weight:800;font-size:13.5px;white-space:nowrap}
.svTabs button.on{border-color:var(--b);background:var(--tint)}
html[data-ui] .svTabs button.on{border-color:var(--u500);background:color-mix(in srgb,var(--u500) 14%,var(--card))}
.svTime{margin-top:12px;display:grid;gap:8px}
.svEv{padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:13.5px;line-height:1.4;overflow-wrap:anywhere;white-space:pre-line}
.svEv.me{background:var(--tint)}
.svEv small{display:block;font-size:11.5px;color:var(--onbg-muted);margin-bottom:3px}
.svEv b.slot{display:block;font-size:15px;margin:2px 0}
.svActs{display:grid;gap:8px;margin-top:14px}
.svActs .main,.svActs .ghost{margin:0;width:100%;padding:13px;font-size:15px}
.svActs .ghost+.ghost{margin-left:0}
.svBox{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.svBox .field{margin-bottom:10px}
.svBox .row2{display:flex;gap:8px}.svBox .row2 .main,.svBox .row2 .ghost{margin:0;flex:1;padding:12px}
.svNote{font-size:12.5px;color:var(--onbg-muted);line-height:1.4;margin:8px 0 0}
.svLinks{display:grid;gap:8px;margin-top:18px}
.svHub{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:6px}
.svHub .main{margin:0;font-size:16px;min-height:52px}
.svFilter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:12px}
.svFilter select,.svFilter input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--onbg);padding:0 11px;font-size:15px}
.svJob b{display:block;font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.svConsent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--card);font-size:13.5px;line-height:1.4;color:var(--onbg);text-align:left;width:100%}
.svConsent .bx{flex:0 0 22px;width:22px;height:22px;border:2px solid var(--line-strong);border-radius:6px;display:grid;place-items:center;color:transparent;font-size:13px}
.svConsent.on .bx{background:var(--b);border-color:var(--b);color:#fff}
.svHp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.svSwitch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--onbg);font-weight:700;font-size:14.5px;text-align:left;margin-bottom:9px}
.svSwitch i{flex:0 0 46px;width:46px;height:27px;border-radius:999px;background:var(--surface2);position:relative;transition:background .15s}
.svSwitch i::after{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .15s}
.svSwitch.on i{background:#16a34a}.svSwitch.on i::after{transform:translateX(19px)}
.svSwitch small{display:block;font-weight:600;font-size:12px;color:var(--onbg-muted)}
#svcAcc .svRow{margin-top:8px}
#svcAcc h3{margin:18px 0 4px;font-size:15px;color:var(--onbg)}
.svLoad{padding:40px 10px;text-align:center;color:var(--onbg-muted)}
@media(min-width:1024px){.svGrid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ── „Umów wizytę” · ekran wyboru zawodu (.svV1) ─────────────────────────
   Odwzorowanie dostarczonego projektu. Wszystkie wymiary są w pikselach
   projektu (851 px szerokości) przeliczanych przez --k, więc proporcje
   zostają takie same na każdym telefonie. Ilustracje pochodzą z projektu
   (/kat/wizyta/); `mix-blend-mode:lighten` chowa ich ciemne tło w tle kafelka.
   Pasek dolny i tło strony zmieniają się tylko na tym ekranie. */
.svV1{--k:calc(min(100vw,720px) / 851);padding:calc(var(--k)*2) calc(var(--k)*24) calc(var(--k)*14);color:#fff}
html:has(#svc.active .svV1),html:has(#svc.active .svV1) body{background:#07152a}
.svHero{position:relative;height:calc(var(--k)*218);margin:0 calc(var(--k)*-11) 0 calc(var(--k)*-10);border:1px solid #1f8cff;border-right-color:#0a4fb8;border-bottom-color:#0a5fd8;border-radius:calc(var(--k)*24);background:radial-gradient(28% 42% at 100% 0%,#0a80fc 0%,#0a80fc00 100%),radial-gradient(22% 70% at 100% 55%,#0052c4b3 0%,#0052c400 100%),linear-gradient(180deg,#0045c8 0%,#0037a4 22%,#002b88 48%,#002579 72%,#002c90 100%);box-shadow:0 calc(var(--k)*8) calc(var(--k)*22) #00000059}
.svHeroArt{position:absolute;left:calc(var(--k)*52);top:calc(var(--k)*9);width:calc(var(--k)*191);height:calc(var(--k)*200);pointer-events:none}
.svV1 .svHero h2{position:absolute;z-index:1;left:calc(var(--k)*302 - 11px);top:calc(var(--k)*40);margin:0;font-size:calc(var(--k)*57);line-height:1.1;font-weight:800;letter-spacing:calc(var(--k)*.3);color:#fff;white-space:nowrap;text-shadow:0 calc(var(--k)*2) calc(var(--k)*4) #00000040}
.svV1 .svHero .svLead{position:absolute;left:calc(var(--k)*307);top:calc(var(--k)*113);margin:0;font-size:calc(var(--k)*25);line-height:calc(var(--k)*35);font-weight:500;color:#abc8fe;white-space:nowrap}
.svHeroPts{position:absolute;left:calc(var(--k)*658);top:calc(var(--k)*22);width:calc(var(--k)*160);height:calc(var(--k)*170);padding:calc(var(--k)*69) 0 0 calc(var(--k)*39)}
.svHeroPts img{position:absolute;left:0;-webkit-mask-image:radial-gradient(closest-side,#000 62%,#0000);mask-image:radial-gradient(closest-side,#000 62%,#0000)}
.svHeroPts .t{top:0;width:calc(var(--k)*70);height:calc(var(--k)*60)}
.svHeroPts .s{top:calc(var(--k)*60);width:calc(var(--k)*34);height:calc(var(--k)*110)}
.svHeroPts span{position:relative;display:block;font-size:calc(var(--k)*21);line-height:calc(var(--k)*33);font-weight:700;color:#fff;white-space:nowrap}
.svQ{display:flex;align-items:center;gap:calc(var(--k)*26);height:calc(var(--k)*66);margin:calc(var(--k)*12) 0 0 calc(var(--k)*2);padding:0 calc(var(--k)*20) 0 calc(var(--k)*22);border:1px solid #26395a;border-radius:calc(var(--k)*18);background:#061224;color:#b6c3ec;cursor:text}
.svQ:focus-within{border-color:#3d5c8f}
.svQ svg{flex:0 0 auto;width:calc(var(--k)*38);height:calc(var(--k)*38)}
.svV1 .svQ .svSearch{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:#fff;font-size:max(16px,calc(var(--k)*26))}
.svV1 .svQ .svSearch::placeholder{color:#aebbd9;opacity:1;font-size:calc(var(--k)*26)}
/* Wszystkie kafelki zawodów mają jedną wysokość: najwyższy dotychczasowy
   kafelek (133 px projektu + obramowanie) powiększony o 15%. */
.svV1 .svGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--k)*10) calc(var(--k)*11);margin:calc(var(--k)*10) 0 0 calc(var(--k)*2)}
.svV1 .svProf{position:relative;height:calc((var(--k)*133 + 2px) * 1.15);min-height:0;justify-content:center;gap:calc(var(--k)*5);padding:calc(var(--k)*10) calc(var(--k)*26) calc(var(--k)*10) calc(var(--k)*14);border:1px solid #15283f;border-radius:calc(var(--k)*16);background:linear-gradient(180deg,#0a192d,#071428);color:#fff;font-size:calc(var(--k)*23.5);font-weight:800;line-height:calc(var(--k)*25);letter-spacing:calc(var(--k)*.2);hyphens:none;overflow-wrap:normal;overflow:visible}
.svV1 .svProf[hidden]{display:none}
.svV1 .svProf:active,.svV1 .svProf.on{border-color:#2f6fd6;background:linear-gradient(180deg,#0c2244,#081a36)}
.svV1 .svPi{display:block;flex:0 0 auto;width:calc(var(--k)*var(--w));height:calc(var(--k)*var(--h));mix-blend-mode:lighten;pointer-events:none}
.svV1 .svPe{font-size:calc(var(--k)*52);line-height:1}
.svV1 .svProf .svPl{display:block;font-size:inherit;line-height:inherit;padding-left:calc(var(--k)*12);text-shadow:0 1px 2px #00000080}
.svV1 .svPa{position:absolute;right:calc(var(--k)*16);top:50%;width:calc(var(--k)*10);height:calc(var(--k)*16);margin-top:calc(var(--k)*-10);color:#c3cee0}
.svV1 .svT-transport{justify-content:flex-end;padding-bottom:calc(var(--k)*24)}
.svV1 .svT-transport .svPi{position:absolute;left:calc(var(--k)*34);top:calc(var(--k)*17)}
.svV1 .svT-transport .svPl{padding-left:calc(var(--k)*30)}
.svV1 .svT-groomer,.svV1 .svT-gastronomia,.svV1 .svT-pozostale{flex-direction:row;justify-content:flex-start;gap:calc(var(--k)*10);padding:0 calc(var(--k)*20) 0 calc(var(--k)*32);text-align:left}
.svV1 .svT-groomer .svPl,.svV1 .svT-gastronomia .svPl,.svV1 .svT-pozostale .svPl{min-width:0;padding-left:0}
.svV1 .svT-groomer{gap:calc(var(--k)*8);padding-right:calc(var(--k)*28);padding-left:calc(var(--k)*28)}
.svV1 .svT-gastronomia{gap:0;padding-left:calc(var(--k)*31)}
.svV1 .svT-gastronomia .svPl{margin-left:calc(var(--k)*-2);hyphens:manual}
.svV1 .svT-pozostale{gap:calc(var(--k)*8);padding:0 calc(var(--k)*4) 0 calc(var(--k)*32)}
.svV1 .svT-pozostale .svPa{display:none}
.svV1 .svNote{color:#a4b9d1}
.svV1 .svLinks{gap:0;margin-top:calc(var(--k)*16)}
.svV1 .svRow,.svProJ .svPro1{position:relative;gap:0;margin:0 0 calc(var(--k)*12) calc(var(--k)*2);padding:0 calc(var(--k)*56) 0 calc(var(--k)*21);border-radius:calc(var(--k)*16);color:#fff}
.svV1 .svRow .tx b,.svProJ .svPro1 .tx b{font-size:calc(var(--k)*24);line-height:calc(var(--k)*30);font-weight:800}
.svV1 .svRow .tx small,.svProJ .svPro1 .tx small{margin-top:calc(var(--k)*2);font-size:calc(var(--k)*19);line-height:calc(var(--k)*25);font-weight:500}
.svV1 .svV1Row{min-height:calc(var(--k)*76);border:1px solid #1b2f4a;background:linear-gradient(180deg,#0a192d,#071428)}
.svV1 .svV1Row .ic{display:block;width:calc(var(--k)*50);height:calc(var(--k)*62);margin-right:calc(var(--k)*21);font-size:calc(var(--k)*40);line-height:calc(var(--k)*62);text-align:center;mix-blend-mode:lighten}
.svV1 .svV1Row .tx small{color:#a4b9d1}
.svV1 .svV1Row.svMy{min-height:calc(var(--k)*76 * 1.15 * 1.3);padding-top:calc(var(--k)*10);padding-bottom:calc(var(--k)*10)}
.svV1 .svMy .tx b{font-size:calc(var(--k)*24 * 1.35);line-height:calc(var(--k)*30 * 1.35)}
.svV1 .svMy .tx small{margin-top:calc(var(--k)*4);font-size:calc(var(--k)*19 * 1.35);line-height:calc(var(--k)*25 * 1.35)}
.svV1 .svV1Row .svPa{right:calc(var(--k)*24);margin-top:calc(var(--k)*-8)}
.svV1 .svRow.svPro1,.svProJ .svRow.svPro1{min-height:calc(var(--k)*98 * 1.15 * 1.23 * 1.4);margin:0 calc(var(--k)*-1) 0 0;padding:0 calc(var(--k)*19) 0 calc(var(--k)*21);border:calc(var(--k)*2.5) solid #ff6203;border-radius:calc(var(--k)*18);background:radial-gradient(70% 80% at 45% 125%,#8a2f11 0%,#8a2f1100 100%),linear-gradient(180deg,#2e1d19,#3a1e16);box-shadow:0 0 calc(var(--k)*14) #ff62032e}
.svPro1 .ic{display:block;width:calc(var(--k)*70);height:calc(var(--k)*62);margin-right:calc(var(--k)*16);mix-blend-mode:lighten}
.svV1 .svPro1 .tx,.svProJ .svPro1 .tx{padding:calc(var(--k)*14) 0}
.svV1 .svPro1 .tx b,.svProJ .svPro1 .tx b{font-size:calc(var(--k)*24 * 1.55);line-height:calc(var(--k)*30 * 1.5)}
.svV1 .svPro1 .tx small,.svProJ .svPro1 .tx small{margin-top:calc(var(--k)*6);font-size:calc(var(--k)*19 * 1.55);line-height:calc(var(--k)*25 * 1.45);color:#e9d9d1}
.svV1 .svPro1 .go,.svProJ .svPro1 .go{display:flex;align-items:center;gap:calc(var(--k)*16);height:calc(var(--k)*66);margin-left:calc(var(--k)*10);padding:0 calc(var(--k)*22) 0 calc(var(--k)*28);border-radius:calc(var(--k)*14);background:linear-gradient(180deg,#f98a06,#f9501a);color:#fff;font-size:calc(var(--k)*26);font-weight:800;white-space:nowrap;box-shadow:inset 0 1px 0 #ffffff40}
.svV1 .svPro1 .go .svPa,.svProJ .svPro1 .go .svPa{position:static;margin:0;width:calc(var(--k)*11);height:calc(var(--k)*18);color:#fff}
/* „Zlecę” · ten sam kafelek „Jesteś fachowcem?”; marginesy wyrównują szerokość do .svV1 */
.svProJ{--k:calc(min(100vw,720px) / 851);margin:calc(var(--k)*16) calc(16px - var(--k)*24) 0}
@media(hover:hover) and (pointer:fine){.svV1 .svProf:hover,.svV1 .svV1Row:hover{border-color:#2f5a96}}
@media(max-width:1023px){
  html:has(#svc.active .svV1) .bottom{height:calc(min(100vw,720px) / 851 * 100 + env(safe-area-inset-bottom));background:linear-gradient(180deg,#071428,#000a25);border-top:1px solid #293e56}
  html:has(#svc.active .svV1) .tab{gap:calc(min(100vw,720px) / 851 * 8);color:#c1d6fb;font-size:calc(min(100vw,720px) / 851 * 21);font-weight:700}
  html:has(#svc.active .svV1) .tab[data-s=home]{color:#fff}
  html:has(#svc.active .svV1) .tab b{font-size:0;width:calc(min(100vw,720px) / 851 * 36);height:calc(min(100vw,720px) / 851 * 36)}
  html:has(#svc.active .svV1) .tab b::before{content:"";display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--svNi) center/contain no-repeat;mask:var(--svNi) center/contain no-repeat}
  html:has(#svc.active .svV1) .tab:not([data-s=home]) b::before{background:#b7c8f2}
  html:has(#svc.active .svV1) .tab b .dot{font-size:10px}
  html:has(#svc.active .svV1) .tab[data-s=home]{--svNi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 1.8 11.4a1 1 0 0 0 1.3 1.5L4 12.1V20a1.5 1.5 0 0 0 1.5 1.5H10v-6h4v6h4.5A1.5 1.5 0 0 0 20 20v-7.9l.9.8a1 1 0 0 0 1.3-1.5Z'/%3E%3C/svg%3E")}
  html:has(#svc.active .svV1) .tab[data-s=search]{--svNi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='14' cy='9.5' r='6.5'/%3E%3Cpath d='M9.3 14.2 3.5 20'/%3E%3C/svg%3E")}
  html:has(#svc.active .svV1) .tab[data-s=add]{--svNi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E")}
  html:has(#svc.active .svV1) .tab[data-s=messages]{--svNi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6.2 12 13l10-6.8V18a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18Z'/%3E%3Cpath d='M3 4.5h18L12 10.7Z'/%3E%3C/svg%3E")}
  html:has(#svc.active .svV1) .tab[data-s=account]{--svNi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3.5 21.5v-1.8c0-3 2.5-5.4 5.5-5.4h6c3 0 5.5 2.4 5.5 5.4v1.8Z' stroke-linejoin='round'/%3E%3C/svg%3E")}
}

/* ── „Zlecę” · górna karta (.svJHero) ────────────────────────────────────
   Odwzorowanie dostarczonego projektu (658 px szerokości ekranu, karta
   620 × 498). Wymiary w pikselach projektu przeliczane przez --k, więc
   proporcje są takie same na każdym telefonie. Ilustracja i ikony pochodzą
   z projektu (/kat/zlece/). */
.svJHero{--k:calc(min(100vw,720px) / 658);position:relative;height:calc(var(--k)*498);margin:calc(var(--k)*10) calc(var(--k)*20 - 16px) calc(var(--k)*8) calc(var(--k)*18 - 16px);border:1px solid #3e6bd0;border-bottom-color:#2e56b0;border-radius:calc(var(--k)*26);background:radial-gradient(55% 60% at 80% 35%,#2a5fe073 0%,#2a5fe000 100%),linear-gradient(180deg,#2556db 0%,#1b44b8 19%,#123394 40%,#0f2c87 55%,#112f8e 72%,#0c267b 100%);box-shadow:0 0 calc(var(--k)*18) #1f5bff3d,0 calc(var(--k)*8) calc(var(--k)*22) #00000059;color:#fff;overflow:hidden}
.svJHero .art{position:absolute;left:calc(var(--k)*364);top:calc(var(--k)*4);width:calc(var(--k)*254);height:calc(var(--k)*344);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#0000,#000 3%),linear-gradient(0deg,#0000,#000 3%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000,#000 3%),linear-gradient(0deg,#0000,#000 3%);mask-composite:intersect}
.svBody .svJHero h2{position:absolute;left:calc(var(--k)*33);top:calc(var(--k)*36);margin:0;font-size:calc(var(--k)*66);line-height:1.1;font-weight:800;letter-spacing:calc(var(--k)*-.5);color:#fff;text-shadow:0 calc(var(--k)*2) calc(var(--k)*4) #00000040}
.svJHero .svLead{position:absolute;left:calc(var(--k)*34);top:calc(var(--k)*124);margin:0;font-size:calc(var(--k)*23);line-height:calc(var(--k)*34);font-weight:500;color:#bcd0f7;white-space:nowrap}
.svJHero .pts{position:absolute;left:calc(var(--k)*33);top:calc(var(--k)*285);display:flex;gap:calc(var(--k)*18)}
.svJHero .pts span{display:flex;align-items:center;gap:calc(var(--k)*10);height:calc(var(--k)*55);padding:0 calc(var(--k)*20) 0 calc(var(--k)*15);border-radius:999px;background:#0b1e62;font-size:calc(var(--k)*21);font-weight:700;color:#fff;white-space:nowrap}
.svJHero .pts img{width:calc(var(--k)*32 * .94);height:calc(var(--k)*40 * .94);mix-blend-mode:lighten}
.svJHero .pts span+span img{width:calc(var(--k)*30 * .94)}
.svJHero .main{position:absolute;left:calc(var(--k)*25);right:calc(var(--k)*21);top:calc(var(--k)*372);display:flex;align-items:center;justify-content:center;gap:calc(var(--k)*12);width:auto;height:calc(var(--k)*94);margin:0;padding:0;border:0;border-radius:calc(var(--k)*22);background:linear-gradient(180deg,#fbfcff 0%,#f1f5fe 55%,#dde6fa 100%);color:#132a6c;font-size:calc(var(--k)*27);font-weight:800;box-shadow:0 calc(var(--k)*6) calc(var(--k)*16) #00104a59,inset 0 -1px 0 #c3d1f2}
.svJHero .main i{font-style:normal;font-size:calc(var(--k)*40);font-weight:700;line-height:1;color:#2755f0;margin-top:calc(var(--k)*-4)}
.svJHero .main .svPa{position:absolute;right:calc(var(--k)*30);top:50%;width:calc(var(--k)*12);height:calc(var(--k)*20);margin-top:calc(var(--k)*-10);color:#132a6c}