/* HiLobby: jeden motyw serwisu ("Midnight") dla strony glownej, panelu i administracji.
   Ladowany na koncu; selektor :root:not(#lp-theme) wygrywa z jasnym/ciemnym motywem z plikow czesci.
   Profile uzytkownikow (szablony .pf) maja wlasne kolory i nie sa tu zmieniane. */
:root:not(#lp-theme){
 --bg:#080a12;--sf:#10131f;--sf2:#161a2a;--tx:#e9ecf5;--mu:#929bb0;--pr:#8b7bff;--pr2:#38bdf8;--pt:#ffffff;--bd:#232a3e;--bd2:#2f3752;
 --eb:#3a1620;--et:#ffb3c0;--ob:#0f2e22;--ot:#a7f3d0;--wb:#33270b;--wt:#fcd98b;--c1:#8b7bff;--c2:#38bdf8;--hz:139,123,255;
 /* wypelnienie przyciskow: bialy tekst ma min. 5:1 na calej dlugosci gradientu (WCAG AA) */
 --grad:linear-gradient(135deg,#6a4cf5 0%,#4c58e0 55%,#1f6fc4 100%);
 --grad-h:linear-gradient(135deg,#7458ff 0%,#5562ea 55%,#2678cf 100%);
 --ring:0 0 0 3px rgba(139,123,255,.35);
 --glow:0 8px 24px rgba(106,76,245,.32);--glow-h:0 12px 32px rgba(106,76,245,.45);
 --shadow:0 1px 0 rgba(255,255,255,.035) inset,0 10px 28px rgba(0,0,0,.35);
 --shadow-h:0 1px 0 rgba(255,255,255,.05) inset,0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(139,123,255,.12);
 --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
 color-scheme:dark;accent-color:#8b7bff}
html{background:var(--bg)}
body{background:radial-gradient(1100px 600px at 8% -12%,rgba(139,123,255,.13),transparent 60%),radial-gradient(900px 520px at 108% -6%,rgba(56,189,248,.09),transparent 60%),var(--bg);background-attachment:fixed;color:var(--tx);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(139,123,255,.35)}
a{color:inherit}
/* jeden motyw: bez przelacznika jasny/ciemny */
#theme{display:none!important}

/* fokus z klawiatury: jeden wyrazny pierscien w calym serwisie */
:focus-visible{outline:2px solid #a99cff;outline-offset:3px}
:where(input,select,textarea):focus-visible{outline:none}

/* paski gorne */
.top,.nav{background:rgba(8,10,18,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.top{border-bottom:1px solid var(--bd)}
.top .brand b,.top>a>b,.nav .br{background:linear-gradient(90deg,#fff 0%,#c9c1ff 55%,#7dd3fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;will-change:transform;transform:translateZ(0)}
.w>.nav{border-radius:0 0 18px 18px;padding-left:14px;padding-right:14px;position:sticky;top:0;z-index:30}
.nav a.l{position:relative;transition:color .2s}
.nav a.l::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#a99cff,#7dd3fc);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a.l:hover{color:var(--tx)}
.nav a.l:hover::after,.nav a.l:focus-visible::after,.nav a.l[aria-current]::after{transform:scaleX(1)}

/* karty */
.card{background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 40%),var(--sf);border-color:var(--bd);box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.card:hover{border-color:var(--bd2)}
/* karty-linki na stronie publicznej delikatnie unosza sie */
a.card:hover,a.card:focus-visible,.grid>.card:hover,.plans>.card:hover,.pheads>.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-h);border-color:rgba(139,123,255,.35)}
.pvc,.agsave,.shsave,dialog,.accm,.tl,.mg .card{background-color:var(--sf);border-color:var(--bd)}

/* przyciski */
.b:not(.pf *),.btn:not(.o),.pvfab{background:var(--grad);color:#fff;border:0;box-shadow:var(--glow);isolation:isolate;transition:transform .18s var(--ease),box-shadow .25s,filter .2s}
.b:not(.pf *),.btn:not(.o){position:relative}
/* jasniejszy gradient po najechaniu (przejscie przez warstwe ::before, bo gradientow nie da sie animowac) */
.b:not(.pf *)::before,.btn:not(.o)::before,.pvfab::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad-h);opacity:0;transition:opacity .25s;z-index:-1}
.b:hover:not(:disabled)::before,.btn:not(.o):hover::before,.pvfab:hover::before{opacity:1}
.b:hover:not(:disabled),.btn:not(.o):hover{box-shadow:var(--glow-h);transform:translateY(-1px)}
.b2,.btn.o{background:rgba(255,255,255,.035);border:1px solid var(--bd2);color:var(--tx);transition:border-color .2s,background-color .2s,transform .18s var(--ease),color .2s}
.b2:hover:not(:disabled),.btn.o:hover{border-color:var(--pr);background:rgba(139,123,255,.1)}
:is(.b:not(.pf *),.b2,.btn,.chip,.tabs button,.per button):active:not(:disabled){transform:translateY(0) scale(.97);transition-duration:.06s}
.b:disabled,.b2:disabled,.b[disabled],.b2[disabled]{opacity:.5;box-shadow:none;cursor:not-allowed;transform:none}
.b2.d{color:var(--et);border-color:rgba(255,179,192,.35)}
.b2.d:hover:not(:disabled){background:rgba(255,179,192,.08);border-color:var(--et)}

/* elementy "wlaczone": ten sam gradient i bialy tekst o kontrascie AA (zamiast jasnego fioletu) */
.chip.on,.per button.on,.badge.p,.bg.pr,.skip,.how li::before,.side .ngc button.on,.ph .asn a.on{background:var(--grad);color:#fff;border-color:transparent}
.chip,.per button,.tabs button,.side button,#nav a,nav a{transition:background-color .2s,color .2s,border-color .2s,transform .18s var(--ease)}
.chip:hover:not(.on),.per button:hover:not(.on){border-color:var(--pr);color:var(--tx)}

/* pola formularzy (poza profilami uzytkownikow) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea):not(.pf *){background:#0b0e18;color:var(--tx);border:1px solid var(--bd2);border-radius:10px;transition:border-color .2s,box-shadow .2s,background-color .2s}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea):not(.pf *):hover{border-color:#3d4766}
:where(input,select,textarea):not(.pf *):focus{outline:none;border-color:var(--pr);box-shadow:var(--ring);background-color:#0d1120}
/* placeholder 6,3:1 na tle pola (bylo 4,1:1) */
:where(input,select,textarea):not(.pf *)::placeholder{color:#8a93a8;opacity:1}
:where(input[type=checkbox],input[type=radio]):not(.pf *){cursor:pointer}

/* menu panelu i administracji */
.side button:hover:not(.on){background:rgba(255,255,255,.04)}
.side button.on,.side .si button.on{background:linear-gradient(90deg,rgba(139,123,255,.2),rgba(139,123,255,.04));color:#d6d0ff}
.side .sg.cur>button.ss{color:#c9c1ff}
.side .si{border-left-color:var(--bd2)}
#nav a:hover:not(.on){background:rgba(255,255,255,.04)}
#nav .si a.on{background:linear-gradient(90deg,rgba(139,123,255,.2),rgba(139,123,255,.04));color:#d6d0ff}
#nav .sg.cur>a.ss,#nav .sbar a.on{color:#c9c1ff}
#nav .si{border-left-color:var(--bd2)}
#nav a.ss svg{transition:transform .25s var(--spring)}
#nav a.ss:hover svg{transform:scale(1.12)}
.tabs button.on{color:#c9c1ff;border-bottom-color:#8b7bff}
#nav .sbar{background:rgba(8,10,18,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ph .sn button{transition:color .2s,border-color .2s}
.ph .sn button:hover{color:var(--tx)}
.ph .sn button.on{color:#c9c1ff;border-bottom-color:#8b7bff}
.ph h1,#view h1{letter-spacing:-.01em}

/* telefon: pasek zapisu zawija sie do dwoch linii, wiec przycisk podgladu idzie wyzej, zeby go nie zaslanial */
@media (max-width:900px){body.dirty .pvfab{bottom:196px}}

/* tabele, notatki, kafelki */
table th{color:var(--mu)}
tbody tr{transition:background-color .15s}
tbody tr:hover{background:rgba(139,123,255,.045)}
.note{border-color:rgba(252,217,139,.25)}
.tl{transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.tl:hover{border-color:rgba(139,123,255,.35);transform:translateY(-2px);box-shadow:var(--shadow-h)}
.tl b{background:linear-gradient(90deg,#fff,#c9c1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl svg,.side button.ss svg{color:#a99cff}
.side button.ss svg{transition:transform .25s var(--spring)}
.side button.ss:hover svg{transform:scale(1.12)}

/* strona glowna: akcenty w tonacji Midnight (fiolet -> blekit zamiast rozu i pomaranczu) */
.hero h1 em{background:linear-gradient(90deg,#b4a7ff 0%,#8b9bff 45%,#67d4fb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hbg::before{background:radial-gradient(40% 50% at 20% 30%,rgba(106,76,245,.22),transparent),radial-gradient(35% 45% at 80% 20%,rgba(56,189,248,.16),transparent)}
.ic{background:var(--grad);box-shadow:0 6px 16px rgba(106,76,245,.3);transition:transform .3s var(--spring)}
.card:hover .ic{transform:rotate(-6deg) scale(1.08)}
.tcard .mini{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tcard:hover .mini,.tcard:focus-visible .mini{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45);border-color:rgba(139,123,255,.45)}
.plans .card.pro,.pheads .card.pro{border-color:rgba(139,123,255,.55);box-shadow:0 0 0 1px rgba(139,123,255,.35),0 20px 50px rgba(106,76,245,.18)}
details{transition:border-color .2s,background-color .2s}
details[open]{border-color:var(--bd2)}
summary{transition:color .2s}
summary:hover{color:#c9c1ff}
footer{border-top-color:var(--bd);background:linear-gradient(180deg,transparent,rgba(139,123,255,.04))}
footer a{transition:color .2s}
footer a:hover{color:var(--tx)}
.pow{background:rgba(255,255,255,.03)}
.toast{background:#1b2033;color:var(--tx);border:1px solid var(--bd2);box-shadow:0 12px 30px rgba(0,0,0,.45)}

/* ===== Animacje ===== */
/* animacje uzywaja translate/scale (a nie transform), wiec nie nadpisuja np. translateX(-50%) paskow i toastow */
@keyframes lp-up{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes lp-fade{from{opacity:0}to{opacity:1}}
@keyframes lp-pop{from{opacity:0;translate:0 10px;scale:.97}to{opacity:1;translate:none;scale:none}}
@keyframes lp-float{0%,100%{translate:0 0}50%{translate:0 -8px}}

@media (prefers-reduced-motion:no-preference){
 /* wejscie strony publicznej (renderowana na serwerze, wiec animacja odpala sie raz) */
 .hero>*:first-child>*{animation:lp-up .6s var(--ease) both}
 .hero>*:first-child>*:nth-child(2){animation-delay:.07s}
 .hero>*:first-child>*:nth-child(3){animation-delay:.14s}
 .hero>*:first-child>*:nth-child(4){animation-delay:.21s}
 .hero>*:first-child>*:nth-child(n+5){animation-delay:.28s}
 .hero>*:nth-child(2){animation:lp-fade .9s .2s var(--ease) both}
 /* pauza zamiast zdejmowania animacji: bez skoku telefonu przy najechaniu kursorem */
 .phw .phone{animation:lp-float 7s ease-in-out 1.2s infinite}
 .phw .phone.hov{animation-play-state:paused}
 .auth .card,.sysp .card{animation:lp-pop .45s var(--ease) both}

 /* odslanianie sekcji przy przewijaniu: tylko tam, gdzie przegladarka wspiera scroll-driven animations */
 @supports (animation-timeline:view()){
  section.s :is(h2.t,.sub),section.s :is(.grid,.plans,.pheads,.how,.faq,.fgrid)>*{animation:lp-up linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
 }

 /* okna dialogowe, menu konta, paski zapisu i baner prywatnosci pojawiaja sie plynnie */
 dialog[open]{animation:lp-pop .25s var(--ease)}
 dialog[open]::backdrop{animation:lp-fade .25s ease}
 .top details.acc[open]>.accm{animation:lp-pop .18s var(--ease)}
 .shsave:not([hidden]),.agsave:not([hidden]){animation:lp-up .3s var(--ease)}
 #ck{animation:lp-up .45s .4s var(--ease) both}
 .toast,.flash,#banners .ban{animation:lp-up .3s var(--ease)}
 details[open]>:not(summary){animation:lp-fade .3s ease}
}

/* ograniczony ruch: bez animacji i przesuniec, zostaja tylko zmiany kolorow */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
 :is(.b,.b2,.btn,.card,.tl,.tcard .mini,.ic,.side button.ss svg){transform:none!important}
 html{scroll-behavior:auto}
}

/* przewijanie */
*{scrollbar-color:#2f3752 transparent}

/* przelacznik jezyka (stopka strony, panelu, administracji i logowania) */
.lsw{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--bd);border-radius:12px;color:var(--mu);background:var(--sf);vertical-align:middle}
.lsw svg{margin:0 4px 0 7px;flex:none}
.lsw a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:9px;color:var(--mu);text-decoration:none;font-size:.84rem;font-weight:600;transition:color .15s,background .15s}
.lsw a:hover{color:var(--tx)}
.lsw a[aria-current]{background:var(--sf2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--bd2)}
.lsw a:focus-visible{outline:none;box-shadow:var(--ring)}
/* stopka panelu i administracji */
.pft{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;max-width:1480px;margin:12px auto 0;padding:16px 16px 22px;border-top:1px solid var(--bd);font-size:.84rem;color:var(--mu)}
.pft nav:not(.lsw){display:flex;flex-wrap:wrap;gap:6px 16px;flex:1 1 auto}
.pft nav:not(.lsw) a{color:var(--mu);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.pft nav:not(.lsw) a:hover,.pft nav:not(.lsw) a:focus-visible{color:var(--tx);text-decoration:underline}
@media (max-width:600px){.pft{padding:14px 12px 18px;gap:10px 14px}.pft nav:not(.lsw){order:2;flex-basis:100%}.pft .lsw{order:1}}
/* cienki pasek zgody wewnatrz serwisu (pelny baner = glowna) */
.ck.ckmini{padding:10px 16px;background:rgba(10,13,22,.9);backdrop-filter:blur(8px)}
.ck.ckmini>.ckw>p,.ck.ckmini>.ckw>small{display:none}
.ck.ckmini .ckrow,.ck.ckmini{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ck.ckmini .cklink{font-size:13px;color:var(--mu)}