/* Wyglad aplikacji AdLume, napisany od nowa jako nasz kod.
   Wszystkie wartosci zmierzone na zywej aplikacji przez odczyt wyliczonych stylow.
   Ikony to Lucide - ten sam zestaw, ktorego uzywa oryginal (sprawdzone przez
   porownanie ksztaltow: house, cable, brain, gift, settings, log-out, moon, sun). */

@font-face{
  font-family:'Outfit';
  src:url('assets/Outfit-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;
  font-display:swap;
}

/* ---------- motyw ciemny: stan domyslny ---------- */
:root{
  --tlo:#151515;                                   /* zmierzone */
  --tlo-paska:#1b1b1e;                             /* zmierzone: aside */
  --obrys-paska:#525252;                           /* zmierzone */
  --tlo-karty:linear-gradient(#282828,#1d1d1d);    /* zmierzone */
  --obrys-karty:rgba(82,82,82,.7);                 /* zmierzone */
  --cien-karty:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 44px -24px rgba(0,0,0,.7);
  --tlo-najazd:#2a2a2e;                            /* zmierzone: aktywna pozycja */
  --tlo-pola:#151515;                              /* zmierzone */
  --obrys-wartosci:#7a7a7a;                        /* zmierzone: rgb(122,122,122) */
  --tekst:#ffffff;
  --tekst-drugi:#d4d4d4;                           /* zmierzone: opisy i etykiety sekcji */
  --tekst-slaby:#a3a3a3;
  --obrys:#525252;                                 /* zmierzone */
  --obrys-pola:rgba(216,216,216,.3);               /* zmierzone */
  --obrys-kafelka:#f5f5f5;                         /* zmierzone: jasny takze w ciemnym */
  --zielen:#86ff1d;                                /* zmierzone */
  --zielen-kafelka:#4a7c1a;                        /* zmierzone */
  --zielen-przycisk:#66b91e;                       /* zmierzone */
  --tekst-na-zieleni:#151515;
  --plakietka:#10b981;                             /* zmierzone */
  --czerwien:oklch(70.4% .191 22.216);             /* token marki --destructive */
  --promien:8px;
  --promien-karty:16px;      /* zmierzone: pulpit i polaczenia */
  --promien-karty-form:12px; /* zmierzone: kontekst i ustawienia */
  --promien-kafelka:10px;    /* zmierzone */
  --promien-przycisk:18px;
  --promien-pole:24px;
  --promien-listy:32px;      /* zmierzone: lista wyboru w ustawieniach */
}

/* ---------- motyw jasny ---------- */
html.light{
  --tlo:#ffffff;
  --tlo-paska:#ffffff;                             /* zmierzone: BIALY */
  --obrys-paska:#f5f5f5;                           /* zmierzone */
  --tlo-karty:linear-gradient(#ffffff 0%,#fcfcfd 100%);
  --obrys-karty:#e3e5ea;
  --cien-karty:0 1px 2px rgba(16,24,40,.04), 0 6px 20px -10px rgba(16,24,40,.1);
  --tlo-najazd:#f5f5f5;
  --tlo-pola:#ffffff;
  --obrys-wartosci:#c9c9c9;
  --tekst:#151515;
  --tekst-drugi:#525252;
  --tekst-slaby:#737373;
  --obrys:#e5e5e5;
  --obrys-pola:#d4d4d4;
  --obrys-kafelka:#f5f5f5;
  --zielen:#387400;                                /* zmierzone */
  --zielen-kafelka:#387400;
}

*{box-sizing:border-box}
/* Plynnosc przewijania robi app.js klatka po klatce, nie CSS: `scroll-behavior`
   bywa wylaczone i wtedy klikniecie w spis nie robiloby nic. */
html,body{margin:0;padding:0}
body{
  background:var(--tlo);
  color:var(--tekst);
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:500;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---------- ikony: maska, zeby braly kolor tekstu tak jak w oryginale ---------- */
.ikona{
  display:inline-block;width:16px;height:16px;flex:0 0 16px;
  background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;
  mask:var(--i) center/contain no-repeat;
}
.ikona.duza{width:18px;height:18px;flex-basis:18px}

/* ---------- pasek boczny ---------- */
/* pasek jest PRZYPIETY do okna i ma pelna wysokosc, wiec nie ucina sie
   przy przewijaniu dlugiej strony - tak jak w oryginale (fixed left-0 top-0) */
.pasek{
  position:fixed;left:0;top:0;
  width:240px;height:100dvh;                       /* zmierzone: 240px */
  background:var(--tlo-paska);
  border-right:1px solid var(--obrys-paska);
  display:flex;flex-direction:column;
  padding:16px 12px;
  z-index:50;
}
.pasek-gora{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 20px}
.logo{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:600;color:var(--tekst);text-decoration:none}
.logo img{width:20px;height:20px}
html.light .logo img{filter:invert(1)}
.zwin{background:none;border:0;color:var(--tekst-slaby);cursor:pointer;padding:2px;display:flex}

.menu{display:flex;flex-direction:column;gap:2px}
.menu a{
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:var(--promien);
  color:var(--tekst);text-decoration:none;font-size:14px;
  position:relative;
}
.menu a:hover{background:var(--tlo-najazd)}
.menu a.aktywna{background:var(--tlo-najazd)}
.menu a.aktywna::before{
  content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:2px;
  background:var(--zielen);border-radius:2px;
}

.pasek-dol{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:16px;border-top:1px solid var(--obrys-karty)}
.konto{display:flex;align-items:center;gap:10px;padding:8px}
.awatar{
  width:26px;height:26px;border-radius:50%;
  background:var(--tlo-najazd);color:var(--tekst);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}
.konto-nazwa{font-size:13px;line-height:1.25}
.konto-plan{font-size:11px;color:var(--tekst-slaby)}

.trial{border:1px solid var(--zielen);border-radius:var(--promien);padding:12px;margin:8px 0 12px}
.trial-gora{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.trial-gora b{color:var(--zielen);font-weight:600}
.trial hr{border:0;border-top:1px solid var(--zielen);margin:8px 0}
.trial p{margin:0 0 10px;font-size:12px;color:var(--tekst-drugi);line-height:1.35}

/* ---------- tresc ---------- */
.tresc{margin-left:240px;padding:24px 32px 96px;position:relative;min-height:100vh}
.przelacznik{
  position:fixed;top:16px;right:24px;z-index:40;
  background:none;border:0;color:var(--tekst-slaby);cursor:pointer;padding:6px;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
}
.przelacznik:hover{background:var(--tlo-najazd);color:var(--tekst)}
.kolumna{max-width:560px;margin:0 auto}
.kolumna.szeroka{max-width:720px}

h1{font-size:28px;font-weight:500;margin:0 0 4px;color:var(--tekst)}
.podtytul{margin:0 0 20px;font-size:13px;color:var(--tekst-slaby)}
.podtytul.zielony{color:var(--zielen)}
.kreska{height:2px;background:var(--zielen);border-radius:2px;margin-bottom:24px}

.karta{
  background:var(--tlo-karty);
  border:1px solid var(--obrys-karty);
  border-radius:var(--promien-karty);
  box-shadow:var(--cien-karty);
  padding:24px;
  margin-bottom:16px;
}
.karta.grupa{padding:20px}                          /* zmierzone */
.karta.formularz-karta{border-radius:var(--promien-karty-form)}  /* zmierzone: 12px */
.karta-naglowek{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
/* etykieta sekcji: SZARA, nie zielona - zmierzone rgb(212,212,212) */
.etykieta{font-size:11px;letter-spacing:.99px;text-transform:uppercase;color:var(--tekst-drugi);font-weight:600;margin-bottom:8px}
.etykieta.zielona{color:var(--zielen)}              /* tylko na pulpicie */
.karta h2{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--tekst)}
.karta p{margin:0;font-size:14px;line-height:1.625;color:var(--tekst-drugi);max-width:46ch}
.karta-stopka{margin-top:16px;font-size:13px;color:var(--tekst-slaby);display:flex;align-items:center;gap:8px}

/* ---------- przyciski i pola ---------- */
.btn{
  font:inherit;font-size:14.4px;font-weight:600;
  padding:8px 16px;border-radius:var(--promien-przycisk);
  border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;white-space:nowrap;
}
.btn-glowny{background:var(--zielen-przycisk);color:var(--tekst-na-zieleni)}
.btn-glowny:hover{filter:brightness(1.08)}
.btn-drugi{background:transparent;color:var(--tekst);border:1px solid var(--obrys)}
.btn-drugi:hover{background:var(--tlo-najazd)}
.btn-groźny{background:transparent;color:var(--czerwien);border:1px solid var(--czerwien)}
.btn-groźny:hover{background:color-mix(in srgb,var(--czerwien) 12%,transparent)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.pole{
  width:100%;font:inherit;font-size:16px;
  background:var(--tlo-pola);color:var(--tekst);
  border:1px solid var(--obrys-pola);border-radius:var(--promien-pole);
  padding:12px 24px;
}
.pole::placeholder{color:var(--tekst-slaby)}
.pole:focus{outline:2px solid var(--zielen);outline-offset:2px}
.etykieta-pola{display:block;font-size:13px;margin:0 0 6px;color:var(--tekst-drugi)}
.grupa-pola{margin-bottom:16px}

/* wyszukiwarka: zmierzone - przezroczysta, obrys #525252, 10px, miejsce na ikone */
.szukajka{position:relative;width:272px;max-width:100%}
.szukajka .ikona{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tekst-slaby);width:14px;height:14px}
.szukajka input{
  width:100%;font:inherit;font-size:13px;
  background:transparent;color:var(--tekst);
  border:1px solid var(--obrys);border-radius:var(--promien-kafelka);
  padding:8px 32px 8px 36px;
}
.szukajka input::placeholder{color:var(--tekst-slaby)}
.szukajka input:focus{outline:2px solid var(--zielen);outline-offset:1px}

/* lista wyboru: zmierzone - przycisk, promien 32px, ikona w srodku z odstepem */
.lista-wyboru{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:inherit;font-size:16px;text-align:left;cursor:pointer;
  background:var(--tlo-pola);color:var(--tekst);
  border:1px solid var(--obrys-pola);border-radius:var(--promien-listy);
  padding:12px 16px 12px 20px;
}
.lista-wyboru .ikona{color:var(--tekst-slaby)}
.lista-wyboru:hover{border-color:var(--obrys-wartosci)}

/* ---------- kafelki polaczen ---------- */
.grupa h3{font-size:15px;font-weight:600;margin:0 0 2px}
.grupa .opis{font-size:13px;color:var(--tekst-slaby);margin:0 0 12px}
.kafelki{display:flex;flex-wrap:wrap;gap:8px}
.kafelek{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--promien-kafelka);
  border:1px solid var(--obrys-kafelka);background:transparent;
  font-size:13px;color:var(--tekst);cursor:pointer;
  font-family:inherit;
}
.kafelek:hover{background:var(--tlo-najazd)}
.kafelek.polaczony{
  background:color-mix(in srgb, var(--zielen-kafelka) 8%, transparent);
  border-color:color-mix(in srgb, var(--zielen-kafelka) 38%, transparent);
}
.kafelek .fajka{color:var(--zielen);width:13px;height:13px;flex-basis:13px}
.kafelek.wkrotce{opacity:.45;cursor:default}
.kafelek .wkrotce-znak{font-size:10px;letter-spacing:.06em;color:var(--tekst-slaby)}
.kafelek img{width:16px;height:16px;object-fit:contain}

/* ---------- spis sekcji (kontekst, ustawienia) ---------- */
.dwie-kolumny{display:flex;gap:24px;align-items:flex-start}
.spis{flex:0 0 160px;position:sticky;top:24px;font-size:13px}
.spis .naglowek{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-slaby);margin-bottom:8px;padding:0 10px}
.spis a{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:var(--promien);
  color:var(--tekst);text-decoration:none;
}
.spis a:hover{background:var(--tlo-najazd)}
.spis a.aktywna{background:var(--tlo-najazd)}
/* kropka po lewej: obwodka gdy niepelne, wypelniona zielenia gdy sekcja kompletna */
.spis .kropka{
  width:6px;height:6px;flex:0 0 6px;border-radius:50%;
  background:transparent;box-shadow:inset 0 0 0 1px var(--obrys);
}
.spis .kropka.pelna{background:var(--zielen);box-shadow:inset 0 0 0 1px var(--zielen)}
.spis .licznik{margin-left:auto;padding-left:8px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--tekst-drugi)}
.spis .nazwa{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- pola kontekstu ---------- */
.pola-lista{flex:1;min-width:0}
.naglowek-sekcji{
  display:flex;justify-content:space-between;
  font-size:11px;letter-spacing:.99px;text-transform:uppercase;
  color:var(--tekst-drugi);font-weight:600;margin:24px 0 8px;
}
.naglowek-sekcji:first-child{margin-top:0}
.pole-kontekstu{border-bottom:1px solid var(--obrys-karty);padding:14px 0}
.pole-kontekstu:first-child{padding-top:0}
.pole-kontekstu:last-child{border-bottom:0;padding-bottom:0}
.pole-kontekstu .gora{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pole-kontekstu .nazwa{display:flex;align-items:center;gap:8px;font-size:14px}
.kropka{width:7px;height:7px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--tekst-slaby)}
.kropka.pelna{background:var(--zielen);box-shadow:inset 0 0 0 1px var(--zielen)}
.akcja{background:none;border:0;color:var(--zielen);font:inherit;font-size:13px;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.akcja.szara{color:var(--tekst-slaby)}
.akcja:hover{filter:brightness(1.2)}
/* wartosc jest PRZYCISKIEM - da sie w nia kliknac i edytowac, tak jak w oryginale */
.wartosc{
  display:block;width:100%;text-align:left;font:inherit;font-size:13px;cursor:text;
  background:var(--tlo-pola);color:var(--tekst);
  border:1px solid var(--obrys-wartosci);   /* zmierzone: rgb(122,122,122) */
  border-radius:var(--promien);padding:8px 12px;
}
.wartosc:hover{border-color:var(--tekst-slaby)}
.wartosc:focus{outline:2px solid var(--zielen);outline-offset:1px}
.wartosc.pusta{border-style:dashed;border-color:var(--obrys-karty);color:var(--tekst-slaby)}
.znacznik{display:inline-block;border:1px solid var(--obrys-wartosci);border-radius:999px;padding:1px 10px;font-size:12px}
.wyjasnienie{margin:6px 0 0;font-size:12px;color:var(--tekst-slaby)}
.pytania .wiersz{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--obrys-karty)}
.pytania .wiersz:first-of-type{padding-top:0}
.pytania .wiersz:last-child{border-bottom:0;padding-bottom:0}

/* ---------- polecenia ---------- */
.siatka-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.siatka-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.krok .numer{font-size:11px;color:var(--tekst-slaby);margin-bottom:6px}
.krok h4{margin:0 0 6px;font-size:15px;font-weight:600}
.krok p{font-size:13px;color:var(--tekst-drugi);margin:0;line-height:1.5}
.licznik-duzy{font-size:32px;font-weight:600;color:var(--zielen);line-height:1}
.statystyki{display:flex;gap:24px;margin-top:14px}
.statystyki div{font-size:12px;color:var(--tekst-slaby)}
.statystyki b{display:block;font-size:16px;color:var(--tekst);font-weight:600}
.link-pole{display:flex;gap:8px;align-items:center}
.link-pole .pole{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
textarea.pole{border-radius:var(--promien);min-height:96px;resize:vertical;line-height:1.5;font-size:13px;padding:12px 14px}

/* ---------- strefa niebezpieczna (ustawienia) ---------- */
.strefa-ryzyka{border-color:color-mix(in srgb,var(--czerwien) 35%,transparent)}
.strefa-ryzyka .etykieta{color:var(--czerwien)}
.strefa-ryzyka ul{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--tekst-drugi);line-height:1.7}
.strefa-ryzyka .potwierdzenie{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.strefa-ryzyka .potwierdzenie .pole{max-width:220px}

/* ---------- ekran logowania ---------- */
body.logowanie{display:block}
.logowanie-uklad{display:flex;min-height:100vh}
.logowanie-lewa{flex:1;background:#0f0f10;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:40px;position:relative}
.logowanie-prawa{flex:1;background:#151516;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px}
.logowanie-lewa .logotyp{width:210px}
.cytat{background:#1c1c1e;border:1px solid #2a2a2e;border-radius:16px;padding:28px;max-width:420px}
.cytat p{margin:0 0 24px;font-size:16px;line-height:1.6;color:#e8e8e8}
.cytat .autor{display:flex;align-items:center;gap:12px}
.cytat .autor .kolo{width:34px;height:34px;border-radius:50%;background:#2a2a2e}
.cytat .autor b{display:block;font-size:14px}
.cytat .autor span{font-size:13px;color:#a3a3a3}
.kropki{display:flex;gap:6px;justify-content:center}
.kropki i{width:6px;height:6px;border-radius:3px;background:#3a3a3e}
.kropki i.akt{width:16px;background:var(--zielen)}
.formularz{width:100%;max-width:400px;text-align:center}
.formularz h1{font-size:26px;font-weight:700;line-height:1.25;margin-bottom:8px;color:#fff}
.formularz .wstep{font-size:14px;color:#a3a3a3;margin:0 0 24px;line-height:1.5}
.btn-google{width:100%;justify-content:center;background:#1f1f22;color:#fff;border:1px solid #2f2f33;border-radius:12px;padding:12px;margin-bottom:16px;font-weight:500}
.lub{display:flex;align-items:center;gap:12px;color:#6b6b70;font-size:13px;margin:16px 0}
.lub::before,.lub::after{content:"";flex:1;height:1px;background:#2a2a2e}
.formularz .pole{background:#1c1c1e;border-color:#2f2f33;color:#fff;margin-bottom:12px;text-align:left}
.btn-zaloguj{width:100%;justify-content:center;padding:12px;border-radius:var(--promien-pole);background:var(--zielen-przycisk);color:#151515;font-weight:600;border:0;font-size:15px;cursor:pointer;font-family:inherit}
.pod-formularzem{margin-top:16px;font-size:14px}
.pod-formularzem a{color:#fff}
.zaufanie{margin-top:22px;font-size:12px;color:#6b6b70;line-height:1.8}
.stopka-logowania{position:absolute;bottom:28px;display:flex;gap:20px;font-size:13px;color:#a3a3a3}
.stopka-logowania a{color:inherit}

@media (max-width:900px){
  .pasek{display:none}
  /* Na waskim ekranie przelacznik motywu siedzi w prawym gornym rogu nad trescia
     i nachodzil na licznik pol. Odsuwamy tresc, zeby sie nie nakladaly. */
  .tresc{margin-left:0;padding-top:56px}
  .dwie-kolumny{flex-direction:column}
  .spis{position:static;flex-basis:auto;width:100%}
  .siatka-3,.siatka-2{grid-template-columns:1fr}
  .logowanie-lewa{display:none}
}