/* === MAPOWANIE NA TRYB === */
.glass-dynamic { /* baza wspĂłlna jak w .glass-white/.glass-black */
  overflow: hidden;              /* żeby równo przycinać promień */
  background-origin: border-box; /* pewność, że border-box działa tak jak chcemy */
  border-radius: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background:
    linear-gradient(var(--_tint), var(--_tint)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.12)) padding-box,
    linear-gradient(135deg, var(--edge-light), var(--edge-fade) 35%, var(--edge-dark) 70%) border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
/* === USTAWIENIA GLOBALNE DO GRADIENTÓW (możesz stroić) === */
:root{
  /* siła efektów (0 → wyłączone) */
  --glass-grad-strength: .12;   /* cienie/poświaty narożne */
  --glass-sheen-strength: .10;  /* „połysk” conic */
  --brand-accent-strength: 0;   /* subtelny akcent marki; 0 = off */

  /* kolor akcentu (Twój fiolet) — działa tylko gdy --brand-accent-strength > 0 */
  --brand-accent: #0a84e3;

  /* kąt połysku (zmień by „światło” padało z innej strony) */
  --glass-sheen-angle: 120deg;
}

/* warianty dla jasnego/ciemnego: delikatnie inne kolory światła/cienia */
:root[data-theme="light"]{
  --glass-hi: rgba(255,255,255, .70); /* highlight */
  --glass-mid: rgba(255,255,255, .10);
  --glass-low: rgba(0,0,0, .12);      /* cień */
  --accent-hi: color-mix(in oklab, var(--brand-accent), white 75%);
}
:root[data-theme="dark"]{
  --glass-hi: rgba(255,255,255, .50);
  --glass-mid: rgba(255,255,255, .06);
  --glass-low: rgba(0,0,0, .25);
  --accent-hi: color-mix(in oklab, var(--brand-accent), black 70%);
}

/* === PATCH: dodajemy subtelne gradienty do istniejÄ…cego .glass-dynamic === */
.glass-dynamic{
  position: relative;             /* dla pseudo-elementu (jeśli zechcesz kiedyś dodać animację) */
  overflow: hidden;               /* masz już to — zostawiamy */
  background-origin: border-box;  /* masz już to — zostawiamy */

  /* UAKTUALNIONE WARSTWY TŁA:
     1) Tint (Twoje)
     2) Fill vertical (Twoje)
     3) Edge border (Twoje)
     4) Radial „poświata” w dwóch narożach (NOWE, bardzo słabe)
     5) Conic „połysk” (NOWE, ultra-słaby)
     6) Opcjonalny akcent marki (NOWE, domyślnie 0) */
  background:
    /* 1: stały tint szkła */
    linear-gradient(var(--_tint), var(--_tint)) padding-box,

    /* 2: miękki fill top→bottom */
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.12)) padding-box,

    /* 3: krawędź 3D po borderze */
    linear-gradient(135deg, var(--edge-light), var(--edge-fade) 35%, var(--edge-dark) 70%) border-box,

    /* 4: RADIALNE POĹšWIATY w naroĹĽach (mieszane subtelnie) */
    radial-gradient(120% 100% at 0% 0%,
      rgba(255,255,255,calc(var(--glass-grad-strength)*.9)) 0%,
      rgba(255,255,255,0) 45%) padding-box,
    radial-gradient(120% 100% at 100% 100%,
      rgba(0,0,0,calc(var(--glass-grad-strength)*.6)) 0%,
      rgba(0,0,0,0) 50%) padding-box,

    /* 5: CONIC SHEEN — delikatny „smużek” odbicia */
    conic-gradient(from var(--glass-sheen-angle) at 30% 0%,
      rgba(255,255,255, calc(var(--glass-sheen-strength)*.55)) 0deg,
      rgba(255,255,255, 0) 60deg 240deg,
      rgba(255,255,255, calc(var(--glass-sheen-strength)*.30)) 300deg,
      rgba(255,255,255, 0) 360deg) padding-box,

    /* 6: OPCJONALNY AKCENT MARKI — ultra subtelny */
    radial-gradient(160% 140% at 110% -10%,
      color-mix(in oklab, var(--accent-hi), transparent calc(100% - var(--brand-accent-strength)*100%)) 0%,
      transparent 60%) padding-box;

  background-clip: padding-box, padding-box, border-box, padding-box, padding-box, padding-box, padding-box;
}

/* zachowujemy Twoje bazowe różnice motywu */
:root[data-theme="light"] .glass-dynamic{
  --_tint: rgba(255, 255, 255, 0.30);
  background-color: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(0, 0, 0, 0.04);
  color:#111;
}
:root[data-theme="dark"] .glass-dynamic{
  --_tint: rgba(20, 20, 20, 0.40);
  background-color: rgba(20, 20, 20, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color:#fff;
}

/* (opcjonalnie) super-delikatny noise tylko gdy chcesz lekko „zmatowić” gładkie tła
   — wyłączone domyślnie; odkomentuj by użyć.
.glass-dynamic::after{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  opacity:.03;                /* 0.02–0.05 max */
  background-image:
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'>\
      <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter>\
      <rect width='100%' height='100%' filter='url(#n)' opacity='.35'/>\
    </svg>");
  background-size: 120px 120px;
  mix-blend-mode: soft-light; /* nie zmienia koloru linkĂłw/tekstu */
  border-radius: inherit;
}
*/

/* typografia (Twoje) */
.glass-dynamic :is(h1,h2,h3,h4,h5,h6,p,li,small,span,label,th,td){ color: inherit !important; opacity:1; }
.glass-dynamic a{ text-decoration-color: rgba(255,255,255,.55); }
:root[data-theme="light"] .glass-dynamic a{ color:#111; text-decoration-color: rgba(0,0,0,.45); }
:root[data-theme="dark"]  .glass-dynamic a{ color:#fff; text-decoration-color: rgba(255,255,255,.55); }

/* fallback bez backdrop-filter (Twoje) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root[data-theme="light"] .glass-dynamic{ --_tint: rgba(255,255,255,.78); background-color: rgba(255,255,255,.78); }
  :root[data-theme="dark"]  .glass-dynamic{ --_tint: rgba(0,0,0,.55);   background-color: rgba(0,0,0,.55); }
}



/* jasny/ciemny */
:root[data-theme="light"] .glass-dynamic{
  --_tint: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.04);
  color:#111;
}
:root[data-theme="dark"] .glass-dynamic{
  --_tint: rgba(20, 20, 20, 0.4);
  background-color: rgba(20, 20, 20, 0.4);
border: 1px solid rgba(255, 255, 255, 0.04);
  color:#fff;
}

/* typografia na szkle (odziedzicz kolory) */
.glass-dynamic :is(h1,h2,h3,h4,h5,h6,p,li,small,span,label,th,td){ color: inherit !important; opacity:1; }
.glass-dynamic a{ text-decoration-color: rgba(255,255,255,.55); }
:root[data-theme="light"] .glass-dynamic a{ color:#111; text-decoration-color: rgba(0,0,0,.45); }
:root[data-theme="dark"] .glass-dynamic a{ color:#fff; text-decoration-color: rgba(255,255,255,.55); }

/* fallback bez backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root[data-theme="light"] .glass-dynamic{ --_tint: rgba(255,255,255,.78); background-color: rgba(255,255,255,.78); }
  :root[data-theme="dark"]  .glass-dynamic{ --_tint: rgba(0,0,0,.55);   background-color: rgba(0,0,0,.55); }
}