html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1622;
  --bg-strong: #162232;
  --surface: rgba(14, 22, 33, 0.9);
  --surface-solid: #111b27;
  --surface-dark: #08111b;
  --surface-dark-soft: #121e2d;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f3ede4;
  --muted: #c7b8a9;
  --accent: #ff9a5a;
  --accent-strong: #db6c36;
  --accent-soft: rgba(255, 154, 90, 0.16);
  --success-soft: rgba(86, 149, 102, 0.18);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.75rem;
}

.theme-toggle,
.site-install-button {
  font: inherit;
  cursor: pointer;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(181, 81, 44, 0.16);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.68);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.theme-toggle::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: inset -0.28rem -0.22rem 0 currentColor;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(181, 81, 44, 0.18);
  transform: translateY(-1px);
  outline: none;
}

.theme-toggle[data-theme-state="dark"] {
  color: var(--text);
  background: rgba(181, 81, 44, 0.12);
  border-color: rgba(181, 81, 44, 0.24);
}

.theme-toggle[data-theme-state="dark"]::before {
  box-shadow: inset 0 0 0 0 currentColor;
  background: currentColor;
  transform: scale(0.84);
}

.site-install-button[hidden] {
  display: none;
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at top left, rgba(219, 108, 54, 0.22), transparent 24rem),
    radial-gradient(circle at right 18% top 10%, rgba(67, 111, 148, 0.22), transparent 24rem),
    linear-gradient(180deg, #09111b 0%, #0d1622 42%, #121c28 100%);
}

html[data-theme="dark"] body::before {
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  opacity: 0.18;
}

html[data-theme="dark"] .site-header {
  background: rgba(10, 17, 27, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .site-header:hover {
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .brand img {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-group summary,
html[data-theme="dark"] .mobile-nav-toggle,
html[data-theme="dark"] .theme-toggle {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-group summary:hover,
html[data-theme="dark"] .nav-group[open] summary,
html[data-theme="dark"] .mobile-nav-toggle:hover,
html[data-theme="dark"] .mobile-nav-toggle:focus-visible,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 154, 90, 0.28);
}

html[data-theme="dark"] .nav-menu {
  background: rgba(8, 13, 21, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .nav-menu a:hover,
html[data-theme="dark"] .nav-menu a:focus-visible {
  background: rgba(255, 154, 90, 0.14);
}

html[data-theme="dark"] .hero-visual::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(255, 154, 90, 0.14), rgba(67, 111, 148, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .hero-card {
  background: rgba(9, 14, 22, 0.76);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] :is(
    .steps-panel,
    .content-section,
    .cta-band,
    .legal-hero,
    .legal-sidebar,
    .legal-content,
    .error-display
  ) {
  background: rgba(14, 22, 33, 0.86);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .cta-band {
  background: linear-gradient(135deg, rgba(255, 154, 90, 0.12), rgba(255, 154, 90, 0.02)),
    rgba(14, 22, 33, 0.9);
}

html[data-theme="dark"] :is(
    .step-card,
    .tool-card,
    .faq-item,
    .legal-card,
    .legal-callout,
    .legal-summary-card,
    .legal-topic-card,
    .tool-note-card,
    .live-snapshot-item,
    .simulation-field,
    .live-stat-card,
    .live-table-card,
    .live-feed-card,
    .live-trend-card,
    .live-feed-item,
    .donation-summary-card,
    .donation-ngo-card,
    .donation-receipt-card,
    .donation-gallery-card,
    .contact-form-card,
    .contact-info-card,
    .contact-note-card,
    .contact-social-card,
    .about-card,
    .about-value-card,
    .about-stat-card,
    .contact-channel,
    .error-panel,
    .error-hint,
    .recovery-card,
    .protect-form-card,
    .protect-note-card,
    .protect-step-card,
    .protect-stat-card,
    .protect-tip-card,
    .protect-faq-card
  ) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

html[data-theme="dark"] :is(.step-card:hover, .tool-card:hover, .faq-item:hover, .faq-item[open]) {
  border-color: rgba(255, 154, 90, 0.24);
}

html[data-theme="dark"] :is(.tool-card-accent, .legal-topic-card-list, .about-card) {
  background: linear-gradient(180deg, rgba(255, 154, 90, 0.12), rgba(255, 255, 255, 0.05));
}

html[data-theme="dark"] .control-panel {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 12rem),
    linear-gradient(180deg, #07111b 0%, #121e2d 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .status-grid span {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .warning-box,
html[data-theme="dark"] .pro-box {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .legal-kicker {
  color: #ffd0b1;
  background: rgba(255, 154, 90, 0.12);
  border-color: rgba(255, 154, 90, 0.18);
}

html[data-theme="dark"] :is(
    .legal-meta span,
    .contact-meta-pill,
    .about-pill,
    .protect-meta-pill,
    .donation-meta-pill,
    .tool-stat-card,
    .stats-tag,
    .button-secondary
  ) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] :is(
    .legal-quicklinks a,
    .simulation-field select,
    .contact-field input,
    .contact-field textarea,
    .contact-field select,
    .protect-field input,
    .protect-field select,
    .protect-field textarea
  ) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] :is(
    .simulation-field select,
    .contact-field input,
    .contact-field textarea,
    .contact-field select,
    .protect-field input,
    .protect-field select,
    .protect-field textarea
  )::placeholder {
  color: rgba(243, 237, 228, 0.55);
}

html[data-theme="dark"] :is(
    .simulation-field select:focus,
    .contact-field input:focus,
    .contact-field textarea:focus,
    .contact-field select:focus,
    .protect-field input:focus,
    .protect-field select:focus,
    .protect-field textarea:focus
  ) {
  outline-color: rgba(255, 154, 90, 0.24);
}

html[data-theme="dark"] .live-table th,
html[data-theme="dark"] .live-table td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .live-table tbody tr:hover {
  background: rgba(255, 154, 90, 0.08);
}

html[data-theme="dark"] .footer-column a:hover,
html[data-theme="dark"] .footer-column a:focus-visible,
html[data-theme="dark"] .social-links a:hover,
html[data-theme="dark"] .social-links a:focus-visible {
  color: #fff;
}

@media (max-width: 1023px) {
  .header-actions {
    width: 100%;
    flex-direction: column;
  }

  .header-actions .theme-toggle,
  .header-actions .site-install-button {
    width: 100%;
  }
}

html {
  --loader-shell-width: min(1160px, calc(100% - 2rem));
  --loader-backdrop: rgba(246, 238, 228, 0.96);
  --loader-base: #c9b096;
  --loader-highlight: #fff7ee;
  --loader-shadow: drop-shadow(0 18px 34px rgba(150, 110, 73, 0.18));
}

html[data-theme="dark"] {
  --loader-backdrop: rgba(9, 17, 27, 0.82);
  --loader-base: #354658;
  --loader-highlight: #7d8c9c;
  --loader-shadow: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.22));
}

html[data-page-loading="true"] {
  overflow-y: scroll;
}

html[data-page-loading="true"]::before,
html[data-page-loading="true"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 220ms ease;
}

html[data-page-loading="true"]::before {
  z-index: 2147483646;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 154, 90, 0.14), transparent 16rem),
    radial-gradient(circle at 82% 8%, rgba(67, 111, 148, 0.14), transparent 18rem),
    var(--loader-backdrop);
  backdrop-filter: blur(10px);
}

html[data-page-loading="true"]::after {
  z-index: 2147483647;
  background: linear-gradient(
    90deg,
    var(--loader-base) 0%,
    var(--loader-highlight) 45%,
    var(--loader-base) 100%
  );
  background-size: 220% 100%;
  animation: site-loader-shimmer 1.55s linear infinite;
  filter: var(--loader-shadow);
  -webkit-mask:
    linear-gradient(#000 0 0) center 1rem / var(--loader-shell-width) 5.4rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 16rem) 9.25rem / min(30rem, calc(100vw - 3rem)) 2.4rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 15rem) 12.85rem / min(32rem, calc(100vw - 3rem)) 1rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 16rem) 14.8rem / min(28rem, calc(100vw - 3rem)) 1rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 19rem) 17.55rem / 12rem 3.2rem no-repeat,
    linear-gradient(#000 0 0) calc(50% + 14rem) 8.9rem / 22rem 19rem no-repeat,
    linear-gradient(#000 0 0) center 31rem / var(--loader-shell-width) 14rem no-repeat,
    linear-gradient(#000 0 0) center 47rem / var(--loader-shell-width) 14rem no-repeat,
    linear-gradient(#000 0 0) center 63rem / var(--loader-shell-width) 12rem no-repeat;
  mask:
    linear-gradient(#000 0 0) center 1rem / var(--loader-shell-width) 5.4rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 16rem) 9.25rem / min(30rem, calc(100vw - 3rem)) 2.4rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 15rem) 12.85rem / min(32rem, calc(100vw - 3rem)) 1rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 16rem) 14.8rem / min(28rem, calc(100vw - 3rem)) 1rem no-repeat,
    linear-gradient(#000 0 0) calc(50% - 19rem) 17.55rem / 12rem 3.2rem no-repeat,
    linear-gradient(#000 0 0) calc(50% + 14rem) 8.9rem / 22rem 19rem no-repeat,
    linear-gradient(#000 0 0) center 31rem / var(--loader-shell-width) 14rem no-repeat,
    linear-gradient(#000 0 0) center 47rem / var(--loader-shell-width) 14rem no-repeat,
    linear-gradient(#000 0 0) center 63rem / var(--loader-shell-width) 12rem no-repeat;
}

html[data-page-loading="true"] .page-shell {
  pointer-events: none;
  opacity: 0;
}

html[data-page-loading="true"][data-page-loaded="true"]::before,
html[data-page-loading="true"][data-page-loaded="true"]::after {
  opacity: 0;
}

@keyframes site-loader-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -20% 0;
  }
}

@media (max-width: 767px) {
  html[data-page-loading="true"]::after {
    -webkit-mask:
      linear-gradient(#000 0 0) center 0.8rem / calc(100% - 1rem) 4.75rem no-repeat,
      linear-gradient(#000 0 0) 1rem 7rem / calc(100% - 2rem) 2rem no-repeat,
      linear-gradient(#000 0 0) 1rem 10rem / calc(100% - 2rem) 0.95rem no-repeat,
      linear-gradient(#000 0 0) 1rem 11.8rem / calc(100% - 3rem) 0.95rem no-repeat,
      linear-gradient(#000 0 0) 1rem 14rem / calc(100% - 2rem) 11.5rem no-repeat,
      linear-gradient(#000 0 0) 1rem 27rem / calc(100% - 2rem) 11.5rem no-repeat,
      linear-gradient(#000 0 0) 1rem 40rem / calc(100% - 2rem) 9rem no-repeat;
    mask:
      linear-gradient(#000 0 0) center 0.8rem / calc(100% - 1rem) 4.75rem no-repeat,
      linear-gradient(#000 0 0) 1rem 7rem / calc(100% - 2rem) 2rem no-repeat,
      linear-gradient(#000 0 0) 1rem 10rem / calc(100% - 2rem) 0.95rem no-repeat,
      linear-gradient(#000 0 0) 1rem 11.8rem / calc(100% - 3rem) 0.95rem no-repeat,
      linear-gradient(#000 0 0) 1rem 14rem / calc(100% - 2rem) 11.5rem no-repeat,
      linear-gradient(#000 0 0) 1rem 27rem / calc(100% - 2rem) 11.5rem no-repeat,
      linear-gradient(#000 0 0) 1rem 40rem / calc(100% - 2rem) 9rem no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-loading="true"]::after {
    animation: none;
  }
}