/* =========================================================
   Power Core Support Center — dark aero overrides
   Load this file AFTER all page-specific and inline styles.
   ========================================================= */

html[data-theme="dark"] {
  --text-main: #eef7ff;
  --text-soft: #b8c9df;
  --text-muted: #8fa4bd;

  --glass-bg:
    linear-gradient(
      145deg,
      rgba(24, 48, 78, 0.82),
      rgba(10, 27, 48, 0.76) 48%,
      rgba(5, 18, 34, 0.72)
    );

  --glass-border: rgba(148, 205, 255, 0.18);

  --glass-shadow:
    0 34px 78px rgba(0, 5, 16, 0.52),
    0 12px 34px rgba(16, 141, 195, 0.12),
    inset 0 1px 0 rgba(220, 243, 255, 0.10),
    inset 0 -24px 50px rgba(0, 7, 18, 0.22);

  --glass-shadow-hover:
    0 42px 92px rgba(0, 4, 14, 0.62),
    0 18px 44px rgba(30, 159, 219, 0.15),
    inset 0 1px 0 rgba(222, 245, 255, 0.14),
    inset 0 -28px 58px rgba(0, 7, 18, 0.26);
}

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

html[data-theme="dark"] body.support-page {
  color: var(--text-main);
  background:
    radial-gradient(circle at 13% 12%, rgba(83, 89, 205, 0.21), transparent 27%),
    radial-gradient(circle at 88% 8%, rgba(9, 177, 213, 0.18), transparent 25%),
    radial-gradient(circle at 70% 72%, rgba(24, 99, 197, 0.12), transparent 36%),
    radial-gradient(circle at 25% 84%, rgba(14, 181, 150, 0.09), transparent 31%),
    linear-gradient(145deg, #071421 0%, #081321 42%, #040a12 100%);
  background-attachment: fixed;
}

html[data-theme="dark"] body.support-page::before {
  background:
    radial-gradient(circle at 24% 22%, rgba(104, 138, 255, 0.18), transparent 17%),
    radial-gradient(circle at 72% 18%, rgba(26, 207, 232, 0.16), transparent 20%),
    radial-gradient(circle at 46% 56%, rgba(114, 92, 255, 0.13), transparent 29%),
    radial-gradient(circle at 78% 78%, rgba(0, 121, 255, 0.12), transparent 27%),
    radial-gradient(circle at 18% 76%, rgba(56, 222, 194, 0.10), transparent 24%);
  filter: blur(40px) saturate(135%);
  opacity: 0.72;
  mix-blend-mode: screen;
}

html[data-theme="dark"] body.support-page::after {
  background:
    linear-gradient(
      118deg,
      transparent 0%,
      transparent 24%,
      rgba(129, 192, 255, 0.07) 30%,
      rgba(65, 199, 230, 0.04) 34%,
      transparent 40%,
      transparent 100%
    ),
    linear-gradient(
      74deg,
      transparent 0%,
      transparent 58%,
      rgba(144, 184, 255, 0.05) 63%,
      transparent 70%
    ),
    radial-gradient(ellipse at 7% 10%, rgba(124, 71, 196, 0.10), transparent 15%),
    radial-gradient(ellipse at 91% 8%, rgba(45, 206, 189, 0.10), transparent 17%),
    linear-gradient(180deg, transparent 0%, rgba(2, 8, 18, 0.12) 100%);
  opacity: 0.42;
  mix-blend-mode: screen;
}

/* ===== Headings and introductory copy ===== */

html[data-theme="dark"] .support-page .support-head h1,
html[data-theme="dark"] .support-page .quick-access-head h2,
html[data-theme="dark"] .support-page .expert-dock-content h2 {
  color: #f2f8ff;
  text-shadow: 0 8px 28px rgba(0, 6, 18, 0.42);
}

html[data-theme="dark"] .support-page .support-head p,
html[data-theme="dark"] .support-page .quick-access-head p,
html[data-theme="dark"] .support-page .expert-dock-content p,
html[data-theme="dark"] .support-page .search-status {
  color: #9fb3cc;
}

/* ===== Search field ===== */

html[data-theme="dark"] .support-page .search-input {
  color: #eef7ff;
  caret-color: #6fd5ff;
  border: 1px solid rgba(147, 204, 255, 0.17);
  background:
    radial-gradient(circle at 12% 0%, rgba(173, 219, 255, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(17, 38, 65, 0.94), rgba(8, 24, 43, 0.92));
  box-shadow:
    0 20px 44px rgba(0, 5, 16, 0.42),
    inset 0 1px 0 rgba(220, 243, 255, 0.09);
}

html[data-theme="dark"] .support-page .search-input::placeholder {
  color: #8297b0;
}

html[data-theme="dark"] .support-page .search-input:hover {
  border-color: rgba(112, 183, 255, 0.29);
}

html[data-theme="dark"] .support-page .search-input:focus {
  border-color: rgba(91, 165, 255, 0.65);
  background:
    radial-gradient(circle at 12% 0%, rgba(173, 219, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(20, 45, 76, 0.97), rgba(9, 27, 49, 0.96));
  box-shadow:
    0 0 0 4px rgba(72, 143, 255, 0.12),
    0 22px 48px rgba(0, 5, 16, 0.48),
    inset 0 1px 0 rgba(220, 243, 255, 0.11);
}

html[data-theme="dark"] .support-page .search-icon path {
  stroke: #c9ddf1 !important;
}

/* ===== Search tags and controls ===== */

html[data-theme="dark"] .support-page .quick-tag,
html[data-theme="dark"] .support-page .search-clear {
  color: #b8cce1;
  border-color: rgba(148, 205, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(29, 53, 82, 0.86), rgba(11, 28, 48, 0.82));
  box-shadow:
    0 9px 22px rgba(0, 5, 15, 0.30),
    inset 0 1px 0 rgba(219, 242, 255, 0.09);
}

html[data-theme="dark"] .support-page .quick-tag:hover,
html[data-theme="dark"] .support-page .search-clear:hover {
  color: #f1f8ff;
  border-color: rgba(105, 180, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(40, 70, 106, 0.92), rgba(15, 36, 61, 0.90));
  box-shadow:
    0 13px 30px rgba(0, 5, 15, 0.40),
    0 0 18px rgba(42, 150, 231, 0.08),
    inset 0 1px 0 rgba(219, 242, 255, 0.12);
}

/* ===== Dynamic search results ===== */

html[data-theme="dark"] .support-page .search-card,
html[data-theme="dark"] .support-page .search-empty {
  color: var(--text-main);
  border-color: rgba(149, 205, 255, 0.15);
  background:
    radial-gradient(circle at 12% 0%, rgba(182, 222, 255, 0.07), transparent 31%),
    linear-gradient(180deg, rgba(23, 46, 75, 0.82), rgba(8, 24, 43, 0.76));
  box-shadow:
    0 20px 48px rgba(0, 5, 15, 0.42),
    inset 0 1px 0 rgba(220, 243, 255, 0.09);
}

html[data-theme="dark"] .support-page .search-card:hover {
  border-color: rgba(101, 177, 255, 0.30);
  box-shadow:
    0 28px 58px rgba(0, 4, 14, 0.54),
    inset 0 1px 0 rgba(220, 243, 255, 0.12);
}

html[data-theme="dark"] .support-page .search-pill {
  color: #acd2ff;
  border-color: rgba(111, 183, 255, 0.22);
  background: rgba(31, 85, 150, 0.18);
}

html[data-theme="dark"] .support-page .search-jump {
  color: #70b5ff;
}

html[data-theme="dark"] .support-page .search-card h3 {
  color: #edf7ff;
}

html[data-theme="dark"] .support-page .search-card p,
html[data-theme="dark"] .support-page .search-empty {
  color: #a9bdd4;
}

html[data-theme="dark"] .support-page mark {
  color: #fff8d6;
  background: rgba(202, 145, 25, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 207, 83, 0.22);
}

/* ===== Main premium cards ===== */

html[data-theme="dark"] .support-page .support-grid-premium .support-card {
  border-color: rgba(168, 216, 255, 0.21) !important;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent-2) 17%, transparent), transparent 34%),
    linear-gradient(155deg, rgba(18, 32, 58, 0.95), rgba(7, 15, 32, 0.94) 52%, rgba(4, 11, 25, 0.98)) !important;
  box-shadow:
    0 35px 76px rgba(0, 4, 14, 0.62),
    0 14px 42px color-mix(in srgb, var(--accent-soft) 66%, transparent),
    inset 0 1px 0 rgba(221, 244, 255, 0.12),
    inset 0 -24px 52px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .support-page .support-grid-premium .support-card:hover {
  border-color: rgba(194, 229, 255, 0.34) !important;
  box-shadow:
    0 45px 92px rgba(0, 3, 12, 0.72),
    0 18px 56px color-mix(in srgb, var(--accent-soft) 78%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-3) 28%, transparent),
    inset 0 1px 0 rgba(225, 246, 255, 0.16),
    inset 0 -28px 58px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .support-page .support-grid-premium .support-card::after {
  background:
    linear-gradient(
      128deg,
      rgba(213, 238, 255, 0.18) 0%,
      rgba(213, 238, 255, 0.05) 18%,
      transparent 38%,
      transparent 67%,
      rgba(130, 196, 255, 0.06) 84%,
      rgba(201, 236, 255, 0.14) 100%
    ),
    radial-gradient(circle at 12% 8%, rgba(216, 241, 255, 0.14), transparent 19%),
    radial-gradient(circle at 102% 4%, color-mix(in srgb, var(--accent-3) 30%, transparent), transparent 28%) !important;
  opacity: 0.58 !important;
}

html[data-theme="dark"] .support-page .support-grid-premium .support-photo::after {
  background:
    linear-gradient(180deg, rgba(3, 8, 20, 0.06) 0%, rgba(3, 8, 20, 0.30) 58%, rgba(3, 8, 20, 0.92) 100%),
    linear-gradient(118deg, rgba(219, 240, 255, 0.13) 0%, transparent 31%, transparent 63%, rgba(170, 218, 255, 0.09) 100%);
}

html[data-theme="dark"] .support-page .support-grid-premium .support-photo img {
  filter: saturate(1.04) contrast(1.08) brightness(0.80) !important;
}

html[data-theme="dark"] .support-page .support-grid-premium .support-card:hover .support-photo img {
  filter: saturate(1.13) contrast(1.10) brightness(0.87) !important;
}

html[data-theme="dark"] .support-page .support-grid-premium .photo-cut {
  opacity: 0.82 !important;
  filter: saturate(0.94) brightness(0.92);
}

html[data-theme="dark"] .support-page .support-grid-premium .support-chip,
html[data-theme="dark"] .support-page .support-grid-premium .support-badge {
  color: rgba(240, 248, 255, 0.94) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-2) 17%, rgba(6, 15, 31, 0.70)),
      rgba(4, 13, 29, 0.68)
    ) !important;
  border-color: color-mix(in srgb, var(--accent-3) 33%, rgba(174, 218, 255, 0.16)) !important;
  box-shadow:
    inset 0 1px 0 rgba(221, 243, 255, 0.12),
    0 9px 22px rgba(0, 3, 12, 0.24),
    0 0 18px color-mix(in srgb, var(--accent-2) 14%, transparent) !important;
}

