/* ==========================================================================
   0) RESET
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; max-width:100%; overflow-x: clip}
html, body { font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Space Grotesk rollout (index/about/services): keep the neutral UI font for
   the Case studies section and for buttons (buttons stay as they were). */
#case-studies, #case-studies *,
.btn, .login-btn, .logout-btn {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ==========================================================================
   1) ZMIENNE & TEMATY
   ========================================================================== */
:root {
  /* bazowe */
  --bg: #16181b;           /* Grafit ciemny */
  --text: #FFFFFF;         /* Biel */
  --muted: #9CA3AF;        /* Srebro */

  /* powierzchnie */
  --card: #171718;         /* Granat ciemny */
  --card-2: #171718;       /* Granat ciemny */
  --border: #9CA3AF;       /* Srebro */
  --border-2: #9CA3AF;     /* Srebro */

  /* akcenty / marka */
  --brand: #FBBF24;        /* Złoto */
  --brand-contrast: #1B1F3B; /* Granat (kontrast do złota) */
  --primary: #14B8A6;      /* Turkus */
  --accent: #14B8A6;       /* Turkus */
  --accent-2: #14B8A6;     /* Turkus */

  /* stany (bez zmian, poza paletą) */
  --danger: #b22222;
  --danger-strong: #8b0000;

  /* nawigacja */
  --nav-bg: #1a1a1a;                    /* Granat w RGBA */
  --nav-link: rgba(156,163,175,0.9);             /* Srebro 90% */
  --nav-link-hover: #FBBF24;                     /* Złoto */

  /* cienie (bez zmian) */
  --shadow-1: 0 4px 16px rgba(0,0,0,0.25);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.35);

  /* glow (dopasowane do palety) */
  --glow-brand: rgba(251,191,36,0.3);            /* Złoto */
  --glow-cyan: rgba(20,184,166,0.6);             /* Turkus */
}

.theme-light {
  --bg: #FFFFFF;           /* Biel */
  --text: #1B1F3B;         /* Granat */
  --muted: #9CA3AF;        /* Srebro */

  --card: #FFFFFF;         /* Biel */
  --card-2: #FFFFFF;       /* Biel */
  --border: #E5E7EB;       /* subtelna szarość – zostawiamy */
  --border-2: #D1D5DB;     /* subtelna szarość – zostawiamy */

  --brand: #FBBF24;        /* Złoto */
  --brand-contrast: #1B1F3B; /* Granat */
  --primary: #14B8A6;      /* Turkus */
  --accent: #14B8A6;       /* Turkus */
  --accent-2: #14B8A6;     /* Turkus */

  --danger: #dc2626;
  --danger-strong: #b91c1c;

  --nav-bg: rgba(255,255,255,0.9);
  --nav-link: #374151;
  --nav-link-hover: #1B1F3B; /* granat jako hover w jasnym */
  --shadow-1: 0 6px 20px rgba(0,0,0,0.10);
  --shadow-2: 0 8px 28px rgba(0,0,0,0.12);

  --glow-brand: rgba(251,191,36,0.18);          /* złoto light */
  --glow-cyan: rgba(20,184,166,0.35);           /* turkus light */
}

/* ==========================================================================
   2) LAYOUT GLOBALNY
   ========================================================================== */
body{
  min-height: 100vh;
  color: var(--text);
  background-color: var(--bg);
  display:flex; flex-direction:column;
}
main, #main-content{
  position: relative;
  flex: 1;
  width: 80%;
  max-width: 1400px;
  min-width: 80%;
  margin: 130px auto 60px auto; /* pod sticky navbar */
  padding: 20px 16px;
  box-sizing: border-box;
  display:flex; justify-content:center;
}
.container{ width:100%; max-width:100%; box-sizing:border-box; }

.section{ display:none; width:100%; box-sizing:border-box; }
.section.active{ display:block; animation: fadeIn .3s ease-in-out; }

/* dashboard siatka */
.dashboard{
  display:grid; grid-template-columns: 260px minmax(0,1fr);
  gap:16px; align-items:start;
}
@media (max-width:992px){ .dashboard{ grid-template-columns:1fr; } }

/* ==========================================================================
   3) NAVBAR + LOGO + LINKI + MOBILE
   ========================================================================== */
.navbar{
  position: fixed; top:0; left:0;
  height:160px; width:100%;
  background-color: transparent;
  display:flex; justify-content:center; align-items:center;
  padding:15px 50px; z-index:1000; transition: background-color .8s ease;
  border-bottom: none;
}
.navbar.scrolled{
  background-color: var(--nav-bg);
  box-shadow: 0 16px 40px -22px rgba(243,243,243,0.35);
}

/* TRZY „SEKCJE” na flexie: lewa / logo / prawa */
.nav-links{
  display:flex;              /* << zamiast grid */
  align-items:center;
  justify-content:space-between;
  width:100%;
  list-style:none;
  gap:0;
  flex-wrap:nowrap;
}

/* lewa kolumna */
.nav-left{
  /* grid-column:1;  niepotrzebne przy flex */
  padding-left:15px;
  display:flex;
  align-items:center;
  gap:30px;
  flex: 1 1 0;              /* elastyczna, może się zwężać */
  min-width:0;              /* pozwala się ściskać bez overflow */
  max-width: 35%;
}

/* środkowa kolumna: logo desktopowe */
.logo-container,
.logo-container-mobile{
  display:flex; justify-content:center; align-items:center;
  width:300px; min-width:200px; max-width:300px;
  height:90px; overflow:hidden;
  background: transparent;
}
.logo-container{
  /* grid-column:2;  niepotrzebne przy flex */
  justify-self:center;
  margin: 0 20px;
  flex: 0 0 auto;           /* logo nie rozciąga się i nie zwęża */
  background: transparent;
  text-decoration: none !important;
}
.logo-container img.logo{
  display:block;
  max-width:100%;
  max-height:100%;
  height:auto;
  object-fit:contain;
  text-decoration: none !important;
}

/* LOGO MOBILNE – domyślnie ukryte na desktopie */
.logo-container-mobile{ display:none !important; }

/* prawa kolumna */
.nav-right{
  /* grid-column:3;  niepotrzebne przy flex */
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:30px;
  flex: 1 1 0;              /* elastyczna jak lewa */
  min-width:0;
}

.nav-item{
  display:flex;
  align-items:center;
  min-width:0;
  max-width:250px;
  padding:0;
  height:44px;
}

.navbar .nav-link.active{
  color: var(--nav-link-hover);
  text-shadow: 8px 6px 12px rgba(88,66,90,1);
  font-weight:700;
}

