.account-page {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 55%, rgba(255, 124, 48, .10), transparent 30rem),
    radial-gradient(circle at 78% 42%, rgba(82, 229, 209, .055), transparent 25rem),
    #07070a;
}

.account-page::before { opacity: .16; mask-image: none; }
.back-link {
  position: fixed;
  z-index: 3;
  top: 24px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #777785;
  font-size: .78rem;
  transition: color .2s ease, transform .2s ease;
}
.back-link:hover { color: var(--text); transform: translateX(-2px); }
.back-link svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.account-main { display: grid; min-height: 100dvh; place-items: center; padding: 72px 20px 48px; }
.account-shell { width: min(100%, 440px); }
.account-brand { text-align: center; }
.account-mark {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 15px;
  place-items: center;
}
.account-mark img { width: 62px; height: 62px; object-fit: contain; }
.account-brand h1 { margin: 0; font-size: 2rem; line-height: 1; letter-spacing: -.065em; }
.account-brand p { margin: 10px 0 0; color: #686876; font-size: .8rem; }

.account-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 30px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.account-tabs button { position: relative; z-index: 2; min-height: 40px; border: 0; color: #777785; background: transparent; font-size: .875rem; font-weight: 650; cursor: pointer; transition: color .25s ease; }
.account-tabs button[aria-selected="true"] { color: var(--text); }
.tab-indicator { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.03); transition: transform .3s cubic-bezier(.2,.75,.2,1); }
.account-tabs.is-signin .tab-indicator { transform: translateX(100%); }

.account-card { margin-top: 16px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12,12,17,.76); box-shadow: 0 24px 75px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(16px); }
.panel-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.panel-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,124,48,.2); border-radius: 11px; color: var(--accent); background: rgba(255,124,48,.07); }
.panel-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.panel-heading h2 { margin: 0 0 2px; font-size: 1rem; letter-spacing: -.025em; text-transform: capitalize; }
.panel-heading p { margin: 0; color: #6e6e7c; font-size: .72rem; }

.auth-form { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field-label { display: flex; justify-content: space-between; align-items: center; color: #a4a4af; font-size: .82rem; font-weight: 570; }
.field-label small { color: var(--accent-2); font-size: .62rem; font-weight: 600; }
.field-label small.is-error { color: #ff809d; }
.input-shell { display: flex; min-height: 47px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid rgba(255,255,255,.095); border-radius: 11px; background: rgba(255,255,255,.025); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.input-shell:focus-within { border-color: rgba(255,124,48,.58); background: rgba(255,255,255,.04); box-shadow: 0 0 0 3px rgba(255,124,48,.07); }
.input-shell.is-valid { border-color: rgba(82,229,209,.34); }
.input-shell.is-error { border-color: rgba(255,128,157,.45); }
.input-shell > svg { width: 17px; flex: 0 0 auto; fill: none; stroke: #626270; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.input-shell input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .875rem; }
.input-shell input::placeholder { color: #484854; }
.input-shell--prefix { gap: 7px; }.input-shell--prefix > span { color: #575764; font-size: .78rem; white-space: nowrap; }
.visibility-button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #5f5f6c; background: transparent; cursor: pointer; }.visibility-button:hover { color: #a9a9b5; background: rgba(255,255,255,.035); }.visibility-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.password-meter { height: 3px; overflow: hidden; border-radius: 99px; background: #202029; }.password-meter i { display: block; width: var(--strength, 0%); height: 100%; border-radius: inherit; background: var(--meter-color, #ff809d); box-shadow: 0 0 10px color-mix(in srgb, var(--meter-color, #ff809d) 35%, transparent); transition: width .25s ease, background .25s ease; }
.field-hint { color: #52525f; font-size: .63rem; }
.agreement { display: flex; align-items: flex-start; gap: 9px; color: #797986; font-size: .65rem; line-height: 1.45; cursor: pointer; }
.agreement input { position: absolute; opacity: 0; pointer-events: none; }.checkbox-ui { display: grid; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; background: rgba(255,255,255,.025); }.checkbox-ui svg { width: 11px; fill: none; stroke: #08080c; stroke-width: 2.3; opacity: 0; }.agreement input:checked + .checkbox-ui { border-color: var(--accent-2); background: var(--accent-2); }.agreement input:checked + .checkbox-ui svg { opacity: 1; }.agreement input:focus-visible + .checkbox-ui { outline: 2px solid var(--accent-2); outline-offset: 2px; }.agreement a { color: #ff9d64; }
.auth-submit { width: 100%; min-height: 47px; margin-top: 2px; }
.auth-submit:disabled { color: #777782; background: #202028; box-shadow: none; cursor: not-allowed; filter: none; }
.auth-submit:disabled:hover { transform: none; box-shadow: none; }
.turnstile-field { display: grid; gap: 8px; overflow: hidden; }
.turnstile-target { width: 100%; min-height: 65px; }
.turnstile-field p { margin: 0; color: #666673; font-size: .7rem; }
.turnstile-field.is-verified p { color: var(--accent-2); }
.turnstile-field.is-verified p::before { margin-right: 5px; content: "✓"; font-weight: 800; }
.turnstile-target iframe { max-width: 100%; }
.forgot-row { margin-top: -7px; text-align: right; }.forgot-row a { color: #f68b4d; font-size: .65rem; }.forgot-row a:hover { color: #ffb489; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: #4c4c58; font-size: .62rem; }.auth-divider::before,.auth-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.discord-button { display: flex; min-height: 45px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; color: #a8a8b4; background: rgba(255,255,255,.018); font-size: .76rem; font-weight: 600; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }.discord-button:hover { color: #fff; border-color: rgba(114,137,218,.35); background: rgba(114,137,218,.07); }.discord-button svg { width: 18px; fill: #7289da; }
.account-footnote { margin: 16px 0 0; color: #666673; font-size: .7rem; text-align: center; }.account-footnote button { padding: 0; border: 0; color: #ff9d64; background: transparent; cursor: pointer; }

.account-enter { animation: account-enter 1.2s cubic-bezier(.16,.76,.18,1) both; }.account-enter--1 { animation-delay: .12s; }.account-enter--2 { animation-delay: .3s; }.account-enter--3 { animation-delay: .46s; }.account-enter--4 { animation-delay: .62s; }
@keyframes account-enter { from { opacity: 0; transform: translateY(30px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

@media (max-width: 560px) {
  .back-link { position: absolute; top: 18px; left: 18px; }.back-link span { display: none; }
  .account-main { padding: 70px 14px 30px; align-items: start; }.account-shell { margin-top: 18px; }.account-card { padding: 21px; }.account-brand h1 { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) { .account-enter { animation: none; } }

/* ---- real checkbox ---- */
.account-page { --accent-2: #ff7c30; }
.agreement { user-select: none; }
.checkbox-ui { width: 18px; height: 18px; margin-top: -1px; border: 1.5px solid rgba(255,255,255,.28); border-radius: 5px; background: rgba(255,255,255,.03); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.agreement:hover .checkbox-ui { border-color: rgba(255,255,255,.5); }
.checkbox-ui svg { width: 12px; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .2s cubic-bezier(.2,.9,.3,1.4); }
.agreement input:checked + .checkbox-ui { border-color: #ff7c30; background: #ff7c30; box-shadow: 0 0 0 3px rgba(255,124,48,.16); animation: checkPop .24s ease; }
.agreement input:checked + .checkbox-ui svg { opacity: 1; transform: scale(1); }
.agreement input:focus-visible + .checkbox-ui { outline: 2px solid #ff7c30; outline-offset: 2px; }
.agreement.is-error .checkbox-ui { border-color: rgba(255,128,157,.75); }
@keyframes checkPop { 50% { transform: scale(.88); } }

/* ---- email verification ---- */
.verify-panel { text-align: center; padding: 8px 4px 2px; }
.verify-panel:not([hidden]) { animation: verifyIn .45s cubic-bezier(.2,.75,.2,1) both; }
.verify-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 18px; place-items: center; border: 1px solid rgba(255,124,48,.22); border-radius: 14px; color: var(--accent); background: rgba(255,124,48,.07); }
.verify-icon svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.verify-panel h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.03em; }
.verify-copy { margin: 8px 0 0; color: #7a7a87; font-size: .78rem; line-height: 1.5; }
.verify-copy b { color: var(--text); font-weight: 600; }
.verify-form { margin-top: 24px; }
.code-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
.code-inputs input { width: 100%; min-width: 0; height: 52px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: var(--text); background: rgba(255,255,255,.03); font: 700 1.25rem/1 Inter, system-ui, sans-serif; text-align: center; caret-color: var(--accent); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.code-inputs input:focus { border-color: rgba(255,124,48,.6); background: rgba(255,124,48,.05); box-shadow: 0 0 0 3px rgba(255,124,48,.12); outline: none; }
.code-inputs.is-error input { border-color: rgba(255,128,157,.55); animation: shake .32s ease; }
.code-inputs.is-done input { border-color: rgba(82,229,209,.45); }
.verify-actions { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; color: #55555f; font-size: .72rem; }
.verify-actions button, .verify-actions a { padding: 0; border: 0; color: #8d8d99; background: transparent; font: inherit; cursor: pointer; transition: color .18s ease; }
.verify-actions button:hover, .verify-actions a:hover { color: var(--text); }
.verify-actions button:disabled { color: #55555f; cursor: default; }
.account-page.is-verifying .account-tabs, .account-page.is-verifying .account-footnote { display: none; }
@keyframes verifyIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (max-width: 420px) { .code-inputs { gap: 6px; } .code-inputs input { height: 46px; font-size: 1.1rem; } }

/* ---- Responsive polish ---- */
html, body { overflow-x: clip; }
.agreement { position: relative; }
.agreement input { width: 1px; height: 1px; margin: 0; }
@media (max-width: 760px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  .code-inputs input { font-size: 1.15rem !important; }
}

/* ---- Softer, rounder look ---- */
.account-card { padding: 28px; border-radius: 24px; }
.account-tabs { padding: 5px; border-radius: 999px; }
.account-tabs button { border-radius: 999px; }
.account-tabs .tab-indicator { border-radius: 999px; }
.input-shell { min-height: 50px; padding: 0 16px; border-radius: 14px; }
.auth-submit, .account-card .button, .verify-form .button { min-height: 50px; border-radius: 14px; }
.code-inputs input { border-radius: 14px; }
.verify-icon { border-radius: 16px; }
.panel-icon, .account-card .panel-icon { border-radius: 14px; }
.checkbox-ui { border-radius: 6px; }
.discord-button, [data-discord-button] { border-radius: 14px; }

/* ---- Welcome step after verifying ---- */
.welcome-panel { text-align: center; padding: 8px 4px 2px; }
.welcome-panel:not([hidden]) { animation: verifyIn .45s cubic-bezier(.2,.75,.2,1) both; }
.welcome-panel h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.03em; }
.welcome-panel .verify-icon { color: #52e5d1; border-color: rgba(82,229,209,.25); background: rgba(82,229,209,.08); }
.welcome-actions { display: grid; gap: 12px; margin-top: 22px; }
.welcome-actions .auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #5865f2; text-decoration: none; }
.welcome-actions .auth-submit:hover { background: #6d78f5; }
.welcome-actions .auth-submit svg { width: 18px; height: 18px; fill: currentColor; }
.welcome-skip { color: #8d8d99; font-size: .78rem; text-decoration: none; }
.welcome-skip:hover { color: var(--text); }
.welcome-note { margin: 16px 0 0; color: #55555f; font-size: .68rem; }