/* 黑夜模式：中性深色底 + 保留 data-color 的强调色；正文与次要文字对比度满足可读 */

body[data-theme="dark"] {
  color-scheme: dark;

  /* 页面与光晕 */
  --bg-page: #121816;
  --bg-glow-a: rgba(72, 118, 96, 0.22);
  --bg-glow-b: rgba(58, 98, 128, 0.18);
  --bg-glow-c: rgba(88, 102, 78, 0.16);
  --blob-a: rgba(100, 180, 140, 0.12);
  --blob-b: rgba(110, 165, 200, 0.1);
  --blob-c: rgba(200, 185, 110, 0.08);

  /* 正文：主字约 94% 白，次要字约 72% 白（相对 #121816 对比充足） */
  --text: #ecf4ef;
  --text-muted: #b3c9bc;

  --surface: rgba(34, 40, 36, 0.94);
  --border-soft: rgba(230, 245, 236, 0.16);

  --shadow-card: 0 4px 28px rgba(0, 0, 0, 0.5), 0 20px 56px rgba(0, 0, 0, 0.38);
  --shadow-float: 0 14px 44px rgba(0, 0, 0, 0.55);
  --shadow-ui: rgba(0, 0, 0, 0.4);
  --shadow-ui-strong: rgba(255, 255, 255, 0.1);

  --method-hover-shadow: rgba(0, 0, 0, 0.35);
  --method-selected-shadow: rgba(0, 0, 0, 0.45);

  --settings-expanded-bg: rgba(55, 68, 60, 0.85);
  --settings-expanded-border: rgba(230, 245, 236, 0.2);

  --sound-hover-bg: rgba(52, 60, 56, 0.95);
  --sound-active-bg: rgba(48, 72, 58, 0.55);
  --sound-dot-glow: rgba(180, 235, 200, 0.25);

  --orb-inner: #1a221e;
  --orb-ring-border: rgba(255, 255, 255, 0.1);
  --orb-core-shadow: 0 20px 56px rgba(0, 0, 0, 0.55);

  --countdown-border: rgba(230, 245, 236, 0.22);
  --countdown-shadow: rgba(0, 0, 0, 0.45);

  --progress-track-bg: rgba(255, 255, 255, 0.1);
  --progress-fill-glow: rgba(160, 230, 195, 0.35);

  --primary-hover-shadow: rgba(0, 0, 0, 0.5);
  --popover-extra-shadow: rgba(0, 0, 0, 0.5);

  --method-selected-border: rgba(130, 200, 165, 0.52);
  --method-selected-bg: linear-gradient(145deg, rgba(48, 58, 52, 0.98), rgba(32, 40, 36, 0.98));
  --detail-effect-bg: linear-gradient(145deg, rgba(44, 52, 48, 0.98), rgba(34, 40, 36, 0.95));
  --detail-effect-border: rgba(140, 190, 165, 0.32);

  --orb-core-bg:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.14), transparent 46%),
    radial-gradient(circle at 70% 78%, rgba(120, 200, 170, 0.18), transparent 52%),
    linear-gradient(168deg, #1c2621, #141a17);
}

@supports (background: color-mix(in srgb, red, blue)) {
  body[data-theme="dark"] {
    --method-selected-border: color-mix(in srgb, var(--accent) 58%, rgba(255, 255, 255, 0.42));
    --method-selected-bg: linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent) 24%, #252d28),
      color-mix(in srgb, var(--accent) 12%, #1a211d)
    );
    --detail-effect-bg: linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent) 20%, #282f2b),
      color-mix(in srgb, var(--accent) 8%, #1e2521)
    );
    --detail-effect-border: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.2));
    --blob-a: color-mix(in srgb, var(--glow-1) 42%, transparent);
    --blob-b: color-mix(in srgb, var(--glow-2) 38%, transparent);
    --blob-c: color-mix(in srgb, var(--accent-soft) 26%, transparent);
    --orb-core-bg:
      radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.12), transparent 46%),
      radial-gradient(
        circle at 70% 78%,
        color-mix(in srgb, var(--accent-soft) 38%, transparent),
        transparent 52%
      ),
      linear-gradient(
        168deg,
        color-mix(in srgb, var(--accent) 8%, #1a221e),
        #121816
      );
    --progress-track-bg: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.06));
  }
}

/* 样式表里写死的浅色，黑夜下改为变量或深色底 */
body[data-theme="dark"] .settings-trigger {
  background: rgba(48, 54, 50, 0.92);
  color: var(--text);
}

