/* =========================================================
   Power Core Runtime Calculator — dark Aero overrides
   Load AFTER the page's inline stylesheet.
   ========================================================= */

html[data-theme="dark"] {
  --bg0: #071321;
  --bg1: #040a12;
  --ink: #eef7ff;
  --muted: #a9bdd4;
  --muted2: #8198b2;

  --glass: rgba(10, 28, 49, 0.78);
  --glass-strong: rgba(14, 34, 57, 0.90);
  --glass-border: rgba(149, 206, 255, 0.17);

  --shadow:
    0 28px 68px rgba(0, 4, 14, 0.56),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);

  --shadow-soft:
    0 18px 44px rgba(0, 5, 15, 0.40),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

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

html[data-theme="dark"] body.runtime-calc-page {
  color: var(--ink);
  background:
    radial-gradient(900px 560px at 9% 7%, rgba(48, 111, 222, 0.22), transparent 61%),
    radial-gradient(900px 620px at 91% 15%, rgba(10, 182, 215, 0.16), transparent 61%),
    radial-gradient(760px 540px at 50% 80%, rgba(94, 78, 191, 0.10), transparent 64%),
    linear-gradient(180deg, #091827 0%, #071321 46%, #040a12 100%);
  background-attachment: fixed;
}

html[data-theme="dark"] body.runtime-calc-page::before {
  opacity: 0.035;
  mix-blend-mode: screen;
}

/* ===== Typography ===== */

html[data-theme="dark"] .runtime-calc-page h1,
html[data-theme="dark"] .runtime-calc-page h2,
html[data-theme="dark"] .runtime-calc-page h3,
html[data-theme="dark"] .runtime-calc-page h4 {
  color: #eef7ff;
}

html[data-theme="dark"] .runtime-calc-page p,
html[data-theme="dark"] .runtime-calc-page .sec-head p,
html[data-theme="dark"] .runtime-calc-page .card p {
  color: #a9bdd4;
}

/* ===== Shared glass surfaces ===== */

html[data-theme="dark"] .runtime-calc-page .glass,
html[data-theme="dark"] .runtime-calc-page .card {
  border-color: rgba(149, 206, 255, 0.17);
  background:
    radial-gradient(circle at 12% 0%, rgba(187, 226, 255, 0.075), transparent 31%),
    radial-gradient(circle at 92% 4%, rgba(37, 203, 232, 0.055), transparent 31%),
    linear-gradient(
      155deg,
      rgba(23, 47, 76, 0.91),
      rgba(8, 24, 43, 0.87) 52%,
      rgba(5, 17, 32, 0.90)
    );
  box-shadow:
    0 28px 68px rgba(0, 4, 14, 0.56),
    0 10px 30px rgba(19, 137, 195, 0.07),
    inset 0 1px 0 rgba(220, 243, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .runtime-calc-page .glass::before {
  background:
    radial-gradient(640px 240px at 15% 0%, rgba(58, 129, 241, 0.13), transparent 60%),
    radial-gradient(520px 240px at 88% 10%, rgba(16, 190, 220, 0.11), transparent 60%),
    radial-gradient(560px 260px at 48% 110%, rgba(34, 197, 94, 0.06), transparent 60%);
}

/* ===== Measurement guide ===== */

html[data-theme="dark"] .runtime-calc-page .guide-card {
  border-color: rgba(149, 206, 255, 0.18);
  background:
    radial-gradient(circle at 10% 0%, rgba(184, 224, 255, 0.07), transparent 31%),
    linear-gradient(155deg, rgba(22, 45, 73, 0.92), rgba(7, 23, 42, 0.89));
  box-shadow:
    0 28px 68px rgba(0, 4, 14, 0.57),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);
}

html[data-theme="dark"] .runtime-calc-page .guide-image {
  border-color: rgba(188, 220, 245, 0.18);
  background: #f6f8fb;
  box-shadow:
    0 22px 52px rgba(0, 3, 11, 0.56),
    0 0 0 1px rgba(215, 238, 255, 0.06);
}

html[data-theme="dark"] .runtime-calc-page .guide-warning {
  color: #f4c5cb;
  border-color: rgba(255, 91, 112, 0.38);
  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 18px 44px rgba(14, 0, 5, 0.38),
    inset 0 1px 0 rgba(255, 221, 226, 0.09);
}

html[data-theme="dark"] .runtime-calc-page .guide-warning strong {
  color: #ffd9de;
}

html[data-theme="dark"] .runtime-calc-page .guide-steps {
  border-color: rgba(149, 206, 255, 0.15);
  background:
    radial-gradient(circle at 12% 0%, rgba(184, 224, 255, 0.06), transparent 32%),
    linear-gradient(155deg, rgba(21, 43, 70, 0.88), rgba(7, 23, 42, 0.85));
  box-shadow:
    0 18px 44px rgba(0, 5, 15, 0.39),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .runtime-calc-page .guide-steps h4,
html[data-theme="dark"] .runtime-calc-page .guide-steps-list li strong {
  color: #eef7ff;
}

html[data-theme="dark"] .runtime-calc-page .guide-steps-list {
  color: #a9bdd4;
}

/* ===== Calculator cards ===== */

html[data-theme="dark"] .runtime-calc-page .calc-layout .card {
  color: #eaf5ff;
}

html[data-theme="dark"] .runtime-calc-page .field label {
  color: #eaf5ff;
}

html[data-theme="dark"] .runtime-calc-page .field small {
  color: #8299b3;
}

/* ===== Toggle groups ===== */

html[data-theme="dark"] .runtime-calc-page .toggle-group {
  border-color: rgba(149, 206, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(20, 42, 69, 0.92), rgba(7, 23, 42, 0.90));
  box-shadow:
    inset 0 1px 0 rgba(220, 243, 255, 0.07),
    0 12px 28px rgba(0, 5, 15, 0.25);
}

html[data-theme="dark"] .runtime-calc-page .toggle-option {
  color: #a9bdd4;
  background: transparent;
}

html[data-theme="dark"] .runtime-calc-page .toggle-option:hover {
  color: #ffffff;
  background: rgba(60, 126, 217, 0.16);
}

html[data-theme="dark"] .runtime-calc-page .toggle-option.active {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(6, 182, 212, 0.96));
  box-shadow:
    0 12px 28px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ===== Inputs ===== */

html[data-theme="dark"] .runtime-calc-page .input {
  color: #eef7ff;
  caret-color: #72d3ff;
  border-color: rgba(151, 207, 255, 0.17);
  background:
    linear-gradient(180deg, rgba(16, 38, 64, 0.96), rgba(7, 23, 42, 0.95));
  box-shadow:
    0 10px 24px rgba(0, 5, 15, 0.24),
    inset 0 1px 0 rgba(220, 243, 255, 0.07);
}

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

html[data-theme="dark"] .runtime-calc-page .input:focus {
  border-color: rgba(86, 164, 255, 0.70);
  background:
    linear-gradient(180deg, rgba(22, 48, 80, 0.98), rgba(9, 28, 49, 0.97));
  box-shadow:
    0 0 0 4px rgba(70, 143, 255, 0.13),
    0 16px 34px rgba(0, 5, 15, 0.32),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);
}

html[data-theme="dark"] .runtime-calc-page .input[readonly] {
  color: #c5d7e8;
  border-color: rgba(149, 206, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(15, 34, 58, 0.80), rgba(7, 21, 38, 0.82));
  cursor: not-allowed;
}

html[data-theme="dark"] .runtime-calc-page .unit {
  color: #8da4bd;
}

html[data-theme="dark"] .runtime-calc-page input:-webkit-autofill,
html[data-theme="dark"] .runtime-calc-page input:-webkit-autofill:hover,
html[data-theme="dark"] .runtime-calc-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: #eef7ff;
  caret-color: #eef7ff;
  box-shadow: 0 0 0 1000px #0a1d32 inset;
  transition: background-color 9999s ease-out 0s;
}

/* ===== Presets and ghost buttons ===== */

html[data-theme="dark"] .runtime-calc-page .preset,
html[data-theme="dark"] .runtime-calc-page .btn-ghost {
  color: #b8cce1;
  border-color: rgba(149, 206, 255, 0.16);
  background:
    radial-gradient(circle at 16% 0%, rgba(184, 225, 255, 0.06), transparent 36%),
    linear-gradient(180deg, rgba(29, 54, 85, 0.88), rgba(10, 28, 49, 0.84));
  box-shadow:
    0 10px 24px rgba(0, 5, 15, 0.29),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .runtime-calc-page .preset:hover,
html[data-theme="dark"] .runtime-calc-page .btn-ghost:hover {
  color: #ffffff;
  border-color: rgba(94, 176, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(40, 71, 109, 0.94), rgba(14, 36, 61, 0.90));
}

/* ===== Results ===== */

html[data-theme="dark"] .runtime-calc-page .result-hero {
  color: #eef7ff;
  border-color: rgba(83, 172, 255, 0.24);
  background:
    radial-gradient(circle at 10% 0%, rgba(78, 151, 255, 0.13), transparent 35%),
    radial-gradient(circle at 92% 0%, rgba(23, 202, 228, 0.11), transparent 36%),
    linear-gradient(135deg, rgba(29, 62, 104, 0.74), rgba(10, 46, 65, 0.66));
  box-shadow:
    0 18px 44px rgba(0, 5, 15, 0.36),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);
}

html[data-theme="dark"] .runtime-calc-page .result-hero .eyebrow {
  color: #8fb4d7;
}

html[data-theme="dark"] .runtime-calc-page .result-hero .big {
  color: #ffffff;
}

html[data-theme="dark"] .runtime-calc-page .result-hero .big small,
html[data-theme="dark"] .runtime-calc-page .result-sub {
  color: #a9bdd4;
}

html[data-theme="dark"] .runtime-calc-page .stat {
  color: #eef7ff;
  border-color: rgba(149, 206, 255, 0.14);
  background:
    radial-gradient(circle at 14% 0%, rgba(184, 225, 255, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(24, 48, 78, 0.86), rgba(8, 24, 43, 0.83));
  box-shadow:
    0 12px 28px rgba(0, 5, 15, 0.31),
    inset 0 1px 0 rgba(220, 243, 255, 0.06);
}

html[data-theme="dark"] .runtime-calc-page .stat .k {
  color: #8299b3;
}

html[data-theme="dark"] .runtime-calc-page .stat .v {
  color: #eef7ff;
}

html[data-theme="dark"] .runtime-calc-page .meter-label {
  color: #9fb4cc;
}

html[data-theme="dark"] .runtime-calc-page .meter-track {
  background: rgba(145, 196, 237, 0.11);
  box-shadow:
    inset 0 2px 7px rgba(0, 3, 10, 0.35),
    inset 0 1px 0 rgba(220, 243, 255, 0.03);
}

html[data-theme="dark"] .runtime-calc-page .note {
  color: #8299b3;
}

html[data-theme="dark"] .runtime-calc-page .warning {
  color: #ffd797;
  border-color: rgba(245, 158, 11, 0.30);
  background:
    linear-gradient(145deg, rgba(100, 61, 8, 0.48), rgba(53, 34, 7, 0.62));
}

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

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

html[data-theme="dark"] .runtime-calc-page .lightbox-dialog {
  border-color: rgba(149, 206, 255, 0.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(102, 172, 255, 0.10), transparent 31%),
    linear-gradient(155deg, rgba(23, 47, 76, 0.98), rgba(7, 21, 39, 0.98));
  box-shadow:
    0 38px 100px rgba(0, 3, 10, 0.75),
    inset 0 1px 0 rgba(220, 243, 255, 0.10);
}

html[data-theme="dark"] .runtime-calc-page .lightbox-image {
  background: #f6f8fb;
}

html[data-theme="dark"] .runtime-calc-page .lightbox-close {
  color: #eaf5ff;
  border: 1px solid rgba(149, 206, 255, 0.17);
  background: rgba(15, 37, 63, 0.92);
  box-shadow:
    0 10px 24px rgba(0, 5, 15, 0.42),
    inset 0 1px 0 rgba(220, 243, 255, 0.08);
}

html[data-theme="dark"] .runtime-calc-page .lightbox-close:hover {
  background: rgba(24, 55, 89, 0.96);
}

/* ===== Shared footer ===== */

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

/* #site-footer is a loader wrapper, not a visual footer. */
html[data-theme="dark"] body.runtime-calc-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 transitions without breaking hover transforms ===== */

.runtime-calc-page .glass,
.runtime-calc-page .card,
.runtime-calc-page .guide-warning,
.runtime-calc-page .guide-steps,
.runtime-calc-page .toggle-group,
.runtime-calc-page .input,
.runtime-calc-page .preset,
.runtime-calc-page .btn-ghost,
.runtime-calc-page .result-hero,
.runtime-calc-page .stat,
.runtime-calc-page .lightbox-dialog,
.runtime-calc-page footer,
.runtime-calc-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.runtime-calc-page {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  .runtime-calc-page .glass,
  .runtime-calc-page .card,
  .runtime-calc-page .guide-warning,
  .runtime-calc-page .guide-steps,
  .runtime-calc-page .toggle-group,
  .runtime-calc-page .input,
  .runtime-calc-page .preset,
  .runtime-calc-page .btn-ghost,
  .runtime-calc-page .result-hero,
  .runtime-calc-page .stat,
  .runtime-calc-page .lightbox-dialog,
  .runtime-calc-page footer,
  .runtime-calc-page .site-footer {
    transition: none !important;
  }
}