.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:44px;
  text-decoration:none;
  color: var(--nav-link);
  transition: color .5s, text-shadow .5s;
  font-size:20px;
  padding: 0 2px;
  text-shadow:
    0 0 2px rgba(100,100,100,.5),
    0 0 4px var(--glow-brand),
    0 0 8px var(--glow-brand);
}
.nav-links a::after{
  content:''; position:absolute; bottom:-7px; left:0; width:100%; height:2px;
  background-color: currentColor; transform: scaleX(0); transform-origin: bottom right;
  transition: transform .55s ease-out;
}
.nav-links .logo-link{
  cursor:pointer;
}
.nav-links .logo-link::after{
  content:none;
}
.nav-links .logo-link:hover{
  color: inherit;
  text-shadow: none;
}
.nav-links a:hover{
  color: var(--nav-link-hover);
  /* było #f39c12 -> złoto */
  text-shadow: 0 0 4px rgba(251,191,36,.9), 0 0 15px rgba(251,191,36,.7);
}
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: bottom left; }

/* logo „prism” */
.logo-prism{ display:flex; width:100%; height:100%; position:relative; transform-style:preserve-3d; transition: transform 1s ease-in-out; }
.logo-face{ width:100%; height:100%; position:absolute; backface-visibility:hidden; }
.logo-face:nth-child(1){ transform: rotateX(0deg) translateZ(25px); }
.logo-face:nth-child(2){ transform: rotateX(120deg) translateZ(25px); }
.logo-face:nth-child(3){ transform: rotateX(240deg) translateZ(25px); }

/* „MID” breakpoint – ciut mniejsze ekrany */
@media (max-width: 1470px){
  .nav-left{ flex: 0 1 auto; gap:18px; }
  .nav-right{ flex: 1 1 0; gap:18px; }
  .logo-container{ max-width: 270px; height: 80px; margin: 0 45px; }
}

