/* ===================================================================================
   uj-auth.css — the NEW look of the sign-in / sign-up / first-steps screens (owner's 16 mockups, 2026-10-12).
   Docs: docs/BELEPES-UJ-FELULET.md. Loaded only by /console-uj/ (after uj.css), so the live /console/ is untouched
   until the Nov switch-over copies the workshop over.

   Screens: #login (#loginForm · #registerForm · #forgotForm + the two „sent” states) · #notReady (email check) ·
   #termsGate · #gamerAsk · #wizard · the TV pairing dialog (#ujaTv, built by uj-auth.js) · the VIP welcome card
   (built by app.js, restyled here).

   SELECTOR STRENGTH: every rule starts with `:root body.beta.skin2.uj` like uj.css; most also name an id, so they
   beat styles.css / skin.css / ringfeny.css without !important. Colours come from the uj.css tokens (--uj-*).
   Pictures: /console/assets/auth/*.webp — cut from the owner's mockups.
   =================================================================================== */

:root body.beta.skin2.uj {
  --uja-field: #12171d;
  --uja-field-line: #2c3540;
  --uja-card: #151a20;
  --uja-r: 10px;
  --uja-red: #f0645a;
  --uja-green: #6fe0a0;
  --uja-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23f7af21' d='M7 5h24c8 0 13 5 13 13s-5 13-13 13H17v12H7V21h24c2 0 3-1 3-3s-1-3-3-3H7z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------- 1. shared pieces */
:root body.beta.skin2.uj .uja-screen {
  min-height: 100vh; min-height: 100dvh; padding: 0; display: flex; flex-direction: column; align-items: stretch;
  background: radial-gradient(1200px 600px at 75% 30%, rgba(247, 175, 33, 0.05), transparent 60%), var(--uj-bg);
  color: var(--uj-text); font-family: var(--uj-font);
}
:root body.beta.skin2.uj .uja-screen[hidden] { display: none; }
:root body.beta.skin2.uj .uja-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(16px, 5vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
:root body.beta.skin2.uj .uja-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font: 800 28px/1 var(--uj-font); letter-spacing: 0.01em; }
:root body.beta.skin2.uj .uja-mark { width: 34px; height: 34px; fill: var(--uj-amber); flex: none; }
:root body.beta.skin2.uj .uja-top-tools { display: flex; align-items: center; gap: 18px; }
:root body.beta.skin2.uj .uja-back { display: inline-flex; align-items: center; gap: 8px; color: var(--uj-text); text-decoration: none; font-size: 15px; }
:root body.beta.skin2.uj .uja-back:hover { color: var(--uj-amber-text); }
:root body.beta.skin2.uj .uja-back i { font-size: 18px; }

/* the flag language picker, made compact (flag + caret, like the mockup's „HU ⌄”) */
:root body.beta.skin2.uj .uja-lang { position: relative; inset: auto; top: auto; right: auto; }
:root body.beta.skin2.uj .uja-lang .lang-btn {
  background: transparent; border: 1px solid var(--uja-field-line); border-radius: 8px; color: var(--uj-text);
  padding: 6px 10px; gap: 8px; min-height: 34px;
}
:root body.beta.skin2.uj .uja-lang .lang-menu { right: 0; left: auto; z-index: 50; }
@media (max-width: 760px) { :root body.beta.skin2.uj .uja-lang .lang-cur-name { display: none; } }

:root body.beta.skin2.uj .uja-h1 {
  margin: 0; font: 800 clamp(34px, 4.2vw, 56px)/1.02 var(--uj-display); color: #fff; letter-spacing: -0.005em;
  text-wrap: balance; overflow-wrap: anywhere;
}
:root body.beta.skin2.uj .uja-h1-xl { text-transform: uppercase; }
:root body.beta.skin2.uj .uja-h2 { margin: 0; font: 800 clamp(28px, 3vw, 38px)/1.08 var(--uj-display); color: #fff; text-wrap: balance; }
:root body.beta.skin2.uj .uja-amber { color: var(--uj-amber); }
:root body.beta.skin2.uj .uja-lead { margin: 0; color: #c4ccd5; font-size: 17px; line-height: 1.5; }
:root body.beta.skin2.uj .uja-note { margin: 0; color: var(--uj-muted); font-size: 14px; line-height: 1.5; }
:root body.beta.skin2.uj .uja-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
:root body.beta.skin2.uj .uja-eyebrow { font: 600 13px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--uj-muted); }
:root body.beta.skin2.uj .uja-label { margin: 6px 0 0; font-weight: 600; font-size: 15px; color: #fff; }
:root body.beta.skin2.uj .uja-label-lg { font-size: 17px; }

/* fields: label above, icon + input in one rounded box */
:root body.beta.skin2.uj .uja-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
:root body.beta.skin2.uj .uja-field > label { font-size: 15px; font-weight: 600; color: #fff; }
:root body.beta.skin2.uj .uja-input { position: relative; display: flex; align-items: center; min-width: 0; }
:root body.beta.skin2.uj .uja-input > i { position: absolute; left: 15px; font-size: 20px; color: #c9d1da; pointer-events: none; }
:root body.beta.skin2.uj .uja-screen .uja-input input,
:root body.beta.skin2.uj .uja-screen .uja-input select,
:root body.beta.skin2.uj .uja-dlg .uja-input input {
  width: 100%; min-width: 0; height: 52px; padding: 0 48px 0 48px; border-radius: var(--uja-r);
  background: var(--uja-field); border: 1px solid var(--uja-field-line); color: var(--uj-text);
  font: 500 16px var(--uj-font); box-shadow: none; appearance: none; -webkit-appearance: none;
}
:root body.beta.skin2.uj .uja-screen .uja-select select { padding-right: 44px; cursor: pointer; }
:root body.beta.skin2.uj .uja-select::after {
  content: ''; position: absolute; right: 18px; width: 9px; height: 9px; border: solid #c9d1da; border-width: 0 2px 2px 0;
  transform: translateY(-3px) rotate(45deg); pointer-events: none;
}
:root body.beta.skin2.uj .uja-input input::placeholder { color: #7d8791; }
:root body.beta.skin2.uj .uja-screen .uja-input :is(input, select):focus,
:root body.beta.skin2.uj .uja-dlg .uja-input input:focus { outline: none; border-color: var(--uj-amber); box-shadow: 0 0 0 3px rgba(247, 175, 33, 0.22); }
:root body.beta.skin2.uj .uja-eye {
  position: absolute; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent;
  color: #c9d1da; display: grid; place-items: center; cursor: pointer; font-size: 21px; padding: 0;
}
:root body.beta.skin2.uj .uja-eye:hover { color: #fff; }
:root body.beta.skin2.uj .uja-eye:focus-visible { outline: 2px solid var(--uj-amber); }
:root body.beta.skin2.uj .uja-screen .field-hint { margin: 0; font-size: 13.5px; color: var(--uj-muted); }

/* buttons */
:root body.beta.skin2.uj .uja-screen .btn.primary,
:root body.beta.skin2.uj .uja-modal .btn.primary,
:root body.beta.skin2.uj .uja-dlg .btn.primary {
  min-height: 52px; border: 0; border-radius: var(--uja-r); background: var(--uj-amber); color: #17120a;
  font: 700 17px/1.1 var(--uj-font); letter-spacing: 0; text-transform: none; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; background-image: none;
}
:root body.beta.skin2.uj .uja-screen .btn.primary:hover,
:root body.beta.skin2.uj .uja-modal .btn.primary:hover,
:root body.beta.skin2.uj .uja-dlg .btn.primary:hover { background: #ffbf3d; transform: none; }
:root body.beta.skin2.uj :is(.uja-screen, .uja-modal, .uja-dlg) .btn.primary:disabled { background: #5b6067; color: #2a2d31; cursor: default; opacity: 1; }
/* the arrow lives in CSS: app.js rewrites the submit buttons' text while it works (textContent) */
:root body.beta.skin2.uj .uja-screen .uja-cta[type="submit"]::after,
:root body.beta.skin2.uj #ujaTv .uja-cta::after { content: '\2192'; font-size: 20px; line-height: 1; }
:root body.beta.skin2.uj :is(.uja-screen, .uja-modal, .uja-dlg) .btn.ghost.uja-outline,
:root body.beta.skin2.uj .uja-screen .uja-back-btn {
  min-height: 52px; border-radius: var(--uja-r); background: transparent; border: 1.5px solid #e6e9ee; color: #fff;
  font: 700 16px/1.1 var(--uj-font); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 20px; text-decoration: none; text-transform: none; letter-spacing: 0;
}
:root body.beta.skin2.uj :is(.uja-modal, .uja-dlg) .btn.ghost.uja-outline { border-color: var(--uj-amber); color: var(--uj-amber-text); }
:root body.beta.skin2.uj :is(.uja-screen, .uja-modal, .uja-dlg) .btn.ghost.uja-outline:hover,
:root body.beta.skin2.uj .uja-screen .uja-back-btn:hover { background: rgba(255, 255, 255, 0.05); }
:root body.beta.skin2.uj .uja-textbtn { font: 500 15px var(--uj-font); background: none; border: 0; color: var(--uj-muted); align-self: center; min-height: 0; }
:root body.beta.skin2.uj .uja-textbtn:hover { color: #fff; }
:root body.beta.skin2.uj .uja-x {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent;
  color: #e6e9ee; font-size: 26px; display: grid; place-items: center; cursor: pointer; z-index: 2; padding: 0;
}
:root body.beta.skin2.uj .uja-x:hover { background: rgba(255, 255, 255, 0.07); }

/* messages */
:root body.beta.skin2.uj :is(.uja-screen, .uja-modal, .uja-dlg) .form-msg:not(:empty),
:root body.beta.skin2.uj .uja-screen .form-error:not([hidden]) {
  border-radius: var(--uja-r); padding: 11px 14px; font-size: 14.5px; line-height: 1.45;
}
:root body.beta.skin2.uj :is(.uja-screen, .uja-modal, .uja-dlg) .form-msg.err,
:root body.beta.skin2.uj .uja-screen .form-error { background: rgba(240, 100, 90, 0.09); border: 1px solid rgba(240, 100, 90, 0.55); color: #ff9a91; }
:root body.beta.skin2.uj :is(.uja-screen, .uja-modal, .uja-dlg) .form-msg.ok { background: rgba(111, 224, 160, 0.08); border: 1px solid rgba(111, 224, 160, 0.45); color: var(--uja-green); }

/* -------------------------------------------------------------------- 2. sign-in / sign-up / forgot (#login) */
:root body.beta.skin2.uj #login .uja-split {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
  width: 100%; max-width: 1480px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 44px) 40px; align-items: stretch;
}
:root body.beta.skin2.uj #login .uja-art {
  position: relative; border-radius: 14px 0 0 14px; overflow: hidden; min-height: 620px;
  background: #0b0d10 var(--uja-art, url('/console/assets/auth/auth-crown.webp')) center bottom / cover no-repeat;
  display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(28px, 4vw, 60px);
}
:root body.beta.skin2.uj #login .uja-art::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 13, 16, 0.92) 0%, rgba(11, 13, 16, 0.55) 34%, rgba(11, 13, 16, 0) 60%);
}
:root body.beta.skin2.uj #login .uja-art-title {
  position: relative; margin: 0; display: flex; flex-direction: column;
  font: 800 clamp(44px, 5.6vw, 84px)/0.98 var(--uj-display); text-transform: uppercase; color: #fff; letter-spacing: -0.01em;
}
:root body.beta.skin2.uj #login .uja-art-mid { display: none; }
:root body.beta.skin2.uj #login .uja-panel {
  border: 1px solid var(--uj-line); border-left: 0; border-radius: 0 14px 14px 0; background: var(--uja-card);
  display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 80px) clamp(20px, 5vw, 96px);
}
:root body.beta.skin2.uj #login .uja-card {
  width: 100%; max-width: 520px; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none;
  border-radius: 0; display: flex; flex-direction: column; gap: 18px; text-align: left;
}
:root body.beta.skin2.uj #login .uja-card::before { display: none; }
:root body.beta.skin2.uj #login .uja-card .uja-lead { margin-top: -6px; margin-bottom: 8px; }
:root body.beta.skin2.uj #login .uja-forgot { margin: -6px 0 0; text-align: right; }
:root body.beta.skin2.uj #login .auth-switch a,
:root body.beta.skin2.uj #login .uja-forgot a { color: var(--uj-amber); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:root body.beta.skin2.uj #login .uja-switch {
  margin: 6px 0 0; padding-top: 24px; border-top: 1px solid var(--uj-line); text-align: center; color: #c4ccd5; font-size: 16px;
}
:root body.beta.skin2.uj #login .uja-switch-link { margin-left: 8px; }
:root body.beta.skin2.uj #login .uja-switch-link::after { content: ' \2192'; text-decoration: none; display: inline-block; margin-left: 4px; }
:root body.beta.skin2.uj #login .auth-or { color: var(--uj-muted); font-size: 13px; }
:root body.beta.skin2.uj #login .auth-or::before,
:root body.beta.skin2.uj #login .auth-or::after { background: var(--uj-line-2); }
:root body.beta.skin2.uj #login .google-btn {
  min-height: 52px; border-radius: var(--uja-r); background: #fff; color: #1f1f1f; border: 0; font: 600 16px var(--uj-font);
}
:root body.beta.skin2.uj #login .auth-promo { border-radius: var(--uja-r); font-weight: 500; font-size: 14px; }
:root body.beta.skin2.uj #login .live-now { border-radius: var(--uja-r); border-color: var(--uj-line-2); background: rgba(255, 255, 255, 0.02); }
:root body.beta.skin2.uj #login .legal-check { color: #dfe4ea; font-size: 15px; align-items: center; gap: 12px; }
:root body.beta.skin2.uj #login .legal-check a { color: var(--uj-amber); font-weight: 600; }
:root body.beta.skin2.uj #login .legal-check input,
:root body.beta.skin2.uj .uja-dlg .legal-check input { width: 22px; height: 22px; flex: none; accent-color: var(--uj-amber); margin: 0; }
:root body.beta.skin2.uj #login .referee-banner { border-radius: var(--uja-r); }

/* the register card is long: smaller title rhythm */
:root body.beta.skin2.uj #registerForm { gap: 15px; }
:root body.beta.skin2.uj #registerForm .uja-h1 { font-size: clamp(36px, 4vw, 58px); }

/* the phone branch: the TV question as two radio cards + the picture (mockup 03) */
:root body.beta.skin2.uj #regMobileScreenRow { border: 0; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--uj-line); border-radius: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
:root body.beta.skin2.uj #regMobileScreenRow[hidden] { display: none; }
:root body.beta.skin2.uj #regMobileScreenRow legend { padding: 0; float: left; width: 100%; font: 700 22px/1.15 var(--uj-display); color: #fff; }
:root body.beta.skin2.uj #regMobileScreenRow legend + * { clear: both; }
:root body.beta.skin2.uj .uja-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
:root body.beta.skin2.uj .uja-radios .radio-row {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 16px; border-radius: var(--uja-r);
  border: 1px solid var(--uja-field-line); background: var(--uja-field); color: #fff; font-weight: 600; cursor: pointer; flex-direction: row;
}
:root body.beta.skin2.uj .uja-radios .radio-row:has(input:checked) { border-color: var(--uj-amber); background: rgba(247, 175, 33, 0.08); }
:root body.beta.skin2.uj .uja-radios input { width: 22px; height: 22px; margin: 0; accent-color: var(--uj-amber); flex: none; }
:root body.beta.skin2.uj .uja-gate-img { display: block; width: 100%; height: auto; border-radius: var(--uja-r); border: 1px solid var(--uj-line); }
:root body.beta.skin2.uj #regStreamSetup:has(option[value="mobile"]:checked) { border-color: var(--uj-amber); }
:root body.beta.skin2.uj #regWaitlist { border-radius: var(--uja-r); }

/* the picture follows the card that is showing */
:root body.beta.skin2.uj #login:has(#registerForm:not([hidden])) .uja-art { --uja-art: url('/console/assets/auth/auth-door.webp'); background-position: center top; justify-content: flex-end; }
:root body.beta.skin2.uj #login:has(#registerForm:not([hidden])) .uja-art::before {
  background: linear-gradient(0deg, rgba(11, 13, 16, 0.96) 0%, rgba(11, 13, 16, 0.6) 30%, rgba(11, 13, 16, 0) 55%);
}
:root body.beta.skin2.uj #login:has(#registerForm:not([hidden])) .uja-art-title { font-size: clamp(38px, 4.4vw, 64px); }
:root body.beta.skin2.uj #login:has(#registerForm:not([hidden])) .uja-art-mid { display: block; }
:root body.beta.skin2.uj #login:has(#forgotForm:not([hidden])) .uja-art { --uja-art: url('/console/assets/auth/auth-door2.webp'); background-position: center; }
:root body.beta.skin2.uj #login:has(#forgotForm:not([hidden])) .uja-art::before,
:root body.beta.skin2.uj #login:has(#forgotForm:not([hidden])) .uja-art-title { display: none; }
:root body.beta.skin2.uj #login:has(.uja-card[data-uja-sent-on]) .uja-art { --uja-art: url('/console/assets/auth/auth-palace.webp'); background-position: center; }
:root body.beta.skin2.uj #login:has(.uja-card[data-uja-sent-on]) .uja-art::before,
:root body.beta.skin2.uj #login:has(.uja-card[data-uja-sent-on]) .uja-art-title { display: none; }

/* the two „sent” states (mockups 04 / 06): only the sent block shows */
:root body.beta.skin2.uj #login .uja-card[data-uja-sent-on] > :not(.uja-sent) { display: none; }
:root body.beta.skin2.uj .uja-sent { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
:root body.beta.skin2.uj .uja-sent[hidden] { display: none; }
:root body.beta.skin2.uj .uja-sent .btn { align-self: stretch; }
:root body.beta.skin2.uj .uja-sent-ic { font-size: 54px; line-height: 1; color: var(--uj-amber); }
:root body.beta.skin2.uj .uja-ring {
  width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; align-self: center; font-size: 48px;
  border: 1.5px solid rgba(247, 175, 33, 0.7); box-shadow: 0 0 28px rgba(247, 175, 33, 0.35), inset 0 0 18px rgba(247, 175, 33, 0.12);
}
:root body.beta.skin2.uj .uja-mailbox {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 6px 6px 18px; border-radius: var(--uja-r);
  border: 1px solid var(--uja-field-line); background: var(--uja-field); color: #fff; font-size: 17px; overflow-wrap: anywhere;
}
:root body.beta.skin2.uj .uja-mailbox > b, :root body.beta.skin2.uj .uja-mailbox > [data-uja-sent-email] { flex: 1; min-width: 0; font-weight: 500; }
:root body.beta.skin2.uj .uja-mailbox-lbl { color: var(--uj-muted); font-size: 14px; white-space: nowrap; }
:root body.beta.skin2.uj .uja-copy { width: 40px; height: 40px; flex: none; border: 0; border-radius: 8px; background: transparent; color: #c9d1da; font-size: 20px; cursor: pointer; display: grid; place-items: center; padding: 0; }
:root body.beta.skin2.uj .uja-copy:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
:root body.beta.skin2.uj .uja-copy.ok { color: var(--uja-green); }

/* -------------------------------------------------------------------- 3. dialog screens (#notReady, #termsGate) */
:root body.beta.skin2.uj .uja-dlg-screen { justify-content: flex-start; }
:root body.beta.skin2.uj #termsGate { justify-content: center; align-items: center; padding: 24px 16px; }
:root body.beta.skin2.uj .uja-dlg {
  position: relative; width: 100%; max-width: 900px; margin: auto; padding: 0; border-radius: 14px; overflow: hidden;
  background: var(--uja-card); border: 1px solid var(--uj-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); backdrop-filter: none;
  display: flex; flex-direction: row; gap: 0; text-align: left;
}
:root body.beta.skin2.uj .uja-dlg::before { display: none; }
:root body.beta.skin2.uj .uja-dlg-art { flex: 0 0 44%; min-height: 560px; background: #0b0d10 center / cover no-repeat; }
:root body.beta.skin2.uj .uja-img-gate { background-image: url('/console/assets/auth/auth-gate.webp'); }
:root body.beta.skin2.uj .uja-dlg-body { position: relative; flex: 1; min-width: 0; padding: 56px 52px 40px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
:root body.beta.skin2.uj .uja-dlg-body .uja-h1 { font-size: clamp(34px, 3.6vw, 52px); }
:root body.beta.skin2.uj .uja-dlg-lang { position: absolute; top: 16px; right: 16px; }
:root body.beta.skin2.uj .uja-docs { display: flex; flex-direction: column; gap: 14px; margin: 4px 0; }
:root body.beta.skin2.uj .uja-doc { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; }
:root body.beta.skin2.uj .uja-doc span { text-decoration: underline; text-underline-offset: 4px; }
:root body.beta.skin2.uj .uja-doc i { color: var(--uj-amber); font-size: 24px; text-decoration: none; }
:root body.beta.skin2.uj .uja-doc i:last-child { font-size: 20px; }
:root body.beta.skin2.uj .uja-dlg .legal-check { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; color: #dfe4ea; font-size: 15px; line-height: 1.5; }
:root body.beta.skin2.uj .uja-dlg .btn { width: 100%; }

/* #notReady: the glowing card in the middle (mockup 04) */
:root body.beta.skin2.uj .uja-glow { background: radial-gradient(520px 420px at 50% 52%, rgba(247, 175, 33, 0.30), transparent 72%), var(--uj-bg); }
:root body.beta.skin2.uj .uja-dlg-center { max-width: 600px; flex-direction: column; padding: 56px clamp(20px, 6vw, 60px) 30px; gap: 14px; margin: 40px auto; text-align: center; }
:root body.beta.skin2.uj .uja-dlg-center .uja-stack { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
:root body.beta.skin2.uj .uja-dlg-center .uja-stack[hidden] { display: none; }
:root body.beta.skin2.uj .uja-dlg-center .uja-mailbox { text-align: left; }
:root body.beta.skin2.uj .uja-dlg-center .uja-field { text-align: left; }

/* -------------------------------------------------------------------- 4. in-console modals (#gamerAsk, #wizard, #ujaTv, VIP) */
:root body.beta.skin2.uj .uja-modal { background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(6px); z-index: 95; }
:root body.beta.skin2.uj .uja-modal .wiz-card {
  position: relative; background: var(--uja-card); border: 1px solid var(--uj-line-2); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); color: var(--uj-text); font-family: var(--uj-font);
}
:root body.beta.skin2.uj .uja-modal .wiz-card::before { display: none; }

/* „Hogyan streamelsz?” (mockup 09) */
:root body.beta.skin2.uj #gamerAsk .uja-ga-card { width: 980px; max-width: 100%; padding: 46px 32px 30px; text-align: center; }
:root body.beta.skin2.uj #gamerAsk .wiz-head { justify-content: center; margin: 0; }
:root body.beta.skin2.uj #gamerAsk .bn-title { font-size: clamp(36px, 4.4vw, 60px); }
:root body.beta.skin2.uj #gamerAsk .uja-lead { margin: 10px auto 0; max-width: 640px; }
:root body.beta.skin2.uj #gamerAsk .uja-ga-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 30px 0 14px; }
/* 2026-10-25: portrait is the recommended card; landscape (game) mode is only a small link under the two cards. */
:root body.beta.skin2.uj #gamerAsk .ga-opt { position: relative; }
:root body.beta.skin2.uj #gamerAsk .ga-opt.ga-rec { border-color: var(--uj-amber); }
:root body.beta.skin2.uj #gamerAsk .ga-badge { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px; background: var(--uj-amber); color: #111; font: 800 12px/1.4 var(--uj-display); letter-spacing: .02em; }
:root body.beta.skin2.uj #gamerAsk .ga-gamer-link { display: block; margin: 0 auto 18px; padding: 6px 10px; border: 0; background: none; color: #aeb6bf; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:root body.beta.skin2.uj #gamerAsk .ga-gamer-link b { font-weight: 600; color: #d2d8de; }
:root body.beta.skin2.uj #gamerAsk .ga-gamer-link:hover b, :root body.beta.skin2.uj #gamerAsk .ga-gamer-link:focus-visible b { color: var(--uj-amber); }
:root body.beta.skin2.uj #gamerAsk .ga-opt {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 18px 24px; border-radius: 10px;
  background: #11161b; border: 1px solid var(--uj-line-2); color: #fff; text-align: center; transform: none; font-family: var(--uj-font);
}
:root body.beta.skin2.uj #gamerAsk .ga-opt:hover,
:root body.beta.skin2.uj #gamerAsk .ga-opt:focus-visible { border-color: var(--uj-amber); background: #151b21; outline: none; }
:root body.beta.skin2.uj #gamerAsk .uja-ga-img {
  height: 150px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 8px;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent); mask-image: radial-gradient(closest-side, #000 82%, transparent);
}
:root body.beta.skin2.uj #gamerAsk .ga-opt b { font: 700 23px/1.12 var(--uj-display); }
:root body.beta.skin2.uj #gamerAsk .ga-opt .muted { color: #d2d8de; font-size: 15px; line-height: 1.45; }
:root body.beta.skin2.uj #gamerAsk .uja-ga-actions { justify-content: center; position: relative; }
:root body.beta.skin2.uj #gamerAsk .uja-ga-actions::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--uj-line-2); }
:root body.beta.skin2.uj #gamerAsk #gaLater { position: relative; min-width: 280px; background: var(--uja-card); }

/* the setup wizard (mockups 10–11) */
:root body.beta.skin2.uj #wizard .uja-wiz-card { width: 1120px; max-width: 100%; padding: 0; display: flex; overflow: hidden; }
:root body.beta.skin2.uj #wizard .uja-wiz-art {
  flex: 0 0 38%; min-height: 640px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px;
  background: #0b0d10 url('/console/assets/auth/auth-throne.webp') center top / cover no-repeat;
}
:root body.beta.skin2.uj #wizard:has([data-step="2"]:not([hidden])) .uja-wiz-art { background-image: url('/console/assets/auth/auth-hall.webp'); }
:root body.beta.skin2.uj #wizard .uja-wiz-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 13, 16, 0.95) 0%, rgba(11, 13, 16, 0.5) 32%, transparent 58%); }
:root body.beta.skin2.uj #wizard .uja-art-title { position: relative; margin: 0; display: flex; flex-direction: column; font: 800 clamp(40px, 4.2vw, 66px)/0.98 var(--uj-display); text-transform: uppercase; color: #fff; }
:root body.beta.skin2.uj #wizard .uja-art-lead { position: relative; margin: 14px 0 0; color: #e6e9ee; font-size: 18px; line-height: 1.4; }
:root body.beta.skin2.uj #wizard .uja-wiz-main { flex: 1; min-width: 0; padding: 30px 34px 28px; display: flex; flex-direction: column; gap: 14px; }
:root body.beta.skin2.uj #wizard .wiz-head { display: flex; align-items: center; gap: 12px; min-height: 30px; margin: 0; padding-right: 40px; }
:root body.beta.skin2.uj #wizard .wiz-dots { display: none; }
:root body.beta.skin2.uj #wizard .uja-x { top: 14px; right: 14px; }
:root body.beta.skin2.uj #wizard .wiz-body { min-height: 0; }
:root body.beta.skin2.uj #wizard .wiz-step { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 12px; }
:root body.beta.skin2.uj #wizard .wiz-step[hidden] { display: none; }
:root body.beta.skin2.uj #wizard .wiz-step .uja-h1 { text-transform: uppercase; font-size: clamp(34px, 3.6vw, 56px); display: flex; flex-direction: column; }
:root body.beta.skin2.uj #wizard .wiz-step[data-step="2"] .uja-h1 { display: block; }
:root body.beta.skin2.uj #wizard .uja-mode {
  display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 18px; border-radius: var(--uja-r); border: 1px solid var(--uj-line-2); background: #11161b;
}
:root body.beta.skin2.uj #wizard .uja-mode > i { font-size: 30px; color: var(--uj-amber); }
:root body.beta.skin2.uj #wizard .uja-mode > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root body.beta.skin2.uj #wizard .uja-mode b { font-size: 16px; color: #fff; }
:root body.beta.skin2.uj #wizard .uja-mode small { color: var(--uj-muted); font-size: 14px; }
:root body.beta.skin2.uj #wizard .uja-mode .btn { min-height: 42px; font-size: 15px; width: auto; border-color: #e6e9ee; color: #fff; }
:root body.beta.skin2.uj #wizard .uja-copyrow { display: flex; gap: 0; border: 1px solid var(--uj-line-2); border-radius: var(--uja-r); background: #11161b; padding: 5px; }
:root body.beta.skin2.uj #wizard .uja-copyrow input { flex: 1; min-width: 0; border: 0; background: transparent; color: #e6e9ee; padding: 0 12px; font: 15px var(--uj-font); height: 42px; }
:root body.beta.skin2.uj #wizard .uja-copyrow .btn { min-height: 42px; font-size: 15px; padding: 0 16px; }
:root body.beta.skin2.uj #wizard ol.uja-num { list-style: none; counter-reset: uja; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
:root body.beta.skin2.uj #wizard ol.uja-num > li { counter-increment: uja; display: flex; gap: 14px; align-items: flex-start; color: #dfe4ea; font-size: 15.5px; line-height: 1.45; padding: 0; background: none; border: 0; }
:root body.beta.skin2.uj #wizard ol.uja-num > li::before {
  content: counter(uja); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--uj-amber); color: #17120a;
  font: 700 14px/28px var(--uj-font); text-align: center;
}
:root body.beta.skin2.uj #wizard ol.uja-num b { color: #fff; }
:root body.beta.skin2.uj #wizard .uja-test { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
:root body.beta.skin2.uj #wizard .uja-test-box { border: 1px solid var(--uj-line-2); border-radius: var(--uja-r); background: #11161b; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
:root body.beta.skin2.uj #wizard .uja-test-box.test-row { align-items: center; justify-content: center; }
:root body.beta.skin2.uj #wizard .uja-play { width: 92px; height: 92px; border-radius: 50%; background: var(--uj-amber); color: #111; display: grid; place-items: center; font-size: 46px; }
:root body.beta.skin2.uj #wizard .uja-test-box .btn { width: 100%; }
:root body.beta.skin2.uj #wizard .uja-test-out b { color: #fff; font-size: 16px; }
:root body.beta.skin2.uj #wizard .uja-test-out:has(#wizTestMsg:not(:empty)) [data-uja-test-empty] { display: none; }
:root body.beta.skin2.uj #wizard .test-help { font-size: 14px; color: #dfe4ea; }
:root body.beta.skin2.uj #wizard .wiz-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--uj-line); display: flex; gap: 14px; justify-content: flex-start; }
:root body.beta.skin2.uj #wizard .wiz-foot .btn { flex: 1; min-width: 0; }
:root body.beta.skin2.uj #wizard .wiz-foot #wizBack[hidden] { display: none; }
:root body.beta.skin2.uj #wizard:has([data-step="2"]:not([hidden])) #wizSkip { display: none; }
:root body.beta.skin2.uj #wizard:has([data-step="2"]:not([hidden])) .wiz-foot { justify-content: flex-end; }
:root body.beta.skin2.uj #wizard:has([data-step="2"]:not([hidden])) .wiz-foot .btn { flex: 0 1 220px; }

