/* Hoyooken account pages (accounts, part A, 2026-10-30): sign in, sign up, confirm, reset, delete, your account.
   Builds on site.css tokens (--fox, --teal, --surface, --line ...), so light and dark themes come for free. */
.acct{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;padding-block:28px 48px}
.acct-card{width:min(460px,100%);min-width:0;background:var(--surface);border-radius:22px;padding:28px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.acct-card::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--fox),#ffb36b 60%,var(--teal))}
@media (max-width:420px){.acct-card{padding:24px 18px;border-radius:18px}}
.acct .step{display:grid;gap:14px}
.acct h1{font-size:clamp(26px,6vw,32px);font-weight:800;outline:none}
.acct .lead{margin:0;color:var(--muted)}
.acct .lead.wait{text-align:center;padding-block:28px}
.acct .note{margin:0}
.acct .small{font-size:13px}
.acct .foot{margin:2px 0 0;color:var(--muted);font-size:15px;text-align:center}
.acct .foot.small{font-size:13px;text-align:start}
.acct .foot a,.acct .aside a,.acct .lead a{color:var(--fox);font-weight:600}
.acct .aside{margin:-4px 0 0;font-size:14px;text-align:end}
.acct .row{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.acct .btn.wide{width:100%;justify-content:center}
.acct .btn[disabled]{opacity:.55;cursor:wait;transform:none}
.acct .btn.danger{background:#d64545;box-shadow:0 4px 0 #9e2b2b}
.acct .btn.danger:active{box-shadow:0 1px 0 #9e2b2b}
.acct .danger-link,.acct .foot a.danger-link{color:#d64545;font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .acct .foot a.danger-link{color:#ff8a8a}}
:root[data-theme="dark"] .acct .foot a.danger-link{color:#ff8a8a}

/* social sign-in buttons (site.css .soc is the disabled "coming soon" look; .on makes them live) */
.acct .socs{display:grid;gap:10px}
.acct .soc.on{opacity:1;cursor:pointer;width:100%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);min-height:48px;font-size:16px}
.acct .soc.on:hover{box-shadow:inset 0 0 0 2px var(--fox)}
.acct .soc.on[disabled]{opacity:.55;cursor:wait}
.acct .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.acct .or::before,.acct .or::after{content:"";flex:1;height:1px;background:var(--line)}

/* fields */
.acct .form{gap:14px}
.acct .form input,.acct .form select{min-height:46px}
.acct .form label small{font-weight:400;line-height:1.45}
.acct input[dir="ltr"]{text-align:left}
.acct .pw{position:relative;display:block}
.acct .pw input{padding-inline-end:48px}
.acct .eye{position:absolute;inset-block:0;inset-inline-end:2px;width:44px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.acct .eye svg{width:20px;height:20px}
.acct .eye[aria-pressed="true"]{color:var(--fox)}
.acct .rules{font-size:13px;color:var(--muted);margin-top:-4px}
.acct .rules ul{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
.acct .rules li{display:flex;align-items:center;gap:6px}
.acct .rules li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line)}
.acct .rules li.ok{color:var(--ink)}
.acct .rules li.ok::before{box-shadow:none;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:380px){.acct .rules ul{grid-template-columns:1fr}}

/* messages: an icon and words, never colour alone */
.acct .msg{margin:0;display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;padding:10px 12px;border-radius:12px;color:var(--ink);background:color-mix(in srgb,#d64545 13%,transparent)}
.acct .msg::before{content:"!";flex:none;width:20px;height:20px;border-radius:50%;background:#d64545;color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;line-height:1}
.acct .msg.ok{background:color-mix(in srgb,var(--teal) 16%,transparent)}
.acct .msg.ok::before{content:"";background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* your account */
.acct .me{display:flex;gap:16px;align-items:center}
.acct .me .av{flex:none;width:72px;height:72px;border-radius:22px;overflow:hidden;display:block;box-shadow:var(--shadow)}
.acct .me .av svg{display:block;width:72px;height:72px}
.acct .me .who{min-width:0;display:grid;gap:2px}
.acct .me h1{font-size:26px;overflow-wrap:anywhere}
.acct .me p{margin:0;color:var(--muted);overflow-wrap:anywhere}
.acct [data-email]{text-align:start;unicode-bidi:isolate}
.acct .linkish{justify-self:start;border:0;background:none;padding:0;font:600 14px var(--body);color:var(--fox);cursor:pointer}
.acct .form.inline{padding:14px;border-radius:14px;background:var(--bg)}
.acct .form.inline input{background:var(--surface)}