/* ========================================================================== STAYU APP - LOGIN / ACCESS CONTROL Dark premium SaaS UI with lightweight motion ========================================================================== */
:root { --auth-bg-0: #07111f; --auth-bg-1: #0f172a; --auth-bg-2: #111827; --auth-surface: rgba(15, 23, 42, 0.78); --auth-text-main: #e5e7eb; --auth-text-muted: #94a3b8; --auth-text-soft: #cbd5e1; --auth-border: rgba(148, 163, 184, 0.16); --auth-border-strong: rgba(255, 255, 255, 0.10); --auth-brand: #ff385c; --auth-brand-2: #ff6b86; --auth-accent: #38bdf8; --auth-shadow: 0 28px 80px rgba(2, 6, 23, 0.50); --auth-shadow-soft: 0 12px 36px rgba(2, 6, 23, 0.26); --auth-ease: cubic-bezier(0.16, 1, 0.3, 1); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--auth-text-main); background: radial-gradient(circle at 14% 16%, rgba(255, 56, 92, 0.16), transparent 22%), radial-gradient(circle at 84% 14%, rgba(56, 189, 248, 0.15), transparent 20%), radial-gradient(circle at 50% 86%, rgba(255, 255, 255, 0.04), transparent 24%), linear-gradient(145deg, var(--auth-bg-0) 0%, var(--auth-bg-1) 48%, var(--auth-bg-2) 100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-y: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.45; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 92%); animation: gridDrift 26s linear infinite; }
.stayu-loader-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; background: radial-gradient(circle at 50% 45%, rgba(255, 56, 92, 0.16), transparent 24%), linear-gradient(145deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.98)); }
.stayu-loader-overlay.active { opacity: 1; visibility: visible; }
.stayu-loader-content { width: min(560px, calc(100vw - 32px)); padding: 28px; border-radius: 28px; border: 1px solid var(--auth-border); background: var(--auth-surface); box-shadow: var(--auth-shadow); backdrop-filter: blur(18px); text-align: center; animation: authRise 0.55s var(--auth-ease) forwards; }
.stayu-loader-brand { margin-bottom: 22px; color: #fff; font-size: 1.08rem; font-weight: 900; letter-spacing: -0.03em; }
.stayu-loader-brand span { color: var(--auth-brand); }
.stayu-loader-pct { margin-bottom: 16px; color: #fff; font-size: clamp(3.4rem, 8vw, 4.8rem); line-height: 1; font-weight: 900; letter-spacing: -0.08em; font-variant-numeric: tabular-nums; }
.stayu-loader-bar-bg { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, 0.18); border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 16px; }
.stayu-loader-bar-fill { width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--auth-brand) 0%, var(--auth-brand-2) 55%, var(--auth-accent) 100%); box-shadow: 0 0 22px rgba(255, 56, 92, 0.40); transition: width 0.08s linear; }
.stayu-loader-text { color: var(--auth-text-muted); font-size: 0.9rem; line-height: 1.6; }
.stayu-auth-shell { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; z-index: 1; }
.stayu-auth-card { width: min(1240px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 48px)); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr); border-radius: 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--auth-surface); box-shadow: var(--auth-shadow); backdrop-filter: blur(20px); }
.stayu-auth-left, .stayu-auth-right { position: relative; min-height: 100%; }
.stayu-auth-left { display: flex; align-items: center; justify-content: center; padding: 30px 32px; background: radial-gradient(circle at top left, rgba(255, 56, 92, 0.08), transparent 26%), radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.08), transparent 24%), linear-gradient(180deg, rgba(15, 23, 42, 0.74) 0%, rgba(7, 17, 31, 0.92) 100%); }
.stayu-auth-left::before { content: ""; position: absolute; inset: 20px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.06); background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); pointer-events: none; }
.stayu-auth-form-wrapper { position: relative; z-index: 2; width: min(520px, 100%); padding: 8px 0; animation: liftIn 0.65s var(--auth-ease) both; }
.stayu-auth-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 14px; border: 1px solid var(--auth-border); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--auth-text-soft); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; animation: softRise 0.55s 0.04s var(--auth-ease) both; }
.stayu-auth-kicker-dot { width: 9px; height: 9px; border-radius: 999px; background: linear-gradient(135deg, var(--auth-brand) 0%, var(--auth-accent) 100%); box-shadow: 0 0 16px rgba(255, 56, 92, 0.45); animation: dotPulse 2.8s ease-in-out infinite; }
.stayu-auth-banner-hidden { display: none; opacity: 0; }
.stayu-auth-banner-visible { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(251, 191, 36, 0.18); background: linear-gradient(180deg, rgba(251, 191, 36, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%); box-shadow: var(--auth-shadow-soft); animation: slideDownIn 0.42s var(--auth-ease) forwards; }
.stayu-banner-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(251, 191, 36, 0.12); color: #fbbf24; flex: 0 0 auto; animation: iconFloat 2.8s ease-in-out infinite; }
.stayu-banner-content h4 { margin-bottom: 4px; font-size: 0.94rem; font-weight: 800; color: #fde68a; }
.stayu-banner-content p { color: #fef3c7; font-size: 0.84rem; line-height: 1.5; }
.stayu-auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; animation: softRise 0.55s 0.08s var(--auth-ease) both; }
.stayu-brand-logo { width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.28rem; color: #fff; background: linear-gradient(145deg, var(--auth-brand) 0%, var(--auth-brand-2) 100%); box-shadow: 0 16px 30px rgba(255, 56, 92, 0.24); position: relative; overflow: hidden; }
.stayu-brand-logo::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 60%); transform: translateY(14px); animation: brandGlow 5s ease-in-out infinite; }
.stayu-auth-brand h2 { color: #fff; font-size: 1.52rem; font-weight: 900; letter-spacing: -0.05em; }
.stayu-auth-brand h2 span { color: var(--auth-brand); }
.stayu-auth-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 7px; margin-bottom: 12px; border-radius: 18px; border: 1px solid var(--auth-border); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); animation: softRise 0.55s 0.12s var(--auth-ease) both; }
.stayu-auth-mode-btn { border: 0; border-radius: 14px; padding: 12px 16px; background: transparent; color: var(--auth-text-soft); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; position: relative; overflow: hidden; }
.stayu-auth-mode-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, 0.14) 50%, transparent 90%); transform: translateX(-140%) skewX(-20deg); transition: transform 0.72s var(--auth-ease); pointer-events: none; }
.stayu-auth-mode-btn:hover { transform: translateY(-1px); }
.stayu-auth-mode-btn:hover::after { transform: translateX(140%) skewX(-20deg); }
.stayu-auth-mode-btn.is-active { color: #fff; background: linear-gradient(135deg, var(--auth-brand) 0%, var(--auth-brand-2) 100%); box-shadow: 0 14px 24px rgba(255, 56, 92, 0.2); }
#g_id_onload, .g_id_signin { position: relative; z-index: 3; }
.g_id_signin { animation: softRise 0.55s 0.16s var(--auth-ease) both; }
.g_id_signin iframe, .g_id_signin div { border-radius: 14px !important; }
.stayu-auth-panel-group { position: relative; display: block; animation: softRise 0.55s 0.18s var(--auth-ease) both; }
.stayu-auth-panel { display: block; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(12px) scale(0.99); pointer-events: none; visibility: hidden; transition: max-height 0.42s var(--auth-ease), opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.42s; }
.stayu-auth-panel.is-active { max-height: 1400px; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; transition-delay: 0s, 0s, 0s, 0s; animation: panelReveal 0.44s var(--auth-ease) both; }
.stayu-register-intro { margin-bottom: 12px; }
.stayu-register-intro h3 { color: #fff; font-size: 1.02rem; font-weight: 900; letter-spacing: -0.03em; }
.stayu-register-intro p { margin-top: 4px; color: var(--auth-text-muted); font-size: 0.88rem; line-height: 1.45; }
.stayu-auth-divider { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: rgba(203, 213, 225, 0.85); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.stayu-auth-divider::before, .stayu-auth-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.45), transparent); }
.stayu-form { display: flex; flex-direction: column; gap: 14px; }
.stayu-form-login { gap: 14px; }
.stayu-form-register { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.stayu-form-register .stayu-field { gap: 6px; }
.stayu-form-register .stayu-auth-options-register, .stayu-form-register .stayu-btn-register { grid-column: 1 / -1; }
.stayu-field { display: flex; flex-direction: column; gap: 8px; transition: transform 0.22s ease, filter 0.22s ease; }
.stayu-field:focus-within { transform: translateY(-1px); filter: drop-shadow(0 8px 18px rgba(255, 56, 92, 0.12)); }
.stayu-field label { color: #fff; font-size: 0.83rem; font-weight: 800; letter-spacing: 0.01em; }
.stayu-field input { width: 100%; padding: 12px 15px; border-radius: 16px; border: 1px solid var(--auth-border-strong); background: rgba(255, 255, 255, 0.06); color: #fff; outline: none; font-size: 0.95rem; transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }
.stayu-field input::placeholder { color: #94a3b8; }
.stayu-field input:focus { border-color: rgba(255, 56, 92, 0.65); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 4px rgba(255, 56, 92, 0.12); transform: translateY(-1px); }
.stayu-auth-options { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: -2px; }
.stayu-auth-options-register { justify-content: flex-start; }
.stayu-register-note { display: block; color: var(--auth-text-muted); font-size: 0.82rem; line-height: 1.45; }
.stayu-checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--auth-text-soft); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.stayu-checkbox input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--auth-brand); }
.stayu-forgot-link { color: #fda4af; font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.stayu-forgot-link:hover { color: #fff; text-decoration: underline; }
.stayu-btn-login { width: 100%; border: none; border-radius: 18px; padding: 14px 18px; color: #fff; background: linear-gradient(135deg, var(--auth-brand) 0%, var(--auth-brand-2) 100%); font-size: 0.98rem; font-weight: 900; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 16px 28px rgba(255, 56, 92, 0.22); transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; position: relative; overflow: hidden; isolation: isolate; }
.stayu-btn-login::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, 0.18) 48%, transparent 84%); transform: translateX(-140%) skewX(-18deg); transition: transform 0.7s var(--auth-ease); pointer-events: none; }
.stayu-btn-login:hover { transform: translateY(-2px); filter: saturate(1.05); box-shadow: 0 22px 38px rgba(255, 56, 92, 0.30); }
.stayu-btn-login:hover::after { transform: translateX(140%) skewX(-18deg); }
.stayu-btn-register { margin-top: 2px; }
.stayu-auth-footer { margin-top: 12px; text-align: center; color: var(--auth-text-muted); font-size: 0.86rem; animation: softRise 0.55s 0.24s var(--auth-ease) both; }
.stayu-auth-footer a { color: #fff; font-weight: 800; text-decoration: none; }
.stayu-auth-footer a:hover { color: var(--auth-brand); text-decoration: underline; }
body.is-register-mode .stayu-auth-footer { display: none; }
@supports selector(body:has(*)) { body:has(#stayu-register-panel.is-active) .stayu-auth-footer { display: none; }
}
.stayu-auth-right { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 15% 20%, rgba(255, 56, 92, 0.22), transparent 18%), radial-gradient(circle at 80% 35%, rgba(56, 189, 248, 0.18), transparent 18%), linear-gradient(150deg, rgba(2, 6, 23, 0.96) 0%, rgba(15, 23, 42, 0.90) 56%, rgba(2, 6, 23, 0.98) 100%); }
.stayu-auth-right::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.5)), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 42%); }
.stayu-auth-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(255, 56, 92, 0.12), transparent 20%), radial-gradient(circle at 55% 60%, rgba(56, 189, 248, 0.10), transparent 24%); opacity: 0.85; pointer-events: none; animation: overlayBreath 8s ease-in-out infinite alternate; }
.stayu-auth-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.22; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 92%); animation: gridShift 24s linear infinite; }
.stayu-auth-orb { position: absolute; border-radius: 999px; filter: blur(24px); opacity: 0.72; animation: orbFloat 10s ease-in-out infinite, orbGlow 6s ease-in-out infinite alternate; }
.auth-orb-one { width: 280px; height: 280px; top: 8%; right: 14%; background: radial-gradient(circle, rgba(255, 56, 92, 0.46), rgba(255, 56, 92, 0.05) 70%); }
.auth-orb-two { width: 220px; height: 220px; bottom: 12%; left: 10%; background: radial-gradient(circle, rgba(56, 189, 248, 0.38), rgba(56, 189, 248, 0.05) 68%); animation-delay: -3s, -1.4s; }
.stayu-auth-quote { position: relative; z-index: 2; width: min(560px, calc(100vw - 36px)); padding: 32px; border-radius: 30px; border: 1px solid var(--auth-border); background: rgba(7, 17, 31, 0.66); box-shadow: var(--auth-shadow); backdrop-filter: blur(22px); color: #fff; animation: quoteRise 0.9s var(--auth-ease) both; }
.stayu-quote-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--auth-border); color: var(--auth-text-soft); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.stayu-quote-kicker i { color: var(--auth-brand-2); }
.stayu-auth-quote blockquote { margin: 0; font-size: clamp(1.65rem, 2.8vw, 2.45rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.05em; color: #fff; }
.stayu-auth-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.stayu-auth-stat { padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease; }
.stayu-auth-stat:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
.stayu-auth-stat strong { display: block; color: #fff; font-size: 1.02rem; font-weight: 900; letter-spacing: -0.04em; }
.stayu-auth-stat span { display: block; margin-top: 4px; color: var(--auth-text-muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.stayu-quote-author { margin-top: 20px; display: flex; align-items: center; gap: 14px; color: var(--auth-text-muted); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.22em; }
.stayu-quote-author::before { content: ""; width: 46px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--auth-brand), var(--auth-accent)); }
.stayu-login-error { background: rgba(255, 56, 92, 0.10); color: #fecaca; border: 1px solid rgba(255, 56, 92, 0.18); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 0.86rem; font-weight: 700; }
@keyframes authRise { from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes softRise { from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDownIn { from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes panelReveal { from { opacity: 0; transform: translateY(12px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes liftIn { from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes orbFloat { 0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-18px) scale(1.06); }
}
@keyframes orbGlow { from { opacity: 0.58; filter: blur(24px); }
to { opacity: 0.80; filter: blur(28px); }
}
@keyframes dotPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 16px rgba(255, 56, 92, 0.45); }
50% { transform: scale(1.18); box-shadow: 0 0 22px rgba(255, 56, 92, 0.65); }
}
@keyframes brandGlow { 0%, 100% { transform: translateY(12px) scale(0.95); opacity: 0.35; }
50% { transform: translateY(0) scale(1.08); opacity: 0.7; }
}
@keyframes overlayBreath { from { opacity: 0.7; }
to { opacity: 0.95; }
}
@keyframes gridShift { from { background-position: 0 0, 0 0; }
to { background-position: 0 56px, 56px 0; }
}
@keyframes quoteRise { from { opacity: 0; transform: translateY(18px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-height: 960px), (max-width: 1380px) { .stayu-auth-card { width: min(760px, calc(100vw - 48px)); grid-template-columns: 1fr; height: auto; min-height: calc(100dvh - 48px); }
.stayu-auth-right { display: none; }
.stayu-auth-left { padding: 26px 24px; }
.stayu-auth-left::before { inset: 14px; border-radius: 22px; }
.stayu-auth-form-wrapper { width: 100%; max-width: 540px; }
.stayu-auth-mode-switch { margin-bottom: 10px; padding: 6px; }
.stayu-auth-divider { margin: 14px 0; }
.stayu-form { gap: 12px; }
.stayu-field input { padding: 11px 14px; }
.stayu-btn-login { padding: 13px 16px; }
.stayu-auth-footer { margin-top: 10px; }
}
@media (max-width: 900px) { body { overflow-y: auto; overflow-x: hidden; }
.stayu-auth-shell { min-height: 100%; padding: 16px; }
.stayu-auth-card { min-height: calc(100dvh - 32px); height: auto; }
.stayu-auth-left { padding: 22px 18px; }
.stayu-auth-left::before { inset: 12px; border-radius: 20px; }
}
@media (max-width: 620px) { body.is-register-mode .stayu-auth-kicker { display: none; }
body.is-register-mode .stayu-auth-brand { margin-bottom: 8px; }
body.is-register-mode .stayu-register-intro { margin-bottom: 8px; }
body.is-register-mode .stayu-register-intro p { display: none; }
@supports selector(body:has(*)) { body:has(#stayu-register-panel.is-active) .stayu-auth-kicker { display: none; }
body:has(#stayu-register-panel.is-active) .stayu-auth-brand { margin-bottom: 8px; }
body:has(#stayu-register-panel.is-active) .stayu-register-intro { margin-bottom: 8px; }
body:has(#stayu-register-panel.is-active) .stayu-register-intro p { display: none; }
body:has(#stayu-register-panel.is-active) .stayu-auth-mode-switch { margin-bottom: 8px; gap: 8px; padding: 5px; }
body:has(#stayu-register-panel.is-active) .stayu-auth-mode-btn { min-height: 46px; padding: 10px 14px; font-size: 0.82rem; }
}
.stayu-auth-mode-switch { gap: 8px; padding: 5px; }
.stayu-auth-mode-btn { min-height: 46px; padding: 10px 14px; font-size: 0.82rem; }
.stayu-auth-mode-switch { grid-template-columns: 1fr; }
.stayu-form-register { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .stayu-auth-shell { padding: 12px; }
.stayu-auth-card { min-height: calc(100dvh - 24px); border-radius: 24px; }
.stayu-auth-left { padding: 20px 14px; }
.stayu-auth-brand { align-items: flex-start; }
body.is-register-mode .stayu-auth-brand h2 { font-size: 1.24rem; }
.stayu-auth-brand h2 { font-size: 1.32rem; }
.stayu-auth-pills span { width: 100%; justify-content: flex-start; }
.stayu-field input { padding: 12px 13px; border-radius: 14px; }
.stayu-auth-options { flex-direction: column; align-items: flex-start; }
.stayu-btn-login { padding: 14px 16px; border-radius: 16px; }
body.is-register-mode .stayu-auth-mode-switch { margin-bottom: 8px; }
.stayu-auth-footer { font-size: 0.84rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}