: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: #090a16;
        --app-surface: #15172a;
        --app-surface-strong: #1c1f37;
        --app-text: #f8f5ff;
        --app-hint: #aaa7c1;
        --app-accent: #a78bfa;
        --app-accent-2: #d29b62;
        --app-accent-text: #ffffff;
        --app-border: #31334d;
        --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(139, 92, 246, 0.22), transparent 31%),
          radial-gradient(circle at 4% 39%, rgba(210, 155, 98, 0.13), transparent 28%),
          #090a16;
        --app-card-background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 52%), rgba(21, 23, 42, 0.88);
        --app-nav-background: rgba(12, 13, 27, 0.92);
        --app-nav-active: rgba(167, 139, 250, 0.14);
        --app-primary-background: linear-gradient(135deg, #a78bfa, #7867dc);
        --app-primary-shadow: 0 11px 28px rgba(94, 73, 180, 0.26);
        --app-shadow: 0 20px 55px rgba(0, 0, 0, 0.25);
        --app-card-blur: blur(20px) saturate(1.12);
        --app-radius-card: 24px;
        --app-radius-control: 15px;
        --app-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      :root[data-theme='cosmic-light'] {
        color-scheme: light;
        --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-primary-background: linear-gradient(135deg, #5b91aa, #426f88);
        --app-primary-shadow: 0 7px 19px rgba(61, 110, 134, 0.18);
        --app-shadow: 0 8px 22px rgba(54, 77, 90, 0.1);
        --app-card-blur: blur(9px);
        --app-radius-card: 12px;
        --app-radius-control: 8px;
      }

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

      html {
        min-height: 100%;
        background: var(--app-bg);
      }

      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: 14px;
        font-weight: 750;
        line-height: 1.4;
      }

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

      .form-input {
        width: 100%;
        min-height: 48px;
        border: 1px solid var(--app-border);
        border-radius: 14px;
        padding: 11px 13px;
        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 3px color-mix(in srgb, var(--app-accent), transparent 78%);
      }
      .form-input:disabled { opacity: 0.55; }

      button:focus-visible, a:focus-visible {
        outline: 2px solid var(--app-accent);
        outline-offset: 3px;
      }

      .page-shell {
        width: 100%;
        max-width: 760px;
        min-width: 0;
        min-height: 100vh;
        min-height: var(--tg-viewport-stable-height, 100vh);
        margin: 0 auto;
        padding:
          calc(22px + var(--app-safe-top))
          calc(16px + var(--app-safe-right))
          calc(112px + var(--app-safe-bottom))
          calc(16px + 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: 18px;
        margin-bottom: 22px;
      }

      .brand-mark {
        display: grid;
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--app-border);
        border-radius: 17px;
        color: var(--app-accent-2);
        background: var(--app-card-background);
        box-shadow: var(--app-shadow);
        font-size: 23px;
      }

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

      .page-title {
        margin: 6px 0 0;
        font-size: clamp(30px, 9vw, 42px);
        font-weight: 790;
        letter-spacing: -0.045em;
        line-height: 1.06;
      }

      .page-subtitle {
        max-width: 560px;
        margin: 10px 0 0;
        color: var(--app-hint);
        font-size: 13px;
        line-height: 1.55;
      }

      .primary-button, .secondary-button {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: var(--app-radius-control);
        padding: 11px 16px;
        font-size: 13px;
        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: 620px;
        margin: 34px auto 0;
        padding: 31px 23px;
        text-align: center;
      }

      .state-card h1, .state-card h2 {
        margin: 10px 0 0;
        font-size: 21px;
        letter-spacing: -0.025em;
      }

      .state-card p {
        max-width: 480px;
        margin: 10px auto 0;
        color: var(--app-hint);
        font-size: 13px;
        line-height: 1.58;
      }

      .state-emoji { font-size: 39px; }
      .state-card .primary-button { margin-top: 22px; }

      .secure-note {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--app-hint);
        font-size: 11px;
        line-height: 1.4;
      }

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

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

      @media (min-width: 640px) {
        .page-shell {
          padding-right: calc(24px + var(--app-safe-right));
          padding-left: calc(24px + 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; }