/* TV pairing (mockup 12) — the dialog is built by uj-auth.js */
:root body.beta.skin2.uj #ujaTv .uja-tv-card { width: 1040px; max-width: 100%; padding: 0; display: flex; overflow: hidden; }
:root body.beta.skin2.uj #ujaTv .uja-dlg-art { flex: 0 0 42%; min-height: 640px; background-image: url('/console/assets/auth/auth-tv.webp'); }
:root body.beta.skin2.uj #ujaTv .uja-tv-main { flex: 1; min-width: 0; padding: 50px 38px 30px; display: flex; flex-direction: column; gap: 16px; }
:root body.beta.skin2.uj #ujaTv .uja-h1 { text-transform: uppercase; font-size: clamp(34px, 3.8vw, 58px); }
:root body.beta.skin2.uj #ujaTv ol { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
:root body.beta.skin2.uj #ujaTv li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; color: #e6e9ee; font-size: 16px; }
:root body.beta.skin2.uj #ujaTv .uja-tv-n { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--uj-amber); color: var(--uj-amber); display: grid; place-items: center; font-weight: 700; }
:root body.beta.skin2.uj #ujaTv li > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 8px; }
:root body.beta.skin2.uj #ujaTv .uja-tv-addr {
  align-self: flex-start; max-width: 100%; padding: 8px 16px; border-radius: 8px; border: 1.5px solid var(--uj-amber); color: var(--uj-amber-text);
  font: 600 22px/1.2 'IBM Plex Mono', ui-monospace, monospace; overflow-wrap: anywhere; background: rgba(247, 175, 33, 0.06);
}
:root body.beta.skin2.uj #ujaTv .uja-digits { display: grid; grid-template-columns: repeat(6, minmax(0, 56px)); gap: 10px; }
:root body.beta.skin2.uj #ujaTv .uja-digits input {
  width: 100%; height: 60px; border-radius: 8px; border: 1px solid var(--uja-field-line); background: var(--uja-field); color: #fff;
  text-align: center; font: 700 26px var(--uj-font); padding: 0;
}
:root body.beta.skin2.uj #ujaTv .uja-digits input:focus { outline: none; border-color: var(--uj-amber); box-shadow: 0 0 0 3px rgba(247, 175, 33, 0.22); }
:root body.beta.skin2.uj #ujaTv .uja-sound { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--uja-r); border: 1px solid var(--uj-line-2); background: #11161b; }
:root body.beta.skin2.uj #ujaTv .uja-sound > i { font-size: 28px; color: var(--uj-amber); }
:root body.beta.skin2.uj #ujaTv .uja-sound > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root body.beta.skin2.uj #ujaTv .uja-sound b { color: #fff; }
:root body.beta.skin2.uj #ujaTv .uja-sound small { color: var(--uj-muted); font-size: 14px; }
:root body.beta.skin2.uj #ujaTv .uja-tv-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--uj-line); display: flex; align-items: center; gap: 14px; }
:root body.beta.skin2.uj #ujaTv .uja-tv-foot .uja-cta { flex: 1; }
:root body.beta.skin2.uj #ujaTv .uja-tv-foot .uja-outline { border-color: #e6e9ee; color: #fff; }
:root body.beta.skin2.uj #ujaTv .uja-later { background: none; border: 0; color: #e6e9ee; font: 600 16px var(--uj-font); cursor: pointer; padding: 10px; }
:root body.beta.skin2.uj #ujaTv .uja-later:hover { color: var(--uj-amber-text); }