html[data-theme="dark"] .support-page .support-grid-premium .support-card p {
  color: rgba(220, 235, 248, 0.83) !important;
}

/* ===== Expert support dock ===== */

html[data-theme="dark"] .support-page .expert-support-dock {
  color: var(--text-main);
  border-color: rgba(149, 206, 255, 0.17);
  background:
    radial-gradient(ellipse at 18% -36%, rgba(255, 110, 61, 0.08), transparent 58%),
    radial-gradient(ellipse at 50% -42%, rgba(117, 96, 255, 0.10), transparent 60%),
    radial-gradient(ellipse at 84% -36%, rgba(35, 230, 170, 0.09), transparent 58%),
    linear-gradient(
      145deg,
      rgba(24, 48, 78, 0.88) 0%,
      rgba(11, 29, 50, 0.84) 48%,
      rgba(6, 21, 39, 0.80) 100%
    );
  box-shadow:
    0 -14px 42px rgba(99, 88, 227, 0.05),
    0 22px 52px rgba(0, 5, 16, 0.48),
    0 10px 28px rgba(31, 195, 221, 0.07),
    inset 0 1px 0 rgba(220, 243, 255, 0.10),
    inset 0 -18px 38px rgba(0, 8, 20, 0.24);
}

html[data-theme="dark"] .support-page .expert-support-dock::after {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 43%,
      rgba(198, 232, 255, 0.10) 49%,
      rgba(104, 207, 232, 0.05) 53%,
      transparent 61%,
      transparent 100%
    ),
    radial-gradient(circle at 92% 0%, rgba(31, 195, 221, 0.09), transparent 35%);
}

