@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');
.login-page { min-height:100vh;padding:clamp(14px,3vw,34px);display:grid;place-items:center;color:#fff;font-family:'Readex Pro','Segoe UI',Tahoma,sans-serif;background:radial-gradient(800px 560px at 12% 8%,rgba(81,66,214,.2),transparent 70%),#1e1f22; }
.login-shell { width:min(1100px,100%);min-height:min(720px,calc(100vh - 40px));display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:#28292d;box-shadow:0 30px 100px rgba(0,0,0,.28); }
.login-art { position:relative;display:grid;place-items:center;min-height:610px;padding:30px 38px;overflow:hidden;background:radial-gradient(520px 420px at 48% 52%,rgba(81,66,214,.19),transparent 73%),linear-gradient(145deg,#292630,#222327); }
.login-visual { position:absolute;inset:0;display:grid;place-items:center; }.login-visual-glow { position:absolute;width:min(370px,80%);aspect-ratio:1;border:1px solid rgba(129,117,237,.2);border-radius:50%;box-shadow:0 0 0 30px rgba(81,66,214,.035),0 0 0 65px rgba(81,66,214,.025),inset 0 0 60px rgba(81,66,214,.07); }.login-router-wrap { position:relative;width:min(390px,100%);height:min(390px,100%);filter:drop-shadow(0 15px 40px rgba(81,66,214,.23)); }.login-animation { position:relative;width:100%;height:100%; }.login-router-wrap .login-led-antenna-left { animation:router-left-signal 9s linear infinite both; }.login-router-wrap .login-led-antenna-right { animation:router-right-signal 9s linear infinite both; }
.login-wordmark { position:absolute;z-index:2;top:50%;left:50%;display:flex;align-items:baseline;gap:4px;direction:ltr;white-space:nowrap;transform:translate(-50%,-50%);font-family:'Readex Pro','Segoe UI',Arial,sans-serif;font-size:clamp(21px,6vw,32px);line-height:1; }
.login-wordmark>span { display:flex;align-items:baseline; }
.login-wordmark-letter { display:inline-block;opacity:0;transform:translateY(11px) rotateX(-38deg) scale(.82);filter:blur(4px);animation:login-letter-arrive .46s cubic-bezier(.18,.78,.24,1) both; }
.login-wordmark-sony { color:#fff;font-family:'Readex Pro','Segoe UI',Arial,sans-serif;font-weight:700;letter-spacing:.005em; }
.login-wordmark-wifi { color:#7952ff;font-family:'Readex Pro','Segoe UI',Arial,sans-serif;font-weight:700;letter-spacing:.015em;text-shadow:0 0 12px rgba(121,82,255,.22); }
.login-wordmark-wifi .login-wordmark-letter { animation:wifi-wave-loop 9s cubic-bezier(.18,.78,.24,1) var(--wifi-delay) infinite both; }
.login-wordmark-net { margin-left:8px;color:#fff;font-family:Arial,sans-serif;font-size:.38em;font-weight:800;letter-spacing:.06em; }
@keyframes login-letter-arrive { 0% { opacity:0;transform:translateY(11px) rotateX(-38deg) scale(.82);filter:blur(4px); } 72% { opacity:1;transform:translateY(-2px) rotateX(7deg) scale(1.08);filter:blur(0); } 100% { opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0); } }
@keyframes wifi-wave-loop { 0%,5% { opacity:0;transform:translate(var(--wifi-origin-x),-64px) scale(.58);filter:blur(4px); } 12% { opacity:1;transform:translate(0,-4px) scale(1.16);filter:blur(0); } 16% { transform:translate(0,7px) scale(.88); } 20% { transform:translate(0,-5px) scale(1.08); } 24% { transform:translate(0,2px) scale(.97); } 28%,68% { opacity:1;transform:translate(0,0) scale(1);filter:blur(0); } 74%,100% { opacity:0;transform:translate(calc(var(--wifi-origin-x) * .55),-16px) scale(.7);filter:blur(2px); } }
.login-form-side { display:grid;place-items:center;padding:clamp(22px,5vw,64px);background:radial-gradient(460px 380px at 72% 18%,rgba(81,66,214,.13),transparent 72%),linear-gradient(145deg,#292630,#222327); }.login-card { width:min(390px,100%);animation:login-card-enter .7s cubic-bezier(.2,.75,.25,1) both; }.login-card-icon { width:52px;height:52px;display:grid;place-items:center;margin-bottom:24px;border:1px solid rgba(129,117,237,.22);border-radius:16px;background:rgba(81,66,214,.13);color:#c7c3ff;font-size:20px; }.login-kicker { color:#c7c3ff;font-size:.82rem;font-weight:500; }.login-card h1 { margin:5px 0 4px;color:#fff;font-size:1.85rem; }.login-subtitle { margin:0 0 30px;color:#b5bac1;font-size:.87rem; }.login-card form { display:flex;flex-direction:column; }.login-card form>* { animation:login-field-enter .55s cubic-bezier(.2,.75,.25,1) backwards; }.login-card form>*:nth-child(1) { animation-delay:.18s; }.login-card form>*:nth-child(2) { animation-delay:.28s; }.login-card form>*:nth-child(3) { animation-delay:.38s; }.login-card form>*:nth-child(4) { animation-delay:.48s; }.login-card form>*:nth-child(5) { animation-delay:.58s; }.login-label { margin:0 0 7px;color:#e6e6e8;font-size:.82rem;font-weight:500; }.login-card input { width:100%;height:50px;margin:0 0 20px!important;padding:0 14px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;background:#222327!important;color:#fff!important;font:400 .9rem 'Readex Pro',sans-serif!important;outline:none;transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease; }.login-card input:focus { border-color:#7b63ff!important;box-shadow:0 0 0 3px rgba(123,99,255,.16),0 0 18px rgba(81,66,214,.12);transform:translateY(-1px); }.login-card input::placeholder { color:#777b84; }.login-submit { width:100%;height:50px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:3px;border:0;border-radius:12px;background:linear-gradient(135deg,#5142d6,#392bb3);box-shadow:0 8px 22px rgba(81,66,214,.25);color:#fff;font:600 .9rem 'Readex Pro',sans-serif;cursor:pointer;transition:filter .2s,transform .2s; }.login-submit:hover:not(:disabled) { transform:translateY(-1px);filter:brightness(1.08); }.login-submit:disabled { opacity:.65;cursor:wait; }.login-secure { display:block;margin-top:24px;text-align:center;color:#858891;font-size:.73rem; }
@keyframes login-card-enter { from { opacity:0;transform:translateY(18px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes login-field-enter { from { opacity:0;transform:translateX(16px);filter:blur(3px); } to { opacity:1;transform:translateX(0);filter:blur(0); } }
@keyframes router-left-signal { 0%,6%,9%,15% { opacity:1;box-shadow:0 0 7px 3px rgba(73,242,175,.95); } 7%,8%,16%,100% { opacity:.24;box-shadow:0 0 0 rgba(73,242,175,0); } }
@keyframes router-right-signal { 18%,24%,27%,33% { opacity:1;box-shadow:0 0 7px 3px rgba(73,242,175,.95); } 0%,17%,25%,26%,34%,100% { opacity:.24;box-shadow:0 0 0 rgba(73,242,175,0); } }
@media(prefers-reduced-motion:reduce) { .login-card,.login-card form>* { animation:none; }.login-wordmark-letter { animation:none;filter:none;opacity:1;transform:none; }.login-router-wrap .login-led-antenna-left,.login-router-wrap .login-led-antenna-right { animation:none;opacity:.24!important; } }
@media(max-width:760px) { .login-shell { grid-template-columns:1fr;min-height:0; }.login-art { min-height:260px;padding:18px; }.login-visual { inset:0;width:auto;height:auto;opacity:1; }.login-visual-glow { width:min(220px,65%); }.login-router-wrap { width:min(260px,80%);height:min(260px,80%); }.login-form-side { padding:34px 24px 40px; }.login-card-icon { margin-bottom:16px; } }
@media(max-width:430px) { .login-art { min-height:220px; }.login-visual-glow { width:min(175px,65%); }.login-router-wrap { width:min(210px,82%);height:min(210px,82%); } }

.login-lockout { display:block; margin-top:10px; text-align:center; color:#ffb7c0; font-size:.78rem; }
.Toastify__toast-theme--colored.Toastify__toast--error.login-validation-toast { min-height:56px; padding:12px 15px; border:1px solid rgba(199,195,255,.5); border-radius:14px; background:linear-gradient(145deg,#302b55,#4939c9 145%); color:#fff; box-shadow:0 16px 42px rgba(0,0,0,.3),0 0 22px rgba(81,66,214,.22); font-family:'Readex Pro','Segoe UI',Tahoma,sans-serif; }
.login-validation-toast .Toastify__toast-body { padding:0; }
.login-validation-message { display:flex; align-items:center; gap:10px; direction:rtl; font-size:.88rem; font-weight:600; }
.login-validation-message svg { flex:none; color:#d8d2ff; font-size:1.05rem; }
.login-validation-toast .Toastify__close-button { color:#fff; opacity:.78; }
.login-validation-toast .Toastify__progress-bar { background:rgba(255,255,255,.78); }
#username { text-align:right; }
/* Keep Chrome's saved phone suggestions in the same dark style as the login fields. */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus,
.login-card input:autofill { -webkit-text-fill-color:#fff!important;caret-color:#fff;box-shadow:0 0 0 1000px #222327 inset!important;transition:background-color 99999s ease-out 0s; }
.Toastify__toast-theme--colored.Toastify__toast--success.login-welcome-toast { min-height:56px; padding:12px 15px; border:1px solid rgba(199,195,255,.5); border-radius:14px; background:linear-gradient(145deg,#302b55,#4939c9 145%); color:#fff; box-shadow:0 16px 42px rgba(0,0,0,.3),0 0 22px rgba(81,66,214,.22); font-family:'Readex Pro','Segoe UI',Tahoma,sans-serif; }
.login-welcome-toast .Toastify__toast-body { padding:0; }
.login-welcome-message { display:flex; align-items:center; gap:10px; direction:rtl; font-size:.88rem; font-weight:600; }
.login-welcome-message svg { flex:none; color:#bdb2ff; font-size:1.05rem; }
.login-welcome-toast .Toastify__close-button { color:#fff; opacity:.78; }
.login-welcome-progress { background:rgba(255,255,255,.78); }
.Toastify__toast-theme--colored.Toastify__toast--error.login-error-toast { min-height:56px; padding:12px 15px; border:1px solid rgba(199,195,255,.5); border-radius:14px; background:linear-gradient(145deg,#302b55,#4939c9 145%); color:#fff; box-shadow:0 16px 42px rgba(0,0,0,.3),0 0 22px rgba(81,66,214,.22); font-family:'Readex Pro','Segoe UI',Tahoma,sans-serif; }
.login-error-toast .Toastify__toast-body { padding:0; }
.login-error-toast .Toastify__close-button { color:#fff; opacity:.78; }
.login-error-progress { background:rgba(255,255,255,.78); }