/* Power Core products page — dark aero layer.
   Loaded after the page's inline styles so it can safely replace hard-coded light surfaces. */

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 7% 7%, rgba(53, 117, 225, 0.25), transparent 24%),
    radial-gradient(circle at 91% 6%, rgba(20, 191, 219, 0.17), transparent 21%),
    radial-gradient(circle at 48% 62%, rgba(74, 91, 191, 0.13), transparent 31%),
    linear-gradient(180deg, #0a1626 0%, #081321 38%, #050b13 100%);
  background-attachment: fixed;
}

html[data-theme="dark"] .blob {
  opacity: 0.3;
  mix-blend-mode: screen;
}

html[data-theme="dark"] .b1 { background: rgba(54, 117, 245, 0.35); }
html[data-theme="dark"] .b2 { background: rgba(26, 207, 231, 0.25); }
html[data-theme="dark"] .b3 { background: rgba(116, 91, 255, 0.22); }
html[data-theme="dark"] .noise { opacity: 0.035; }

html[data-theme="dark"] .glass,
html[data-theme="dark"] .card {
  border-color: rgba(150, 207, 255, 0.15);
  background:
    linear-gradient(180deg, rgba(24, 45, 72, 0.74), rgba(8, 22, 40, 0.58));
  box-shadow:
    0 24px 58px rgba(0, 5, 15, 0.48),
    inset 0 1px 0 rgba(220, 244, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .card:hover {
  border-color: rgba(102, 172, 255, 0.3);
  box-shadow:
    0 30px 68px rgba(0, 4, 13, 0.58),
    0 0 32px rgba(36, 130, 255, 0.08),
    inset 0 1px 0 rgba(220, 244, 255, 0.13);
}

html[data-theme="dark"] .glass::before {
  background:
    radial-gradient(640px 260px at 15% 0%, rgba(74, 137, 255, 0.22), transparent 60%),
    radial-gradient(520px 260px at 88% 10%, rgba(34, 211, 238, 0.14), transparent 60%),
    radial-gradient(560px 280px at 48% 110%, rgba(34, 197, 94, 0.08), transparent 62%);
  opacity: 0.72;
}

html[data-theme="dark"] .card::before {
  background:
    linear-gradient(135deg, rgba(218, 241, 255, 0.11), transparent 18%, transparent 55%, rgba(112, 184, 255, 0.07) 74%, transparent 100%),
    radial-gradient(circle at 10% 7%, rgba(216, 241, 255, 0.11), transparent 23%),
    radial-gradient(circle at 94% 0%, rgba(43, 204, 234, 0.11), transparent 28%);
}

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .close-btn,
html[data-theme="dark"] .select {
  border-color: rgba(153, 208, 255, 0.16);
  background: linear-gradient(180deg, rgba(30, 54, 84, 0.74), rgba(12, 28, 48, 0.68));
  box-shadow:
    0 10px 28px rgba(0, 6, 17, 0.34),
    inset 0 1px 0 rgba(220, 244, 255, 0.1);
  color: var(--muted);
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .mini:hover,
html[data-theme="dark"] .close-btn:hover {
  border-color: rgba(103, 174, 255, 0.34);
  background: linear-gradient(180deg, rgba(40, 68, 104, 0.86), rgba(16, 36, 60, 0.8));
  color: var(--ink);
}

html[data-theme="dark"] .chip.good {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(16, 97, 57, 0.18);
  color: #7ce4a5;
}

html[data-theme="dark"] .chip.new {
  border-color: rgba(110, 161, 255, 0.34);
  background: rgba(50, 100, 205, 0.16);
  color: #a9c7ff;
}

html[data-theme="dark"] .chip.ext {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(135, 88, 0, 0.15);
  color: #ffd276;
}

html[data-theme="dark"] .prod-media,
html[data-theme="dark"] .dialog-media {
  border-color: rgba(174, 220, 255, 0.15);
  background:
    radial-gradient(circle at 50% 0%, rgba(181, 222, 255, 0.16), rgba(29, 54, 82, 0.16) 43%, transparent 76%),
    linear-gradient(180deg, rgba(20, 40, 65, 0.7), rgba(7, 19, 35, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(220, 244, 255, 0.12),
    0 16px 38px rgba(0, 6, 17, 0.38);
}

html[data-theme="dark"] .prod-media::before {
  background: radial-gradient(circle, rgba(55, 190, 236, 0.15), transparent 68%);
}

html[data-theme="dark"] .clean-visual img,
html[data-theme="dark"] .prod-media img,
html[data-theme="dark"] .dialog-media img,
html[data-theme="dark"] .runtime-thumb img {
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.58));
}

html[data-theme="dark"] .specs li {
  border-bottom-color: rgba(163, 207, 242, 0.13);
}

html[data-theme="dark"] .compare-box,
html[data-theme="dark"] .slider-wrap,
html[data-theme="dark"] .runtime-minutes-soft,
html[data-theme="dark"] .runtime-thumb,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .buybar,
html[data-theme="dark"] .dialog-info {
  border-color: rgba(151, 207, 255, 0.15);
  background:
    radial-gradient(circle at 14% 0%, rgba(190, 229, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(26, 48, 77, 0.72), rgba(8, 23, 41, 0.66));
  box-shadow:
    0 18px 44px rgba(0, 5, 15, 0.42),
    inset 0 1px 0 rgba(220, 244, 255, 0.09);
}

html[data-theme="dark"] .compare-box.premium {
  border-color: rgba(74, 222, 128, 0.23);
  background:
    radial-gradient(circle at 12% 0%, rgba(79, 226, 139, 0.09), transparent 30%),
    linear-gradient(180deg, rgba(20, 60, 58, 0.5), rgba(8, 26, 38, 0.66));
}

html[data-theme="dark"] .meter,
html[data-theme="dark"] .runtime-bar {
  background: rgba(200, 228, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .runtime-compare input[type="range"] {
  background: linear-gradient(
    90deg,
    #6ea1ff 0%,
    #6ea1ff 20%,
    rgba(205, 231, 255, 0.12) 20%,
    rgba(205, 231, 255, 0.12) 100%
  );
}

html[data-theme="dark"] .runtime-compare input[type="range"]::-webkit-slider-runnable-track,
html[data-theme="dark"] .runtime-compare input[type="range"]::-moz-range-track {
  border-color: rgba(172, 216, 255, 0.16);
}

html[data-theme="dark"] .runtime-compare input[type="range"]::-webkit-slider-thumb,
html[data-theme="dark"] .runtime-compare input[type="range"]::-moz-range-thumb {
  border-color: rgba(159, 207, 255, 0.28);
  background: linear-gradient(180deg, #80b0dc 0%, #416a94 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(231, 247, 255, 0.45);
}

html[data-theme="dark"] .runtime-result-value {
  color: #f7fbff;
  text-shadow: 0 0 18px rgba(103, 166, 255, 0.2);
}

html[data-theme="dark"] .faq-item::before {
  background:
    linear-gradient(
      90deg,
      rgba(214, 239, 255, 0.07) 0%,
      rgba(189, 226, 255, 0.035) 30%,
      rgba(62, 131, 215, 0.06) 60%,
      rgba(36, 184, 218, 0.08) 100%
    );
}

html[data-theme="dark"] .faq-item:hover,
html[data-theme="dark"] .faq-item.open {
  border-color: rgba(105, 176, 255, 0.26);
  background: linear-gradient(180deg, rgba(31, 57, 91, 0.82), rgba(10, 28, 49, 0.76));
  box-shadow: 0 22px 48px rgba(0, 5, 15, 0.5), inset 0 1px 0 rgba(220, 244, 255, 0.11);
}

html[data-theme="dark"] .buybar {
  background: rgba(9, 24, 43, 0.78);
  box-shadow:
    0 26px 68px rgba(0, 3, 10, 0.64),
    inset 0 1px 0 rgba(218, 242, 255, 0.1);
}

html[data-theme="dark"] .select,
html[data-theme="dark"] .select option {
  background-color: #10233a;
  color: var(--ink);
}

html[data-theme="dark"] .modal {
  background: rgba(1, 7, 16, 0.66);
}

html[data-theme="dark"] .modal-panel {
  border-color: rgba(151, 207, 255, 0.16);
  background:
    radial-gradient(circle at 15% 0%, rgba(83, 151, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(19, 39, 65, 0.96), rgba(6, 18, 33, 0.95));
  box-shadow: 0 34px 90px rgba(0, 3, 10, 0.72), inset 0 1px 0 rgba(220, 244, 255, 0.1);
}

html[data-theme="dark"] .dialog-media,
html[data-theme="dark"] .dialog-info {
  border-color: rgba(168, 215, 255, 0.14);
}

html[data-theme="dark"] .dialog-actions .btn-ghost {
  border-color: rgba(151, 207, 255, 0.16);
  background: linear-gradient(180deg, rgba(31, 57, 88, 0.78), rgba(11, 29, 50, 0.72));
  color: var(--ink);
}

html[data-theme="dark"] .media-nav {
  border-color: rgba(174, 220, 255, 0.18);
  background: rgba(19, 42, 69, 0.68);
  box-shadow: 0 20px 46px rgba(0, 4, 13, 0.56), inset 0 1px 0 rgba(220, 244, 255, 0.13);
  color: #eaf6ff;
}

html[data-theme="dark"] .media-nav:hover {
  border-color: rgba(177, 222, 255, 0.28);
  background: rgba(34, 66, 103, 0.8);
  box-shadow: 0 24px 52px rgba(0, 4, 13, 0.62), 0 0 24px rgba(62, 155, 255, 0.1), inset 0 1px 0 rgba(220, 244, 255, 0.16);
}

html[data-theme="dark"] .media-dot {
  background: rgba(196, 224, 248, 0.2);
  box-shadow: inset 0 0 0 1px rgba(212, 239, 255, 0.16);
}

html[data-theme="dark"] .media-dot.active {
  background: #71a7ff;
  box-shadow: 0 0 0 4px rgba(71, 139, 255, 0.18), 0 0 15px rgba(71, 164, 255, 0.24);
}

html.theme-fallback-transition .glass,
html.theme-fallback-transition .card,
html.theme-fallback-transition .prod-media,
html.theme-fallback-transition .compare-box,
html.theme-fallback-transition .slider-wrap,
html.theme-fallback-transition .runtime-minutes-soft,
html.theme-fallback-transition .runtime-thumb,
html.theme-fallback-transition .faq-item,
html.theme-fallback-transition .buybar,
html.theme-fallback-transition .modal-panel,
html.theme-fallback-transition .dialog-media,
html.theme-fallback-transition .dialog-info,
html.theme-fallback-transition .btn-ghost,
html.theme-fallback-transition .mini,
html.theme-fallback-transition .chip,
html.theme-fallback-transition .badge,
html.theme-fallback-transition .close-btn,
html.theme-fallback-transition .select {
  transition:
    color 0.62s var(--ease),
    background-color 0.62s var(--ease),
    background 0.62s var(--ease),
    border-color 0.62s var(--ease),
    box-shadow 0.62s var(--ease),
    filter 0.62s var(--ease);
}

@media (max-width: 768px) {
  html[data-theme="dark"] body::before {
    background:
      radial-gradient(circle at 12% 0%, rgba(59, 126, 231, 0.18), transparent 31%),
      radial-gradient(circle at 90% 3%, rgba(27, 193, 218, 0.12), transparent 27%);
  }
}

/* The source page uses !important for the compact mobile modal, so the dark
   counterpart must deliberately match that layer. */
@media (max-width: 640px) {
  html[data-theme="dark"] .modal-panel {
    border-color: rgba(151, 207, 255, 0.16) !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(80, 148, 255, 0.14), transparent 33%),
      linear-gradient(180deg, rgba(19, 40, 66, 0.98), rgba(6, 18, 33, 0.98)) !important;
    box-shadow: 0 28px 72px rgba(0, 3, 10, 0.72), inset 0 1px 0 rgba(220, 244, 255, 0.1) !important;
  }

  /* Bez zbędnej belki za nagłówkiem Quick view */
  html[data-theme="dark"] .modal-panel .dialog-top {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="dark"] .dialog-media,
  html[data-theme="dark"] .dialog-info {
    border-color: rgba(165, 215, 255, 0.15) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(181, 222, 255, 0.12), transparent 52%),
      linear-gradient(180deg, rgba(24, 47, 75, 0.92), rgba(8, 24, 43, 0.9)) !important;
    box-shadow: 0 14px 34px rgba(0, 5, 15, 0.48), inset 0 1px 0 rgba(220, 244, 255, 0.09) !important;
  }
}