html[data-theme="dark"] .support-page .expert-dock-kicker {
  color: #78bdf0;
}

/* ===== Quick access ===== */

html[data-theme="dark"] .support-page .quick-access-pill {
  color: #dceafa;
  border-color: rgba(148, 205, 255, 0.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(183, 224, 255, 0.07), transparent 35%),
    linear-gradient(180deg, rgba(28, 53, 84, 0.84), rgba(10, 27, 47, 0.80));
  box-shadow:
    0 13px 30px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(221, 243, 255, 0.09);
}

html[data-theme="dark"] .support-page .quick-access-pill:hover {
  border-color: rgba(106, 181, 255, 0.33);
  background:
    radial-gradient(circle at 12% 0%, rgba(183, 224, 255, 0.09), transparent 35%),
    linear-gradient(180deg, rgba(39, 70, 108, 0.92), rgba(14, 35, 59, 0.88));
  box-shadow:
    0 18px 38px rgba(0, 4, 14, 0.45),
    0 0 20px rgba(35, 151, 227, 0.08),
    inset 0 1px 0 rgba(221, 243, 255, 0.12);
}

html[data-theme="dark"] .support-page .quick-access-pill.featured {
  border-color: rgba(61, 190, 242, 0.30);
  background:
    linear-gradient(180deg, rgba(21, 70, 103, 0.58), rgba(8, 31, 52, 0.78));
}

