:root {
  color-scheme: light dark;
  --page-bg: var(--tg-theme-bg-color, #f4f6f8);
  --card-bg: var(--tg-theme-secondary-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #17212b);
  --muted: var(--tg-theme-hint-color, #52616f);
  --button: var(--tg-theme-button-color, #1769aa);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --stable-height: var(--tg-viewport-stable-height, 100vh);
  --device-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 12px));
  --device-right: var(--tg-safe-area-inset-right, env(safe-area-inset-right, 12px));
  --device-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 12px));
  --device-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 12px));
  --content-top: var(--tg-content-safe-area-inset-top, 0px);
  --content-right: var(--tg-content-safe-area-inset-right, 0px);
  --content-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
  --content-left: var(--tg-content-safe-area-inset-left, 0px);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --page-bg: var(--tg-theme-bg-color, #17212b);
  --card-bg: var(--tg-theme-secondary-bg-color, #232e3c);
  --text: var(--tg-theme-text-color, #f5f7fa);
  --muted: var(--tg-theme-hint-color, #b6c2cc);
  --button: var(--tg-theme-button-color, #4da3e6);
  --button-text: var(--tg-theme-button-text-color, #0e1821);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; }

body { background: var(--page-bg); color: var(--text); }

.shell {
  min-height: var(--stable-height);
  display: grid;
  place-items: center;
  padding: calc(var(--device-top) + var(--content-top) + 16px)
    calc(var(--device-right) + var(--content-right) + 16px)
    calc(var(--device-bottom) + var(--content-bottom) + 16px)
    calc(var(--device-left) + var(--content-left) + 16px);
}

.card {
  width: min(100%, 38rem);
  padding: clamp(20px, 5vw, 36px);
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: 0 12px 36px rgb(0 0 0 / 12%);
  overflow-wrap: anywhere;
}

h1 { margin: 0 0 16px; font-size: clamp(1.5rem, 6vw, 2.25rem); }
p { color: var(--muted); line-height: 1.5; }
dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
dt { color: var(--muted); }
dd { margin: 0; text-align: end; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--button);
  color: var(--button-text);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.spinner { animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .45; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}