/* /account (profile) page - built on /assets/public.css + /tickets.css
   (page head, cards, side cards, details, status pills, quick links);
   this file only adds the profile-specific pieces. */

/* ---------- Hero ---------- */
.ac-head .wrap { gap: 1.4rem; }
.ac-hero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ac-avatar { position: relative; width: 104px; height: 104px; flex: none; }
.ac-avatar img, .ac-avatar-ph {
  width: 100%; height: 100%; display: block; border-radius: 22px; image-rendering: pixelated;
  border: 2px solid rgba(126,232,255,.35); box-shadow: 0 18px 40px -16px rgba(0,120,255,.65), 0 0 0 6px rgba(126,232,255,.05);
  background: var(--ink-2);
}
.ac-avatar-ph { display: grid; place-items: center; font: 800 2.4rem var(--display); color: var(--dim); }
.ac-avatar.is-dead img { filter: grayscale(.6) brightness(.85); border-color: rgba(255,90,95,.45); box-shadow: 0 18px 40px -16px rgba(255,40,50,.55); }
.ac-avatar-x {
  position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: #e6262b; border: 3px solid var(--ink-0);
}
.ac-avatar-x svg { width: 13px; height: 13px; stroke-width: 3.2; }
.ac-hero-copy { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: .55rem; }
.ac-hero-copy h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05; overflow-wrap: anywhere; }
.ac-sub { color: var(--dim); font-size: .95rem; }
.ac-sub b { color: var(--text); }
.ac-sub .sep { color: var(--line-strong); }
.ac-ranks { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
.ac-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-self: flex-end; }
.ac-hero-actions .btn svg { width: 16px; height: 16px; }

.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ac-stat { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ink-1) 88%, transparent); }
.ac-stat > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ac-stat b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-stat span:not(.pb-ico) { font-size: .78rem; color: var(--dim); }
.ac-stat.c-red b { color: #ff8a8d; }
.ac-stat.c-green b { color: var(--green); }

/* ---------- Cards ---------- */
.ac-card { padding: 1.25rem 1.3rem; }
.ac-card-head-row { justify-content: flex-start; }
.ac-view-all { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; color: var(--ice); font-size: .82rem; font-weight: 700; text-decoration: none; }
.ac-view-all svg { width: 14px; height: 14px; transition: transform .15s ease; }
.ac-view-all:hover svg { transform: translateX(2px); }

/* playtime progression */
.ac-pt { gap: 1rem; }
.ac-pt-empty { color: var(--dim); font-size: .9rem; }
.ac-pt-empty a { color: var(--ice); font-weight: 700; text-decoration: none; }
.ac-pt-now { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ac-pt-current { display: flex; flex-direction: column; gap: .1rem; }
.ac-pt-current .k { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8794ae; }
.ac-pt-current b { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--pt); }
.ac-pt-hours { display: flex; align-items: baseline; gap: .35rem; }
.ac-pt-hours b { font-family: var(--mono); font-size: 1.25rem; color: var(--text); }
.ac-pt-hours span { font-size: .8rem; color: var(--dim); }
.ac-pt-progress { display: flex; flex-direction: column; gap: .45rem; }
.ac-pt-bar { height: 12px; border-radius: 999px; background: var(--ink-0); border: 1px solid var(--line); overflow: hidden; }
.ac-pt-bar span {
  display: block; height: 100%; min-width: 6px; border-radius: inherit;
  background: linear-gradient(90deg, var(--pt), var(--pt-next));
  box-shadow: 0 0 14px color-mix(in srgb, var(--pt-next) 55%, transparent);
}
.ac-pt-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--dim); }
.ac-pt-caption b { color: var(--text); }
.ac-pt-caption b.next { color: var(--pt-next); }
.ac-pt-caption .mono { font-family: var(--mono); font-size: .74rem; color: #8794ae; }
.ac-pt-ladder { list-style: none; margin: 0; padding: .3rem 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.ac-pt-ladder::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: calc(.3rem + 12px); height: 2px; background: var(--line); }
.ac-pt-ladder li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; min-width: 0; }
.ac-pt-ladder .dot {
  position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-1); border: 2px solid var(--line-strong); color: #05070d;
}
.ac-pt-ladder .dot svg { width: 13px; height: 13px; stroke-width: 3.2; }
.ac-pt-ladder b { font-size: .76rem; color: var(--dim); white-space: nowrap; }
.ac-pt-ladder .h { font-family: var(--mono); font-size: .64rem; color: #6f7b94; }
.ac-pt-ladder li.is-done .dot, .ac-pt-ladder li.is-current .dot { background: var(--c); border-color: var(--c); }
.ac-pt-ladder li.is-done b { color: var(--text); }
.ac-pt-ladder li.is-current .dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent), 0 0 16px color-mix(in srgb, var(--c) 55%, transparent); }
.ac-pt-ladder li.is-current b { color: var(--c); }
.ac-pt-ladder li.is-locked .dot { border-style: dashed; }