html[data-theme="dark"] .support-page .quick-access-pill.support-pro {
  border-color: rgba(144, 126, 255, 0.29);
  background:
    linear-gradient(180deg, rgba(63, 48, 112, 0.48), rgba(17, 27, 54, 0.80));
}

/* ===== Serial-number modal ===== */

html[data-theme="dark"] .support-page .serial-modal-backdrop {
  background: rgba(1, 7, 15, 0.74);
}

html[data-theme="dark"] .support-page .serial-modal-card {
  color: var(--text-main);
  border-color: rgba(149, 206, 255, 0.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(103, 170, 255, 0.11), transparent 29%),
    radial-gradient(circle at 92% 10%, rgba(32, 204, 232, 0.08), transparent 33%),
    linear-gradient(155deg, rgba(24, 48, 78, 0.97), rgba(7, 21, 39, 0.97));
  box-shadow:
    0 38px 100px rgba(0, 3, 10, 0.72),
    inset 0 1px 0 rgba(220, 243, 255, 0.11);
}

html[data-theme="dark"] .support-page .serial-modal-card::before {
  background:
    radial-gradient(circle at 12% 0%, rgba(185, 224, 255, 0.09), transparent 29%),
    radial-gradient(circle at 92% 10%, rgba(49, 210, 235, 0.07), transparent 33%),
    radial-gradient(circle at 50% 100%, rgba(117, 104, 255, 0.07), transparent 35%);
}

html[data-theme="dark"] .support-page .serial-modal-card h2,
html[data-theme="dark"] .support-page #serialForm label {
  color: #edf7ff;
}

html[data-theme="dark"] .support-page .serial-modal-card p {
  color: #a9bdd4;
}

html[data-theme="dark"] .support-page .serial-modal-close {
  color: #dcecff;
  border-color: rgba(149, 206, 255, 0.17);
  background: rgba(15, 37, 63, 0.82);
  box-shadow:
    0 9px 22px rgba(0, 5, 15, 0.36),
    inset 0 1px 0 rgba(220, 243, 255, 0.09);
}

html[data-theme="dark"] .support-page .serial-sticker-preview {
  border-color: rgba(149, 206, 255, 0.15);
  background: rgba(7, 22, 40, 0.72);
  box-shadow:
    0 15px 34px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .support-page .serial-input {
  color: #eef7ff;
  caret-color: #71d4ff;
  border-color: rgba(149, 206, 255, 0.17);
  background:
    linear-gradient(180deg, rgba(12, 31, 53, 0.94), rgba(7, 22, 40, 0.94));
  box-shadow:
    0 13px 30px rgba(0, 5, 15, 0.28),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .support-page .serial-input:focus {
  border-color: rgba(89, 164, 255, 0.70);
  box-shadow:
    0 0 0 4px rgba(74, 143, 255, 0.13),
    0 15px 34px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);
}

html[data-theme="dark"] .support-page .serial-input::placeholder {
  color: #71869f;
}

/* ===== Footer ===== */

html[data-theme="dark"] body.support-page footer,
html[data-theme="dark"] body.support-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);
}


/* The loader target is only a wrapper. Never style it as a second footer. */
html[data-theme="dark"] body.support-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;
}

/* ===== Theme transition ===== */

.support-page .search-input,
.support-page .search-empty,
.support-page .expert-support-dock,
.support-page .serial-modal-card,
.support-page .serial-input,
.support-page footer,
.support-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.35s var(--ease);
}

/*
  Interactive elements keep their original transform timing.
  The previous grouped transition omitted transform, so hover
  transforms were applied instantly instead of being animated.
*/

.support-page .quick-tag {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.28s var(--ease),
    color 0.18s ease,
    filter 0.35s var(--ease);
}

.support-page .search-card {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.28s var(--ease),
    color 0.28s var(--ease),
    filter 0.35s var(--ease);
}

.support-page .support-card {
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    background 0.28s var(--ease),
    color 0.28s var(--ease),
    filter 0.35s var(--ease);
}

.support-page .quick-access-pill {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.28s var(--ease),
    color 0.28s var(--ease),
    filter 0.35s var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
  .support-page .search-input,
  .support-page .quick-tag,
  .support-page .search-card,
  .support-page .search-empty,
  .support-page .support-card,
  .support-page .expert-support-dock,
  .support-page .quick-access-pill,
  .support-page .serial-modal-card,
  .support-page .serial-input,
  .support-page footer,
  .support-page .site-footer {
    transition: none !important;
  }
}