:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #f4f5f7;
  background: #11141a;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .42; }
button:focus-visible, input:focus-visible { outline: 3px solid #f4f5f7; outline-offset: 4px; }
.mobile-connect { width: min(100%, 520px); margin: 0 auto; padding: 32px 22px 24px; padding-top: max(32px, env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 27px; font-weight: 650; letter-spacing: -1px; margin-bottom: 42px; }
.brand-tv { font-weight: 400; }
.brand-symbol { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid #91a960; border-radius: 11px; color: #c5f16b; font-size: 26px; font-weight: 600; }
.brand-symbol>span { position: absolute; right: -3px; bottom: 2px; color: #c5f16b; font-size: 10px; background: #11141a; letter-spacing: 0; }
.connect-card { padding: 0 2px; }
.eyebrow { color: #9ba6b6; font-size: 10px; letter-spacing: 2px; font-weight: 600; margin: 0 0 15px; }
h1 { margin: 0; font-size: clamp(31px, 8vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -1.5px; max-width: 360px; }
.intro { color: #9ba6b6; font-size: 16px; line-height: 1.65; margin: 18px 0 23px; }
.connection-state { color: #c0cbd9; border: 1px solid #ffffff12; border-radius: 10px; background: #1a202a; padding: 13px 15px; font-size: 13px; line-height: 1.5; margin-bottom: 27px; }
.connection-state.is-ready:before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #c5f16b; vertical-align: 1px; }
.connection-state.is-unavailable { color: #d4b8a8; border-color: #ffffff16; }
.field { display: block; margin: 0 0 21px; font-size: 14px; color: #d6dfea; }
.field>span:first-child, .field>label { display: block; margin-bottom: 10px; }
.field small { margin-left: 5px; font-size: 12px; color: #8190a3; font-weight: 400; }
.field input { display: block; width: 100%; min-width: 0; height: 55px; border: 1px solid #ffffff20; border-radius: 10px; background: #191f29; color: #f4f5f7; padding: 0 15px; font-size: 16px; }
.field input::placeholder { color: #66758a; }
.field input:focus { border-color: #dce3ee; }
.url-field { position: relative; display: flex; align-items: center; }
.url-field input { padding-right: 85px; }
.show-url { position: absolute; right: 4px; top: 5px; height: 45px; min-width: 72px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #c7d2e1; font-size: 12px; }
.show-url:active { background: #2c3543; }
.hint { color: #7f8da0; font-size: 12px; line-height: 1.6; margin: -11px 0 26px; }
.form-error { margin: 0 0 18px; padding: 13px 15px; border: 1px solid #dfb5972b; border-radius: 10px; background: #32261f; color: #efc6aa; font-size: 13px; line-height: 1.6; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; border: 1px solid #f4f5f7; border-radius: 11px; background: #f4f5f7; color: #11141a; font-size: 16px; font-weight: 600; }
.primary-button:active { background: #dce3ed; }
.primary-button>span { font-size: 21px; font-weight: 400; }
.connection-hint { color: #6f7f94; font-size: 12px; line-height: 1.75; padding-top: 23px; margin: 23px 0 0; border-top: 1px solid #ffffff0d; }
.send-success { text-align: center; padding: 8px 0 18px; }
.success-mark { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid #c5f16b42; border-radius: 50%; color: #c5f16b; background: #c5f16b0b; margin: 0 auto 22px; font-size: 29px; }
.send-success h2 { font-size: 26px; font-weight: 550; letter-spacing: -.8px; margin: 0 0 15px; }
.send-success p { color: #99a7b9; font-size: 15px; line-height: 1.7; margin: 0 auto; max-width: 330px; }
footer { color: #526175; font-size: 11px; margin-top: 42px; text-align: center; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 600px) {
  .mobile-connect { padding-top: 54px; }
  .brand { margin-bottom: 38px; }
  .connect-card { padding: 33px; border: 1px solid #ffffff10; border-radius: 20px; background: #151a23; }
  .brand-symbol>span { background: #11141a; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }