:root {
  --page-image: url(day.png);
  --page-color: #fafafa;
  --footer-color: #19334d;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --page-image: url(night.png);
  --page-color: #071b36;
  --footer-color: #fff;
  color-scheme: dark;
}
html, body { background: var(--page-color); }
.home { background: var(--page-color) var(--page-image) center / cover no-repeat; }
.art { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; background: none; }
.home-brand { background: none; }
.home-brand img { width: min(94%, 510px); }
[data-theme="dark"] .home-brand img { filter: drop-shadow(0 0 2px #ffffffa0); }
.service-grid {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 136px), 440px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1.8vw, 13px);
}
.service-grid .hot, .service-grid .donate { position: relative; inset: auto; width: 100%; height: auto; min-width: 0; }
.service-grid .hot { min-height: clamp(67px, 11dvh, 100px); padding: 6px 2px; border-radius: 16px; gap: 5px; }
.service-grid .service-icon { width: clamp(28px, 8vw, 42px); height: clamp(28px, 8vw, 42px); border-radius: 10px; }
.service-grid .service-name { font-size: clamp(10px, 3.1vw, 16px); }
.service-grid .donate { grid-column: 1 / -1; min-height: 48px; font-size: clamp(16px, 4.5vw, 23px); }
:root[data-theme="light"] .service-grid .hot {
  background: linear-gradient(145deg, #fff, #e9f0fa);
  color: #15334d;
  border-color: #c0d1e2;
  box-shadow: 0 4px 14px #24486622;
}
:root[data-theme="light"] .service-icon { color: #164d76; background: #dceaf7; border-color: #c4d9ee; box-shadow: none; }
.view-controls { position: absolute; right: 12px; top: 18.5%; display: grid; gap: 8px; z-index: 4; }
.art .view-controls .home-button, .view-controls [data-theme-choice] {
  position: relative;
  inset: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid #ccd9e8;
  background: #f4f7fb;
  color: #172b46;
  box-shadow: 0 3px 10px #00152a30;
  font: 27px/1 system-ui, sans-serif;
}
.view-controls [aria-pressed="true"] { background: #0a6080; color: #fff; border-color: #0a6080; }
.copyright { color: var(--footer-color); text-shadow: none; }
.about-page {
  position: absolute;
  inset: 19% 68px 36px 14px;
  max-width: 660px;
  margin-inline: auto;
  overflow: auto;
  padding: clamp(14px, 4vw, 28px);
  border: 1px solid #c0d1e2;
  border-radius: 18px;
  background: #f7faff;
  color: #15334d;
  font-size: 15px;
  line-height: 1.85;
}
[data-theme="dark"] .about-page { background: #122b49; color: #fff; border-color: #ffffff40; }
.about-page h1 { margin: 0 0 12px; font-size: 25px; }
.about-page h2 { margin: 18px 0 6px; font-size: 18px; }
.about-page h3 { margin: 10px 0 4px; font-size: 16px; }
.about-page p { margin: 0 0 8px; }
.about-page ul { margin: 6px 0; padding-inline-start: 22px; }
.service-grid .accounts-link,
.service-grid .accounts-link:hover {
  background: linear-gradient(135deg, #00837e, #00605d);
  border-color: #67d5bf80;
  box-shadow: 0 8px 22px #003a3760;
}
.accounts-page h1 { text-align: center; font-size: clamp(18px, 5vw, 25px); }
.bank-account {
  padding: 12px;
  margin-block: 10px;
  border: 1px solid #7894ac66;
  border-radius: 12px;
}
.bank-account h2 { margin-top: 0; }
.bank-account code {
  display: block;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: clamp(12px, 3.4vw, 16px);
  user-select: text;
}
.copy-iban {
  margin-top: 10px;
  min-height: 44px;
  padding-inline: 16px;
  border: 0;
  border-radius: 10px;
  background: #006b64;
  color: white;
  font-weight: 700;
}
.home-brand .dark-brand { display: none; }
[data-theme="dark"] .home-brand img:not(.dark-brand) { display: none; }
[data-theme="dark"] .home-brand .dark-brand {
  display: block;
  filter: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 48%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 78% at 50% 48%, #000 62%, transparent 100%);
}
.bank-account code {
  font-family: system-ui, sans-serif;
  font-size: clamp(15px, 4vw, 22px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  background: #e7edf2;
  color: #142b46;
  padding: 6px 8px;
  border-radius: 5px;
}
[data-theme="dark"] .bank-account code { background: #223d5c; color: #fff; }
.bank-logo { display: block; width: 108px; height: 48px; object-fit: contain; background: white; border-radius: 8px; padding: 4px 6px; }

/* Fit the usable viewport, including Safari chrome and device cutouts. */
.app {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}
.app .home {
  min-height: max(560px, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  min-height: max(560px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
}
.app .art { position: absolute; inset: 0; }
.service-grid { width: min(calc(100% - 128px), 440px); }
@media (max-width: 390px) {
  .service-grid { width: calc(100% - 112px); }
  .view-controls { right: 6px; }
  .contact-actions { left: 6px; }
  .art .contact-actions a { min-width: 44px; width: 44px; height: 44px; padding: 8px; }
  .service-grid .donate { font-size: clamp(13px, 4.1vw, 16px); padding-inline: 6px; }
}