.auth-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:0;margin:auto;background:linear-gradient(135deg,#0c1020 20%,#101429);border:1px solid #2c3859;border-radius:22px;color:#f6f7ff;box-shadow:0 26px 90px #0008,inset 0 1px 0 #ffffff04;font-family:Inter,sans-serif;overflow:auto;overscroll-behavior:contain;color-scheme:dark}
.auth-dialog::backdrop{background:#040814a6;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
body:has(.auth-dialog[open]){overflow:hidden}
.auth-header{display:flex;align-items:center;justify-content:space-between;padding:27px 28px 0;gap:16px}
.auth-brand{display:flex;align-items:center;gap:16px;font-size:30px;line-height:1;font-weight:800;letter-spacing:-.035em;color:#fff}
.auth-brand-accent{color:inherit}
.auth-brand-mark{display:grid;place-items:center;flex:none;width:52px;height:52px;background:linear-gradient(150deg,#36adff,#0066f4);border-radius:14px;box-shadow:inset 0 1px 0 #ffffff30}
.auth-brand-mark img{display:block;width:32px;height:32px;object-fit:contain}
.auth-close{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:7px;border:1px solid #722d494d;background:#3c2035;color:#ff8298;cursor:pointer;transition:background-color .18s,color .18s}
.auth-close svg{width:26px;height:26px}
.auth-close:hover{background:#58283e;color:#ffadbc}
.auth-body{padding:24px 28px 26px}
.auth-dialog h2{font-size:32px;line-height:1.25;margin:0 0 7px;letter-spacing:-.025em;font-weight:700}
.auth-description{font-size:16px;font-weight:400;line-height:1.4;color:#939dbd;margin:0 0 18px;max-width:410px;white-space:pre-line}
.auth-code{display:grid;gap:8px;margin:0 0 16px}
.auth-code[hidden]{display:none}
.auth-code label{font-size:13px;font-weight:600;color:#c5d0ef}
.auth-code-row{display:flex;gap:10px;align-items:stretch}
.auth-code input{flex:1;min-width:0;box-sizing:border-box;height:52px;padding:0 16px;border:1px solid #364263;border-radius:14px;background:#141c31;color:#f6f7ff;font:inherit;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.auth-code input::placeholder{color:#6f7b9a;letter-spacing:.06em;font-weight:500}
.auth-code input:focus{outline:none;border-color:#6ea8ff;box-shadow:0 0 0 3px #398fff33}
.auth-code-submit{flex:none;min-width:104px;height:52px;padding:0 18px;border:0;border-radius:14px;background:linear-gradient(145deg,#36adff,#0066f4);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.auth-code-submit:hover{filter:brightness(1.06)}
.auth-code-submit:disabled{opacity:.55;cursor:default;filter:none}
.auth-code.is-pending .auth-code-submit{opacity:.7}
.auth-divider{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:#7c89ab;font-size:12px}
.auth-divider[hidden]{display:none}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:#2c3859}
.auth-providers{display:grid;gap:10px}
.auth-provider{--auth-hover-border:#8ca3d0;--auth-hover-glow:#7c9be52b;position:relative;isolation:isolate;display:flex;align-items:center;gap:18px;width:100%;min-height:72px;padding:10px 14px;box-sizing:border-box;text-align:left;overflow:hidden;border:1px solid #364263;background:linear-gradient(115deg,#182137,#24263f);color:#fff;cursor:pointer;font:inherit;box-shadow:inset 0 1px 0 #ffffff0c;transition:filter .16s ease,border-color .24s ease,box-shadow .24s ease}
html body .auth-dialog .auth-provider{--tab-radius:16px;border-radius:16px!important;transform:none}
.auth-provider::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(110deg,#ffffff1f,#ffffff05 65%);opacity:0;pointer-events:none;transition:opacity .24s ease}
.auth-provider-copy{position:relative;flex:1;min-width:0;z-index:1}
.auth-provider-name{display:block;font-size:16px;font-weight:500;line-height:1.4}
.auth-provider-detail{display:block;margin-top:4px;font-size:11px;font-weight:400;line-height:1.4;color:#dce4ff}
.auth-provider-detail[hidden]{display:none}
.auth-provider-icon{position:relative;z-index:1;width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:13px}
.auth-provider-icon svg{width:35px;height:35px;display:block}
.auth-provider--steam .auth-provider-icon{color:#f6f9ff}
.auth-provider--steam .auth-provider-icon svg{width:42px;height:42px}
.auth-provider--telegram{--auth-hover-border:#91edff;--auth-hover-glow:#00b9f52b;background:linear-gradient(110deg,#0097d6,#0051b8 55%,#008dd6);border-color:#1bc9f4;box-shadow:inset 0 1px 0 #ffffff26}
.auth-provider--telegram .auth-provider-icon{background:linear-gradient(145deg,#06baff,#039ce7);color:#fff}
.auth-provider--google{--auth-hover-border:#ff9aa6;--auth-hover-glow:#f344592b;background:linear-gradient(110deg,#b40d26,#850c24 55%,#ae1028);border-color:#ed3e50;box-shadow:inset 0 1px 0 #ffffff18}
.auth-provider--google .auth-provider-icon{background:#fff}
.auth-provider--google .auth-provider-icon svg{width:37px;height:37px}
.auth-provider-watermark{position:absolute;right:46px;top:50%;width:58px;height:58px;transform:translateY(-50%);display:grid;place-items:center;color:#fff;opacity:.075;pointer-events:none;z-index:0;transition:opacity .24s ease}
.auth-provider-watermark svg{display:block;width:100%;height:100%;overflow:hidden}
.auth-provider-watermark path{fill:currentColor}
.auth-provider:not(:disabled):is(:hover,:focus-visible){border-color:var(--auth-hover-border);box-shadow:inset 0 1px 0 #ffffff30,0 0 20px var(--auth-hover-glow)}
.auth-provider:not(:disabled):is(:hover,:focus-visible)::before{opacity:1}
.auth-provider:not(:disabled):is(:hover,:focus-visible) .auth-provider-watermark{opacity:.13}
.auth-provider:not(:disabled):active{filter:brightness(.97)}
.auth-provider:disabled{cursor:default}
.auth-provider:disabled:not(.is-ready):not(.is-linked){filter:saturate(.35);opacity:.7}
.auth-provider.is-linked .auth-provider-arrow{color:#9bf7cc}
.auth-provider-arrow{position:relative;z-index:1;flex:none;width:24px;height:24px;display:grid;place-items:center;color:#fff}
.auth-provider-arrow svg{width:24px;height:24px}
.auth-dialog :is(button,a):focus-visible{outline:2px solid #9fd2ff;outline-offset:3px}
.auth-feedback:has(.auth-status:empty){display:none}
.auth-status{margin:17px 0 0;padding:12px 14px;background:#1c2940;border:1px solid #314867;border-radius:10px;font-size:13px;color:#c4dfff;line-height:1.6;overflow-wrap:anywhere}
.auth-status.is-error{background:#30212d;border-color:#573244;color:#f4b7c6}
.auth-retry{margin-top:10px;padding:10px 15px;min-height:44px;border:1px solid #384c6b;border-radius:10px;background:#202d43;color:#b8d8ff;font:inherit;font-size:13px;cursor:pointer}
.auth-retry[hidden]{display:none}
.auth-spinner{display:block;box-sizing:border-box;width:20px;height:20px;border:2px solid #ffffff40;border-top-color:currentColor;border-radius:50%;animation:auth-spin .8s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){
 .auth-dialog{border-radius:20px}
 .auth-header{padding:24px 22px 0;align-items:center}
 .auth-brand{font-size:27px;gap:13px}.auth-brand-mark{width:48px;height:48px;border-radius:13px}.auth-brand-mark img{width:30px;height:30px}
 .auth-close{width:40px;height:40px;padding:8px}.auth-close svg{width:23px;height:23px}
 .auth-body{padding:21px 22px 22px}.auth-dialog h2{font-size:29px}.auth-description{font-size:15px;line-height:1.5;margin-bottom:18px;max-width:300px}
 .auth-provider{min-height:68px;padding:10px 12px;gap:15px}.auth-provider-icon{width:46px;height:46px;border-radius:12px}.auth-provider-icon svg{width:33px;height:33px}
 .auth-provider--steam .auth-provider-icon svg{width:39px;height:39px}.auth-provider--google .auth-provider-icon svg{width:34px;height:34px}
 .auth-provider-name{font-size:15px}.auth-provider-watermark{width:52px;height:52px;right:36px}.auth-provider-arrow,.auth-provider-arrow svg{width:20px;height:20px}
}
@media(max-width:360px){.auth-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.auth-header{padding:20px 16px 0}.auth-brand{font-size:24px;gap:10px}.auth-body{padding:24px 16px 20px}.auth-dialog h2{font-size:27px}.auth-provider{gap:11px}.auth-provider-name{font-size:13px}.auth-description{font-size:14px}}
@media(prefers-reduced-motion:reduce){.auth-dialog *,.auth-dialog *::before{animation:none!important;transition:none!important}.auth-provider:not(:disabled):hover{transform:none}}