/* ============================================================
   NextGO+ — Login · Liquid Glass skin (override layer)
   ------------------------------------------------------------
   Nakładka kosmetyczna na login.html. Ładowana PO inline <style>
   (późniejsza kolejność źródła => wygrywa przy tej samej swoistości),
   więc NIE wymaga zmian w HTML ani w skryptach. Przemalowuje portal
   z amber → cyan Liquid Glass (design system 2026). Aby cofnąć:
   usuń <link> do tego pliku z login.html.
   Zależności: te same selektory co inline (.auth-card, .afield__*,
   .abtn, .aprov, .auth-toggle …) — tylko paleta, materiał i fonty.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=DM+Sans:opsz,wght@9..40,400..700&display=swap');

/* ---- Liquid Glass tokens (lokalne, niezależne od amber main.css) ---- */
.auth-shell{
  --lg-cyan-300: oklch(83% .105 196);
  --lg-cyan-400: oklch(80% .125 198);
  --lg-cyan-500: oklch(75% .130 200);
  --lg-cyan-600: oklch(66% .125 205);
  --lg-violet-400: oklch(72% .16 292);

  /* nadpisanie tokenów karty z inline <style> */
  --c-card: oklch(20% .022 250 / .55);
  --c-card-bd: oklch(75% .13 200 / .40);
  --c-input: rgba(255 255 255 / .05);
  --c-input-bd: rgba(255 255 255 / .12);
  --c-input-bd-focus: var(--lg-cyan-400);
  --c-hair: rgba(255 255 255 / .10);
}
html.login-light .auth-shell{
  --c-card: rgba(255 255 255 / .62);
  --c-card-bd: oklch(66% .12 205 / .45);
  --c-input: rgba(255 255 255 / .7);
  --c-input-bd: rgba(20 30 50 / .12);
  --c-hair: rgba(20 30 50 / .12);
}

/* ---- Typografia design-systemu ---- */
.auth-headline,
.auth-card__title{ font-family:'Bricolage Grotesque', system-ui, sans-serif; letter-spacing:-.025em; }
.auth-lead,
.auth-card__sub,
.afield__input,
.abtn,
.aprov,
.auth-feats li{ font-family:'DM Sans', system-ui, sans-serif; }