/* VIP welcome (mockup 14) — the card itself is built by app.js (maybeShowVipWelcome); uj-auth.js adds the rows */
:root body.beta.skin2.uj .vip-welcome-backdrop { background: rgba(5, 7, 10, 0.72); }
:root body.beta.skin2.uj .vip-welcome-card {
  position: relative; max-width: 520px; padding: 40px 36px 32px; border-radius: 14px; background: var(--uja-card);
  border: 1px solid var(--uj-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); font-family: var(--uj-font);
}
:root body.beta.skin2.uj .vip-welcome-card .vw-crown { margin: 0 0 6px; line-height: 1; }
:root body.beta.skin2.uj .vip-welcome-card .vw-crown .ti { font-size: 104px; color: var(--uj-amber); text-shadow: 0 0 26px rgba(247, 175, 33, 0.55); }
:root body.beta.skin2.uj .vip-welcome-card h3 { margin: 0; font: 800 clamp(40px, 6vw, 60px)/1 var(--uj-display); text-transform: uppercase; color: #fff; }
:root body.beta.skin2.uj .vip-welcome-card .uja-vip-lead { margin: 8px 0 22px; font: 600 24px/1.2 var(--uj-display); color: #dfe4ea; }
:root body.beta.skin2.uj .vip-welcome-card .uja-vip-rows { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 16px; text-align: left; }
:root body.beta.skin2.uj .vip-welcome-card .uja-vip-rows li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; }
:root body.beta.skin2.uj .vip-welcome-card .uja-vip-rows i { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--uj-amber); color: var(--uj-amber); display: grid; place-items: center; font-size: 26px; }
:root body.beta.skin2.uj .vip-welcome-card .uja-vip-rows b { display: block; color: #fff; font-size: 17px; }
:root body.beta.skin2.uj .vip-welcome-card .uja-vip-rows small { color: #c4ccd5; font-size: 15px; }
:root body.beta.skin2.uj .vip-welcome-card details { margin: 0 0 22px; text-align: left; }
:root body.beta.skin2.uj .vip-welcome-card details summary { cursor: pointer; color: var(--uj-amber-text); font-size: 14px; font-weight: 600; }
:root body.beta.skin2.uj .vip-welcome-card details p { margin: 10px 0 0; text-align: left; font-size: 14px; color: var(--uj-muted); }
:root body.beta.skin2.uj .vip-welcome-card button.primary {
  width: 100%; min-height: 54px; border: 0; border-radius: var(--uja-r); background: var(--uj-amber); color: #17120a; font: 700 19px var(--uj-font); cursor: pointer;
}

/* the preview ribbon (?elonezet=…) */
:root body.beta.skin2.uj .uja-preview-ribbon {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2000; max-width: calc(100% - 24px);
  background: var(--uj-amber); color: #17120a; font: 700 13px/1.3 var(--uj-font); padding: 7px 14px; border-radius: 8px; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); pointer-events: none;
}

/* -------------------------------------------------------------------- 5. narrow screens (mockups 15–16: 390 px) */
@media (max-width: 1080px) {
  :root body.beta.skin2.uj #login .uja-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  :root body.beta.skin2.uj .uja-back span { display: none; }
}
@media (max-width: 860px) {
  :root body.beta.skin2.uj .uja-top { padding: 16px; border-bottom: 0; }
  :root body.beta.skin2.uj .uja-brand { font-size: 24px; }
  :root body.beta.skin2.uj .uja-mark { width: 30px; height: 30px; }
  :root body.beta.skin2.uj #login .uja-split { grid-template-columns: minmax(0, 1fr); padding: 6px 16px 0; }
  :root body.beta.skin2.uj #login .uja-panel { order: 1; border: 0; border-radius: 0; background: none; padding: 8px 0 24px; }
  :root body.beta.skin2.uj #login .uja-art { order: 2; border-radius: 0; margin: 0 -16px; min-height: 0; height: 0; padding: 0; }
  :root body.beta.skin2.uj #login .uja-art-title { display: none; }
  /* sign-in on a phone: the crown under the buttons (mockup 15) */
  :root body.beta.skin2.uj #login:has(#loginForm:not([hidden])) .uja-art {
    height: auto; aspect-ratio: 1024 / 411; margin-top: -40px; background-image: url('/console/assets/auth/auth-crown-wide.webp'); background-position: center top;
  }
  :root body.beta.skin2.uj #login:has(#loginForm:not([hidden])) .uja-art::before { background: linear-gradient(180deg, var(--uj-bg) 0%, rgba(15, 19, 24, 0) 40%); }
  :root body.beta.skin2.uj #login .uja-card { max-width: 560px; margin: 0 auto; gap: 14px; }
  :root body.beta.skin2.uj #loginForm .uja-h1 { text-align: center; text-transform: uppercase; font-size: clamp(40px, 12vw, 64px); }
  :root body.beta.skin2.uj #loginForm .uja-lead { text-align: center; }
  :root body.beta.skin2.uj #registerForm .uja-h1 { font-size: clamp(40px, 11.5vw, 60px); }
  :root body.beta.skin2.uj #loginForm .uja-forgot { order: 1; text-align: center; margin: 0; }
  :root body.beta.skin2.uj #loginForm .uja-forgot a { text-decoration: none; font-size: 17px; }
  :root body.beta.skin2.uj #loginForm .uja-cta { order: 0; }
  :root body.beta.skin2.uj #loginForm > :is(#loginError, .auth-or, .google-btn, .uja-switch) { order: 2; }
  :root body.beta.skin2.uj #loginForm .uja-switch { border: 0; padding-top: 4px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  :root body.beta.skin2.uj #loginForm .uja-switch > span { display: flex; align-items: center; gap: 12px; color: var(--uj-muted); }
  :root body.beta.skin2.uj #loginForm .uja-switch > span::before,
  :root body.beta.skin2.uj #loginForm .uja-switch > span::after { content: ''; flex: 1; height: 1px; background: var(--uj-line-2); }
  :root body.beta.skin2.uj #loginForm a.uja-switch-link {
    margin: 0; min-height: 52px; border: 1.5px solid #e6e9ee; border-radius: var(--uja-r); color: #fff; text-decoration: none;
    display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700;
  }
  :root body.beta.skin2.uj .uja-dlg-split { flex-direction: column; }
  :root body.beta.skin2.uj .uja-dlg-split .uja-dlg-art { flex: none; min-height: 0; height: 200px; background-position: center 60%; }
  :root body.beta.skin2.uj .uja-dlg-body { padding: 26px 20px 24px; }
  :root body.beta.skin2.uj .uja-dlg-lang { position: static; align-self: flex-end; margin-bottom: -8px; }
  :root body.beta.skin2.uj .uja-dlg-center { margin: 12px 16px 24px; width: auto; padding: 36px 18px 20px; }
  :root body.beta.skin2.uj .uja-modal { padding: 10px; align-items: start; }
  :root body.beta.skin2.uj #gamerAsk .uja-ga-card { padding: 40px 16px 20px; }
  :root body.beta.skin2.uj #gamerAsk .uja-ga-options { grid-template-columns: minmax(0, 1fr); margin: 20px 0; }
  :root body.beta.skin2.uj #gamerAsk .ga-opt { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; text-align: left; align-items: center; column-gap: 14px; row-gap: 4px; padding: 14px; }
  :root body.beta.skin2.uj #gamerAsk .uja-ga-img { grid-row: 1 / span 2; height: 84px; margin: 0; justify-self: center; }
  :root body.beta.skin2.uj #gamerAsk .ga-opt b { font-size: 19px; }
  :root body.beta.skin2.uj #gamerAsk .ga-opt .muted { font-size: 14px; }
  :root body.beta.skin2.uj #gamerAsk .ga-badge { top: 8px; left: auto; right: 10px; }
  :root body.beta.skin2.uj #gamerAsk #gaLater { min-width: 0; width: 100%; }
  :root body.beta.skin2.uj #gamerAsk .uja-ga-actions::before { display: none; }
  :root body.beta.skin2.uj :is(#wizard .uja-wiz-card, #ujaTv .uja-tv-card) { flex-direction: column; }
  :root body.beta.skin2.uj :is(#wizard .uja-wiz-art, #ujaTv .uja-dlg-art) { flex: none; min-height: 0; height: 170px; padding: 18px; }
  :root body.beta.skin2.uj #wizard .uja-art-title { font-size: 30px; flex-direction: row; flex-wrap: wrap; gap: 0 8px; }
  :root body.beta.skin2.uj #wizard .uja-art-lead { display: none; }
  :root body.beta.skin2.uj :is(#wizard .uja-wiz-main, #ujaTv .uja-tv-main) { padding: 20px 16px; }
  :root body.beta.skin2.uj #wizard .uja-mode { flex-wrap: wrap; }
  :root body.beta.skin2.uj #wizard .uja-mode .btn { width: 100%; }
  :root body.beta.skin2.uj #wizard .uja-test { grid-template-columns: minmax(0, 1fr); }
  :root body.beta.skin2.uj #wizard .wiz-foot { flex-wrap: wrap; }
  :root body.beta.skin2.uj #wizard .wiz-foot .btn { flex: 1 1 100%; }
  :root body.beta.skin2.uj #ujaTv li { grid-template-columns: 34px 1fr; gap: 12px; }
  :root body.beta.skin2.uj #ujaTv .uja-tv-n { width: 34px; height: 34px; }
  :root body.beta.skin2.uj #ujaTv .uja-digits { gap: 6px; }
  :root body.beta.skin2.uj #ujaTv .uja-digits input { height: 52px; font-size: 22px; }
  :root body.beta.skin2.uj #ujaTv .uja-tv-foot { flex-wrap: wrap; }
  :root body.beta.skin2.uj #ujaTv .uja-tv-foot .uja-cta { flex: 1 1 100%; order: -1; }
  :root body.beta.skin2.uj .vip-welcome-card { padding: 32px 20px 22px; }
}
@media (max-width: 420px) {
  :root body.beta.skin2.uj .uja-radios { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  :root body.beta.skin2.uj .uja-radios .radio-row { padding: 0 10px; font-size: 14px; }
  :root body.beta.skin2.uj .uja-top-tools { gap: 10px; }
}