/* GetDrink — fiók-oldalak (belépés, regisztráció, megerősítés, jelszó-visszaállítás, fiókom).
   Gyökér-relatív útvonalak mindenütt: a megerősítő és a jelszó-visszaállító oldal a régi címen (/account/verify/<token>)
   is megjelenhet, tehát az oldal mélysége nem állandó. A színek az oldal többi részével egyeznek (a 404.html mintájára);
   sötét módban a márkakék szövegszín tilos (ld. dark-contrast.css), ezért a linkek és a gombok világosabb kéket kapnak. */
:root{
  --brand:#00558C; --on-brand:#fff; --link:#00558C;
  --ink:#06253F; --soft:#3F566B; --muted:#54677A;
  --surface:#EEF3F8; --card:#fff; --line:#D3E0EC; --tint:#DCEAF5; --glow:#F4A23C;
  --ok:#17603F; --ok-bg:#DCEFE5; --err:#9B1C12; --err-bg:#FBE8E6; --info:#06253F; --info-bg:#E4EEF7;
  --f-display:'Manrope',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --brand:#7CB8E8; --on-brand:#04182B; --link:#8CC4F0;
    --ink:#EAF2FA; --soft:#B6C7D8; --muted:#9FB4C7;
    --surface:#04182B; --card:#0B2A45; --line:#1E4160; --tint:#0C2F4C;
    --ok:#7ED3A9; --ok-bg:#12291F; --err:#F2A78F; --err-bg:#3B1F16; --info:#EAF2FA; --info-bg:#0C2F4C;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--surface); color:var(--ink); font-family:var(--f-body); font-size:1.0625rem; line-height:1.6}
/* Fókuszgyűrű: világos felületen sötét gyűrű fehér belső gyűrűvel (14,6 : 1), sötét módban borostyán (teszt-riport A-03). */
:focus-visible{outline:3px solid #0B2233; outline-offset:2px; box-shadow:0 0 0 2px #fff; border-radius:6px}
@media (prefers-color-scheme:dark){:focus-visible{outline-color:var(--glow); box-shadow:none}}
a{color:var(--link)}

.skip{position:absolute; left:12px; top:-60px; z-index:10; background:var(--brand); color:var(--on-brand); padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700}
.skip:focus{top:12px}

header.top{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; width:100%; max-width:1120px; margin:0 auto; padding:14px 16px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:var(--f-display); font-weight:800; font-size:1.125rem}
.brand img{width:34px; height:34px; display:block}
.top .sp{flex:1}
.homelink{color:var(--link); text-decoration:none; font-weight:600; font-size:.95rem; padding:8px 4px}
.homelink:hover{text-decoration:underline}
.lang{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; font-family:var(--f-mono); font-size:.78rem; font-weight:700}
.lang button{border:0; background:transparent; padding:11px 14px; cursor:pointer; color:var(--muted); letter-spacing:.06em; font:inherit; font-family:var(--f-mono); font-size:.78rem; font-weight:700}
.lang button[aria-pressed="true"]{background:var(--brand); color:var(--on-brand)}

main{flex:1; display:grid; place-items:start center; padding:18px 16px 56px}
.card{width:100%; max-width:480px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:32px 28px}
h1{margin:0 0 10px; font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,5.5vw,2.1rem); line-height:1.15; letter-spacing:-.02em}
h2{margin:26px 0 12px; font-family:var(--f-display); font-weight:800; font-size:1.25rem; line-height:1.2}
.lead{margin:0 0 22px; color:var(--soft)}

.msg{margin:0 0 18px; padding:12px 14px; border-radius:12px; font-size:.98rem}
.msg:empty{display:none}
.msg.ok{background:var(--ok-bg); color:var(--ok)}
.msg.err{background:var(--err-bg); color:var(--err)}
.msg.info{background:var(--info-bg); color:var(--info)}

.field{margin:0 0 16px}
.field label{display:block; margin:0 0 6px; font-weight:600; font-size:.95rem}
.field .hint{display:block; margin-top:5px; color:var(--muted); font-size:.875rem}
.field .err{display:block; margin-top:6px; color:var(--err); font-size:.9rem; font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=tel]{width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink)}
select,textarea{width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink)}
textarea{resize:vertical; min-height:96px; line-height:1.5}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}
.pw{position:relative}
.pw input{padding-right:88px}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--link); font:inherit; font-size:.875rem; font-weight:700; padding:8px 10px; cursor:pointer; border-radius:8px}

.check{display:flex; gap:11px; align-items:flex-start; margin:0 0 14px}
.check input{width:20px; height:20px; margin:3px 0 0; flex:none; accent-color:var(--brand)}
.check-body{flex:1; min-width:0}
.check label{font-weight:500; font-size:.97rem; line-height:1.45}
.check .note{display:block; margin-top:3px; color:var(--muted); font-size:.85rem}
.check .err{display:block; margin-top:6px; color:var(--err); font-size:.9rem; font-weight:600}
.stmts{margin:22px 0 6px; padding:16px 16px 4px; border:1px solid var(--line); border-radius:14px}
.stmts legend{padding:0 6px; font-weight:700; font-size:.9rem; color:var(--soft)}
.age{margin:6px 0 18px; color:var(--muted); font-size:.85rem}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; width:100%; padding:14px 22px; border-radius:999px; border:1.5px solid var(--brand); background:var(--brand); color:var(--on-brand); font:inherit; font-weight:700; font-size:1rem; cursor:pointer; text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.65; cursor:default; filter:none}
.btn.alt{background:transparent; color:var(--link); border-color:var(--link)}
.btn+.btn{margin-top:10px}
a.btn{width:auto}

.linklist{list-style:none; margin:0 0 6px; padding:0; display:grid; gap:8px}
.linklist a{display:block; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; text-decoration:none; font-weight:600}
.linklist a:hover{border-color:var(--link)}
.note-box{margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--info-bg); color:var(--info); font-size:.95rem}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 6px}
.btnrow .btn{width:auto; flex:1 1 auto; margin-top:0}
section#result{margin-top:26px; padding-top:6px; border-top:1px solid var(--line)}
section#result h2{margin-top:18px}
section#result h2:focus{outline:none}
#mailText{font-family:var(--f-mono); font-size:.86rem}
.alt-links{margin:20px 0 0; font-size:.95rem; color:var(--soft)}
.alt-links a{padding:4px 0}
.alt-links .sepdot{margin:0 8px; color:var(--muted)}
.who{margin:0 0 6px; color:var(--soft)}
.status-line{display:flex; align-items:center; gap:10px; margin:0 0 6px}
.spin{width:18px; height:18px; border:2.5px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:sp .8s linear infinite; flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none; border-top-color:var(--line)}}

footer.foot{padding:20px 16px 30px; text-align:center; font-size:.9rem; color:var(--muted)}
footer.foot nav{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; margin-bottom:8px}
footer.foot a{color:var(--link); padding:6px 2px; min-height:24px}
noscript .msg{max-width:480px; margin:18px auto}

@media (max-width:520px){
  .card{padding:24px 18px; border-radius:18px}
}