body[data-theme="dark"] .settings-trigger:hover {
  background: rgba(58, 64, 60, 0.98);
}

body[data-theme="dark"] .settings-modal-panel {
  background: rgba(30, 36, 32, 0.98);
  color: var(--text);
}

body[data-theme="dark"] .settings-modal-title {
  color: var(--text);
}

body[data-theme="dark"] .settings-modal-close {
  color: var(--text-muted);
}

body[data-theme="dark"] .settings-modal-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .method-item {
  background: rgba(48, 54, 50, 0.75);
  color: var(--text);
}

body[data-theme="dark"] .method-item:hover {
  background: rgba(58, 64, 60, 0.92);
}

body[data-theme="dark"] .method-item .mi-sub {
  color: var(--text-muted);
}

body[data-theme="dark"] .btn.ghost {
  background: rgba(48, 54, 50, 0.85);
  border-color: var(--border-soft);
  color: var(--text);
}

body[data-theme="dark"] .btn.ghost:hover {
  background: rgba(58, 64, 60, 0.95);
}

body[data-theme="dark"] button.orb-core {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 2px 14px rgba(255, 255, 255, 0.06),
    var(--orb-core-shadow);
}

body[data-theme="dark"] button.orb-core[data-phase="inhale"] {
  box-shadow:
    inset 0 2px 14px rgba(255, 255, 255, 0.08),
    0 0 48px var(--glow-1);
}

body[data-theme="dark"] button.orb-core[data-phase="exhale"] {
  box-shadow:
    inset 0 2px 10px rgba(255, 255, 255, 0.05),
    0 0 36px var(--glow-2);
}

body[data-theme="dark"] .countdown-layer {
  background: rgba(26, 32, 28, 0.97);
  border-color: var(--countdown-border);
  color: var(--text);
}

body[data-theme="dark"] .countdown-hint {
  color: var(--text-muted);
}

body[data-theme="dark"] .progress-box-track {
  stroke: var(--border-soft);
}

body[data-theme="dark"] .toast-encourage {
  background: rgba(34, 40, 36, 0.96);
  border: 1px solid var(--border-soft);
  color: var(--text);
  box-shadow: var(--shadow-card);
}

body[data-theme="dark"] .toast-encourage-text {
  color: var(--text-muted);
}

@media (max-width: 960px) {
  body[data-theme="dark"] .btn-method-change {
    background: rgba(48, 54, 50, 0.92);
    color: var(--accent-soft);
    border-color: var(--border-soft);
  }

  body[data-theme="dark"] .btn-method-change:hover {
    background: rgba(58, 64, 60, 0.98);
  }

  body[data-theme="dark"] .method-one-line {
    background: rgba(48, 54, 50, 0.8);
    border-color: var(--method-selected-border);
  }

  body[data-theme="dark"] .method-one-line-sub {
    color: var(--text-muted);
  }

  body[data-theme="dark"] .method-one-line:active {
    background: rgba(58, 64, 60, 0.95);
  }
}

/* iOS + 黑夜：与浅色端一致用纯色卡片；光球扁平强调色 */
@supports (-webkit-touch-callout: none) {
  body[data-theme="dark"] .panel,
  body[data-theme="dark"] .stage-card {
    background: var(--surface);
  }

  body[data-theme="dark"] button.orb-core {
    background: var(--accent-soft);
    background-image: none;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  body[data-theme="dark"] button.orb-core[data-phase="inhale"],
  body[data-theme="dark"] button.orb-core[data-phase="exhale"] {
    background: var(--accent-soft);
    background-image: none;
  }

  body[data-theme="dark"] button.orb-core[data-phase="inhale"] {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 40px var(--glow-1);
  }

  body[data-theme="dark"] button.orb-core[data-phase="exhale"] {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 32px var(--glow-2);
  }

  body[data-theme="dark"] .method-item.is-selected {
    background: color-mix(in srgb, var(--accent) 22%, #252a28);
    box-shadow: inset 0 0 0 1.5px var(--method-selected-border);
  }

  body[data-theme="dark"] .detail-effect-block {
    background: color-mix(in srgb, var(--accent) 12%, #282f2b);
    border-color: var(--detail-effect-border);
  }
}

@supports (-webkit-touch-callout: none) {
  @supports not (background: color-mix(in srgb, red, blue)) {
    body[data-theme="dark"] .method-item.is-selected {
      background: rgba(48, 58, 52, 0.98);
    }

    body[data-theme="dark"] .detail-effect-block {
      background: rgba(42, 50, 46, 0.98);
    }
  }
}