* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:16px/1.5 var(--sans); }
:focus-visible { outline:3px solid var(--pinkText); outline-offset:3px; }
a { color:var(--accentText); font-weight:700; }
a:hover { color:var(--ink); }

/* header */
.topbar { position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:3px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 16px; justify-content:space-between; align-items:center; padding:14px 24px; }
.topbar-end { display:flex; align-items:center; gap:16px; }
.lang { display:flex; gap:8px; }
.lang a, .lang span { padding:6px 12px; font-weight:700; text-decoration:none; border:3px solid transparent; }
.lang a { color:var(--ink); }
.lang a:hover { color:var(--accentText); }
.lang span { border-color:var(--accentText); color:var(--accentText); }

main.auth-card { width:calc(100% - 32px); max-width:440px; margin:48px auto; background:var(--card); border:3px solid var(--line); padding:28px 24px; box-shadow:10px 10px 0 var(--pink); }
h1 { margin:0 0 12px; font:700 34px/1.05 var(--px); }
.lead { margin-top:0; color:var(--muted); }
form { display:flex; flex-direction:column; gap:14px; margin:16px 0; }
label { display:flex; flex-direction:column; gap:4px; font-weight:700; }
label small { font-weight:400; color:var(--muted); }
input:not([type=checkbox]):not([type=submit]) { width:100%; }
input { font:inherit; padding:12px 14px; min-height:48px; color:var(--ink); background:var(--bg); border:3px solid var(--line); border-radius:0; }
input:focus { outline:none; border-color:var(--accentText); box-shadow:4px 4px 0 var(--pink); }
button, input[type=submit], form.button_to button { font:700 16px var(--sans); min-height:48px; padding:0 24px; color:var(--onAccent); background:var(--accent); border:3px solid var(--btnBorder); border-radius:0; box-shadow:4px 4px 0 var(--pink); cursor:pointer; }
button:hover, input[type=submit]:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--pink); }
button.secondary { background:transparent; color:var(--ink); border-color:var(--ink); }
button.theme-toggle { color:var(--ink); background:transparent; border-color:var(--line); box-shadow:none; padding:0 12px; }
button.theme-toggle:hover { transform:none; border-color:var(--accentText); color:var(--accentText); box-shadow:none; }
.error { background:transparent; color:var(--danger); border:3px solid var(--danger); padding:10px 14px; font-weight:700; }
.notice { background:transparent; color:var(--ok); border:3px solid var(--ok); padding:10px 14px; font-weight:700; }
.error-list { margin:0 0 14px; padding-left:20px; color:var(--danger); }
.alt { color:var(--muted); margin-bottom:0; }
.field { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; font-weight:700; }
.field p { margin:0; }
.field em { font-weight:400; font-style:normal; color:var(--muted); font-size:14px; }
.field input[type=checkbox] { min-height:0; width:20px; height:20px; accent-color:var(--accent); }
.field:has(input[type=checkbox]) { flex-direction:row; align-items:center; gap:8px; }
.field:has(input[type=checkbox]) p { display:inline; }
form.button_to { margin:16px 0; }