/* login.css - TibiaME Map sign-in (modern, professional).
   Uses viewer.css's :root palette. NO dependencies; CSP: this file instead of inline style. */
:root{ --ok:#46d18a; --bad:#ff6b6b; --radius:16px; }

html,body{height:100%;-webkit-user-select:auto;user-select:auto}
body{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--bg);color:var(--fg);position:relative;padding:20px}

/* background: soft moving orbs of light */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0}
.bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 18s ease-in-out infinite}
.bg span:nth-child(1){width:380px;height:380px;background:#3b6fff;top:-80px;left:-60px}
.bg span:nth-child(2){width:320px;height:320px;background:#7a5cff;bottom:-90px;right:-50px;animation-delay:-6s}
.bg span:nth-child(3){width:240px;height:240px;background:#2bd4c4;top:40%;right:20%;opacity:.25;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-25px)}}
@media (prefers-reduced-motion:reduce){.bg span{animation:none}}

.card{position:relative;z-index:1;width:360px;max-width:100%;
  background:linear-gradient(180deg,rgba(26,31,42,.92),rgba(17,21,29,.92));
  border:1px solid var(--panel-b);border-radius:var(--radius);padding:32px 30px 26px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);backdrop-filter:blur(14px)}

.card h1{font-size:22px;margin:2px 0 14px;text-align:center}
.card .lead{margin:0 0 20px;color:var(--muted);font-size:13px;text-align:center}

.authtabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--panel-b)}
.authtabs .atab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:9px 6px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:-1px;transition:.13s}
.authtabs .atab:hover{color:var(--fg)}
.authtabs .atab.active{color:var(--accent);border-bottom-color:var(--accent)}

.okmsg{color:var(--ok);font-size:13px;margin-top:16px;text-align:center;line-height:1.5}
.hidden{display:none!important}

label.fld{display:block;color:var(--muted);font-size:11.5px;margin:14px 0 6px;letter-spacing:.3px;text-transform:uppercase}
.inp{position:relative;display:flex;align-items:center}
.inp input,.inp select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--panel-b);
  background:#0f131b;color:var(--fg);font:inherit;transition:.13s}
.inp select{cursor:pointer;appearance:none;-webkit-appearance:none}
.inp input#p,.inp input#rp{padding-right:62px}
.inp input:focus,.inp select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(78,161,255,.18)}
.inp .toggle{position:absolute;right:6px;background:none;border:0;color:var(--muted);cursor:pointer;
  padding:7px 9px;font-size:12.5px;font-weight:600;border-radius:7px;line-height:1}
.inp .toggle:hover{color:var(--fg)}

.caps{color:var(--bad);font-size:12px;margin-top:7px;min-height:0;display:none;align-items:center;gap:6px}
.caps.show{display:flex}

button.submit{width:100%;margin-top:22px;padding:12px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#6b8bff);color:#06121f;font-weight:700;font:inherit;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:.13s}
button.submit:hover{filter:brightness(1.07)}
button.submit:disabled{opacity:.65;cursor:default;filter:none}
.spinner{width:15px;height:15px;border:2px solid rgba(6,18,31,.35);border-top-color:#06121f;border-radius:50%;
  animation:spin .7s linear infinite;display:none}
button.submit.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

#err{color:var(--bad);font-size:13px;margin-top:14px;min-height:16px;text-align:center}
#err.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--panel-b);
  color:var(--muted);font-size:12px;text-align:center;line-height:1.6}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}