:root {
  color-scheme: light;
}

.theme-toggle {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  margin-left: auto;
  place-items: center;
  padding: 0;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(203, 213, 225, .95);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(31, 42, 76, .07);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease-out);
}

.theme-toggle:hover {
  color: var(--accent);
  background: #fff;
  border-color: #a9bff2;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

.theme-toggle span::before {
  content: "?";
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

:root[data-theme="dark"] {
  --ink: #edf3ff;
  --ink-soft: #cad5e9;
  --muted: #94a3bc;
  --line: #2a3852;
  --surface: #111a2c;
  --page: #080f1e;
  --page-deep: #0d1628;
  --accent: #79a7ff;
  --accent-dark: #6596ff;
  --accent-bright: #86adff;
  --violet: #a28cff;
  --cyan: #53cee8;
  --danger: #ff958d;
  --success: #61d7a1;
  --warning: #f7bb70;
  --shadow-card: 0 20px 58px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .2);
  --shadow-float: 0 28px 76px rgba(0, 0, 0, .42);
  color-scheme: dark;
}

:root[data-theme="dark"] .theme-toggle span::before {
  content: "?";
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 11%, rgba(66, 117, 225, .16), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(124, 91, 235, .12), transparent 24rem),
    linear-gradient(180deg, #0a1324 0, var(--page) 36rem, #070d19 100%);
}

:root[data-theme="dark"] body::before {
  border-color: rgba(94, 145, 255, .2);
}

:root[data-theme="dark"] body::after {
  border-color: rgba(162, 140, 255, .18);
}

:root[data-theme="dark"] .site-header {
  background: rgba(8, 15, 30, .82);
  border-bottom-color: rgba(48, 64, 91, .82);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}

:root[data-theme="dark"] .theme-toggle {
  color: #dce7fb;
  background: rgba(24, 36, 58, .86);
  border-color: #354663;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

:root[data-theme="dark"] .theme-toggle:hover {
  color: #ffd483;
  background: #1c2940;
  border-color: #57719c;
}

:root[data-theme="dark"] .balance-button {
  background: linear-gradient(145deg, #182641, #132039);
  border-color: #36517e;
}

:root[data-theme="dark"] .hero-highlights span {
  background: rgba(17, 27, 47, .74);
  border-color: rgba(55, 72, 101, .9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

:root[data-theme="dark"] .app-tabs {
  background: rgba(17, 27, 46, .88);
  border-color: rgba(49, 64, 91, .9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

:root[data-theme="dark"] .app-tab:hover:not(.active) {
  background: rgba(39, 53, 79, .62);
}

:root[data-theme="dark"] .app-tab.active {
  background: rgba(38, 52, 79, .98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .create-workflow-number {
  background: rgba(23, 35, 57, .9);
  border-color: #40557c;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .16);
}

:root[data-theme="dark"] .create-workflow li:not(:last-child)::after {
  background: linear-gradient(90deg, #455b82, #2b3a54);
}

:root[data-theme="dark"] .card {
  background: rgba(15, 24, 41, .93);
  border-color: rgba(45, 59, 84, .95);
  box-shadow: var(--shadow-card);
}

:root[data-theme="dark"] .sign-in-card,
:root[data-theme="dark"] .result-card {
  background: linear-gradient(145deg, rgba(17, 27, 46, .97), rgba(12, 21, 37, .96));
}

:root[data-theme="dark"] .button.secondary {
  background: rgba(25, 37, 59, .94);
  border-color: #3a4d6d;
}

:root[data-theme="dark"] .button.secondary:hover:not(:disabled) {
  background: #1d2b44;
  border-color: #5573a6;
}

:root[data-theme="dark"] .button.danger {
  background: rgba(61, 27, 31, .48);
  border-color: #854a4c;
}

:root[data-theme="dark"] .button.danger:hover:not(:disabled) {
  background: rgba(86, 35, 39, .62);
  border-color: #b85d59;
}

:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) {
  color: var(--ink);
  background: #0c1526;
  border-color: #34435f;
}

:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus {
  background: #101c30;
  border-color: var(--accent);
}

:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] input::placeholder {
  color: #73829b;
}

:root[data-theme="dark"] .credit-quote {
  background: linear-gradient(135deg, #121e34, #101a2d);
}

:root[data-theme="dark"] .credit-quote.insufficient {
  background: rgba(78, 31, 36, .38);
  border-color: #78484b;
}

:root[data-theme="dark"] .credit-quote.sufficient {
  background: rgba(19, 66, 49, .36);
  border-color: #39755c;
}

:root[data-theme="dark"] .credit-quote-grid div,
:root[data-theme="dark"] .cost-metric,
:root[data-theme="dark"] .subscription-facts > div {
  background: #111c30;
}

:root[data-theme="dark"] .status-pill {
  color: #c9d4e8;
  background: #1d293d;
}

:root[data-theme="dark"] .status-pill.status-running,
:root[data-theme="dark"] .status-pill.is-running,
:root[data-theme="dark"] .billing-mode.preview {
  color: #8db5ff;
  background: rgba(31, 70, 126, .34);
  border-color: #315b94;
}

:root[data-theme="dark"] .status-pill.status-success,
:root[data-theme="dark"] .status-pill.is-success,
:root[data-theme="dark"] .subscription-status.active,
:root[data-theme="dark"] .subscription-status.authenticated,
:root[data-theme="dark"] .purchase-status.credited {
  background: rgba(19, 78, 55, .42);
  border-color: #337559;
}

:root[data-theme="dark"] .status-pill.status-warning,
:root[data-theme="dark"] .status-pill.is-warning,
:root[data-theme="dark"] .subscription-status.creating,
:root[data-theme="dark"] .subscription-status.create_uncertain,
:root[data-theme="dark"] .subscription-status.created,
:root[data-theme="dark"] .subscription-status.pending,
:root[data-theme="dark"] .subscription-status.paused,
:root[data-theme="dark"] .subscription-status.cancelling,
:root[data-theme="dark"] .subscription-status.cancel_at_cycle_end,
:root[data-theme="dark"] .purchase-status.processing,
:root[data-theme="dark"] .purchase-status.created,
:root[data-theme="dark"] .billing-mode.test,
:root[data-theme="dark"] .billing-mode-note {
  color: #f5bf79;
  background: rgba(99, 58, 15, .42);
  border-color: #79551f;
}

:root[data-theme="dark"] .status-pill.status-error,
:root[data-theme="dark"] .status-pill.is-error,
:root[data-theme="dark"] .subscription-status.needs_review,
:root[data-theme="dark"] .subscription-status.failed,
:root[data-theme="dark"] .subscription-status.halted,
:root[data-theme="dark"] .subscription-status.cancelled,
:root[data-theme="dark"] .subscription-status.expired,
:root[data-theme="dark"] .purchase-status.failed,
:root[data-theme="dark"] .purchase-status.refunded,
:root[data-theme="dark"] .billing-account-alert {
  background: rgba(84, 31, 36, .43);
  border-color: #78484b;
}

:root[data-theme="dark"] .job-progress::before {
  background: #2a3850;
}

:root[data-theme="dark"] .job-progress-dot {
  background: #121d30;
  border-color: #3a4962;
  box-shadow: 0 0 0 5px rgba(9, 16, 29, .96);
}

:root[data-theme="dark"] .job-progress-step.is-complete .job-progress-dot {
  background: rgba(19, 78, 55, .45);
  border-color: #50b985;
}

:root[data-theme="dark"] .job-progress-step.is-active .job-progress-dot {
  background: #17294a;
  box-shadow: 0 0 0 5px #0b1424, 0 0 0 9px rgba(101, 150, 255, .15);
}

:root[data-theme="dark"] .job-progress-step.is-error .job-progress-dot {
  background: rgba(84, 31, 36, .5);
  box-shadow: 0 0 0 5px #160f17;
}

:root[data-theme="dark"] .job-progress-label strong {
  color: #aab6ca;
}

:root[data-theme="dark"] .job-meta div,
:root[data-theme="dark"] .history-item,
:root[data-theme="dark"] .history-empty,
:root[data-theme="dark"] .purchase-item {
  background: rgba(16, 27, 46, .9);
  border-color: var(--line);
}

:root[data-theme="dark"] .outputs {
  background: linear-gradient(135deg, rgba(18, 68, 50, .6), rgba(13, 44, 37, .58));
  border-color: #397b5e;
}

:root[data-theme="dark"] .cost-summary div,
:root[data-theme="dark"] .billing-balance > div {
  background: linear-gradient(145deg, #172640, #122038);
  border-color: #36517e;
}

:root[data-theme="dark"] .cost-metric.emphasized {
  background: rgba(19, 78, 55, .42);
  border-color: #39755c;
}

:root[data-theme="dark"] .subscription-summary-card,
:root[data-theme="dark"] .billing-product {
  background: linear-gradient(145deg, #121e33, #0f192b);
}

:root[data-theme="dark"] .billing-product.current {
  background: linear-gradient(155deg, #14294a, #12233e);
  border-color: #527cc4;
}

:root[data-theme="dark"] .billing-product.unavailable {
  background: #101827;
}

:root[data-theme="dark"] .billing-mode {
  color: #c7d1e3;
  background: #202b3e;
}

:root[data-theme="dark"] .billing-dialog {
  background: rgba(14, 23, 39, .99);
  border-color: #34435d;
  box-shadow: 0 32px 96px rgba(0, 0, 0, .58);
}

:root[data-theme="dark"] .subscription-consent {
  background: #111c2f;
}

:root[data-theme="dark"] .skeleton {
  background: #263349 !important;
  border-color: #263349 !important;
}

:root[data-theme="dark"] .skeleton-line,
:root[data-theme="dark"] .skeleton-card {
  background: #202d42;
  border-color: #2b3a52;
}

:root[data-theme="dark"] .skeleton::after {
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .1) 42%, transparent 64%);
}

@media (hover: hover) {
  :root[data-theme="dark"] .history-item:hover,
  :root[data-theme="dark"] .purchase-item:hover {
    background: #15223a;
    border-color: #4b638e;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body,
  .site-header,
  .card,
  .app-tabs,
  .theme-toggle,
  textarea,
  select,
  input {
    transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
}

@media (max-width: 560px) {
  .theme-toggle {
    width: 38px;
    height: 38px;
  }
}