/* hamburger + mobile menu */
.hamburger{
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  position:absolute; right:11%; top:50%; transform: translateY(-50%);
}
.hamburger .bar{ width:30px; height:4px; background:#fff; border-radius:5px; transition: transform .3s, opacity .1s; margin:3px 0; }
.hamburger.active{ transform: translateY(-50%) scale(1.3); }
.hamburger.active .bar:nth-child(1){ transform: rotate(45deg) translateY(28px); }
.hamburger.active .bar:nth-child(2){ opacity:0; }
.hamburger.active .bar:nth-child(3){ transform: rotate(-45deg) translateY(-35px) translateX(6px); }

@media (min-width:1193px){
  .hamburger{ display:none; }
  /* desktop: zostajemy przy flexie */
  .mobile-nav-links{ display:none; }
}

@media (max-width:1193px){
  .navbar{ padding:10px 20px; height:100px; }
  .navbar.scrolled{ box-shadow: 8px 8px 24px -5px rgba(243,243,243,.35); }
  .hamburger{ display:flex; }

  /* Pokaż wyłącznie logo mobilne na małych ekranach */
  .logo-container{ display:none; }
  .logo-container-mobile{ display:flex !important; }

  /* mobile: menu rozwijane jako kolumna (flex) */
  .nav-links{
    display:none; /* ukryte do czasu kliknięcia */
  }
  .nav-links.active{
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:absolute; top:90px; right:0; width:100%;
    background: var(--nav-bg); text-align:center; padding:10px 0; box-shadow: var(--shadow-1);
    gap:15px; z-index:1000;
  }
  .nav-links li{ display:block; margin:10px 0; }
}

/* rozwijane mobilne okno nav */
.mobile-nav-links{
  display:flex; flex-direction:column; justify-content:flex-start;
  position:absolute; top:98px; right:10%; left:10%; width:80%;
  background: var(--nav-bg); color: var(--nav-link); text-align:center; padding:10px 0; z-index:1000;
  border-radius:10px; box-shadow: 3px 14px 21px -5px rgba(238,238,255,.35);
  list-style:none; height:0; opacity:0; overflow:hidden; transition: height .5s, opacity .5s;
}
.mobile-nav-links.active{
  height:400px; opacity:1; transform: translateX(0);
}
.mobile-nav-links li{ margin:20px 10px; }
.mobile-nav-links a{ text-decoration:none; color:#fff; font-size:18px; transition: all .3s; }
/* było pomarańczowe – na złoto */
.mobile-nav-links a:hover{ color: var(--nav-link-hover); text-shadow: 0 0 4px rgba(251,191,36,.9), 0 0 15px rgba(251,191,36,.7); }

.user-info-mobile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin-top:15px;
}

/* dodatki user-info / username */
.user-info{ display:flex; align-items:center; gap:15px; font-size:.95rem; color:#fff; }
.user-info .user-email{ font-weight:500; color:#f0f0f0; }
.username{ color:#ff4c4c; text-shadow: 0 0 10px rgba(255,76,76,.8); }
.navbar .nav-links .user-info .username-link a{
  text-decoration:none !important; color:#ff4c4c !important; font-weight:700 !important; transition: all .3s !important;
}
.navbar .nav-links .username-link a:hover{ text-shadow: 0 0 8px rgba(255,0,0,.6); }

/* ==========================================================================
FROM INDEX
   ========================================================================== */
/* ===== CASE STUDIES ===== */
#case-studies { padding-top: clamp(56px, 6vw, 90px); }
#case-studies .container { width: min(1500px, 92vw); margin: 0 auto; }

/* pasek tabs chowamy na mobile (wszystkie panele są pod spodem) */
@media (max-width: 900px){
  #case-studies-tabs .cs-tabs-bar{ display: none !important; }
}

#case-studies-tabs .cs-panel{
  display: none;
  border: 1px solid var(--lp-border, #2a2d36);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: #0f1117;
  padding: clamp(16px, 3vw, 26px);
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  margin-top: 0;
}
#cs-panel-1{ margin-top: 0; }
#case-studies-tabs .cs-panel.is-active{ display: block; }
#case-studies-tabs .cs-panel.is-active{
  border-color: rgba(255,215,0,.35);
}

@media (max-width: 900px){
  #case-studies-tabs .cs-panel{
    display: block !important;
    border-radius: 0 0 14px 14px;
    border-top: 1px solid var(--lp-border, #2a2d36);
    margin: 0 0 16px 0;
  }
  .cs-mobile-title{
    display: block;
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #e7e7ea;
  }
}
@media (min-width: 900.02px){ .cs-mobile-title{ display: none; } }

#case-studies-tabs .cs-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: clamp(16px, 2.8vw, 28px);
  align-items: stretch;
}
#case-studies-tabs .cs-grid.reverse{ grid-template-columns: 410px minmax(0, 1fr); }
@media (max-width: 900px){
  #case-studies-tabs .cs-grid,
  #case-studies-tabs .cs-grid.reverse{ grid-template-columns: 1fr; }
}

#case-studies-tabs .cs-code{
  border: 1px solid var(--lp-border, #2a2d36);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(106,165,255,.12), transparent 60%),
    radial-gradient(900px 480px at 110% -20%, rgba(65,201,130,.10), transparent 60%),
    linear-gradient(180deg, #10141f 0%, #0f1117 100%);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  display: grid;
  grid-template-rows: auto 1fr;
}
#case-studies-tabs .cs-code__head{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  border-bottom: 1px solid var(--lp-border, #2a2d36);
  font-size: 12px; color: var(--lp-muted, #a7acb8);
}
#case-studies-tabs pre{
  margin:0; padding: 16px 18px;
  font-family: inherit;
  font-size: 14.5px; line-height: 1.5; color: #e9ecff; white-space: pre-wrap; word-break: break-word;
}
.kw{ color:#80b8ff; font-weight:700; }
.fn{ color:#a4ffea; font-weight:700; }
.cm{ color:#9bb5ff; opacity:.95; }
.hl{ color:#ffef99; font-weight:800; text-shadow: 0 0 6px rgba(255, 239, 153, .45); }

#case-studies-tabs .cs-media{
  border: 1px solid var(--lp-border, #2a2d36);
  border-radius: 12px;
  background: #0c1018;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 36px rgba(0,0,0,.35);
  /* The image is positioned absolutely (below) so it never dictates the row height —
     the TEXT column drives the height and the image just fills it (crops to fit).
     This kills the empty space that appeared when a portrait image was taller than
     the text (e.g. the 896x1600 KPI slide). */
  position: relative;
}
#case-studies-tabs .cs-media img{
  position: absolute;
  inset: 10px;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* ===== PROSTA SEKCJA 40/60 ===== */
#simple-feature{ padding-top: clamp(56px, 6vw, 90px); }
#simple-feature .container{ width: min(1200px, 94vw); margin: 0 auto; }
.sf-row{
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
}
.sf-row.reverse{ grid-template-columns: 0.6fr 0.4fr; }
.sf-row + .sf-row{ margin-top: clamp(48px, 8vw, 100px); }
.sf-media{
  border: 1px solid var(--lp-border, #2a2d36);
  border-radius: 14px;
  background: #0f1117;
  display: grid; place-items: center;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.sf-media img{
  width: 100%;
  height: auto;
  display: block;
}
.sf-content h2{ margin: 0 0 10px; }
.sf-content p{ margin: 0; color: var(--lp-muted, #a7acb8); font-size: 1.3em}
@media (max-width: 900px){
  .sf-row, .sf-row.reverse{ grid-template-columns: 1fr; }
}

/* ===== MODAL ===== */
body.no-scroll { overflow: hidden; }
.modal-backdrop{ position: fixed; inset: 0; display: none; place-items: center; background: rgba(10,12,18,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9999; }
.modal-backdrop.is-open{ display: grid; }
.modal-dialog{
  width: min(520px, 92vw); background: #0f1117; color: #e7e7ea; border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 18px rgba(255, 215, 0, .12);
  padding: 22px 22px 16px;
}
.modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.modal-head .icon{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: rgba(255,215,0,.12); color: gold; }
.modal-title{ font-size: 1.25rem; font-weight: 800; margin:0; }
.modal-body{ color:#a7acb8; line-height:1.5; margin: 8px 0 16px; }
.modal-actions{ display:flex; gap:10px; justify-content: flex-end; }
.btn-modal{
  border: 1px solid rgba(255,255,255,.16);
  background: #151a24;
  color:#fff; padding:10px 14px; border-radius: 10px; cursor:pointer; font-weight:700;
}
.btn-modal:hover{ background:#1a2130; }
.btn-accent-modal{
  border: 1px solid rgba(255,215,0,.45);
  background: linear-gradient(180deg, rgba(255,215,0,.18), rgba(255,215,0,.06));
  color:#fff;
}
.modal-close-x{ margin-left:auto; border:none; background:transparent; color:#a7acb8; cursor:pointer; font-size:18px; }

/* ===== HERO: obraz między headingiem a CTA tylko na mobile ===== */
.lp-hero__ill--mobile{ display:none; }
@media (max-width:900px){
  .lp-hero {padding-top: 30px !important}
  .lp-hero__ill.desktop-only{ display:none; }
  .lp-hero__ill--mobile{
    display:block; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), #0f1117;
    border:1px solid var(--lp-border); border-radius:10px; padding:8px; min-height:auto; margin: 6px 0 10px;
  }
  .lp-hero__ill--mobile img{ width:100%; height:auto; border-radius:8px; opacity:.96; }
}
/* ===== CASE STUDIES: tabs bar – 3 równe zakładki na pełną szerokość ===== */
#case-studies-tabs .cs-tabs-bar{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 równe kolumny */
  gap: 0;
  padding: 0;
  margin: 0 0 0; /* pasek przyklejony do panelu */
  border-bottom: 1px solid var(--lp-border, #2a2d36);
  background: transparent;
  box-shadow: none;
}

/* „kartka” zakładki */
#case-studies-tabs .cs-tab{
  appearance: none;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 14px 18px;
  cursor: pointer;
  text-align:left;
  /* wygląd zakładki */
  color: #a7acb8;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--lp-border, #2a2d36);
  border-bottom: 1px solid rgba(255,215,0,.35); /* złoty dół dla ramki */
  border-radius: 12px 12px 0 0;             /* „uszka” u góry */
  position: relative;
  top: 1px;                                 /* maskuje łączenie z panelem */
  transition: color .2s, background .2s, box-shadow .2s, transform .08s;
}

/* interakcje – jasno, że klikalne */
#case-studies-tabs .cs-tab:hover{
  color: #e7e7ea;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

#case-studies-tabs .cs-tab:active{
  transform: translateY(1px);
}

#case-studies-tabs .cs-tab:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(20,184,166,.35),
    0 0 0 4px rgba(20,184,166,.18);
}

/* aktywna zakładka – zlana z panelem, lekko „złota” ramka */
#case-studies-tabs .cs-tab.is-active,
#case-studies-tabs .cs-tab[aria-selected="true"]{
  color: #fff;
  background: #0f1117; /* kolor panelu poniżej */
  border-color: rgba(255,215,0,.35);
  border-bottom: none; /* aktywna zakładka zlana z panelem */
  box-shadow: 0 0 0 2px rgba(251,191,36,.18) inset;
  z-index: 2;
}

/* Mobile: jeśli chcesz dalej ukrywać pasek (jak masz w pliku) */
@media (max-width:900px){
  #case-studies-tabs .cs-tabs-bar{ display:none !important; }
}

@media (max-width:1193px){
  /* hamburger po LEWEJ */
  .hamburger{
    right: 16px !important;              /* było right:11% */
    left: auto !important;
    top: 50%;
    transform: translateY(-50%);
  }

  /* mobilne logo przyklejone do PRAWEJ i mniejsze */
  .logo-container-mobile{
    display:flex !important;
    position:absolute;
    left: 12px;                        /* mały margines do prawej krawędzi */
    top: 50%;
    transform: translateY(-50%);
    width: 220px;                       /* mniejsze */
    min-width: 220px;
    max-width: 50%;
    height: 48px;                       /* mniejsze */
    overflow: hidden;
    justify-content: flex-end;          /* logo „trzyma się” prawej */
    align-items: center;
    pointer-events: none;               /* żeby klik nie zasłaniał hamburgera/menu */
  }
  .logo-container-mobile .logo-prism{ width:100%; height:100%; transform: none; }
  .logo-container-mobile img.logo-face{ object-fit: contain; }

  /* układ rozwijanego menu – pełna szerokość, od spodu navbara */
  .mobile-nav-links{
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    top: 98px;                          /* poniżej paska */
    border-radius: 0 0 12px 12px;
  }
}
/* ==========================================================================
   4) USER MENU (dropdown w navbarze)
   ========================================================================== */
.user-menu{ position:relative; display:flex; align-items:center; }
.user-menu__trigger{
  display:inline-flex; align-items:center; gap:10px; padding:0 12px;
  height:44px;
  border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color:#fff; cursor:pointer; font-weight:500;
  transition: background-color .2s, box-shadow .2s, transform .15s;
  max-width: 250px;
  width: auto;
  min-width: 0; 
}
/* email ma się ucinać i nie wypychać chevrona */
.user-menu__name{
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;              /* KLUCZOWE: pozwala na ellipsis we flexie */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.user-menu__trigger .fa-circle-user{ font-size:1.2rem; opacity:.9; flex: 0 0 auto;}
.user-menu__trigger .chevron{ font-size:.8rem; opacity:.8; transition: transform .2s, opacity .2s; flex: 0 0 auto;}
.user-menu__trigger:hover{ background: rgba(255,255,255,.12); box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.user-menu.open .user-menu__trigger .chevron{ transform: rotate(180deg); opacity:1; }

.user-menu__dropdown{
  position:absolute; right:0; top: calc(100% + 10px); min-width:220px;
  background:#1e1e1f; border:1px solid #2c2c2c; border-radius:10px; box-shadow: 0 14px 30px rgba(0,0,0,.35);
  padding:8px; z-index:100050;
  display:block; opacity:0; visibility:hidden; pointer-events:none; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s, pointer-events 0s;
}
/* Invisible bridge across the gap so moving the cursor to the menu doesn't close it. */
.user-menu__dropdown::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
/* Dropdown items are <a> inside .nav-links, so they wrongly inherit the navbar link
   underline (.nav-links a::after) plus its 44px height and text glow. Neutralise ONLY the
   dropdown items (the horizontal navbar links keep their underline). */
.user-menu .user-menu__item::after{ content:none !important; display:none !important; }
.user-menu .user-menu__item{ height:auto !important; text-shadow:none !important; }
.user-menu.open .user-menu__dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s;
}
.user-menu__item{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:8px;
  color:#eaeaea; text-decoration:none; background:transparent; border:none; text-align:left; cursor:pointer;
  transition: background-color .15s, transform .1s, color .15s; font-size: 18px !important;
}
.user-menu__item i{ opacity:.9; }
.user-menu__item:hover{ background:#262627; color:#fff; transform: translateX(2px); }
.user-menu__logout{ color:#ffd6d6; border-top:1px solid #2c2c2c; margin-top:6px; }
.user-menu__logout:hover{ background:#2a2020; color:#fff; }
.user-menu__logout-form{ margin:6px 0 0 0; }

@media (hover:hover){
  .user-menu:hover .user-menu__dropdown{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s;
  }
  .user-menu:hover .user-menu__trigger .chevron{ transform: rotate(180deg); opacity:1; }
}

/* ==========================================================================
   5) PRZYCISKI (global) + LOGOWANIE/WYLOGOWANIE
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; font-weight:600;
  transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s;
}
.btn-primary{ background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
.btn-primary:hover{ box-shadow: 0 6px 18px var(--glow-brand); }
.btn-secondary{ background:#2a2a2a; color:#fff; border-color: var(--border-2); }
.btn-secondary:hover{ background:#313131; }
.btn-danger{ background: var(--danger-strong); color:#fff; border-color: var(--danger-strong); }
.btn-danger:hover{ background: var(--danger); }
.btn-update{ background:#3a3a3a; color:#fff; border-color:#4a4a4a; }
.btn-update:hover{ background:#4a4a4a; border-color:#5a5a5a; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.btn-compact{ padding:6px 10px; font-size:.8rem; border-radius:6px; }

/* przycisk login (navbar) */
.login-form, .logout-form{ margin:0; }
.login-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  background:transparent; width:140px; color: var(--brand);
  padding:0 20px; border:2px solid var(--brand); border-radius:30px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  position:relative; overflow:hidden; transition: all .4s ease-in-out;
  box-shadow: 0 0 10px var(--glow-brand);
}
.login-btn::before{
  content:""; position:absolute; inset:0; background: linear-gradient(45deg, var(--brand), #1a1a1a);
  z-index:-1; transform: scaleX(0); transform-origin:left; transition: transform .5s ease-in-out;
}
.login-btn:hover{ color:#fff; border-color: var(--brand); box-shadow: 0 0 20px rgba(251,191,36,1); transform: scale(1.1); cursor:pointer }
.login-btn:hover::before{ transform: scaleX(1); }
@media (max-width:768px){ .login-btn{ display:block; width:80%; margin:10px auto; cursor:pointer } }

/* wyloguj */
.logout-btn{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,0,0,0.15);
  border: 2px solid rgba(255,50,50,0.8);
  color: #ff4444; font-weight:600; padding:8px 16px; border-radius:8px;
  cursor:pointer; transition: all .25s ease; font-size:14px; backdrop-filter: blur(4px);
}
.logout-btn:hover{
  border-color:#ff5555; background: rgba(255,0,0,0.25);
  box-shadow: 0 0 8px #ff3333, 0 0 16px #ff3333, 0 0 24px #ff3333;
  transform: scale(1.05);
}

/* Google Sign-in */
.google-signin-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:#fff; border:1px solid #dadce0; border-radius:4px; padding:10px 16px;
  font-size:14px; font-weight:500; color:#3c4043; text-decoration:none;
  transition: background-color .2s, box-shadow .2s, transform .15s, color .2s, text-shadow .2s;
  min-width:240px; cursor:pointer;
}
.google-signin-btn img{ width:20px; height:20px; }
.google-signin-btn:hover{
  background:#f8f9fa; box-shadow: 0 2px 8px rgba(60,64,67,.2);
  transform: scale(1.02); color:#202124; text-shadow: 0 0 6px rgba(66,133,244,.4);
}
.google-signin-btn:active{ background:#f1f3f4; transform: translateY(0) scale(.98); box-shadow: 0 1px 4px rgba(60,64,67,.2); text-shadow:none; }

/* przycisk „wróć do strony głównej” */
.go-home-container{ margin-top:45px; text-align:center; }
.go-home-btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px;
  background:transparent; border:2px solid #444; color:#aaa; border-radius:25px;
  font-size:15px; text-transform:none; letter-spacing:.5px; box-shadow:none;
  transition: all .2s; cursor:pointer; opacity:.6; text-decoration:none;
}
.go-home-btn:hover{ background:#1e1e1e; color:#ccc; border-color:#555; transform: scale(1.01); opacity:.75; }
.go-home-btn .icon{ font-size:18px; opacity:.8; }

/* ==========================================================================
   6) SIDEBAR / TABS / CONTENT
   ========================================================================== */
.sidebar{
  background: var(--card); border-radius:12px; padding:12px; box-shadow: var(--shadow-1);
  position: sticky; top:140px;
}
.tabs{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.tab-btn{
  width:100%; display:inline-flex; align-items:center; gap:10px;
  background:#232323; color:#ddd; border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; font-size:1.05rem; cursor:pointer;
  transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s; text-align:left;
}
.tab-btn i{ opacity:.95; font-size:1.25rem; min-width:22px; text-align:center; }
.tab-btn:hover{ background:#262626; box-shadow: var(--shadow-2); border-color:#363636; }
.tab-btn.active, .tab-btn[aria-selected="true"]{
  background: linear-gradient(0deg, #282828 0%, #222 100%);
  border-color: var(--border-2); color:#fff;
  box-shadow: 0 0 0 2px rgba(251,191,36,.18), 0 0 14px rgba(251,191,36,.15); /* złote glow */
}
.tab-btn:focus-visible{ outline:none; box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px rgba(20,184,166,.35); }

.content{
  background: var(--card-2); border-radius:12px; padding:16px; box-shadow: var(--shadow-1);
  min-height:420px; width:100%; box-sizing:border-box; overflow: visible;
}
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.tab-panel[hidden]{ display:none !important; }
.tab-panel h2{ margin:4px 0 12px; font-size:1.6rem; letter-spacing:.5px; }
.tab-panel p{ color:#ddd; line-height:1.6; margin-bottom:10px; }

/* ==========================================================================
   7) SETTINGS / FORMULARZE / TABELA / BADGE
   ========================================================================== */
.settings-page .card{
  background: var(--card); border-radius:12px; padding:16px; box-shadow: var(--shadow-1);
}
.settings-page .card > h2{ margin:0 0 12px; }
.settings-page .card > * + *{ margin-top:12px; }

.form-container{
  width:70%; max-width:900px; min-width:300px; margin:0 auto;
  display:flex; flex-direction:column; gap:16px;
}
@media (max-width:992px){ .form-container{ width:90%; max-width:100%; } }

.settings-page .form-row{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:12px; align-items:center; margin-bottom:12px;
}
@media (max-width:992px){ .settings-page .form-row{ grid-template-columns:1fr; } }

.settings-page .form-row label{ color:#ddd; font-weight:600; }

.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="url"],
.settings-page input[type="tel"]{
  background:#232323; color:#fff; border:1px solid var(--border);
  border-radius:8px; padding:10px 12px; outline:none; width:100%; min-width:0;
  transition: border-color .2s, box-shadow .2s;
}
.settings-page input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(20,184,166,.25), 0 0 10px rgba(20,184,166,.2);
}

/* selecty */
.settings-page select{
  background:#232323; color:#fff; border:1px solid var(--border);
  border-radius:8px; padding:10px 12px; outline:none; transition: border-color .2s, box-shadow .2s;
  width:auto; min-width:180px; appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #999 50%),
    linear-gradient(135deg, #999 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-repeat:no-repeat; background-size:6px 6px; padding-right:34px; cursor:pointer;
}
.settings-page select:hover{ border-color: var(--border-2); }
.settings-page select:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(20,184,166,.25), 0 0 10px rgba(20,184,166,.2); }

.select-compact{
  padding:6px 8px; font-size:.85rem; border-radius:6px;
  background:#232323; color:#fff; border:1px solid var(--border); cursor:pointer;
}
.select-compact:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(20,184,166,.25), 0 0 8px rgba(20,184,166,.2); }

/* checkbox */
.settings-page input[type="checkbox"]{
  width:18px; height:18px; border:1px solid var(--border); border-radius:4px; background:#232323;
  vertical-align: middle; cursor:pointer; appearance:none; position:relative;
}
.settings-page input[type="checkbox"]:hover{ border-color: var(--border-2); }
.settings-page input[type="checkbox"]:focus-visible{ outline:none; box-shadow: 0 0 0 2px rgba(20,184,166,.35); }
.settings-page input[type="checkbox"]:checked::after{ content:""; position:absolute; inset:3px; border-radius:2px; background:#ddd; }

.settings-page .checkbox-inline, .settings-page label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

.settings-page .form-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.settings-page .inline-form{ display:flex; flex-wrap:wrap; gap:10px; }
.settings-page .inline-form input[type="text"], .settings-page .inline-form input[type="email"]{ flex:1 1 220px; min-width:0; }

.settings-page .table-wrapper{ overflow-x:auto; }
.settings-table{ width:100%; border-collapse: collapse; margin-top:12px; }
.settings-table th, .settings-table td{ padding:10px 12px; border-bottom:1px solid var(--border); color:#ddd; }
.settings-table th{ text-align:left; color:#fff; }

.settings-page h3{ margin-top:32px; margin-bottom:16px; font-size:1.2rem; }
.settings-page .section-subtitle{
  margin-top:32px; margin-bottom:16px; font-size:1.3rem; font-weight:600; color:#fff; display:flex; align-items:center; gap:8px;
}

/* badge */
.badge{ display:inline-block; padding:4px 10px; border-radius:6px; font-size:.85rem; font-weight:600; line-height:1.3; white-space:nowrap; }
.badge-admin{ background:#2e5aac; color:#fff; } /* zostawiamy */
.badge-user{ background:#3a3a3a; color:#eee; }
.badge-owner{ background: var(--brand); color: var(--brand-contrast); }
.badge-neutral{ background:#232323; color:#aaa; }

/* ==========================================================================
   8) MODALE (global)
   ========================================================================== */
.app-modal-backdrop{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:99999;
  backdrop-filter: blur(6px); background: rgba(0,0,0,.55);
}
.app-modal-backdrop.active{ display:flex; }
.app-modal{
  position:relative; width:min(720px,92vw); background: var(--card); color: var(--text);
  border-radius:12px; padding:20px; box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.5),
    0 0 20px rgba(255,255,255,.1);
  z-index:100000; animation: modal-pop .25s ease;
}
@keyframes modal-pop{ from{ transform: scale(.96); opacity:0; } to{ transform: scale(1); opacity:1; } }

/* ==========================================================================
   9) SLIDERY
   ========================================================================== */
/* A) Carousel */
.carousel-container{
  position:relative; width:90%; max-width:1150px; height:40vw; max-height:500px;
  margin:40px auto; overflow:hidden; border-radius:15px;
  box-shadow: 0 15px 30px rgba(0,0,0,.3), 0 0 20px rgba(0,255,255,.3);
  perspective:1300px;
}
.carousel-track{ display:flex; width:400%; height:100%; transition: transform .6s ease-in-out; transform-style:preserve-3d; }
.carousel-item{
  flex:1; width:100%; height:100%; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color:#fff; text-align:center;
  transition: transform .6s, box-shadow .4s; box-shadow: inset 0 0 80px rgba(0,0,0,.7);
}
.carousel-item.active{ transform: scale(1.05) rotateY(3deg); box-shadow: 0 15px 50px var(--glow-cyan), 0 0 30px rgba(20,184,166,.4); }
@media (max-width:1200px){ .carousel-container{ width:90%; max-width:850px; height:50vw; } }
@media (max-width:922px){ .carousel-container{ display:none; } .mobile-slider-replacement{ display:flex; } }

.carousel-content{
  background: rgba(0,0,0,.6); padding:20px 30px; border-radius:15px;
  text-shadow: 2px 2px 10px rgba(0,0,0,.5); position:relative; z-index:5; backdrop-filter: blur(5px);
}
.carousel-content h2{
  font-size:28px; font-weight:700; margin-bottom:15px; text-transform:uppercase; letter-spacing:2px;
  color:#00e1ff; text-shadow: 0 0 10px rgba(0,255,255,.8);
}
.carousel-btn{
  display:inline-block; padding:14px 24px; height:50px; font-size:16px; font-weight:700; text-transform:uppercase;
  color:#fff; background: linear-gradient(45deg, #00c3ff, #0088cc);
  border-radius:30px; box-shadow: 0 0 15px rgba(0,255,255,.4);
  transition: all .3s ease-in-out; position:relative; overflow:hidden; border:none; cursor:pointer;
}
.carousel-btn::before{ content:""; position:absolute; inset:0; background: rgba(255,255,255,.2); opacity:0; transition: opacity .3s; }
.carousel-btn:hover{ box-shadow: 0 0 30px rgba(0,255,255,.7); transform: scale(1.1); background: linear-gradient(45deg, #00aaff, #0066ff); }
.carousel-btn:hover::before{ opacity:1; }
.carousel-btn:active{ transform: scale(.95); }

.carousel-controls{
  position:absolute; top:50%; width:100%; display:flex; justify-content:space-between; transform: translateY(-50%);
  z-index:4; pointer-events:none;
}
.carousel-controls button, .carousel-controls a{ pointer-events:auto; }
.carousel-nav{
  background: rgba(0,0,0,.5); border:none; color:#fff; font-size:28px; padding:12px 15px; cursor:pointer; border-radius:50%;
  transition: background .3s, transform .2s;
}
.carousel-nav:hover{ background: rgba(0,255,255,.7); transform: scale(1.2); }

.mobile-slider-replacement{
  display:none; text-align:center; margin-top:20px; gap:20px; justify-content:center; flex-wrap:wrap;
}
.mobile-slider-item{
  width:45%; height:180px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:#fff; cursor:pointer; text-align:center; border-radius:8px;
  transition: transform .3s, box-shadow .3s; text-transform:uppercase;
  text-shadow: 0 0 8px rgba(0,255,255,.8); box-shadow: 0 5px 15px rgba(0,0,0,.3);
}
.mobile-slider-item:hover{ transform: scale(1.05); box-shadow: 0 0 20px rgba(0,255,255,.6); }

/* B) Slider kartowy */
@media (min-width: 992px){
  .slide-container{
    position:relative; width:80%; height:500px; padding:50px;
    box-shadow: 0 30px 50px #dbdbdb; overflow:hidden; border-radius:20px;
    left:50%; transform: translateX(-50%); margin-top:50px;
  }
  #slider{ width:max-content; margin-top:50px; }
  .slide-item{
    width:200px; height:300px; background-position: 50% 70%; background-size: cover;
    display:inline-block; transition:.3s; position:absolute; z-index:1; top:50%;
    transform: translate(0,-50%); border-radius:20px; box-shadow: 0 30px 50px #505050;
  }
  .slide-item:nth-child(1), .slide-item:nth-child(2){
    left:0; top:0; transform: translate(0,0); border-radius:0; width:100%; height:100%; box-shadow:none;
  }
  .slide-item:nth-child(3){ left:50%; }
  .slide-item:nth-child(4){ left: calc(50% + 220px); }
  .slide-item:nth-child(5){ left: calc(50% + 440px); }
  .slide-item:nth-child(n+6){ left: calc(50% + 660px); opacity:0; }

  .slide-item .slide-item-content{
    position:absolute; left:100px; width:300px; top:50%; text-align:left; padding:9px; color:#eee;
    transform: translate(0,-50%); display:none; backdrop-filter: blur(35px); border-radius:10px;
    background: linear-gradient(rgba(112,116,127,.2), rgba(46,50,59,.05)); opacity:.9;
  }
  .slide-item:nth-child(2) .slide-item-content{ display:block; z-index:999; }
  .slide-item .sic-name{ font-size:40px; font-weight:700; opacity:0; animation: showitemcontent 1s ease-in-out forwards; }
  .slide-item .sic-desc{ margin:20px 0; opacity:0; animation: showitemcontent 1s ease-in-out .3s forwards; }
  .slide-item button{
    padding:10px 20px; border:none; opacity:0; align-items:center; letter-spacing:.1em; border-radius:10px;
    animation: showitemcontent 1s ease-in-out .6s forwards;
  }
  @keyframes showitemcontent{
    from{ opacity:0; transform: translate(0,100px); filter: blur(33px); }
    to{ opacity:1; transform: translate(0,0); filter: blur(0); }
  }
  .slide-item button:hover{ transform: scale(1.1); background:#4c8eff; box-shadow: 0 0 25px #4c8eff; }

  .slider-buttons{
    position:absolute; bottom:30px; z-index:2; text-align:center; width:95%; display:flex; justify-content:center; gap:10px;
  }
  .slider-buttons button{
    width:50px; height:50px; border-radius:50%; border:1px solid #555; transition:.5s;
  }
  .slider-buttons button:hover{ background:#bac383; }
}
@media (max-width: 992px){
  .slider-buttons{ display:none; }
  #slider{
    width:max-content; margin-top:50px; display:flex; flex-wrap:wrap; flex-direction:row;
    overflow:hidden; width:80%; height:auto; justify-content:center; text-align:center;
  }
}

/* ==========================================================================
   10) BLOKI KONTENTU
   ========================================================================== */
.image-container{ width: 75%; height:30vh; margin: 0 auto 20px; overflow:hidden; border-radius:10px; }
.image-container img{ width:100%; height:100%; object-fit:cover; }

.levels-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:20px; width:100%; }
.level{
  width:15%; height:15vw; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:#fff; border-radius:10px; cursor:pointer;
  transition: transform .3s, box-shadow .3s; font-family: inherit;
  border:4px solid rgba(255,255,255,.3); box-shadow: 0 0 15px rgba(255,255,255,.3);
}
.level-1{ background:#007bff; } .level-2{ background:#28a745; } .level-3{ background:#ffc107; } .level-vip{ background:#dc3545; }
.level:hover{ transform: scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,.6); }
.level span{ transition: transform .3s; }
.level:hover span{ transform: scale(1.2); }
@media (max-width:768px){
  .levels-container{ display:grid; grid-template-columns: repeat(2,1fr); gap:15px; width:80%; margin:0 auto; justify-content:center; }
  .level{ width:80%; height:auto; aspect-ratio:1/1; margin:0 auto; justify-content:center; }
}

.text-content{ width:80%; min-width:79%; margin:20px auto 0; font-size:16px; line-height:1.6; text-align:justify; color:#fff; }

.ad-panel{
  position:absolute; top: calc(30vh + 40px); right:20px; width:15%;
  background:#1f1f1f; border-left:3px solid #ff4c4c; text-align:center; padding:15px;
}
.ad-panel h2{ font-size:18px; margin-bottom:10px; }
.ad-box{ background:#333; padding:25px; margin-bottom:15px; border-radius:5px; font-size:14px; }

/* ==========================================================================
   11) FOOTER
   ========================================================================== */
.footer{
  background:#1a1a1a; color:#fff; padding:30px 20px; text-align:center; width:100%; position:relative;
}
.footer-container{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:36px;
  max-width:70%;
  margin:0 auto;
}
.footer-section{
  flex:1 1 0;
  min-width:0;
  margin:0;
  padding: 0 12px;
  text-align:left;
}
.footer-section:first-child{ margin-left:10%; }
.footer-section h3{ font-size:18px; margin-bottom:10px; color: var(--nav-link-hover); }
.footer-section p{ font-size:14px; line-height:1.6; }
.footer-section ul{ list-style:none; }
.footer-section ul li{ margin:5px 0; }
.footer-section ul li a{ color:#bbb; text-decoration:none; transition: color .3s; }
.footer-section ul li a:hover{ color: var(--nav-link-hover); }
.social-media a{ color:#bbb; font-size:24px; margin:0 10px; transition: color .3s; }
.social-media a.facebook:hover{ color:#1877f2; }
.social-media a.instagram:hover{ color:#e1306c; }
.social-media a.youtube:hover{ color:#ff0000; }
.social-media a.linkedin:hover{ color:#0a66c2; }
.footer-bottom{ margin-top:20px; padding-top:10px; border-top:1px solid #444; font-size:14px; color:#bbb; }

/* ==========================================================================
   12) JĘZYKI (select)
   ========================================================================== */
.language-selector{ position:relative; display:inline-flex; align-items:center; }
#language-switcher{
  min-width:72px;
  width:auto;
  height:44px;
  padding:0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  white-space:nowrap;
  appearance:none;
  background: rgba(9, 14, 26, 0.05);
  color:#e7e7ea;
  border:1px solid rgba(70, 243, 255, 0.25);
  border-radius:999px;
  cursor:pointer;
  box-shadow: inset 0 0 12px rgba(70, 243, 255, 0.18);
}
#language-switcher:hover{
  background: rgba(12, 19, 34, 0.15);
  border-color: rgba(70, 243, 255, 0.4);
}
#language-switcher:focus{
  outline:none;
  border-color: rgba(176, 69, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(176, 69, 255, 0.25);
}
#language-switcher option{
  background:#0b1020;
  color:#e7e7ea;
}

.mobile-language-selector{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; padding:10px;
  background: rgba(14, 20, 38, 0.65); border-radius:12px; color:#fff; font-size:16px;
  border:1px solid rgba(70, 243, 255, 0.18);
}
#mobile-language-switcher{
  appearance:none;
  background: rgba(9, 14, 26, 0.85);
  color:#e7e7ea;
  border:1px solid rgba(70, 243, 255, 0.3);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
}
#mobile-language-switcher option{
  background:#0b1020;
  color:#e7e7ea;
}

/* ==========================================================================
   13) MODAL „18+”
   ========================================================================== */
.modal{
  position:fixed; inset:0; background: rgba(0,0,0,.9); backdrop-filter: blur(8px);
  display:flex; justify-content:center; align-items:center; z-index:10000; opacity:0; visibility:hidden;
  transition: opacity .5s, visibility .5s;
}
.modal.show{ opacity:1; visibility:visible; transition: opacity .3s; }
.modal-content{
  background: linear-gradient(135deg, #1e1e1e, #252525); padding:30px; text-align:center; border-radius:12px;
  box-shadow: 0 0 15px rgba(255,0,0,.4); width:90%; max-width:420px; animation: fadeIn .6s ease-in-out;
}
.modal-content h2{ color:#ff4c4c; font-size:22px; font-weight:700; margin-bottom:15px; }
.modal-content p{ color:#b3b3b3; font-size:16px; margin-bottom:20px; }
#confirmAge, #denyAge{
  margin:10px; padding:12px 18px; font-size:16px; font-weight:700; border-radius:8px; border:none; cursor:pointer; width:100%;
  transition: all .3s ease-in-out;
}
#confirmAge{ background: linear-gradient(45deg, #00c853, #009624); color:#fff; box-shadow: 0 0 8px rgba(0,255,0,.5); }
#confirmAge:hover{ background: linear-gradient(45deg, #00e676, #00c853); box-shadow: 0 0 12px rgba(0,255,0,.8); }
#denyAge{ background: linear-gradient(45deg, #d32f2f, #b71c1c); color:#fff; box-shadow: 0 0 8px rgba(255,0,0,.5); }
#denyAge:hover{ background: linear-gradient(45deg, #ff5252, #d32f2f); box-shadow: 0 0 12px rgba(255,0,0,.8); }

/* ==========================================================================
   14) AUTH – formularze logowania/rejestracji
   ========================================================================== */
.auth-form{
  background:#1f1f1f; padding:30px; border-radius:15px;
  box-shadow: 0 0 20px rgba(251,191,36,.2);
  max-width:500px; margin:40px auto; width:90%; text-align:center;
}
.auth-form .form-group{ margin-bottom:20px; text-align:left; }
.auth-form .form-group label{ display:block; margin-bottom:5px; color:#ccc; }
.auth-form .form-group input{
  width:100%; padding:10px; border-radius:8px; border:1px solid #444; background:#121212; color:#fff;
}

/* errors */
.error-message{
  margin:20px 0 15px; color:#ff4c4c; background: rgba(255,76,76,.1);
  padding:10px 15px; border:1px solid #ff4c4c; border-radius:8px; font-weight:700; text-align:center;
  animation: fadeInError .5s ease, pulseError 1s infinite;
}
.animated-error{ animation: shake .4s ease-in-out; }
@keyframes shake{ 0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-5px)}100%{transform:translateX(0)} }
@keyframes fadeInError{ from{opacity:0; transform: translateY(-10px);} to{opacity:1; transform: translateY(0);} }
@keyframes pulseError{ 0%{ box-shadow:0 0 0 rgba(255,76,76,.4);} 50%{ box-shadow:0 0 12px rgba(255,76,76,.8);} 100%{ box-shadow:0 0 0 rgba(255,76,76,.4);} }

/* (pozostawione – ale nie używamy już do stylowania hover) */
.auth-form .login-btn{
  margin-top:20px; background:#03bcf4; color:#fff; border:none; padding:12px 25px; font-size:16px; font-weight:700;
  border-radius:30px; cursor:pointer; text-transform:uppercase; letter-spacing:1px;
  transition: background-color .4s, transform .3s, box-shadow .4s; box-shadow: 0 0 10px rgba(3,188,244,.6);
}
.auth-form .login-btn:hover{ background:#0299cc; transform: scale(1.05); box-shadow: 0 0 20px rgba(3,188,244,1); }

.register-prompt{ margin-top:35px; text-align:center; color:#ccc; font-size:15px; }
.register-link{ color: var(--brand); text-decoration: underline; font-weight:700; transition: color .3s; }
.register-link:hover{ color:#ff7a7a; text-shadow: 0 0 6px var(--brand); }

.register-btn{
  margin-top:25px; background: var(--brand); color: var(--brand-contrast); border:none; padding:12px 25px; font-size:16px;
  border-radius:30px; cursor:pointer; transition: background-color .4s, transform .3s, box-shadow .4s;
  font-weight:700; text-transform:uppercase; letter-spacing:1px; box-shadow: 0 0 10px rgba(251,191,36,.6);
}
.register-btn:hover{ background:#FBBF24; transform: scale(1.05); box-shadow: 0 0 20px rgba(251,191,36,.9); }

/* ==========================================================================
   15) ANIMACJE OGÓLNE
   ========================================================================== */
@keyframes fadeIn{ from{ opacity:0; transform: translateY(-5px);} to{ opacity:1; transform: translateY(0);} }
@keyframes animate{
  0%,10%,18%,20%,50.1%,60%,65.1%,80.1%,90%,92.1%,100%{ color:#0e3743; text-shadow:none; }
  10%,18.1%,20.1%,30%,50%,60.1%,80.1%,90%,92.1%,100%{
    color:#fff; text-shadow: 0 0 5px #03bcf4, 0 0 8px #03bcf4, 0 0 12px #03bcf4, 0 0 20px #03bcf4, 0 0 30px #03bcf4;
  }
}

/* ==========================================================================
   16) UTYLITY
   ========================================================================== */
.glow{
  position:fixed; width:120px; height:120px;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
  border-radius:50%; pointer-events:none; mix-blend-mode: overlay; z-index:9999;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   17) AUTH – NOWE KLASY PRZYCISKÓW (tylko formularze)
   ========================================================================== */
.auth-form .btn-auth{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  min-width:220px;
  padding:0 24px;
  border-radius:30px;
  line-height:1;
  font-size:16px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition: transform .25s, box-shadow .25s;
}

/* Login: bez zmiany koloru – tylko powiększenie + turkusowy glow */
.auth-form .btn-auth--login{
  background: var(--brand);
  color:#fff;
  box-shadow: 0 0 10px rgba(20,184,166,.6);
}
.auth-form .btn-auth--login:hover{
  background: var(--brand); /* bez zmiany koloru */
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(20,184,166,1);
}

/* Register: kolor jak brand (złoto), glow turkusowy */
.auth-form .btn-auth--register{
  background: var(--brand);
  color: var(--brand-contrast);
  box-shadow: 0 0 10px rgba(251,191,36,.6);
}
.auth-form .btn-auth--register:hover{
  background: var(--brand); /* bez zmiany koloru */
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(20,184,166,1);
}