/* A compact, quiet login dialog; scroll only when the viewport needs it. */
#authModal { padding: 16px; }
#authModal .auth-dialog { width: min(100%, 800px); grid-template-columns: .85fr 1.15fr; max-height: calc(100dvh - 32px); min-height: 0; overflow: auto; box-shadow: 0 4px 8px #152b3b14; }
#authModal .auth-brand-panel { position: relative; isolation: isolate; min-height: 0; padding: 28px; overflow: hidden; justify-content: flex-start; background: #171c28; color: #f4f5f7; }
.auth-artwork { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.1); opacity: .48; }
.auth-brand-identity { display: flex; align-items: center; gap: 9px; }
#authModal .auth-brand-identity img { border-radius: 9px; }
#authModal .auth-brand-identity strong { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
#authModal .auth-brand-caption { margin: 6px 0 0; color: #c8ccd5; font-size: 19px; font-weight: 500; line-height: 1.4; }
#authModal .auth-form-panel { padding: 38px 36px 26px; min-width: 0; }
#authModal .auth-heading h2 { font-size: 25px; }
#authModal .auth-heading p { margin: 6px 0 20px; }
#authModal .auth-divider { margin: 16px 0; }
#authModal .auth-form { gap: 12px; }
#authModal .auth-form input { min-height: 40px; }
#authModal .auth-submit { background: #4b61ff; }
#authModal .auth-submit:hover { background: #3f52df; }
#authModal .auth-form input:focus { border-color: #4b61ff; box-shadow: 0 0 0 3px #4b61ff2e; }
#authModal .auth-text-action { margin-top: 12px; color: #4b61ff; }
#authModal .account-inline-status:empty { display: none; }
#authModal .account-inline-status { min-height: 0; }
@media (max-width: 720px) { #authModal .auth-dialog { display: block; width: min(100%, 430px); } #authModal .auth-brand-panel { display: flex; padding: 20px 28px; } #authModal .auth-brand-caption, #authModal .auth-artwork { display: none; } #authModal .auth-form-panel { padding: 26px 28px; } }
@media (max-height: 550px) and (min-width: 721px) { #authModal .auth-form-panel { padding: 26px 32px 18px; } #authModal .auth-heading p { margin-bottom: 12px; } #authModal .auth-divider { margin: 12px 0; } }
@media (max-width: 520px) { #authModal .auth-dialog { min-height: 0; border: 1px solid var(--border); border-radius: 12px; } }

/* Clip the source icon’s black outer canvas, retaining the mascot squircle. */
#authModal .auth-brand-identity img { clip-path: inset(4% round 22%); transform: scale(1.09); }

/* Fine monochrome grain breaks up the smooth, frosted appearance. */
#authModal .auth-brand-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .65; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }