/* SIZING */
:root{
--font: clamp(0.875rem, 1.5vw, 1.125rem);
}

/* COLOR PALET */
:root{
    --error: #EC7985;
    --panel: #161616;
    --hover: #ffffffbd;
    /* stary --light-ef: #51cbee;*/
    --border: #6B6F73;
    --special: #BA68C8;
    --in-put: #057feb70;
    --light-ef: #057feb8f;
    /* --light-ef: #057feb; */
    /* --in-put: #057feb; */
}

:root {

  /* === TŁA === */
  --background: #f9f9f9;               /* Jeszcze bardziej białe, jak Chrome */
  --box-background: #f5f6fa;           /* Delikatny odcień szarości dla kart */
  --in-box: #ffffffcc;                 /* Lekkie przezroczyste białe */

  /* === TEKST === */
  --text: #18181b;                     /* Prawie czarne (lepszy kontrast niż #0A0A0A) */
  --text-in-box: #24243a;              /* Bardziej neutralny niż #222 */
  --contrast-text: #616161;            /* Utrzymuje czytelność dla nieaktywnych tekstów */

  /* === KOLORY AKCENTÓW === */
  --contrast: #fef9ff;                 /* Pełna biel jako “kontrast” w jasnym */
  --primary: #836fff;                  /* Twój fiolet */
  --primary-alt: #7256d8;              /* Delikatnie ciemniejszy odcień */
  --secondary: #32e8fa;                /* Twoja jaskrawa cyjan */
  --secondary-alt: #6de3f9;
  --accent: #4786e7;                   /* Lekko stonowany niebieski jak w Chrome */
  --success: #22c55e;
  --success-alt: #16a34a;
  --warning: #eab308;
  --danger: #ef4444;
  --danger-alt: #b91c1c;

  /* === BOX/BORDER/SHADOW === */
  --border-contrast: #66339914;          /* Bardziej “Chrome” */
  --box-gradient: linear-gradient(90deg, #fafafd 70%, #ecefff 100%);
  --box-shadow: 0 2px 12px 0 #c1c5d14a, 0 1.5px 8px #bdbdff15;
  --shadow: var(--box-shadow);

  /* === AKTYWNE ELEMENTY === */
  --active: linear-gradient(90deg, #ece8ff 15%, #e0f7ff 85%);
  --active-glow: 0 0 12px #bab2ff59, 0 0 4px #7bdfff33;

  /* === PRZYCISKI === */
  --button-bg: var(--contrast);
  --button-hover: linear-gradient(90deg, #32e8fa2e 15%, #836fff21 100%);
  --button-text: #18181b;              /* Ciemny na jasnym */

  /* === DROPDOWN === */
  --dropdown-bg: #fff;
  --dropdown-border: #ecefff;
  --dropdown-shadow: 0 6px 20px #bab2ff2c, 0 1.5px 10px #32e8fa13;

  /* === INPUT === */
  --input-bg: var(--in-box);
  --input-border: #836fff;
  --input-focus-bg: #f6f4ff66;
  --input-focus-border: #836fff;
  --input-focus-text: var(--text);

  /* === CHECKBOX === */
  --checkbox-accent: #836fff;

  /* === POZOSTAŁE === */
  --gray-bg: #f5f6fa;
  --gray-hover: #ececec;
  --gray-text: #616161;
}
/* === CIEMNY MOTYW === */
@media (prefers-color-scheme: dark) {
  :root {
    /* Tło */
    --background: #11121a;
    --box-background: #181a24e0;
    --in-box: linear-gradient(135deg, #23263a 0%, #1a1d2b 100%);

    /* Tekst */
    --text: #f6f7fc;
    --text-in-box: #e9eaf7;
    --contrast-text: #b6b9d6;

    /* Akcenty i kolory pomocnicze */
    --contrast: linear-gradient(90deg, #836fff 0%, #32e8fa 100%);
    --primary: #836fff;
    --primary-alt: #7b61ff;
    --secondary: #32e8fa;
    --secondary-alt: #6de3f9;
    --accent: #58a6ff;
    --success: #258753;
    --success-alt: #1a633c;
    --warning: #ffe066;
    --danger: #9d1c38;
    --danger-alt: #ff6f6f;

    /* Box i border */
    --border-contrast: #23263a;
    --box-gradient: linear-gradient(90deg, #171726 80%, #23263a 100%);
    --box-shadow: 0 2px 14px #1819203d;
    --shadow: var(--box-shadow);

    /* Aktywne elementy */
    --active: #23263a;
    --active-glow: 0 0 12px #23263a6e;

    /* Przyciski */
    --button-bg: #23263a;
    --button-hover: #262940;
    --button-text: #e9eaf7;

    /* Dropdown */
    --dropdown-bg: #181a24e0;
    --dropdown-border: #30314a;
    --dropdown-shadow: 0 8px 26px #181a2455, 0 1.5px 10px #836fff11;

    /* Input */
    --input-bg: #23263a;
    --input-border: #58a6ff;
    --input-focus-bg: #23263a;
    --input-focus-border: #58a6ff;
    --input-focus-text: #e9eaf7;

    /* Checkbox */
    --checkbox-accent: #836fff;

    /* Pozostałe */
    --gray-bg: #23263a;
    --gray-hover: #282a45;
    --gray-text: #b6b9d6;
  }
}


/* Template */

.btn-neon {
  background: var(--contrast);
  color: #fff;
  border: none;
  border-radius: 2em;
  font-weight: 600;
  padding: 0.7em 2em;
  position: relative;
  overflow: hidden;
  box-shadow: var(--active-glow);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
}

.btn-neon::before {
  content: '';
  position: absolute;
  left: -90%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0.21) 0%,
    rgba(255,255,255,0.09) 35%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.7s cubic-bezier(.25,.8,.25,1);
  z-index: 1;
}

.btn-neon:hover::before {
  left: 130%;
}

.btn-neon:hover, .btn-neon:focus {
  background: var(--active);
  box-shadow: 0 0 22px #32e8fa80, 0 0 6px #6e62e577;
}

.box::after {
  content: '';
  position: absolute;
  top: 0; right: 0; width: 38px; height: 38px;
  background: var(--contrast);
  opacity: 0.15;
  border-radius: 0 0 0 38px;
  filter: blur(14px);
  pointer-events: none;
}

.cms-module-boundary{display:contents}