/* =========================================================
   Power Core Installation Support — dark aero overrides
   Load AFTER the page's inline stylesheet.
   ========================================================= */

html[data-theme="dark"] {
  --bg0: #071321;
  --bg1: #040a12;
  --ink: #edf7ff;
  --muted: #a9bdd4;
  --glass: rgba(10, 28, 49, 0.78);
  --glass-border: rgba(149, 206, 255, 0.17);
  --shadow:
    0 30px 74px rgba(0, 4, 14, 0.56),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);
}

/* ===== Page background ===== */

html[data-theme="dark"] body.installation-page {
  color: var(--ink);
  background:
    radial-gradient(900px 560px at 10% 7%, rgba(48, 111, 222, 0.22), transparent 61%),
    radial-gradient(900px 620px at 91% 18%, rgba(10, 182, 215, 0.17), transparent 61%),
    radial-gradient(720px 520px at 50% 78%, rgba(95, 79, 190, 0.10), transparent 64%),
    linear-gradient(180deg, #091827 0%, #071321 46%, #040a12 100%);
  background-attachment: fixed;
}

/* ===== Shared typography ===== */

html[data-theme="dark"] .installation-page .hero h1,
html[data-theme="dark"] .installation-page .wizard-head h2,
html[data-theme="dark"] .installation-page .wizard-step h3,
html[data-theme="dark"] .installation-page .quick-diagrams-head h3,
html[data-theme="dark"] .installation-page .result-box h4,
html[data-theme="dark"] .installation-page .install-info h4,
html[data-theme="dark"] .installation-page .install-info h5,
html[data-theme="dark"] .installation-page .glass-warning h4,
html[data-theme="dark"] .installation-page .diagram h2,
html[data-theme="dark"] .installation-page .section > h2 {
  color: #eff8ff;
}

html[data-theme="dark"] .installation-page .hero p,
html[data-theme="dark"] .installation-page .quick-diagrams-head p,
html[data-theme="dark"] .installation-page .diagram-text,
html[data-theme="dark"] .installation-page .diagram-text p,
html[data-theme="dark"] .installation-page .install-info p,
html[data-theme="dark"] .installation-page .install-info ul,
html[data-theme="dark"] .installation-page .install-benefits,
html[data-theme="dark"] .installation-page .install-benefits ul {
  color: #afc2d8;
}

/* ===== Main glass surfaces ===== */

html[data-theme="dark"] .installation-page .glass,
html[data-theme="dark"] .installation-page .wizard {
  border-color: rgba(149, 206, 255, 0.17);
  background:
    radial-gradient(circle at 11% 0%, rgba(185, 225, 255, 0.08), transparent 30%),
    radial-gradient(circle at 90% 5%, rgba(35, 203, 232, 0.06), transparent 31%),
    linear-gradient(
      155deg,
      rgba(22, 45, 73, 0.89),
      rgba(8, 24, 43, 0.84) 52%,
      rgba(5, 17, 32, 0.88)
    );
  box-shadow:
    0 30px 74px rgba(0, 4, 14, 0.58),
    0 12px 34px rgba(21, 137, 194, 0.08),
    inset 0 1px 0 rgba(220, 243, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

/* ===== Wizard header and progress ===== */

html[data-theme="dark"] .installation-page .wizard-progress span {
  background: rgba(147, 201, 244, 0.12);
  box-shadow:
    inset 0 1px 3px rgba(0, 3, 10, 0.42),
    inset 0 1px 0 rgba(221, 243, 255, 0.04);
}

html[data-theme="dark"] .installation-page .wizard-progress span.active {
  background: linear-gradient(90deg, #5b8cff, #18c8dd);
  box-shadow:
    0 0 18px rgba(39, 170, 232, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* ===== Reset / glass buttons ===== */

html[data-theme="dark"] .installation-page .btn-glass {
  color: #dcecff;
  border-color: rgba(145, 204, 255, 0.19);
  background:
    radial-gradient(circle at 18% 0%, rgba(191, 229, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(29, 54, 85, 0.88), rgba(10, 28, 49, 0.84));
  box-shadow:
    0 14px 32px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);
}

html[data-theme="dark"] .installation-page .btn-glass:hover {
  color: #ffffff;
  border-color: rgba(92, 171, 255, 0.52);
  box-shadow:
    0 22px 50px rgba(0, 4, 14, 0.48),
    0 0 22px rgba(37, 141, 227, 0.10),
    inset 0 1px 0 rgba(220, 243, 255, 0.14);
}

/* ===== Generic wizard choice cards ===== */

html[data-theme="dark"] .installation-page .wiz-card {
  color: #eaf5ff;
  border: 1px solid rgba(150, 207, 255, 0.17);
  background:
    radial-gradient(circle at 15% 0%, rgba(186, 226, 255, 0.075), transparent 32%),
    linear-gradient(155deg, rgba(27, 52, 83, 0.91), rgba(8, 25, 45, 0.89));
  box-shadow:
    0 18px 44px rgba(0, 5, 15, 0.42),
    inset 0 1px 0 rgba(220, 243, 255, 0.10),
    inset 0 -18px 38px rgba(0, 7, 18, 0.18);
  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s cubic-bezier(.2,.8,.2,1),
    border-color 0.35s cubic-bezier(.2,.8,.2,1),
    background 0.28s var(--ease),
    color 0.28s var(--ease);
}

html[data-theme="dark"] .installation-page .wiz-card::before {
  background:
    linear-gradient(
      135deg,
      rgba(210, 239, 255, 0.12),
      rgba(152, 210, 255, 0.035) 48%,
      transparent 76%
    );
  opacity: 0.74;
}

html[data-theme="dark"] .installation-page .wiz-card::after {
  background:
    radial-gradient(
      circle,
      rgba(59, 148, 255, 0.20),
      transparent 70%
    );
}

html[data-theme="dark"] .installation-page .wiz-card:hover {
  border-color: rgba(92, 172, 255, 0.48);
  box-shadow:
    0 28px 64px rgba(0, 4, 14, 0.55),
    0 0 0 3px rgba(67, 145, 255, 0.08),
    0 0 28px rgba(29, 160, 222, 0.09),
    inset 0 1px 0 rgba(223, 245, 255, 0.14);
}

html[data-theme="dark"] .installation-page .wiz-card.selected {
  color: #ffffff;
  border-color: rgba(58, 210, 139, 0.52);
  background:
    radial-gradient(circle at 15% 0%, rgba(70, 221, 164, 0.11), transparent 35%),
    linear-gradient(155deg, rgba(24, 62, 75, 0.94), rgba(7, 30, 42, 0.92));
  box-shadow:
    0 25px 60px rgba(0, 5, 15, 0.52),
    0 0 0 5px rgba(34, 197, 94, 0.10),
    0 0 28px rgba(34, 197, 94, 0.09),
    inset 0 1px 0 rgba(224, 247, 255, 0.14);
}

/* ===== Animated bank-choice stage ===== */

html[data-theme="dark"] .installation-page #step1.bank-choice-live::before {
  border-color: rgba(112, 184, 255, 0.16);
  background:
    radial-gradient(520px 180px at 25% 20%, rgba(55, 121, 238, 0.15), transparent 62%),
    radial-gradient(520px 180px at 75% 20%, rgba(10, 190, 220, 0.13), transparent 62%),
    linear-gradient(145deg, rgba(18, 41, 68, 0.62), rgba(5, 20, 37, 0.44));
  box-shadow:
    0 22px 58px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(220, 243, 255, 0.07);
}

html[data-theme="dark"] .installation-page #step1 .bank-card {
  border-color: rgba(159, 211, 255, 0.19);
  background:
    radial-gradient(circle at 50% 0%, rgba(54, 135, 246, 0.12), transparent 56%),
    linear-gradient(145deg, rgba(28, 55, 88, 0.94), rgba(7, 23, 42, 0.92));
  box-shadow:
    0 24px 58px rgba(0, 5, 15, 0.48),
    inset 0 1px 0 rgba(222, 244, 255, 0.11),
    inset 0 -28px 60px rgba(0, 7, 18, 0.20);
}

html[data-theme="dark"] .installation-page #step1 .bank-card .diagram-text {
  color: #eef8ff;
}

html[data-theme="dark"] .installation-page #step1 .bank-card img {
  filter:
    drop-shadow(0 24px 32px rgba(0, 0, 0, 0.48))
    saturate(1.08)
    contrast(1.08)
    brightness(0.92);
}

html[data-theme="dark"] .installation-page #step1 .bank-card:hover {
  border-color: rgba(94, 177, 255, 0.52);
  box-shadow:
    0 35px 84px rgba(0, 4, 14, 0.64),
    0 0 0 5px rgba(57, 143, 255, 0.08),
    0 0 34px rgba(32, 163, 222, 0.11),
    inset 0 1px 0 rgba(225, 246, 255, 0.15);
}

html[data-theme="dark"] .installation-page #step1 .bank-card.selected {
  border-color: rgba(47, 218, 140, 0.60);
  box-shadow:
    0 32px 82px rgba(0, 4, 14, 0.62),
    0 0 0 7px rgba(34, 197, 94, 0.11),
    0 0 35px rgba(34, 197, 94, 0.10),
    inset 0 1px 0 rgba(225, 247, 255, 0.16);
}