/* akcent nagłówka: amber → cyan→fiolet gradient */
.auth-headline__accent{
  -webkit-text-fill-color:transparent;
  background:linear-gradient(120deg, var(--lg-cyan-300), var(--lg-violet-400) 75%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:none;
}

/* ---- Karta: szkło z cyanowym glow zamiast amber ---- */
.auth-card{
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  box-shadow:
    0 40px 90px -20px rgba(0 0 0 / .65),
    0 12px 32px -12px rgba(0 0 0 / .5),
    0 0 0 1px oklch(75% .13 200 / .35),
    0 0 40px oklch(75% .13 200 / .25),
    0 1px 0 rgba(255 255 255 / .18) inset;
}
.auth-card::before{
  background:
    radial-gradient(ellipse at 50% 0%, oklch(80% .125 198 / .30), transparent 62%),
    radial-gradient(ellipse at 50% 0%, oklch(72% .16 292 / .12), transparent 76%);
}

/* ---- Inputy: focus ring cyan ---- */
.afield__input:focus{
  border-color:var(--lg-cyan-400);
  box-shadow:0 0 0 3px oklch(75% .13 200 / .22), 0 0 0 1px oklch(75% .13 200 / .5);
  background:oklch(75% .13 200 / .06);
}
.afield__input:focus + .afield__icon,
.afield__control:focus-within .afield__icon{ color:var(--lg-cyan-400); }
.afield__link{ color:var(--lg-cyan-400); }
.afield__link:hover{ color:var(--lg-cyan-300); }

/* checkbox „Zapamiętaj mnie" — cyan */
.acheck__box::after{ background:linear-gradient(135deg, var(--lg-cyan-400), var(--lg-cyan-600)); }
.acheck input:checked + .acheck__box{ border-color:var(--lg-cyan-400); }
.acheck input:focus-visible + .acheck__box{ box-shadow:0 0 0 3px oklch(75% .13 200 / .3); }

/* ---- Primary button: cyan glass ---- */
.abtn{
  color:oklch(13% .018 250);
  background:linear-gradient(135deg, var(--lg-cyan-300), var(--lg-cyan-600));
  box-shadow:0 12px 30px oklch(70% .13 205 / .45), 0 0 60px oklch(70% .13 205 / .22), inset 0 1px 0 rgba(255 255 255 / .5);
}
.abtn:hover{ box-shadow:0 16px 40px oklch(70% .13 205 / .55), 0 0 80px oklch(70% .13 205 / .3), inset 0 1px 0 rgba(255 255 255 / .6); }
.abtn:focus-visible{ box-shadow:0 0 0 4px oklch(75% .13 200 / .4), 0 10px 26px oklch(70% .13 205 / .35); }

/* ---- Provider buttons (Google / Microsoft) — glass ---- */
.aprov{ background:rgba(255 255 255 / .055); border-color:var(--c-input-bd); }
.aprov:hover{ background:rgba(255 255 255 / .1); border-color:oklch(75% .13 200 / .5); }
.aprov:focus-visible{ border-color:var(--lg-cyan-400); box-shadow:0 0 0 3px oklch(75% .13 200 / .25); }
.aswitch a{ color:var(--lg-cyan-400); }
.aswitch a:hover{ color:var(--lg-cyan-300); }

/* feature icons (lewy panel) — amber → cyan glass */
.auth-feat__ic{
  background:oklch(75% .13 200 / .14);
  border-color:oklch(75% .13 200 / .32);
  color:var(--lg-cyan-300);
  box-shadow:inset 0 1px 0 rgba(255 255 255 / .12), 0 2px 10px oklch(75% .13 200 / .14);
}

/* footer nav hover + theme toggle — cyan */
.auth-foot__nav a:hover{ color:var(--lg-cyan-400); }
.auth-foot__nav i{ background:var(--lg-cyan-400); }
.auth-toggle{
  color:oklch(13% .018 250);
  background:linear-gradient(135deg, var(--lg-cyan-300), var(--lg-cyan-600));
  box-shadow:0 6px 18px oklch(70% .13 205 / .4), inset 0 1px 0 rgba(255 255 255 / .3);
}
.auth-toggle:hover{ box-shadow:0 10px 24px oklch(70% .13 205 / .55); }
.auth-toggle:focus-visible{ box-shadow:0 0 0 4px oklch(75% .13 200 / .4); }

/* logo wordmark glow: stonuj amber poświatę */
.auth-brand{ filter:drop-shadow(0 3px 12px rgba(0 0 0 / .55)) drop-shadow(0 0 22px oklch(75% .13 200 / .18)); }

/* ===== TRYB JASNY (html.login-light) — kontrast akcentów (audyt) =====
   Jasne cyan/violet (cyan-300/400) były niemal niewidoczne na jasnym tle:
   akcent „przyszłości.", linki „Zapomniałeś hasła?/Zarejestruj się", ikony cech. */
html.login-light .auth-headline__accent{
  background:linear-gradient(120deg, var(--lg-cyan-600), oklch(50% .17 288) 78%);
  -webkit-background-clip:text; background-clip:text;
}
html.login-light .afield__link,
html.login-light .aswitch a,
html.login-light .auth-foot__nav a{ color:oklch(55% .12 212) !important; }
html.login-light .afield__link:hover,
html.login-light .aswitch a:hover,
html.login-light .auth-foot__nav a:hover{ color:oklch(48% .11 214) !important; }
html.login-light .afield__control:focus-within .afield__icon{ color:oklch(55% .12 212); }
html.login-light .auth-feat__ic{
  color:oklch(52% .12 212);
  background:oklch(66% .12 205 / .14);
  border-color:oklch(66% .12 205 / .38);
}
html.login-light .auth-foot__nav i{ background:oklch(55% .12 212); }