:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#101828;background:#edf3fb}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#f9fbff 0,#edf3fb 48%,#e8f0fa 100%)}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:32px 18px}.auth-card{width:min(100%,660px);background:#fff;border:1px solid #dce5f0;border-radius:24px;padding:42px 54px 38px;box-shadow:0 22px 65px rgba(30,64,110,.13),0 2px 5px rgba(16,24,40,.08)}.brand{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:28px}.brand-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-size:25px;box-shadow:0 9px 24px rgba(37,99,235,.28)}.brand strong{display:block;font-size:27px;letter-spacing:8px;line-height:1}.brand span{display:block;margin-top:7px;color:#718096;font-size:10px;letter-spacing:3px}.tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;background:#eef4fd;border-radius:13px;margin-bottom:30px}.tabs a{text-align:center;text-decoration:none;color:#65758b;font-weight:700;padding:11px;border-radius:10px}.tabs a.active{background:#fff;color:#2563eb;box-shadow:0 2px 8px rgba(31,65,114,.12)}h1{font-size:29px;margin:0 0 6px}.intro{color:#667085;margin:0 0 27px;font-size:15px}label{display:block;color:#53647b;font-weight:750;font-size:13px;letter-spacing:.55px;text-transform:uppercase;margin:0 0 9px}.input-wrap{position:relative;margin-bottom:21px}.input-wrap>i{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:#91a4c0;font-size:18px}.input-wrap input{width:100%;height:60px;border:1px solid #d4dfef;border-radius:13px;background:#edf4ff;padding:0 53px 0 51px;font:inherit;font-size:16px;outline:none;transition:.2s}.input-wrap input:focus{border-color:#2d6aeb;background:#f6f9ff;box-shadow:0 0 0 4px rgba(45,106,235,.12)}.show-password{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:transparent;color:#8295b2;cursor:pointer;font-size:16px}.primary-button{width:100%;height:61px;border:0;border-radius:13px;margin-top:10px;background:linear-gradient(90deg,#2563eb,#3274ed);color:#fff;font:inherit;font-size:18px;font-weight:750;cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.23);transition:.2s}.primary-button:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(37,99,235,.3)}.alert{padding:13px 15px;border-radius:10px;margin:-10px 0 22px;font-size:14px}.alert.error{background:#fff1f2;color:#b42318;border:1px solid #fecdd3}.alert.success{background:#ecfdf3;color:#067647;border:1px solid #abefc6}.switch-copy{text-align:center;color:#667085;margin:22px 0 0;font-size:14px}.switch-copy a{color:#2563eb;font-weight:700;text-decoration:none}@media(max-width:600px){.auth-shell{padding:16px}.auth-card{padding:30px 22px;border-radius:19px}.brand{margin-bottom:22px}.brand-mark{width:50px;height:50px}h1{font-size:25px}.input-wrap input{height:56px}.primary-button{height:57px}}

/* Compact, centered authentication layout. */
html,body{min-height:100%}
.auth-shell{min-height:100vh;padding:18px 14px}
.auth-card{width:min(100%,500px);border-radius:18px;padding:28px 34px 26px}
.tabs{margin-bottom:24px}
h1{font-size:26px}
.intro{margin-bottom:21px}
.input-wrap{margin-bottom:16px}
.input-wrap input{height:52px}
.show-password{top:4px}
.primary-button{height:53px;margin-top:7px;font-size:16px}
.switch-copy{margin-top:17px}
@media(max-width:600px){.auth-shell{padding:12px}.auth-card{padding:24px 20px}.tabs{margin-bottom:21px}}

/* SPINBET brand: navy and gold. */
.tabs a.active,.switch-copy a{color:#142b4a}
.tabs a.active{box-shadow:inset 0 -2px #d4af37,0 2px 8px rgba(20,43,74,.12)}
.input-wrap input:focus{border-color:#d4af37;box-shadow:0 0 0 4px rgba(212,175,55,.14)}
.primary-button{background:#142b4a;box-shadow:0 10px 24px rgba(20,43,74,.22)}
.primary-button:hover{background:#1c3a61;box-shadow:0 13px 28px rgba(20,43,74,.28)}