:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--tg-theme-bg-color, #f5f7fb); color: var(--tg-theme-text-color, #17243a); }
.shell { width: min(100%, 540px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
h1 { margin: 0 0 8px; font-size: clamp(29px, 7vw, 36px); line-height: 1.12; letter-spacing: -.035em; }
.intro { margin: 0 0 20px; line-height: 1.4; color: var(--tg-theme-hint-color, #536176); }
.fields { display: grid; gap: 10px; }
.field { display: block; padding: 14px 16px; border: 1px solid var(--tg-theme-section-separator-color, #dbe2ed); border-radius: 15px; background: var(--tg-theme-secondary-bg-color, #fff); }
.field > label:first-child { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.key-status { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-bottom: 10px; padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, currentColor 10%, transparent); font-size: 12px; line-height: 1.3; color: var(--tg-theme-hint-color, #66748b); }
.key-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.key-status.invalid { color: #b42c37; font-weight: 700; }
.key-status.expiring { color: #b42c37; font-weight: 700; }
.key-status.valid { color: #12734f; }
.field > input { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--tg-theme-section-separator-color, #dbe2ed); outline: 0; padding: 11px 0 0; color: var(--tg-theme-text-color, #17243a); background: transparent; font: inherit; font-size: 16px; }
.field:focus-within { border-color: var(--tg-theme-button-color, #2774e8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-theme-button-color, #2774e8) 16%, transparent); }
.footnote { margin: 14px 2px; color: var(--tg-theme-hint-color, #68768a); font-size: 12px; line-height: 1.4; text-align: center; }
button { width: 100%; border: 0; border-radius: 13px; padding: 15px 18px; color: var(--tg-theme-button-text-color, #fff); background: var(--tg-theme-button-color, #2774e8); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
#submit { margin-top: 16px; }
button:disabled { opacity: .55; cursor: wait; }
.notice { padding: 13px 15px; border-radius: 13px; background: var(--tg-theme-secondary-bg-color, #fff); line-height: 1.45; }
.notice.error { color: #9b1e32; background: #fff0f2; }
.success-shell { padding-top: max(76px, env(safe-area-inset-top)); }
.success-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; margin-bottom: 25px; background: #e9f9f0; color: #128459; font-size: 33px; font-weight: 700; }
.success-shell button { margin-top: 24px; }
@media (prefers-color-scheme: dark) {
  .key-status.valid { color: #62d7a6; }
  .key-status.invalid, .key-status.expiring { color: #ff8c98; }
}
[hidden] { display: none !important; }