.auth-screen[hidden], .workspace[hidden], .boot-status[hidden] { display: none; }
.boot-status { padding: 32px 24px; color: #9cb3aa; font-size: 13px; }
.auth-screen { min-height: calc(100dvh - 72px); background: #101d1c; }
.auth-layout { min-height: calc(100dvh - 72px); display: grid; grid-template-columns: minmax(350px, 470px) minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.auth-content { position: relative; z-index: 1; padding: clamp(34px, 7dvh, 80px) clamp(22px, 4vw, 70px) 40px; border-right: 1px solid #2c4940; background: #132522; }
.auth-overline { color: #e0b873; font-size: 12px; font-weight: 700; }
.auth-content h1 { margin: 10px 0 26px; font-size: 29px; line-height: 1.3; color: #eef1e8; }
.auth-content .auth-tabs { margin: 0 0 23px; }
.auth-content .auth-tabs button { font-size: 14px; font-weight: 700; }
.auth-content .auth-form { max-width: 100%; gap: 15px; }
.auth-content .auth-form label { font-size: 13px; }
.auth-content .auth-form input { min-height: 44px; font-size: 14px; }
.auth-content .auth-form .primary-button { min-height: 44px; margin-top: 7px; font-size: 14px; }
.auth-scene { position: sticky; top: 0; align-self: start; height: calc(100dvh - 72px); min-width: 0; overflow: hidden; display: grid; place-items: center; padding: 38px; background: #10201e; }
.auth-table { position: relative; width: min(100%, 790px); height: min(61dvh, 560px); min-height: 340px; border: 12px solid #29483e; border-radius: 48% / 46%; background: radial-gradient(ellipse at center, #226045 0%, #1a503b 63%, #174131 100%); box-shadow: inset 0 0 0 2px #76956b, 0 24px 45px #071210; }
.auth-table-mark { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); color: #b4d1ad; opacity: .55; font-size: 70px; line-height: 1; }
.auth-table-suit { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #829c73; border-radius: 50%; background: #10362c; color: #debf85; font-size: 21px; }
.auth-table-suit.suit-top { top: 4%; left: 50%; transform: translateX(-50%); }
.auth-table-suit.suit-right { right: 4%; top: 50%; transform: translateY(-50%); color: #e5a09a; }
.auth-table-suit.suit-bottom { bottom: 4%; left: 50%; transform: translateX(-50%); }
.auth-table-suit.suit-left { left: 4%; top: 50%; transform: translateY(-50%); color: #e5a09a; }
.auth-card-fan { position: absolute; top: 51%; left: 50%; transform: translate(-50%, -10%); display: flex; align-items: end; }
.auth-playing-card.poker-face { display: block; width: clamp(57px, 7vw, 91px); height: clamp(86px, 10.5vw, 137px); margin-right: -20px; border-radius: 5px; box-shadow: 0 9px 16px #09261b88; }
.auth-playing-card:first-child { transform: translateY(12px) rotate(-12deg); }
.auth-playing-card:nth-child(2) { transform: translateY(1px) rotate(-4deg); }
.auth-playing-card:nth-child(3) { transform: translateY(1px) rotate(4deg); }
.auth-playing-card:last-child { transform: translateY(12px) rotate(12deg); }
@media (max-width: 800px) {
  .auth-layout { display: flex; flex-direction: column; min-height: calc(100dvh - 72px); }
  .auth-content { order: 1; flex: 1; padding: 25px 18px 35px; border-right: 0; }
  .auth-content h1 { margin-bottom: 18px; font-size: 24px; }
  .auth-content .auth-tabs { margin-bottom: 16px; }
  .auth-scene { position: static; order: 0; align-self: stretch; width: 100%; height: 135px; padding: 0 20px; }
  .auth-table { width: min(100%, 480px); height: 145px; min-height: 0; transform: translateY(23px); border-width: 7px; }
  .auth-table-mark { display: none; }
  .auth-table-suit { display: none; }
  .auth-card-fan { top: 26%; transform: translate(-50%, -10%); }
  .auth-playing-card.poker-face { width: 42px; height: 62px; margin-right: -8px; }
}
@media (max-width: 700px) {
  .auth-screen, .auth-layout { min-height: calc(100dvh - 62px); }
}