:root {
        color-scheme: dark;
        --app-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
        --app-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
        --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
        --app-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
        --app-bg: #0a0c0f;
        --app-surface: #13171c;
        --app-surface-strong: #1a2026;
        --app-text: #eaeef3;
        --app-hint: #97a3b1;
        --app-accent: #7fb0d8;
        /* Глаз на значке «Прогнозы»: в тёмной теме радужка тёплая (донор A2·31). */
        --gk-eye-iris: #dfb17a;
        --gk-eye-pupil: #0b0d12;
        --app-accent-2: #d3a05c;
        --app-accent-text: #08131c;
        --app-border: #262d36;
        --app-danger: #ff8e9d;
        --app-success: #56b88a;
        --app-ready-success: #4b9b72;
        --app-premium-success: #55b77a;
        --app-notification-success: #65b48c;
        --app-notification-success-bg: #2ea66e;
        --app-chart-background: #f8f4ec;
        --app-body-background:
          radial-gradient(circle at 82% 3%, rgba(127, 176, 216, 0.16), transparent 32%),
          radial-gradient(circle at 4% 39%, rgba(211, 160, 92, 0.1), transparent 28%),
          #0a0c0f;
        --app-card-background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 52%), rgba(19, 23, 28, 0.9);
        /* Фон панели нужен только там, где нет размытия (старые webview). */
        --app-nav-background: rgba(9, 10, 13, 0.92);
        --app-nav-active: rgba(127, 176, 216, 0.14);
        --app-nav-edge: rgba(255, 255, 255, 0.22);
        --app-nav-fade: #0a0c0f;
        --app-primary-background: linear-gradient(135deg, #7fb0d8, #5b7f9c);
        --app-primary-shadow: 0 0.6875rem 1.75rem rgba(127, 176, 216, 0.26);
        --app-shadow: 0 1.25rem 3.4375rem rgba(0, 0, 0, 0.25);
        --app-card-blur: blur(1.25rem) saturate(1.12);
        --app-radius-card: 1.5rem;
        --app-radius-control: 0.9375rem;
        --app-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        /* «Обычный» — базовый размер и дефолт; мелкая ступень убрана. */
        --text-scale: 1.15;
        --fs-meta: calc(0.625rem * var(--text-scale));
        --fs-small: calc(0.6875rem * var(--text-scale));
        --fs-chip: calc(0.75rem * var(--text-scale));
        --fs-body: calc(0.8125rem * var(--text-scale));
      }

      :root[data-text-size='xlarge'] {
        --text-scale: 1.32;
      }

      :root[data-theme='cosmic-light'] {
        color-scheme: light;
        --gk-eye-iris: #7fb0d8;
        --gk-eye-pupil: #241c47;
        --app-bg: #e8eff3;
        --app-surface: #f7fafb;
        --app-surface-strong: #edf3f6;
        --app-text: #263640;
        --app-hint: #667984;
        --app-accent: #4d829c;
        --app-accent-2: #527b90;
        --app-accent-text: #ffffff;
        --app-border: #c7d5dc;
        --app-danger: #b34c60;
        --app-success: #397c60;
        --app-ready-success: #397c60;
        --app-premium-success: #397c60;
        --app-notification-success: #397c60;
        --app-notification-success-bg: #397c60;
        --app-chart-background: #f7fafb;
        --app-body-background: linear-gradient(180deg, #edf3f6, #e2ebf0);
        --app-card-background: rgba(248, 251, 252, 0.88);
        --app-nav-background: rgba(244, 249, 251, 0.94);
        --app-nav-active: rgba(77, 130, 156, 0.13);
        --app-nav-edge: rgba(255, 255, 255, 0.75);
        --app-nav-fade: #eaf1f4;
        --app-primary-background: linear-gradient(135deg, #5b91aa, #426f88);
        --app-primary-shadow: 0 0.4375rem 1.1875rem rgba(61, 110, 134, 0.18);
        --app-shadow: 0 0.5rem 1.375rem rgba(54, 77, 90, 0.1);
        --app-card-blur: blur(0.5625rem);
        --app-radius-card: 0.75rem;
        --app-radius-control: 0.5rem;
      }

      * { box-sizing: border-box; }
      img, svg { max-width: 100%; }

      html {
        min-height: 100%;
        background: var(--app-bg);
        /* Вся вёрстка мини-аппа в rem: интерфейс масштабируется от ширины
           экрана как единый макет. Эталон — 390px (1rem = 16px), уже 320px не
           сжимаем, шире ~460px не растим (планшеты и десктоп). */
        font-size: clamp(13px, calc(100vw / 390 * 16), 19px);
      }

      body {
        min-height: 100vh;
        min-height: var(--tg-viewport-stable-height, 100vh);
        margin: 0;
        overflow-x: hidden;
        color: var(--app-text);
        background: var(--app-body-background);
        font-family: var(--app-font);
        -webkit-tap-highlight-color: transparent;
        transition: color 180ms ease, background 220ms ease;
      }

      button, input, textarea, select { font: inherit; }
      button { cursor: pointer; }
      button:disabled { cursor: default; }

      .field-label {
        color: var(--app-text);
        font-size: calc(0.875rem * var(--text-scale));
        font-weight: 750;
        line-height: 1.4;
      }

      .field-help {
        margin: 0;
        color: var(--app-hint);
        font-size: var(--fs-small);
        line-height: 1.5;
      }

      .form-input {
        width: 100%;
        min-height: 3rem;
        border: 1px solid var(--app-border);
        border-radius: 0.875rem;
        padding: 0.6875rem 0.8125rem;
        outline: none;
        color: var(--app-text);
        background: var(--app-surface);
        transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
      }

      .form-input::placeholder { color: color-mix(in srgb, var(--app-hint), transparent 22%); }
      .form-input:focus {
        border-color: var(--app-accent);
        box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--app-accent), transparent 78%);
      }
      .form-input:disabled { opacity: 0.55; }

      button:focus-visible, a:focus-visible {
        outline: 0.125rem solid var(--app-accent);
        outline-offset: 0.1875rem;
      }

      .page-shell {
        width: 100%;
        max-width: 47.5rem;
        min-width: 0;
        min-height: 100vh;
        min-height: var(--tg-viewport-stable-height, 100vh);
        margin: 0 auto;
        padding:
          calc(1.375rem + max(var(--app-safe-top), var(--tg-content-safe-top, 0px), 0.9375rem))
          calc(1rem + var(--app-safe-right))
          calc(7rem + var(--app-safe-bottom))
          calc(1rem + var(--app-safe-left));
      }

      .glass-card {
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius-card);
        background: var(--app-card-background);
        box-shadow: var(--app-shadow);
        backdrop-filter: var(--app-card-blur);
      }

      .hero-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.125rem;
        margin-bottom: 1.375rem;
      }

      .brand-mark {
        display: grid;
        width: 3rem;
        height: 3rem;
        flex: 0 0 auto;
        margin-top: 1.125rem;
        place-items: center;
        border: 1px solid var(--app-border);
        border-radius: 1.0625rem;
        color: var(--app-accent-2);
        background: var(--app-card-background);
        box-shadow: var(--app-shadow);
        font-size: calc(1.4375rem * var(--text-scale));
      }

      /* Верхняя надпись «GetKarma · …» скрыта только в шапках страниц: место
         сохраняется, чтобы контролы Telegram не перекрывали заголовок. */
      .hero-header .section-kicker { visibility: hidden; }

      .section-kicker {
        margin: 0;
        color: var(--app-accent);
        font-size: var(--fs-meta);
        font-weight: 780;
        letter-spacing: 0.13em;
        line-height: 1.3;
        text-transform: uppercase;
      }

      .page-title {
        margin: 0.375rem 0 0;
        font-size: 2.2rem;
        font-weight: 790;
        letter-spacing: -0.045em;
        line-height: 1.06;
      }

      .page-subtitle {
        max-width: 35rem;
        margin: 0.625rem 0 0;
        color: var(--app-hint);
        font-size: var(--fs-body);
        line-height: 1.55;
      }

      .primary-button, .secondary-button {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: var(--app-radius-control);
        padding: 0.6875rem 1rem;
        font-size: calc(0.8125rem * var(--text-scale));
        font-weight: 730;
        transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
      }

      .primary-button {
        border: 0;
        color: var(--app-accent-text);
        background: var(--app-primary-background);
        box-shadow: var(--app-primary-shadow);
      }

      .secondary-button {
        border: 1px solid var(--app-border);
        color: var(--app-text);
        background: var(--app-surface);
      }

      .primary-button:active:not(:disabled),
      .secondary-button:active:not(:disabled) {
        transform: scale(0.975);
        filter: brightness(0.94);
      }

      .primary-button:disabled, .secondary-button:disabled { opacity: 0.48; }

      .state-card {
        max-width: 38.75rem;
        margin: 2.125rem auto 0;
        padding: 1.9375rem 1.4375rem;
        text-align: center;
      }

      .state-card h1, .state-card h2 {
        margin: 0.625rem 0 0;
        font-size: calc(1.3125rem * var(--text-scale));
        letter-spacing: -0.025em;
      }

      .state-card p {
        max-width: 30rem;
        margin: 0.625rem auto 0;
        color: var(--app-hint);
        font-size: var(--fs-body);
        line-height: 1.58;
      }

      .state-emoji { font-size: calc(2.4375rem * var(--text-scale)); }
      .state-card .primary-button { margin-top: 1.375rem; }

      .secure-note {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        color: var(--app-hint);
        font-size: var(--fs-small);
        line-height: 1.4;
      }

      :root[data-theme='cosmic-light'] .page-shell {
        max-width: 43.75rem;
      }

      :root[data-theme='cosmic-light'] .page-subtitle {
        line-height: 1.45;
      }

      @media (min-width: 640px) {
        .page-shell {
          padding-right: calc(1.5rem + var(--app-safe-right));
          padding-left: calc(1.5rem + var(--app-safe-left));
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
        }
      }

      * { scrollbar-width: none; }
      *::-webkit-scrollbar { display: none; }