/* Maro — auth (login/register): moderné, flat, WCAG, rýchle */
:root{
  --bg:#f3f4f6; --card:#fff; --ink:#15181c; --muted:#5f656e;
  --field:#f1f3f5; --field-hover:#e9ebef; --line:#e6e8ec;
  --accent:#312BE8; --dark:#15181c; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(28px,6vh,72px) 24px 36px;
  background:var(--bg);color:var(--ink);
  font-family:'PP Mori',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.auth{width:100%;max-width:412px}
.card{background:var(--card);border-radius:24px;padding:40px 36px}
.logo{display:block;width:62px;height:62px;margin:0 auto 18px}
h1{font-size:26px;font-weight:800;letter-spacing:-0.02em;text-align:center;margin:0 0 8px;text-wrap:balance}
.sub{font-size:15.5px;color:var(--muted);text-align:center;margin:0 0 24px;line-height:1.5;text-wrap:balance}

/* Google */
.gbtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:52px;
  background:var(--dark);color:#fff;border:0;border-radius:var(--radius);
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:filter .15s,transform .08s}
.gbtn:hover{filter:brightness(1.22)}
.gbtn:active{transform:translateY(1px) scale(.995)}
.gbtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gbtn svg{width:20px;height:20px;flex:0 0 auto}

/* divider */
.or{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:14px;font-weight:600;margin:18px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* form */
form{display:flex;flex-direction:column;gap:7px}
label{font-size:13.5px;font-weight:700;margin:6px 0 1px}
.field{width:100%;height:52px;background:var(--field);border:0;border-radius:var(--radius);
  padding:0 16px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);transition:background .15s}
.field:hover{background:var(--field-hover)}
.field:focus-visible{outline:3px solid var(--accent);outline-offset:2px;background:#fff}
::placeholder{color:#9aa0a8;font-weight:500}

/* password + toggle */
.pw{position:relative}
.pw .field{padding-right:50px}
.pw-toggle{position:absolute;right:7px;top:7px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:9px;cursor:pointer;color:var(--muted);transition:background .15s,transform .08s}
.pw-toggle:hover{background:var(--line);color:var(--ink)}
.pw-toggle:active{transform:scale(.88)}
.pw-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pw-toggle svg{width:21px;height:21px}

/* strength meter (register) */
.strength{height:6px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:8px}
.strength i{display:block;height:100%;width:0;border-radius:5px;transition:width .25s,background .25s}
.shint{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:6px;min-height:16px}

/* submit */
.submit{height:52px;background:var(--accent);color:#fff;border:0;border-radius:var(--radius);
  font:inherit;font-size:16px;font-weight:800;cursor:pointer;margin-top:12px;
  transition:filter .15s,transform .08s}
.submit:hover{filter:brightness(1.08)}
.submit:active{transform:translateY(1px) scale(.995)}
.submit:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* messages + footer */
.err{background:#fbe9e7;color:#c0392b;font-size:14px;font-weight:700;padding:11px 14px;border-radius:12px;text-align:center;margin-bottom:16px}
.alt{text-align:center;font-size:15px;color:var(--muted);margin:22px 0 0}
.alt a{color:var(--accent);font-weight:800;text-decoration:none}
.alt a:hover{text-decoration:underline}
.terms{text-align:center;font-size:13.5px;color:var(--ink);margin:18px 0 0;line-height:1.55}
.terms a{color:var(--ink);font-weight:700;text-decoration:underline;transition:color .15s}
.terms a:hover{color:var(--accent)}

/* 6-miestny kód */
.code{text-align:center;font-size:28px;font-weight:800;letter-spacing:12px;padding-left:12px}
/* remember me */
.remember{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--muted);margin:9px 0 2px;cursor:pointer;user-select:none;transition:color .15s}
.remember input{width:19px;height:19px;accent-color:var(--accent);cursor:pointer}
.remember:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}