* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  background: #080716;
  background-image: radial-gradient(circle at 15% 20%, #34134f 0, #080716 43%, #080716 100%);
}
button, input { font-family: Arial, Helvetica, sans-serif; }
.is-hidden { display: none !important; }
.tv-welcome, .tv-access { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.tv-welcome-card, .tv-access-card {
  position: absolute; left: 0; right: 0; top: 50%; width: 78%; max-width: 980px;
  margin-left: auto; margin-right: auto; padding: 34px 44px; transform: translateY(-50%);
  border: 2px solid rgba(255,255,255,.18); border-radius: 28px;
  background: #15102e;
  box-shadow: 0 25px 70px rgba(0,0,0,.58), 0 0 60px rgba(151,75,255,.18);
}
.tv-welcome-card { text-align: center; }
.tv-kicker { color: #4be7ff; font-size: 17px; line-height: 1.2; font-weight: bold; letter-spacing: 3px; }
.tv-welcome h1 { margin: 14px 0 24px; font-size: 50px; line-height: 1.04; }
.tv-welcome p { width: 82%; margin: 0 auto 25px; color: #d4ccdf; font-size: 21px; line-height: 1.38; }
.tv-welcome button {
  min-height: 66px; padding: 0 34px; border: 0; border-radius: 18px;
  color: #1b0c22; font-size: 21px; font-weight: bold;
  background: #ffb36b; background: linear-gradient(110deg, #ffd66c, #ff91c8 58%, #ff48d1);
}
.tv-fullscreen-help { min-height: 24px; margin-top: 14px; color: #ffd66c; font-size: 15px; }
.tv-access-card { text-align: left; }
.tv-pair-box { text-align: center; }
.tv-pair-qr { display: block; width: 240px; height: 240px; margin: 0 auto 8px; padding: 8px; background: #fff; border-radius: 16px; }
.tv-pair-message { min-height: 24px; color: #72f4bd; font-size: 18px; font-weight: bold; }
.tv-pair-refresh, .tv-manual-toggle { display: block; margin: 12px auto; padding: 11px 22px; border: 1px solid #6fe3ff; border-radius: 14px; background: #241942; color: #fff; font-size: 18px; font-weight: bold; }
.tv-manual-toggle { margin-top: 17px; }
.tv-access h2 { margin: 12px 0 8px; font-size: 52px; line-height: 1.04; }
.tv-intro { margin: 0 0 22px; color: #d4ccdf; font-size: 21px; line-height: 1.4; }
.tv-access label { display: block; margin-bottom: 19px; font-size: 18px; font-weight: bold; }
.tv-field-row { width: 100%; white-space: nowrap; }
.tv-field-row input {
  display: inline-block; vertical-align: top; width: 68%; height: 66px; padding: 0 20px;
  border: 2px solid #756b91; border-radius: 17px; outline: none;
  color: #fff; background: #201a3e; font-size: 22px; font-weight: bold;
  direction: ltr; text-align: left; letter-spacing: 1px;
}
.tv-field-row button {
  display: inline-block; vertical-align: top; width: 29%; height: 66px; margin-left: 2%; padding: 0 12px;
  border: 0; border-radius: 17px; color: #1b0c22; font-size: 19px; font-weight: bold;
  background: #ffb36b; background: linear-gradient(110deg, #ffd66c, #ff91c8 58%, #ff48d1);
}
.tv-field-row input:focus, .tv-field-row button:focus, .tv-welcome button:focus {
  outline: 6px solid #4be7ff; outline-offset: 5px;
}
.tv-field-row button:disabled { opacity: .65; }
.tv-message { min-height: 25px; margin-top: 12px; color: #ff9fcf; font-size: 17px; font-weight: bold; }
.tv-message.success { color: #72f4bd; }
.tv-note { margin: 9px 0 0; color: #aea6c0; font-size: 16px; line-height: 1.35; }
.tv-pair-refresh:focus, .tv-manual-toggle:focus { outline: 6px solid #4be7ff; outline-offset: 4px; }

@media screen and (max-height: 620px) {
  .tv-welcome-card, .tv-access-card { padding: 23px 34px; border-radius: 23px; }
  .tv-welcome h1 { margin: 9px 0 18px; font-size: 41px; }
  .tv-welcome p { margin-bottom: 17px; font-size: 18px; }
  .tv-welcome button { min-height: 56px; font-size: 18px; }
  .tv-access h2 { margin: 8px 0 5px; font-size: 42px; }
  .tv-intro { margin-bottom: 13px; font-size: 18px; }
  .tv-access label { margin-bottom: 16px; }
  .tv-field-row input, .tv-field-row button { height: 57px; }
  .tv-note { font-size: 14px; }
  .tv-pair-qr { width: 180px; height: 180px; }
}

@media screen and (min-width: 1500px) and (min-height: 800px) {
  .tv-welcome-card, .tv-access-card { max-width: 1100px; padding: 48px 58px; }
  .tv-welcome h1 { font-size: 68px; }
  .tv-welcome p, .tv-intro { font-size: 25px; }
  .tv-access h2 { font-size: 68px; }
  .tv-field-row input, .tv-field-row button { height: 78px; font-size: 24px; }
}