[hidden] { display: none !important; }

:root {
  --krem: #fffaf0;
  --krem-2: #fff4dc;
  --karta: #ffffff;
  --granat: #17385e;
  --granat-2: #0f2744;
  --fiolet: #6b4fa0;
  --fiolet-jasny: #efe7fb;
  --zloto: #f6c445;
  --zloto-2: #eaa21c;
  --tekst: #1f2a3a;
  --szary: #6b7686;
  --linia: #ede5d6;
  --zielony: #2f9e62;
  --zielony-jasny: #e3f6ea;
  --pomarancz: #e07a1f;
  --pomarancz-jasny: #fff0dd;
  --czerwony: #d64545;
  --czerwony-jasny: #fde6e6;
  --niebieski: #2f6fb8;
  --niebieski-jasny: #e5effb;
  --cien: 0 2px 0 rgba(23, 56, 94, 0.06), 0 8px 24px rgba(23, 56, 94, 0.07);
  --promien: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: grid;
  grid-template-columns: 236px 1fr;
  background: var(--krem);
  color: var(--tekst);
  font: 15px/1.45 Nunito, system-ui, sans-serif;
}
h1, h2, h3 { font-family: 'Baloo 2', Nunito, sans-serif; margin: 0; line-height: 1.15; }
a { color: var(--fiolet); }
button { font: inherit; cursor: pointer; }

/* Pasek boczny */
.pasek {
  background: linear-gradient(180deg, var(--granat), var(--granat-2));
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 18px;
  height: 100vh;
  position: sticky;
  top: 0;
}
.marka { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.marka img { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.marka strong { display: block; font-family: 'Baloo 2'; font-size: 19px; line-height: 1; }
.marka span { font-weight: 800; font-size: 11px; letter-spacing: .28em; color: var(--zloto); }
#menu { display: flex; flex-direction: column; gap: 4px; }
#menu a {
  display: flex; align-items: center; gap: 10px;
  color: #dce6f3; text-decoration: none; font-weight: 700;
  padding: 10px 12px; border-radius: 12px;
  transition: background .15s, color .15s;
}
#menu a i { font-style: normal; width: 22px; text-align: center; }
#menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
#menu a.aktywny { background: var(--zloto); color: var(--granat-2); box-shadow: 0 3px 0 var(--zloto-2); }
.licznik {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px; background: var(--czerwony); color: #fff;
  font-size: 12px; display: grid; place-items: center;
}
#menu a.aktywny .licznik { background: var(--granat); }
.skroty { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.skroty a { color: #9fb4cf; text-decoration: none; padding: 5px 12px; border-radius: 8px; }
.skroty a:hover { color: #fff; background: rgba(255,255,255,.06); }
.skroty-tytul { color: #6f88a8; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 0 12px 4px; }

/* Główna część */
main { min-width: 0; padding: 22px 28px 32px; }
.belka { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.belka h1 { font-size: 30px; color: var(--granat); }
.belka-prawa { display: flex; align-items: center; gap: 12px; }
.szare { color: var(--szary); font-size: 13px; }
.przycisk {
  border: 0; border-radius: 12px; padding: 9px 18px; font-weight: 800;
  background: var(--fiolet-jasny); color: var(--fiolet);
}
.przycisk-zloty { background: var(--zloto); color: var(--granat-2); box-shadow: 0 3px 0 var(--zloto-2); }
.przycisk-zloty:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--zloto-2); }
.przycisk:disabled { opacity: .55; cursor: progress; }
.przycisk-maly { padding: 4px 10px; font-size: 13px; border-radius: 9px; }

.widok { display: grid; gap: 18px; }
.siatka { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.siatka-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; }

.karta {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien); padding: 18px 20px;
}
.karta h2 { font-size: 20px; color: var(--granat); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.karta h2 .prawa { margin-left: auto; font: 700 13px Nunito; }
.karta-blad { color: var(--czerwony); background: var(--czerwony-jasny); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.pusto { color: var(--szary); font-style: italic; }

/* Kafle liczb */
.liczba { display: flex; flex-direction: column; gap: 2px; }
.liczba .etykieta { color: var(--szary); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.liczba .wartosc { font: 800 34px/1.05 'Baloo 2'; color: var(--granat); }
.liczba .pod { color: var(--szary); font-size: 13px; }
.kafel { border-top: 5px solid var(--fiolet); }
.kafel.zielony { border-top-color: var(--zielony); }
.kafel.zloty { border-top-color: var(--zloto); }
.kafel.niebieski { border-top-color: var(--niebieski); }

/* Alerty */
.alerty { display: flex; flex-direction: column; gap: 8px; }
.alert {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  font-weight: 700; text-decoration: none; color: var(--tekst);
}
.alert::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.alert.pilne { background: var(--czerwony-jasny); }
.alert.pilne::before { background: var(--czerwony); }
.alert.uwaga { background: var(--pomarancz-jasny); }
.alert.uwaga::before { background: var(--pomarancz); }
.alert.info { background: var(--niebieski-jasny); }
.alert.info::before { background: var(--niebieski); }
.alert:hover { filter: brightness(.97); }
.alert .idz { margin-left: auto; color: var(--szary); font-size: 12px; }
.spokoj { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--zielony-jasny); color: var(--zielony); font-weight: 800; }

/* Plakietki */
.plakietka { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.plakietka.ok { background: var(--zielony-jasny); color: var(--zielony); }
.plakietka.czeka { background: var(--pomarancz-jasny); color: var(--pomarancz); }
.plakietka.zle { background: var(--czerwony-jasny); color: var(--czerwony); }
.plakietka.neutr { background: var(--fiolet-jasny); color: var(--fiolet); }

/* Listy */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--linia); }
.lista li:last-child { border-bottom: 0; }
.lista .rosnij { flex: 1; min-width: 0; }
.lista .maly { color: var(--szary); font-size: 13px; }
.kod { font: 700 12px ui-monospace, Consolas, monospace; color: var(--fiolet); background: var(--fiolet-jasny); padding: 1px 6px; border-radius: 6px; }

/* Recenzje */
.recenzja { padding: 14px 0; border-bottom: 1px dashed var(--linia); }
.recenzja:last-child { border-bottom: 0; }
.recenzja .gora { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gwiazdki { color: var(--zloto-2); letter-spacing: 1px; font-size: 16px; }
.gwiazdki .puste { color: #e2d9c6; }
.recenzja p { margin: 6px 0 0; }
.recenzja .tytul-recenzji { font-weight: 800; }
.filtry { display: flex; gap: 8px; flex-wrap: wrap; }
.filtry button { border: 1px solid var(--linia); background: #fff; border-radius: 999px; padding: 5px 14px; font-weight: 700; color: var(--szary); }
.filtry button.aktywny { background: var(--granat); border-color: var(--granat); color: #fff; }

/* Sklep: duża ocena */
.ocena-duza { display: flex; align-items: baseline; gap: 10px; }
.ocena-duza .wartosc { font: 800 44px/1 'Baloo 2'; color: var(--granat); }

.ladowanie { opacity: .55; }

@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .pasek { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px; }
  #menu { flex-direction: row; flex-wrap: wrap; }
  #menu a { padding: 7px 10px; }
  .skroty { display: none; }
  main { padding: 16px; }
  .siatka-2 { grid-template-columns: 1fr; }
}

/* Logowanie */
body.bez-panelu { display: block; }
.wejscie {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 20% 10%, #fff3c4 0, transparent 40%), radial-gradient(circle at 85% 90%, var(--fiolet-jasny) 0, transparent 45%), var(--krem);
}
.wejscie[hidden] { display: none; }
.okno-wejscia { width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 28px 26px; }
.okno-wejscia img { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto; box-shadow: 0 6px 18px rgba(23,56,94,.18); }
.okno-wejscia h1 { font-size: 28px; color: var(--granat); }
.okno-wejscia h1 span { font: 800 13px Nunito; letter-spacing: .28em; color: var(--zloto-2); vertical-align: middle; }
.okno-wejscia p { margin: 0; }
.okno-wejscia label, .pola label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-weight: 800; font-size: 13px; color: var(--granat); }
.okno-wejscia input, .pola input {
  border: 1px solid var(--linia); border-radius: 12px; padding: 10px 12px; font: inherit; font-weight: 600; background: #fff; color: var(--tekst);
}
.okno-wejscia input:focus, .pola input:focus { outline: 2px solid var(--zloto); border-color: var(--zloto); }
.okno-wejscia .przycisk { padding: 12px; font-size: 16px; }

/* Ja w pasku */
.ja { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; }
.ja span { color: #9fb4cf; }
.ja .przycisk { background: rgba(255,255,255,.1); color: #fff; }
.skroty + .ja { margin-top: 0; }

/* Administratorzy */
.awatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--fiolet); color: #fff; font: 800 18px 'Baloo 2'; }
.maly-awatar { width: 32px; height: 32px; font-size: 15px; background: var(--zloto); color: var(--granat-2); }
.pola { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; margin-bottom: 4px; }
.etykieta-pola { font-weight: 800; font-size: 13px; color: var(--granat); margin: 14px 0 6px; }
#nowy-admin > .przycisk { margin-top: 14px; }
.widoki-wybor { display: flex; flex-wrap: wrap; gap: 8px; }
.pole-wyboru input { position: absolute; opacity: 0; pointer-events: none; }
.pole-wyboru span {
  display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linia);
  background: #fff; color: var(--szary); font-weight: 800; font-size: 13px; cursor: pointer; user-select: none;
}
.pole-wyboru input:checked + span { background: var(--fiolet-jasny); border-color: var(--fiolet); color: var(--fiolet); }
.pole-wyboru input:checked + span::before { content: '✓ '; }
.pole-wyboru input:focus-visible + span { outline: 2px solid var(--zloto); }
.konta { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.konto { border: 1px solid var(--linia); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: #fffdf8; }
.konto.zablokowane { opacity: .65; }
.konto-gora { display: flex; align-items: center; gap: 10px; }
.konto-akcje { display: flex; gap: 6px; flex-wrap: wrap; }
.przycisk-usun { background: var(--czerwony-jasny); color: var(--czerwony); margin-left: auto; }
.haslo-raz { border: 2px solid var(--zloto); background: #fffbea; }
.haslo-raz p { margin: 0 0 10px; }
.dane-logowania { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kod.duzy { font-size: 18px; padding: 4px 10px; letter-spacing: .04em; user-select: all; }