/* ===== Result area and installation content ===== */

html[data-theme="dark"] .installation-page .result-box {
  color: #eaf5ff;
  border-color: rgba(150, 207, 255, 0.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(181, 223, 255, 0.065), transparent 31%),
    linear-gradient(155deg, rgba(18, 40, 67, 0.80), rgba(6, 21, 39, 0.78));
  box-shadow:
    0 20px 50px rgba(0, 5, 15, 0.42),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .installation-page .install-frame,
html[data-theme="dark"] .installation-page .install-image,
html[data-theme="dark"] .installation-page .install-benefits,
html[data-theme="dark"] .installation-page .install-models {
  color: #dceafa;
  border-color: rgba(148, 205, 255, 0.15);
  background:
    radial-gradient(circle at 12% 0%, rgba(185, 225, 255, 0.055), transparent 31%),
    linear-gradient(155deg, rgba(21, 43, 70, 0.86), rgba(7, 23, 42, 0.84));
  box-shadow:
    0 18px 42px rgba(0, 5, 15, 0.38),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .installation-page .install-frame img,
html[data-theme="dark"] .installation-page .diagram img,
html[data-theme="dark"] .installation-page .center-image img {
  background: #e8f0f8;
  filter: brightness(0.91) contrast(1.05) saturate(0.96);
  box-shadow:
    0 18px 44px rgba(0, 4, 13, 0.48),
    0 0 0 1px rgba(203, 230, 249, 0.12);
}

html[data-theme="dark"] .installation-page .install-info {
  color: #dceafa;
  border-color: rgba(149, 206, 255, 0.15);
  background:
    radial-gradient(circle at 10% 0%, rgba(183, 224, 255, 0.06), transparent 32%),
    linear-gradient(155deg, rgba(20, 43, 71, 0.88), rgba(7, 23, 42, 0.85));
  box-shadow:
    0 18px 44px rgba(0, 5, 15, 0.38),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .installation-page .install-info strong {
  color: #f1f8ff;
}

html[data-theme="dark"] .installation-page .install-title {
  color: #eff8ff;
  background:
    linear-gradient(135deg, rgba(45, 105, 210, 0.82), rgba(12, 154, 188, 0.76));
}

html[data-theme="dark"] .installation-page .glass-warning {
  color: #ffe6e8;
  border-color: rgba(255, 91, 112, 0.40);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 112, 128, 0.09), transparent 35%),
    linear-gradient(145deg, rgba(81, 20, 34, 0.72), rgba(37, 9, 20, 0.78));
  box-shadow:
    0 22px 54px rgba(14, 0, 5, 0.42),
    0 0 0 1px rgba(255, 80, 105, 0.05),
    inset 0 1px 0 rgba(255, 221, 226, 0.09);
}

html[data-theme="dark"] .installation-page .glass-warning p,
html[data-theme="dark"] .installation-page .glass-warning ul,
html[data-theme="dark"] .installation-page .glass-warning li {
  color: #f4c5cb;
}

/* ===== Information pills ===== */

html[data-theme="dark"] .installation-page .info-pill {
  border: 1px solid rgba(205, 229, 247, 0.12);
  box-shadow:
    0 9px 22px rgba(0, 4, 13, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .installation-page .pill-glass {
  color: #dceaff;
  border-color: rgba(135, 152, 255, 0.30);
  background:
    linear-gradient(
      135deg,
      rgba(78, 71, 180, 0.32),
      rgba(38, 91, 177, 0.26),
      rgba(9, 137, 166, 0.22)
    );
  box-shadow:
    0 12px 28px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(222, 242, 255, 0.11);
}

html[data-theme="dark"] .installation-page .pill.small.blue {
  color: #dff2ff;
  border-color: rgba(81, 162, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(27, 126, 180, 0.38), rgba(39, 85, 170, 0.28));
  box-shadow:
    0 0 16px rgba(52, 137, 231, 0.18),
    inset 0 1px 0 rgba(221, 243, 255, 0.12);
}

/* ===== Quick diagram overview ===== */

html[data-theme="dark"] .installation-page .quick-diagrams {
  border: 1px solid rgba(149, 206, 255, 0.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(73, 138, 236, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(10, 28, 49, 0.48), rgba(5, 18, 34, 0.30));
  box-shadow:
    0 22px 54px rgba(0, 5, 15, 0.26),
    inset 0 1px 0 rgba(220, 243, 255, 0.05);
}

html[data-theme="dark"] .installation-page .quick-diagram-pill {
  color: #dceafa;
  border-color: rgba(149, 206, 255, 0.17);
  background:
    radial-gradient(circle at 15% 0%, rgba(184, 225, 255, 0.07), transparent 35%),
    linear-gradient(180deg, rgba(29, 54, 85, 0.88), rgba(10, 28, 49, 0.84));
  box-shadow:
    0 12px 28px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(220, 243, 255, 0.09);
  transition:
    transform 0.25s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.25s cubic-bezier(.2,.8,.2,1),
    border-color 0.25s cubic-bezier(.2,.8,.2,1),
    background 0.28s var(--ease),
    color 0.28s var(--ease);
}

html[data-theme="dark"] .installation-page .quick-diagram-pill:hover {
  color: #ffffff;
  border-color: rgba(94, 176, 255, 0.48);
  background:
    radial-gradient(circle at 15% 0%, rgba(184, 225, 255, 0.10), transparent 35%),
    linear-gradient(180deg, rgba(40, 71, 109, 0.94), rgba(14, 36, 61, 0.90));
  box-shadow:
    0 20px 44px rgba(0, 4, 14, 0.48),
    0 0 22px rgba(36, 154, 226, 0.08),
    inset 0 1px 0 rgba(220, 243, 255, 0.13);
}

/* ===== Optional brand/diagram sections already present in the file ===== */

html[data-theme="dark"] .installation-page .brand-card {
  border-color: rgba(149, 206, 255, 0.16);
  background:
    radial-gradient(circle at 15% 0%, rgba(184, 225, 255, 0.07), transparent 34%),
    linear-gradient(155deg, rgba(24, 48, 78, 0.88), rgba(8, 24, 43, 0.85));
  box-shadow:
    0 20px 50px rgba(0, 5, 15, 0.42),
    inset 0 1px 0 rgba(220, 243, 255, 0.09);
}

html[data-theme="dark"] .installation-page .brand-card::before {
  background:
    linear-gradient(
      130deg,
      rgba(210, 239, 255, 0.12) 0%,
      rgba(165, 218, 255, 0.04) 35%,
      transparent 60%
    );
}

html[data-theme="dark"] .installation-page .brand-card:hover {
  border-color: rgba(94, 176, 255, 0.46);
  box-shadow:
    0 30px 70px rgba(0, 4, 14, 0.54),
    0 0 28px rgba(38, 155, 226, 0.08),
    inset 0 1px 0 rgba(220, 243, 255, 0.13);
}

html[data-theme="dark"] .installation-page .soon,
html[data-theme="dark"] .installation-page .brand-copy span {
  color: #8fa6bf;
}

/* ===== Lightbox ===== */

html[data-theme="dark"] .installation-page .lightbox {
  background: rgba(1, 7, 15, 0.84);
}

html[data-theme="dark"] .installation-page .lightbox img {
  background: #e8f0f8;
  box-shadow:
    0 42px 120px rgba(0, 2, 8, 0.78),
    0 0 0 1px rgba(198, 228, 249, 0.16);
}

/* ===== Shared footer: style the real footer, neutralize its loader wrapper ===== */

html[data-theme="dark"] body.installation-page footer,
html[data-theme="dark"] body.installation-page .site-footer {
  color: #b4c8de;
  border-top-color: rgba(143, 199, 247, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(10, 25, 43, 0.96), rgba(5, 15, 28, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(219, 242, 255, 0.06),
    0 -18px 42px rgba(0, 4, 13, 0.24);
}

html[data-theme="dark"] body.installation-page #site-footer {
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== Smooth theme changes without breaking existing hover transforms ===== */

.installation-page .glass,
.installation-page .result-box,
.installation-page .install-frame,
.installation-page .install-image,
.installation-page .install-benefits,
.installation-page .install-models,
.installation-page .install-info,
.installation-page .glass-warning,
.installation-page .quick-diagrams,
.installation-page footer,
.installation-page .site-footer {
  transition:
    color 0.28s var(--ease),
    background 0.28s var(--ease),
    border-color 0.28s var(--ease),
    box-shadow 0.28s var(--ease),
    filter 0.32s var(--ease);
}

@media (max-width: 640px) {
  html[data-theme="dark"] body.installation-page {
    background-attachment: scroll;
  }

  html[data-theme="dark"] .installation-page .wizard {
    padding: 18px !important;
  }

  html[data-theme="dark"] .installation-page .result-box {
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .installation-page .quick-diagrams {
    padding: 18px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .installation-page .glass,
  .installation-page .result-box,
  .installation-page .install-frame,
  .installation-page .install-image,
  .installation-page .install-benefits,
  .installation-page .install-models,
  .installation-page .install-info,
  .installation-page .glass-warning,
  .installation-page .quick-diagrams,
  .installation-page footer,
  .installation-page .site-footer {
    transition: none !important;
  }
}

/* Quick installation diagrams — bez zewnętrznego boxa */
html[data-theme="dark"]
body.installation-page
.quick-diagrams {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}