:root {
  color-scheme: light dark;
  --page: #ffffff;
  --text: #17191c;
  --muted: #606772;
  --line: #dce1e6;
  --surface: #f5f7f9;
  --accent: #17664d;
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --content-top: 0px;
  --content-right: 0px;
  --content-bottom: 0px;
  --content-left: 0px;
}
@media (prefers-color-scheme: dark) {
  :root { --page: #17191c; --text: #f4f5f6; --muted: #b6bec8; --line: #3e454d; --surface: #23272d; --accent: #207b5e; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: var(--host-height, 100dvh); background: var(--page); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
.app {
  width: min(100%, var(--host-width, 100%), 680px);
  min-width: 0;
  margin: 0 auto;
  padding: calc(16px + max(env(safe-area-inset-top, 0px), var(--safe-top)) + var(--content-top))
           calc(16px + max(env(safe-area-inset-right, 0px), var(--safe-right)) + var(--content-right))
           calc(24px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)) + var(--content-bottom))
           calc(16px + max(env(safe-area-inset-left, 0px), var(--safe-left)) + var(--content-left));
}
h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: 22px; line-height: 1.25; }
h2 { font-size: 18px; line-height: 1.35; margin-bottom: 6px; }
h3 { font-size: 16px; line-height: 1.4; }
.brand { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; }
.brand > div { min-width: 0; }
.brand img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; border-radius: 50%; }
.brand p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.button { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 14px; border: 1px solid transparent; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.primary { color: #fff; background: var(--accent); }
.secondary { background: var(--surface); border-color: var(--line); }
a:focus-visible, summary:focus-visible { outline: 3px solid #2982c7; outline-offset: 3px; }
.intro { padding: 22px 0; }
.intro p, .note { color: var(--muted); }
.section { border-top: 1px solid var(--line); }
.section:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 16px 0; font-weight: 600; overflow-wrap: anywhere; }
summary::marker { color: var(--muted); }
.section-body { padding-bottom: 18px; }
.section-body > p + p { margin-top: 12px; }
.steps, .rules { margin: 0; padding-left: 22px; }
li { padding-left: 3px; overflow-wrap: anywhere; }
li + li { margin-top: 12px; }
.note { margin-top: 14px; font-size: 14px; }
.tariffs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tariff { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface); }
.tariff-heading { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.tariff-heading > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tariff-heading strong { font-size: 14px; }
.tariff p { font-size: 14px; }
.tariff .note { margin-top: 8px; }
@media (min-width: 480px) { .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }