/* =========================================================
   Power Core downloads/manuals page — dark aero theme
   Load this file AFTER the inline styles in download.html.
   ========================================================= */

html[data-theme="dark"] {
  --bg0: #071321;
  --bg1: #040a12;

  --ink: #eef7ff;
  --muted: #b7c7da;
  --muted2: #8da1ba;

  --primary: #6ea1ff;
  --primary2: #22d3ee;
  --accent: #5ee59a;
  --warn: #f8c45d;

  --glass: rgba(12, 28, 48, 0.68);
  --glass-strong: rgba(19, 40, 65, 0.82);
  --glass-border: rgba(151, 207, 255, 0.17);

  --shadow: 0 24px 62px rgba(0, 5, 15, 0.52);
  --shadow-soft: 0 16px 38px rgba(0, 5, 15, 0.38);
}

html[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(980px 560px at 10% 4%, rgba(41, 103, 205, 0.24), transparent 60%),
    radial-gradient(820px 520px at 94% 15%, rgba(20, 190, 219, 0.16), transparent 60%),
    radial-gradient(900px 620px at 52% 96%, rgba(44, 155, 111, 0.08), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
}

html[data-theme="dark"] body::before {
  opacity: 0.025;
  mix-blend-mode: screen;
}

/* Main glass surfaces */
html[data-theme="dark"] .glass,
html[data-theme="dark"] .card {
  border-color: var(--glass-border);
  background:
    radial-gradient(circle at 10% 0%, rgba(197, 229, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(24, 47, 76, 0.76), rgba(8, 22, 39, 0.68));
  box-shadow:
    0 24px 62px rgba(0, 5, 15, 0.5),
    inset 0 1px 0 rgba(220, 244, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .glass::before {
  background:
    radial-gradient(640px 250px at 15% 0%, rgba(82, 143, 255, 0.18), transparent 60%),
    radial-gradient(520px 250px at 88% 10%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(560px 270px at 48% 110%, rgba(50, 205, 126, 0.07), transparent 62%);
  opacity: 0.76;
}

html[data-theme="dark"] .card:hover {
  border-color: rgba(109, 177, 255, 0.31);
  background:
    radial-gradient(circle at 10% 0%, rgba(211, 238, 255, 0.1), transparent 31%),
    linear-gradient(180deg, rgba(30, 57, 91, 0.82), rgba(10, 27, 47, 0.76));
  box-shadow:
    0 30px 70px rgba(0, 4, 13, 0.58),
    0 0 34px rgba(41, 133, 255, 0.07),
    inset 0 1px 0 rgba(220, 244, 255, 0.13);
}

/* Typography */
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .sec-head h3,
html[data-theme="dark"] .manuals-topbar-title,
html[data-theme="dark"] .prod-title,
html[data-theme="dark"] .specs b,
html[data-theme="dark"] .diagram-title {
  color: var(--ink);
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .sec-head p,
html[data-theme="dark"] .prod-sub,
html[data-theme="dark"] .specs,
html[data-theme="dark"] .diagram-sub,
html[data-theme="dark"] .global-lang-label,
html[data-theme="dark"] .lang-hint {
  color: var(--muted);
}

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

html[data-theme="dark"] .specs a {
  color: #dcecff;
  text-decoration-color: rgba(110, 161, 255, 0.5);
}

html[data-theme="dark"] .specs a:hover {
  color: #79c9ff;
}

/* Hero badges and neutral pills */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .global-lang-pill,
html[data-theme="dark"] .lang-pill,
html[data-theme="dark"] .mini:not(.interactive-pill) {
  border-color: rgba(155, 208, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(37, 65, 99, 0.84), rgba(14, 31, 52, 0.78));
  color: var(--muted);
  box-shadow:
    0 10px 26px rgba(0, 6, 17, 0.33),
    inset 0 1px 0 rgba(221, 244, 255, 0.1);
}

html[data-theme="dark"] .badge strong {
  color: var(--ink);
}

html[data-theme="dark"] .global-lang-pill:hover,
html[data-theme="dark"] .lang-pill:hover,
html[data-theme="dark"] .mini:not(.interactive-pill):hover {
  border-color: rgba(112, 179, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(46, 78, 117, 0.9), rgba(18, 39, 65, 0.86));
  color: var(--ink);
}

html[data-theme="dark"] .global-lang-pill.active,
html[data-theme="dark"] .lang-pill.active {
  border-color: rgba(143, 220, 255, 0.25);
  background: linear-gradient(135deg, #3879ee, #0dbbd4);
  color: #fff;
  box-shadow:
    0 12px 24px rgba(20, 126, 224, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Status chips */
html[data-theme="dark"] .chip {
  border-color: rgba(151, 207, 255, 0.16);
  background: rgba(17, 36, 59, 0.76);
  color: var(--muted);
}

html[data-theme="dark"] .chip.good {
  border-color: rgba(94, 229, 154, 0.3);
  background: rgba(21, 112, 69, 0.2);
  color: #84edb2;
}

html[data-theme="dark"] .chip.new {
  border-color: rgba(110, 161, 255, 0.32);
  background: rgba(52, 101, 201, 0.18);
  color: #aecaff;
}

html[data-theme="dark"] .chip.ext {
  border-color: rgba(248, 196, 93, 0.3);
  background: rgba(132, 87, 4, 0.18);
  color: #ffd98d;
}

/* Language helper */
html[data-theme="dark"] .lang-hint {
  opacity: 0.9;
}

@media (max-width: 640px) {
  html[data-theme="dark"] .lang-hint {
    border-color: rgba(110, 161, 255, 0.23);
    background: rgba(62, 118, 225, 0.14);
    color: #9cc1ff;
  }
}

/* Disabled and action controls */
html[data-theme="dark"] .pdf-pill-disabled {
  border-color: rgba(174, 201, 227, 0.15);
  background:
    linear-gradient(135deg, rgba(68, 82, 101, 0.92), rgba(92, 105, 122, 0.82));
  color: rgba(239, 247, 255, 0.78);
  box-shadow:
    0 10px 24px rgba(0, 5, 15, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .mini.interactive-pill {
  border-color: rgba(235, 206, 255, 0.22);
  box-shadow:
    0 10px 24px rgba(113, 65, 210, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Optional diagram preview blocks generated by the page */
html[data-theme="dark"] .diagram-preview.clean {
  border-color: rgba(151, 207, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(26, 49, 78, 0.72), rgba(10, 25, 43, 0.7));
  box-shadow:
    0 12px 30px rgba(0, 5, 15, 0.36),
    inset 0 1px 0 rgba(220, 244, 255, 0.08);
}

html[data-theme="dark"] .diagram-preview.clean:hover {
  border-color: rgba(107, 175, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(34, 62, 98, 0.82), rgba(13, 31, 53, 0.78));
  box-shadow:
    0 17px 38px rgba(0, 5, 15, 0.43),
    inset 0 1px 0 rgba(220, 244, 255, 0.1);
}

html[data-theme="dark"] .diagram-thumb {
  border-color: rgba(190, 222, 247, 0.2);
  background: rgba(231, 240, 248, 0.92);
}

html[data-theme="dark"] .diagram-arrow {
  color: #79c9ff;
}

/* Modal controls */
html[data-theme="dark"] .diagram-modal {
  background: rgba(1, 7, 15, 0.88);
}

html[data-theme="dark"] .diagram-close {
  border-color: rgba(177, 220, 255, 0.2);
  background: rgba(19, 39, 64, 0.74);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(220, 244, 255, 0.1);
}

html[data-theme="dark"] .diagram-close:hover {
  background: rgba(34, 63, 98, 0.86);
}

/* Preserve image visibility while giving product renders stronger depth */
html[data-theme="dark"] .clean-visual img,
html[data-theme="dark"] .hero-product {
  filter: drop-shadow(0 34px 66px rgba(0, 0, 0, 0.62));
}

/* Smooth fallback transition for browsers without View Transitions API */
html.theme-fallback-transition .glass,
html.theme-fallback-transition .card,
html.theme-fallback-transition .badge,
html.theme-fallback-transition .global-lang-pill,
html.theme-fallback-transition .lang-pill,
html.theme-fallback-transition .chip,
html.theme-fallback-transition .diagram-preview.clean,
html.theme-fallback-transition .pdf-pill-disabled {
  transition:
    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: 640px) {
  html[data-theme="dark"] body {
    background-attachment: scroll !important;
  }
}