/* linked accounts */
.ac-links { display: flex; flex-direction: column; gap: .6rem; }
.ac-link-row { display: flex; align-items: center; gap: .85rem; padding: .75rem .85rem; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line); }
.ac-link-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--dim); }
.ac-link-ico img { width: 100%; height: 100%; image-rendering: pixelated; }
.ac-link-ico svg { width: 19px; height: 19px; }
.ac-link-ico.is-discord { color: #fff; background: #5865f2; border-color: rgba(255,255,255,.15); }
.ac-link-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.ac-link-info b { font-size: .92rem; }
.ac-link-info span { font-size: .8rem; color: var(--dim); }
.ac-link-row form { margin: 0; }
.ac-discord-btn { background: #5865f2; color: #fff; border-color: rgba(255,255,255,.15); }
.ac-discord-btn:hover { background: #6b77ff; }
.ac-discord-btn svg { width: 15px; height: 15px; }

/* password form */
.ac-form { display: flex; flex-direction: column; gap: .95rem; }
.ac-input { position: relative; display: flex; align-items: center; }
.ac-input > svg { position: absolute; left: .8rem; width: 16px; height: 16px; color: #6f7b94; pointer-events: none; transition: color .15s ease; }
.ac-input:focus-within > svg { color: var(--ice); }
.tp-page .ac-input input { width: 100%; padding-left: 2.4rem; padding-right: 2.7rem; }
.ac-input .pw-toggle {
  position: absolute; right: .35rem; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: none; color: #6f7b94; cursor: pointer;
}
.ac-input .pw-toggle:hover { color: var(--text); background: var(--ink-2); }
.ac-input .pw-toggle svg { width: 16px; height: 16px; }
.ac-input .pw-toggle .i-hide { display: none; }
.ac-input .pw-toggle.is-on .i-show { display: none; }
.ac-input .pw-toggle.is-on .i-hide { display: block; }
.ac-reqs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: .3rem 1.2rem; padding: .6rem .8rem; border-radius: 10px; background: var(--ink-0); border: 1px solid var(--line); }
.ac-form-foot { display: flex; justify-content: flex-end; padding-top: .2rem; }
.ac-form-foot .btn svg { width: 16px; height: 16px; }

/* recent tickets */
.ac-tickets { display: flex; flex-direction: column; gap: .45rem; }
.ac-ticket { display: flex; align-items: center; gap: .8rem; padding: .65rem .75rem; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .15s ease, background-color .15s ease; }
.ac-ticket:hover { border-color: var(--line-strong); background: var(--ink-2); }
.ac-ticket .pb-ico.sm { width: 32px; height: 32px; }
.ac-ticket-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ac-ticket-main b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-ticket-main span { font-family: var(--mono); font-size: .66rem; color: #7d89a3; }
.ac-empty { color: var(--dim); font-size: .88rem; padding: .4rem 0; }
.ac-empty a { color: var(--ice); font-weight: 700; text-decoration: none; }

/* side cards */
.ac-email { max-width: 170px; }
.ac-unverified { color: #ffcf7a; border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.08); }
.ac-unverified .tp-dot { background: #f5a623; }
.ac-death { border-color: rgba(255,90,95,.32); background: linear-gradient(180deg, rgba(255,90,95,.1), var(--ink-1) 70%); }
.ac-death-cause { font-weight: 700; color: var(--text); font-size: .95rem; }
.ac-death-note { font-size: .82rem; color: var(--dim); }
.ac-death-note a { color: #ff8a8d; font-weight: 700; text-decoration: none; }
.ac-death-note a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-hero-actions { align-self: auto; }
}
@media (max-width: 640px) {
  .ac-avatar { width: 80px; height: 80px; }
  .ac-reqs { grid-template-columns: 1fr 1fr; }
  .ac-pt-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: .9rem; }
  .ac-pt-ladder::before { display: none; }
  .ac-link-row { flex-wrap: wrap; }
  .ac-link-info { flex-basis: calc(100% - 60px); }
  .ac-link-row > .btn, .ac-link-row > form, .ac-link-row > .tp-status { margin-left: 52px; }
}

/* revived: the last death stays as history, but in a calmer, non-alarming style */
.ac-death.is-revived { border-color: var(--line); background: linear-gradient(180deg, rgba(94,226,154,.07), var(--ink-1) 70%); }
.ac-revived-pill { margin-left: auto; }

/* ==========================================================================
   /account/login + /account/register
   ========================================================================== */
.au-band {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  min-height: calc(100vh - 64px); display: flex; align-items: center;
}
.au-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 60% at 78% 45%, rgba(47,107,255,.2), transparent 70%),
    radial-gradient(35% 50% at 15% 20%, rgba(0,229,255,.08), transparent 70%),
    linear-gradient(180deg, #070b18, var(--ink-0));
}
.au-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(126,232,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(126,232,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(60% 70% at 75% 45%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 70% at 75% 45%, #000 15%, transparent 75%);
}
.au-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.au-intro { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.au-intro h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.05; }
.au-lede { color: var(--dim); font-size: 1.05rem; max-width: 46ch; }
.au-perks { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.au-perks li { display: flex; align-items: flex-start; gap: .85rem; }
.au-perks li > div { display: flex; flex-direction: column; gap: .1rem; line-height: 1.35; }
.au-perks b { font-size: .95rem; }
.au-perks span:not(.pb-ico) { font-size: .86rem; color: var(--dim); }
.au-ip {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content; max-width: 100%; margin-top: .3rem;
  padding: .45rem .75rem; border-radius: 11px; background: var(--ink-1); border: 1px solid var(--line-strong); font-size: .78rem; color: var(--dim);
}
.au-ip svg { width: 15px; height: 15px; color: var(--ice); flex: none; }
.au-ip code { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: .84rem; }

.au-card {
  padding: 1.6rem; border-radius: 20px; border: 1px solid transparent;
  background: linear-gradient(180deg, #0d1630, var(--ink-1) 180px) padding-box, linear-gradient(140deg, rgba(0,229,255,.45), rgba(47,107,255,.2) 40%, var(--line)) border-box;
  box-shadow: 0 30px 70px -36px rgba(0,120,255,.75);
}
.au-card-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.au-logo {
  width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(126,232,255,.2), var(--ink-2)); border: 1px solid var(--line-strong);
}
.au-logo img { filter: drop-shadow(0 0 10px rgba(126,232,255,.45)); }
.au-card-head h2 { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.au-card-head p { color: var(--dim); font-size: .84rem; margin-top: .15rem; }
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .28rem; margin-bottom: 1.2rem; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line); }
.au-tab {
  padding: .6rem .5rem; border: 0; border-radius: 9px; cursor: pointer; background: none;
  font: 700 .86rem var(--body); color: var(--dim); transition: color .15s ease, background-color .15s ease;
}
.au-tab:hover { color: var(--text); background: var(--ink-2); }
.au-tab.is-active { color: #fff; background: linear-gradient(90deg, #00b8e6, #0047ff); box-shadow: 0 6px 16px -8px rgba(0,120,255,.9); }
.au-panel { display: flex; flex-direction: column; gap: 1rem; }
.au-form { display: flex; flex-direction: column; gap: 1rem; }
.au-form .field-row { gap: .8rem; }
.au-form .ac-reqs { grid-template-columns: 1fr 1fr; }
.au-submit { width: 100%; padding-block: .85rem; border-radius: 11px; }
.au-submit svg { width: 16px; height: 16px; }
.au-switch { text-align: center; color: var(--dim); font-size: .84rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.au-link { background: none; border: 0; padding: 0; cursor: pointer; font: 700 .84rem var(--body); color: var(--ice); }
.au-link:hover { text-decoration: underline; }
.au-page .auth-inline-form { display: inline; }

@media (max-width: 900px) {
  .au-grid { grid-template-columns: 1fr; }
  .au-band { min-height: 0; }
  .au-perks { display: none; }
  .au-intro { gap: .8rem; }
}
@media (max-width: 480px) {
  .au-card { padding: 1.15rem; }
  .au-form .field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   /account/link - reuses the /account/login band + card (au-*)
   ========================================================================== */
.lk-steps { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; counter-reset: lk; }
.lk-steps li { position: relative; display: flex; align-items: flex-start; gap: .85rem; }
.lk-steps li > div { display: flex; flex-direction: column; gap: .1rem; line-height: 1.35; }
.lk-steps b { font-size: .95rem; }
.lk-steps span:not(.pb-ico) { font-size: .86rem; color: var(--dim); }
.lk-steps .pb-ico { position: relative; counter-increment: lk; }
.lk-steps .pb-ico::after {
  content: counter(lk); position: absolute; right: -6px; top: -6px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font: 800 .62rem var(--body); color: #fff; background: var(--ink-0); border: 1px solid var(--line-strong);
}
.lk-steps code, .lk-page .au-card-head code, .lk-hint code {
  font-family: var(--mono); font-size: .85em; padding: .05rem .35rem; border-radius: 6px; background: var(--ink-2); border: 1px solid var(--line); color: var(--text);
}

button.lk-ip { cursor: pointer; font: inherit; font-size: .78rem; text-align: left; transition: border-color .15s ease; }
button.lk-ip:hover { border-color: var(--ice); }
.lk-ip-copy { display: inline-flex; align-items: center; gap: .3rem; margin-left: .25rem; padding-left: .6rem; border-left: 1px solid var(--line-strong); color: var(--ice); font-weight: 700; }
.lk-ip-copy svg { width: 13px; height: 13px; }
.lk-ip-copy em { font-style: normal; }
.lk-ip.is-copied { border-color: rgba(94,226,154,.6); }
.lk-ip.is-copied .lk-ip-copy { color: var(--green); }

/* code entry: a real input; with JS it turns transparent over six display cells */
.lk-page .au-card > .account-error { margin-bottom: 1rem; }
.lk-label { display: block; margin-bottom: .45rem; }
.lk-otp { position: relative; }
.tp-page .lk-otp input {
  width: 100%; text-align: center; text-transform: uppercase; letter-spacing: .4em;
  font: 700 1.35rem var(--mono); padding: .8rem .6rem;
}
.lk-cells { display: none; }
.lk-otp.is-enhanced .lk-cells { display: grid; grid-template-columns: repeat(3, 1fr) 14px repeat(3, 1fr); gap: .45rem; pointer-events: none; }
.tp-page .lk-otp.is-enhanced input {
  position: absolute; inset: 0; z-index: 1; opacity: 0; padding: 0; border: 0; cursor: text;
  color: transparent; caret-color: transparent; letter-spacing: 0;
}
.lk-cells span {
  aspect-ratio: 5 / 6; display: grid; place-items: center; border-radius: 12px;
  font: 800 clamp(1.3rem, 4vw, 1.7rem) var(--mono); color: var(--text);
  background: var(--ink-0); border: 1px solid var(--line-strong);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.lk-cells span.lk-gap { aspect-ratio: auto; background: none; border: 0; position: relative; }
.lk-cells span.lk-gap::before { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--line-strong); }
.lk-cells span.is-filled { background: var(--ink-2); }
.lk-cells span.is-active { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(126,232,255,.15); }
.lk-cells span.is-active:not(.is-filled)::after { content: ""; width: 2px; height: 1.2em; background: var(--ice); animation: lk-blink 1s steps(1) infinite; }
.lk-otp.is-complete .lk-cells span:not(.lk-gap) { border-color: rgba(94,226,154,.55); }
@keyframes lk-blink { 50% { opacity: 0; } }
.lk-hint { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .8rem; color: var(--dim); }
.lk-hint svg { width: 14px; height: 14px; flex: none; }

/* already linked */
.lk-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.lk-done-head { position: relative; margin-bottom: .4rem; }
.lk-done-head img {
  display: block; border-radius: 18px; image-rendering: pixelated; background: var(--ink-2);
  border: 2px solid rgba(94,226,154,.45); box-shadow: 0 16px 36px -16px rgba(40,200,120,.6), 0 0 0 6px rgba(94,226,154,.06);
}
.lk-done-badge {
  position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: #06210f; background: var(--green); border: 3px solid var(--ink-1);
}
.lk-done-badge svg { width: 13px; height: 13px; stroke-width: 3.4; }
.lk-done h2 { font-family: var(--display); font-weight: 800; font-size: 1.45rem; }
.lk-done p { color: var(--dim); font-size: .9rem; max-width: 38ch; }
.lk-done p b { color: var(--text); }
.lk-done .lk-note { font-size: .82rem; }
.lk-done-actions { display: flex; flex-direction: column; gap: .55rem; width: 100%; margin-top: .6rem; }
.lk-done-actions .btn { justify-content: center; }

@media (max-width: 480px) {
  .lk-cells, .lk-otp.is-enhanced .lk-cells { gap: .3rem; grid-template-columns: repeat(3, 1fr) 8px repeat(3, 1fr); }
  .lk-cells span { border-radius: 9px; }
  .lk-ip > span:not(.lk-ip-copy) { display: none; }
}

/* Linked Discord: the player's own avatar, with a small Discord badge */
.ac-link-ico.is-discord.has-avatar { position: relative; overflow: visible; background: var(--ink-2); border-color: rgba(88,101,242,.55); }
.ac-link-ico .ac-discord-avatar { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; image-rendering: auto; }
.ac-link-ico.has-avatar > svg { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; padding: 3px; box-sizing: border-box; border-radius: 6px; color: #fff; background: #5865f2; box-shadow: 0 0 0 2px var(--ink-1); }

/* ===== Two-factor login ===== */
.ac-tf-pill { margin-left: auto; padding: .12rem .55rem; border-radius: 999px; font: 800 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #ff9a9d; background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.35); }
.ac-tf-pill.is-on { color: #5ee29a; background: rgba(94,226,154,.1); border-color: rgba(94,226,154,.4); }
.ac-tf-text { margin: 0; font-size: .86rem; color: var(--dim); line-height: 1.5; }
.ac-tf-text b { color: var(--text); }
.ac-tf-note { margin: .2rem 0 0; font-size: .76rem; color: var(--dim); }
.ac-tf-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ac-tf-actions form { margin: 0; }
.ac-tf-off { display: flex; gap: .4rem; }
.ac-tf-off input { width: 130px; padding: .45rem .65rem; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--ink-0); color: var(--text); font: inherit; font-size: .84rem; }
.ac-tf-off input:focus { outline: none; border-color: var(--ice); }
.ac-tf-sep { height: 1px; background: var(--line); margin: .2rem 0; }
.ac-tf-everywhere { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: 0; }
.ac-tf-everywhere span { display: flex; flex-direction: column; gap: .1rem; font-size: .86rem; }
.ac-tf-everywhere small { color: var(--dim); font-size: .76rem; }

.ac-tf > .btn { align-self: flex-start; }

/* ===== Two-factor pages (/account/2fa, /account/2fa/setup) ===== */
.tf-wrap { position: relative; display: grid; place-items: start center; padding: clamp(2rem, 6vw, 4.5rem) 16px 5rem; }
.tf-wrap::before { content: ""; position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none; background: radial-gradient(45% 70% at 50% 0%, rgba(53,215,255,.13), transparent 70%); }
.tf-shell { position: relative; width: min(500px, 100%); display: flex; flex-direction: column; gap: 1.15rem; padding: clamp(1.5rem, 4vw, 2.2rem); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--ink-1) 92%, #0b2236), var(--ink-1)); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -45px rgba(0,120,255,.55); }
.tf-shell.is-wide { width: min(940px, 100%); }
.tf-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; }
.tf-hero h1 { margin: .15rem 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.5vw, 2rem); letter-spacing: -.01em; }
.tf-hero p { margin: 0; max-width: 520px; color: var(--dim); line-height: 1.55; }
.tf-hero p b { color: var(--text); }
.tf-badge { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #5ee29a; background: linear-gradient(145deg, rgba(94,226,154,.22), rgba(94,226,154,.05)); border: 1px solid rgba(94,226,154,.4); box-shadow: 0 12px 30px -12px rgba(94,226,154,.6); }
.tf-badge.is-gold { color: #f5c451; background: linear-gradient(145deg, rgba(245,196,81,.22), rgba(245,196,81,.05)); border-color: rgba(245,196,81,.4); box-shadow: 0 12px 30px -12px rgba(245,196,81,.55); }
.tf-badge svg { width: 28px; height: 28px; }
.tf-kicker { font: 700 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.tf-notice { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem .95rem; border-radius: 14px; font-size: .88rem; line-height: 1.5; color: #cdeefb; background: rgba(53,215,255,.07); border: 1px solid rgba(53,215,255,.3); }
.tf-notice.is-gold { color: #ffe2b0; background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.35); }
.tf-notice svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--ice); }
.tf-notice.is-gold svg { color: #f5c451; }
.tf-notice b { color: #fff; }
.tf-error { padding: .75rem .95rem; border-radius: 14px; font-size: .88rem; color: #ffb3b5; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.38); }
.tf-form { display: flex; flex-direction: column; gap: .85rem; }
.tf-digits { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.tf-digit { width: 52px; height: 62px; padding: 0; border-radius: 13px; text-align: center; font: 800 1.6rem var(--mono); color: var(--text); background: var(--ink-0); border: 1px solid var(--line-strong); caret-color: var(--ice); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.tf-digit:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(53,215,255,.15); background: #08142a; }
.tf-digits.is-full .tf-digit { border-color: rgba(94,226,154,.55); }
.tf-digit-gap { width: 10px; height: 2px; border-radius: 2px; background: var(--line-strong); }
.tf-backup { width: 100%; box-sizing: border-box; padding: .9rem 1rem; border-radius: 13px; text-align: center; font: 700 1.25rem var(--mono); letter-spacing: .12em; color: var(--text); background: var(--ink-0); border: 1px solid var(--line-strong); }
.tf-backup:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(53,215,255,.15); }
.tf-go { height: 48px; justify-content: center; gap: .5rem; font-size: .98rem; }
.tf-go svg { width: 17px; height: 17px; }
.tf-go:disabled, .tf-go.is-disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.tf-switch { align-self: center; padding: .3rem .5rem; border: 0; background: none; color: var(--dim); font: inherit; font-size: .86rem; cursor: pointer; }
.tf-switch b { color: var(--ice); }
.tf-switch:hover b { text-decoration: underline; }
.tf-small { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0; font-size: .78rem; color: var(--dim); text-align: center; }
.tf-small svg { width: 14px; height: 14px; flex: none; color: var(--ice); }

/* setup: stepper + two panels */
.tf-stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.tf-stepper li { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--dim); }
.tf-stepper li:not(:last-child)::after { content: ""; width: 34px; height: 2px; margin-left: .2rem; border-radius: 2px; background: var(--line-strong); }
.tf-stepper span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 .7rem var(--mono); color: var(--dim); border: 1px solid var(--line-strong); background: var(--ink-0); }
.tf-stepper li.is-on { color: var(--text); }
.tf-stepper li.is-on span { color: #04141c; background: linear-gradient(135deg, #35d7ff, #4d8fff); border-color: transparent; }
.tf-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.tf-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: 18px; background: var(--ink-0); border: 1px solid var(--line); }
.tf-qr-panel { align-items: center; text-align: center; }
.tf-qr-frame { position: relative; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 6px rgba(53,215,255,.1), 0 24px 45px -22px rgba(53,215,255,.55); }
.tf-qr-frame img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.tf-qr-caption { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--text); }
.tf-qr-caption svg { width: 16px; height: 16px; color: var(--ice); }
.tf-key { display: flex; flex-direction: column; gap: .4rem; width: 100%; padding-top: .9rem; border-top: 1px dashed var(--line-strong); font-size: .76rem; color: var(--dim); }
.tf-key-row { display: flex; align-items: center; gap: .4rem; }
.tf-key-row code { flex: 1; min-width: 0; padding: .55rem .65rem; border-radius: 10px; font: 700 .82rem var(--mono); letter-spacing: .06em; line-height: 1.5; text-align: left; color: #c9f4ff; background: var(--ink-1); border: 1px solid var(--line); word-break: break-word; }
.tf-icon-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--dim); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.tf-icon-btn svg { width: 16px; height: 16px; }
.tf-icon-btn:hover { color: var(--text); border-color: var(--ice); }
.tf-icon-btn.is-done { color: #5ee29a; border-color: rgba(94,226,154,.55); }
.tf-steps { gap: 0; padding: .5rem 1.25rem; }
.tf-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .9rem; padding: 1rem 0; }
.tf-step + .tf-step { border-top: 1px solid var(--line); }
.tf-num { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 800 .85rem var(--mono); color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.32); }
.tf-step b { display: block; font-size: .98rem; margin-bottom: .2rem; }
.tf-step p { margin: 0 0 .7rem; font-size: .86rem; line-height: 1.5; color: var(--dim); }
.tf-step em { font-style: normal; color: var(--text); font-weight: 700; }
.tf-apps { display: flex; flex-wrap: wrap; gap: .35rem; }
.tf-apps span { padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--text); background: var(--ink-2); border: 1px solid var(--line-strong); }
.tf-step .tf-digits { justify-content: flex-start; }
.tf-step .tf-digit { width: 46px; height: 56px; font-size: 1.4rem; }

/* backup codes */
.tf-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; counter-reset: tf; }
.tf-codes li { position: relative; display: flex; align-items: center; justify-content: center; padding: .65rem .7rem; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line); counter-increment: tf; }
.tf-codes li::before { content: counter(tf); position: absolute; left: .55rem; font: 700 .62rem var(--mono); color: var(--dim); }
.tf-codes code { font: 700 1rem var(--mono); letter-spacing: .08em; color: var(--text); }
.tf-code-actions { display: flex; justify-content: center; gap: .5rem; }
.tf-code-actions .btn svg { width: 15px; height: 15px; }
.tf-ack { display: flex; align-items: center; justify-content: center; gap: .55rem; font-size: .88rem; font-weight: 700; cursor: pointer; }
.tf-ack input { width: 17px; height: 17px; accent-color: #35d7ff; }

@media (max-width: 820px) {
  .tf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .tf-digit, .tf-step .tf-digit { width: 40px; height: 52px; font-size: 1.3rem; }
  .tf-digits { gap: .3rem; }
}

/* backup codes: custom "I've saved them" checkbox */
.tf-ack { position: relative; user-select: none; }
.tf-ack input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tf-check { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; color: transparent; background: var(--ink-0); border: 1.5px solid var(--line-strong); transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.tf-check svg { width: 14px; height: 14px; transform: scale(.6); transition: transform .15s ease; }
.tf-ack:hover .tf-check { border-color: var(--ice); }
.tf-ack input:checked + .tf-check { color: #04141c; background: linear-gradient(135deg, #35d7ff, #4d8fff); border-color: transparent; }
.tf-ack input:checked + .tf-check svg { transform: scale(1); }
.tf-ack input:focus-visible + .tf-check { box-shadow: 0 0 0 3px rgba(53,215,255,.3); }
.tf-ack:active .tf-check { transform: scale(.92); }

/* code page: "or" divider, backup-code option card, safety note */
.tf-or { display: flex; align-items: center; gap: .75rem; margin: .1rem 0 -.2rem; font: 700 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tf-or::before, .tf-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tf-alt { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem .9rem; border-radius: 14px; text-align: left; cursor: pointer; color: var(--text); font: inherit; background: var(--ink-0); border: 1px solid var(--line); transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.tf-alt:hover { border-color: rgba(245,196,81,.5); background: color-mix(in srgb, #f5c451 5%, var(--ink-0)); }
.tf-alt:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.tf-alt-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #f5c451; background: rgba(245,196,81,.1); border: 1px solid rgba(245,196,81,.32); }
.tf-alt-ico svg { width: 18px; height: 18px; }
.tf-alt-text { display: flex; flex-direction: column; gap: .12rem; flex: 1; min-width: 0; }
.tf-alt-text b { font-size: .92rem; }
.tf-alt-text small { font-size: .78rem; color: var(--dim); }
.tf-alt-arrow { width: 18px; height: 18px; flex: none; color: var(--dim); transition: transform .15s ease, color .15s ease; }
.tf-alt:hover .tf-alt-arrow { color: var(--text); transform: translateX(2px); }
.tf-foot-note { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 12px; font-size: .78rem; line-height: 1.45; color: var(--dim); background: rgba(53,215,255,.05); border: 1px dashed rgba(53,215,255,.25); }
.tf-foot-ico { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--ice); background: rgba(53,215,255,.1); }
.tf-foot-ico svg { width: 14px; height: 14px; }