@font-face {
  font-family: Aspekta;
  src: url("../fonts/Aspekta-400.DnG7D574.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Aspekta;
  src: url("../fonts/Aspekta-600.B1yRRxUg.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/RobotoMono-Regular.Dl_9wEMW.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-bg: #160a19;
  --page-bg-soft: #211025;
  --surface: rgba(41, 23, 45, .82);
  --surface-strong: #2b1730;
  --surface-alt: rgba(52, 28, 57, .92);
  --card-ghost: rgba(255, 255, 255, .045);
  --text-main: #f8f4f7;
  --text-muted: #cbbdca;
  --text-dim: #9c899d;
  --border: rgba(255, 255, 255, .13);
  --border-strong: rgba(243, 163, 241, .38);
  --accent: #ef58f2;
  --accent-strong: #f3a3f1;
  --accent-soft: rgba(239, 88, 242, .15);
  --work-surface: #f8f4f7;
  --work-surface-soft: #eadfe8;
  --work-text: #261329;
  --shadow-lg: 0 32px 100px rgba(15, 4, 18, .42);
  --shadow-md: 0 18px 52px rgba(15, 4, 18, .22);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1524px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

body.light {
  --page-bg: #eee5ec;
  --page-bg-soft: #f8f4f7;
  --surface: rgba(255, 255, 255, .74);
  --surface-strong: #fff;
  --surface-alt: rgba(244, 237, 243, .94);
  --card-ghost: rgba(38, 19, 41, .04);
  --text-main: #261329;
  --text-muted: #675468;
  --text-dim: #8e7b8f;
  --border: rgba(38, 19, 41, .11);
  --border-strong: rgba(239, 88, 242, .34);
  --accent: #d83cdb;
  --accent-strong: #8d3a91;
  --accent-soft: rgba(216, 60, 219, .12);
  --work-surface: #fff;
  --work-surface-soft: #eadfe8;
  --work-text: #261329;
  --shadow-lg: 0 28px 80px rgba(76, 43, 74, .15);
  --shadow-md: 0 16px 42px rgba(76, 43, 74, .1);
}

body.auth-page,
body.profile-page,
body.auth-check-page {
  background:
    radial-gradient(circle at 86% 4%, rgba(239, 88, 242, .22), transparent 27%),
    radial-gradient(circle at 8% 82%, rgba(117, 71, 119, .22), transparent 31%),
    linear-gradient(160deg, var(--page-bg), var(--page-bg-soft));
  color: var(--text-main);
  font-family: Aspekta, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.018em;
  transition: background .65s var(--ease), color .65s var(--ease);
}

body.auth-page::before,
body.profile-page::before,
body.auth-check-page::before {
  background: transparent url("../images/pattern--1.C8BvYmSx.png") center / min(1200px, 92vw) auto no-repeat;
  border-radius: 0;
  filter: hue-rotate(82deg) saturate(1.7);
  height: 100vh;
  inset: 0;
  opacity: .1;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  z-index: -1;
}

body.auth-page::after,
body.profile-page::after,
body.auth-check-page::after {
  display: none;
}

.mono,
body.auth-page .mono,
body.profile-page .mono,
body.auth-check-page .mono {
  font-family: "Roboto Mono", monospace;
  letter-spacing: 0;
}

body.auth-page .site-noise,
body.profile-page .site-noise,
body.auth-check-page .site-noise {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  opacity: .22;
}

body.auth-page header,
body.profile-page header {
  padding: 20px 24px 0;
  position: relative;
  z-index: 20;
}

body.auth-page .header-bar,
body.profile-page .header-bar {
  background: rgba(248, 244, 247, .88);
  border: 1px solid rgba(38, 19, 41, .08);
  border-radius: 16px;
  box-shadow: 0 20px 64px rgba(15, 4, 18, .18);
  color: #261329;
  max-width: var(--max-width);
  min-height: 58px;
  padding: 7px 8px 7px 14px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.auth-page:not(.secondary-ready) .header-bar,
body.profile-page:not(.secondary-ready) .header-bar {
  opacity: 0;
  transform: translateY(-18px);
}

body.auth-page .header-bar,
body.profile-page .header-bar {
  transition: opacity .7s var(--ease), transform .7s var(--ease), background-color .5s var(--ease);
}

.secondary-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.secondary-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.auth-page .logo,
body.profile-page .logo {
  gap: 10px;
}

body.auth-page .logo img,
body.profile-page .logo img {
  border-radius: 0;
  box-shadow: none;
  filter: invert(1);
  height: 27px;
  object-fit: contain;
  width: 27px;
}

body.auth-page .logo-mark,
body.profile-page .logo-mark {
  gap: 1px;
}

body.auth-page .logo-mark strong,
body.profile-page .logo-mark strong {
  color: #261329;
  font-family: Aspekta, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.03em;
  text-transform: none;
}

body.auth-page .logo-mark span,
body.profile-page .logo-mark span {
  color: rgba(38, 19, 41, .6);
  font-size: 10px;
}

body.auth-page .back-link,
body.profile-page .back-link {
  background: #261329;
  border: 0;
  border-radius: 11px;
  color: #fff;
  font-size: 12px;
  min-height: 42px;
  padding: 0 17px;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}

body.auth-page .back-link:hover,
body.profile-page .back-link:hover {
  background: var(--accent-strong);
  color: #261329;
  transform: translateY(-2px);
}

/* Auth pages */
body.auth-page main {
  display: block;
  min-height: auto;
  padding: 20px 24px 40px;
}

body.auth-page .auth-shell {
  animation: surface-open 1.1s var(--ease) both;
  background: transparent;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr);
  max-width: var(--max-width);
  min-height: calc(100svh - 138px);
  overflow: hidden;
  padding: 0;
}

body.auth-page .auth-intro {
  background:
    linear-gradient(90deg, rgba(19, 5, 22, .1), rgba(19, 5, 22, .46)),
    radial-gradient(circle at 25% 72%, rgba(239, 88, 242, .38), transparent 32%),
    #140717;
  border: 0;
  border-radius: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  overflow: hidden;
  padding: clamp(42px, 6vw, 92px);
  position: relative;
}

body.auth-page .auth-intro::before {
  background: url("../images/pattern--1.C8BvYmSx.png") center / cover no-repeat;
  content: "";
  filter: hue-rotate(83deg) saturate(1.8);
  inset: 0;
  opacity: .13;
  pointer-events: none;
  position: absolute;
}

body.auth-page .auth-intro > * {
  position: relative;
  z-index: 1;
}

body.auth-page .eyebrow,
body.auth-check-page .eyebrow,
body.profile-page .kicker,
body.profile-page .section-label {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  min-height: 32px;
  padding: 0 12px;
  text-transform: uppercase;
}

body.auth-page .eyebrow::before,
body.auth-check-page .eyebrow::before {
  background: var(--accent);
  border-radius: 0;
  box-shadow: none;
  height: 9px;
  width: 9px;
}

body.auth-page .auth-intro h1 {
  color: #fff;
  font-size: clamp(3.8rem, 7vw, 7.7rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
  margin: clamp(34px, 6vw, 76px) 0 0;
  max-width: 8ch;
}

body.auth-page .auth-intro h1 span,
body.auth-check-page h1 span,
body.profile-page h2 span {
  color: var(--accent-strong);
}

body.auth-page .auth-intro p {
  color: rgba(255, 255, 255, .7);
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  line-height: 1.35;
  max-width: 600px;
}

body.auth-page .intro-grid {
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(42px, 7vw, 90px);
}

body.auth-page .intro-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  gap: 10px;
  min-height: 92px;
  padding: 18px 12px 18px 0;
}

body.auth-page .intro-item + .intro-item {
  border-left: 1px solid rgba(255, 255, 255, .16);
  padding-left: 18px;
}

body.auth-page .intro-item strong {
  color: var(--accent-strong);
}

body.auth-page .intro-note {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  margin-top: 40px;
  padding: 16px;
}

body.auth-page .auth-card {
  animation: content-rise .8s var(--ease) .22s both;
  background: var(--work-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--work-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(38px, 5vw, 76px);
}

body.auth-page .auth-card h2 {
  color: var(--work-text);
  font-size: clamp(2.4rem, 4vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1;
}

body.auth-page .auth-card > div:first-child p {
  color: rgba(38, 19, 41, .62);
  font-size: 16px;
  line-height: 1.4;
  max-width: 480px;
}

body.auth-page .form-grid {
  gap: 20px;
  margin-top: clamp(38px, 6vw, 74px);
}

body.auth-page .form-group,
body.profile-page .form-group {
  gap: 8px;
}

body.auth-page .form-group label {
  color: rgba(38, 19, 41, .6);
  font-size: 11px;
}

body.auth-page input,
body.profile-page input {
  background: rgba(38, 19, 41, .035);
  border: 1px solid rgba(38, 19, 41, .13);
  border-radius: 12px;
  box-shadow: none;
  color: #261329;
  min-height: 58px;
  outline: none;
  padding: 0 17px;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

body.auth-page input:focus,
body.profile-page input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(239, 88, 242, .12);
  transform: translateY(-1px);
}

body.auth-page .btn-submit,
body.profile-page .btn-main {
  align-items: center;
  background: #261329;
  border: 0;
  border-radius: 12px;
  color: #fff;
  display: inline-flex;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 7px 0 20px;
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}

body.auth-page .btn-submit::after,
body.profile-page .btn-main::after {
  align-items: center;
  background: var(--accent-strong);
  border-radius: 9px;
  color: #261329;
  content: "→";
  display: inline-flex;
  height: 40px;
  justify-content: center;
  margin-left: 20px;
  width: 42px;
}

body.auth-page .btn-submit:hover,
body.profile-page .btn-main:hover {
  background: var(--accent-strong);
  color: #261329;
  transform: translateY(-3px);
}

body.auth-page .btn-submit:hover::after,
body.profile-page .btn-main:hover::after {
  background: #261329;
  color: #fff;
}

body.auth-page .footer-link {
  border-top: 1px solid rgba(38, 19, 41, .12);
  color: rgba(38, 19, 41, .56);
  margin-top: clamp(34px, 5vw, 64px);
  padding-top: 22px;
}

body.auth-page .footer-link a {
  color: #261329;
  text-decoration-color: var(--accent);
}

body.auth-page .error-msg,
body.auth-page .message-box,
body.profile-page .msg-box {
  border-radius: 10px;
  font-size: 11px;
  padding: 13px 14px;
}

/* Shared controls */
body.auth-page .controls,
body.profile-page .controls,
body.auth-check-page .controls {
  bottom: 18px;
  display: flex;
  gap: 6px;
  left: 18px;
  position: fixed;
  z-index: 80;
}

body.auth-page .pill-btn,
body.profile-page .pill-btn,
body.auth-check-page .pill-btn {
  align-items: center;
  background: rgba(248, 244, 247, .88);
  border: 1px solid rgba(38, 19, 41, .1);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 4, 18, .18);
  color: #261329;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  justify-content: center;
  min-height: 40px;
  padding: 0 13px;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
  width: auto;
}

body.auth-page .pill-btn:hover,
body.profile-page .pill-btn:hover,
body.auth-check-page .pill-btn:hover {
  background: var(--accent-strong);
  transform: translateY(-2px);
}

/* Profile */
body.profile-page main {
  padding: 20px 24px 70px;
}

body.profile-page .profile-shell {
  gap: 18px;
  max-width: var(--max-width);
}

body.profile-page .panel {
  animation: content-rise .8s var(--ease) both;
  background: var(--work-surface);
  border: 0;
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  color: var(--work-text);
  overflow: hidden;
}

body.profile-page .profile-hero {
  background: transparent;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
  min-height: 560px;
}

body.profile-page .profile-copy {
  background:
    radial-gradient(circle at 75% 82%, rgba(239, 88, 242, .34), transparent 31%),
    #140717;
  color: #fff;
  justify-content: space-between;
  padding: clamp(42px, 6vw, 86px);
  position: relative;
}

body.profile-page .profile-copy::after {
  background: url("../images/pattern--1.C8BvYmSx.png") center / cover no-repeat;
  content: "";
  filter: hue-rotate(83deg) saturate(1.8);
  inset: 0;
  opacity: .11;
  pointer-events: none;
  position: absolute;
}

body.profile-page .profile-copy > * {
  position: relative;
  z-index: 1;
}

body.profile-page .kicker {
  width: fit-content;
}

body.profile-page .kicker-dot {
  background: var(--accent);
  border-radius: 0;
  box-shadow: none;
  height: 9px;
  width: 9px;
}

body.profile-page .typing-container {
  color: #fff;
  font-family: Aspekta, sans-serif;
  font-size: clamp(4rem, 8vw, 8.2rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .85;
  margin-top: auto;
}

body.profile-page .hero-description {
  color: rgba(255, 255, 255, .7);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  max-width: 570px;
}

body.profile-page .hero-pill,
body.profile-page .stage-pill {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  color: #fff;
}

body.profile-page .profile-spotlight {
  background: var(--work-surface);
  color: var(--work-text);
  padding: clamp(28px, 4vw, 58px);
}

body.profile-page .spotlight-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  padding: 0;
}

body.profile-page .spotlight-head {
  border-bottom: 1px solid rgba(38, 19, 41, .12);
  padding-bottom: 22px;
}

body.profile-page .spotlight-label,
body.profile-page .section-note,
body.profile-page .spotlight-copy,
body.profile-page .security-card span,
body.profile-page .locked-summary {
  color: rgba(38, 19, 41, .6);
}

body.profile-page .spotlight-name,
body.profile-page .section-head h2,
body.profile-page .char-info-text h3,
body.profile-page #locked-name-display {
  color: var(--work-text);
  font-family: Aspekta, sans-serif;
  font-weight: 400;
  letter-spacing: -.04em;
}

body.profile-page .spotlight-name {
  font-size: clamp(2rem, 3vw, 3.5rem);
}

body.profile-page .hero-avatar,
body.profile-page .sprite-frame {
  background-color: var(--work-surface-soft);
  border: 1px solid rgba(38, 19, 41, .1);
  border-radius: 18px;
  box-shadow: none;
}

body.profile-page .metric-box {
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(38, 19, 41, .13);
  border-radius: 0;
  color: var(--work-text);
  padding-left: 16px;
}

body.profile-page .metric-box strong {
  color: var(--accent);
}

body.profile-page .profile-grid {
  gap: 18px;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
}

body.profile-page .panel-inner {
  padding: clamp(30px, 4vw, 56px);
}

body.profile-page .section-head {
  border-bottom: 1px solid rgba(38, 19, 41, .12);
  padding-bottom: 26px;
}

body.profile-page .section-label {
  background: #261329;
  border: 0;
  color: #fff;
  width: fit-content;
}

body.profile-page .section-label::before {
  background: var(--accent);
  border-radius: 0;
  content: "";
  height: 9px;
  margin-right: 9px;
  width: 9px;
}

body.profile-page .section-head h2 {
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  line-height: .95;
  margin-top: 16px;
  text-transform: none;
}

body.profile-page .account-line {
  color: var(--accent);
}

body.profile-page .stage-pill {
  background: rgba(38, 19, 41, .045);
  border-color: rgba(38, 19, 41, .1);
  color: rgba(38, 19, 41, .62);
}

body.profile-page .avatar-stage {
  background: transparent;
  border: 0;
  gap: 12px;
}

body.profile-page .nav-btn,
body.profile-page .btn-outline,
body.profile-page .btn-danger {
  background: transparent;
  border: 1px solid rgba(38, 19, 41, .16);
  border-radius: 11px;
  color: var(--work-text);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}

body.profile-page .nav-btn:hover,
body.profile-page .btn-outline:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #261329;
  transform: translateY(-2px);
}

body.profile-page .security-stack {
  border-bottom: 1px solid rgba(38, 19, 41, .12);
  border-top: 1px solid rgba(38, 19, 41, .12);
  gap: 0;
}

body.profile-page .security-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 20px 0;
}

body.profile-page .security-card + .security-card {
  border-top: 1px solid rgba(38, 19, 41, .12);
}

body.profile-page .security-card strong {
  color: var(--work-text);
}

body.profile-page .form-group label {
  color: rgba(38, 19, 41, .6);
}

body.profile-page .btn-danger {
  border-color: rgba(190, 43, 72, .26);
  color: #b52043;
}

body.profile-page .btn-danger:hover {
  background: #b52043;
  color: #fff;
  transform: translateY(-2px);
}

body.profile-page .header-avatar {
  border: 1px solid rgba(38, 19, 41, .1);
  border-radius: 10px;
  box-shadow: none;
}

/* Auth handoff */
body.auth-check-page {
  padding: 24px;
}

body.auth-check-page .card {
  animation: surface-open 1.1s var(--ease) both;
  background: var(--work-surface);
  border: 0;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  color: var(--work-text);
  max-width: 660px;
  overflow: hidden;
  padding: clamp(38px, 6vw, 72px);
  position: relative;
  text-align: left;
}

body.auth-check-page .card::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  content: "";
  height: 8px;
  inset: 0 0 auto;
  position: absolute;
}

body.auth-check-page .eyebrow {
  background: #261329;
  border: 0;
  color: #fff;
  margin-bottom: 34px;
}

body.auth-check-page h1 {
  color: var(--work-text);
  font-size: clamp(3.2rem, 7vw, 6.3rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .9;
  max-width: 8ch;
}

body.auth-check-page p {
  color: rgba(38, 19, 41, .62);
  font-size: 17px;
  line-height: 1.4;
  margin: 28px 0 0;
}

body.auth-check-page #status {
  align-items: center;
  border-top: 1px solid rgba(38, 19, 41, .12);
  display: flex;
  gap: 14px;
  margin-top: 42px;
  padding-top: 24px;
}

body.auth-check-page .loader {
  border: 2px solid rgba(38, 19, 41, .12);
  border-radius: 50%;
  border-top-color: var(--accent);
  height: 32px;
  margin: 0;
  width: 32px;
}

body.auth-check-page .status-text {
  color: rgba(38, 19, 41, .58);
  margin: 0;
}

@keyframes surface-open {
  from { clip-path: inset(48% 48% round 120px); opacity: 0; transform: scale(.985); }
  to { clip-path: inset(0 round 28px); opacity: 1; transform: scale(1); }
}

@keyframes content-rise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  body.auth-page .auth-shell,
  body.profile-page .profile-hero,
  body.profile-page .profile-grid {
    grid-template-columns: 1fr;
  }

  body.auth-page .auth-shell { min-height: auto; }
  body.auth-page .auth-intro { min-height: 620px; }
  body.profile-page .profile-spotlight { min-height: 500px; }
}

@media (max-width: 720px) {
  body.auth-page header,
  body.profile-page header { padding: 8px 8px 0; }
  body.auth-page .header-bar,
  body.profile-page .header-bar { min-height: 64px; }
  body.auth-page .logo-mark span,
  body.profile-page .logo-mark span { display: none; }
  body.auth-page main,
  body.profile-page main { padding: 8px 8px 76px; }
  body.auth-page .auth-shell { border-radius: 20px; }
  body.auth-page .auth-intro { min-height: 540px; padding: 34px 24px; }
  body.auth-page .auth-intro h1 { font-size: clamp(3.4rem, 16vw, 5.5rem); }
  body.auth-page .auth-card { padding: 42px 24px 56px; }
  body.auth-page .intro-grid { grid-template-columns: 1fr; }
  body.auth-page .intro-item + .intro-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-left: 0; }
  body.profile-page .profile-shell { gap: 8px; }
  body.profile-page .panel { border-radius: 20px; }
  body.profile-page .profile-copy { min-height: 580px; padding: 34px 24px; }
  body.profile-page .typing-container { font-size: clamp(3.8rem, 19vw, 6rem); }
  body.profile-page .profile-spotlight,
  body.profile-page .panel-inner { padding: 28px 22px; }
  body.profile-page .spotlight-body { grid-template-columns: 1fr; }
  body.profile-page .spotlight-metrics { grid-template-columns: 1fr; }
  body.profile-page .metric-box { border-left: 0; border-top: 1px solid rgba(38,19,41,.12); padding: 14px 0 0; }
  body.profile-page .section-head { align-items: flex-start; flex-direction: column; }
  body.profile-page .avatar-stage { grid-template-columns: 44px 1fr 44px; }
  body.profile-page .header-side { gap: 7px; }
  body.profile-page .header-avatar { display: none; }
  body.auth-page .controls,
  body.profile-page .controls,
  body.auth-check-page .controls { bottom: 8px; left: 8px; }
  body.auth-check-page { padding: 8px; }
  body.auth-check-page .card { border-radius: 20px; padding: 46px 24px; }
}

/* Soft geometry, aligned controls, and motion language shared with the home page. */
:root {
  --radius-xl: 46px;
  --radius-lg: 34px;
  --radius-md: 22px;
  --radius-sm: 14px;
}

body.auth-page button,
body.profile-page button,
body.auth-check-page button,
body.auth-page .back-link,
body.profile-page .back-link {
  align-items: center;
  font-kerning: normal;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-wrap: nowrap;
  white-space: nowrap;
}

body.auth-page .header-bar,
body.profile-page .header-bar {
  border-radius: 999px;
  min-height: 70px;
  overflow: hidden;
  padding: 8px 9px 8px 18px;
}

body.auth-page .header-actions,
body.profile-page .header-actions,
body.profile-page .header-side {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

body.auth-page .header-bar .controls,
body.profile-page .header-bar .controls {
  align-items: center;
  background: rgba(38, 19, 41, .055);
  border: 1px solid rgba(38, 19, 41, .07);
  border-radius: 999px;
  bottom: auto;
  display: flex;
  gap: 4px;
  left: auto;
  padding: 4px;
  position: static;
  right: auto;
}

body.auth-page .header-bar .pill-btn,
body.profile-page .header-bar .pill-btn {
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  height: 44px;
  min-height: 44px;
  min-width: 52px;
  padding: 0 14px;
}

body.auth-page .header-bar .pill-btn:hover,
body.profile-page .header-bar .pill-btn:hover {
  background: var(--accent-strong);
  transform: none;
}

body.auth-page .back-link,
body.profile-page .back-link {
  border-radius: 999px;
  display: inline-flex;
  gap: 14px;
  height: 52px;
  min-height: 52px;
  padding: 0 19px 0 22px;
}

body.auth-page .back-link::after,
body.profile-page .back-link::after {
  align-items: center;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  content: "↗";
  display: inline-flex;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  transition: transform .35s var(--ease), background-color .35s var(--ease);
  width: 28px;
}

body.auth-page .back-link:hover::after,
body.profile-page .back-link:hover::after {
  background: rgba(38, 19, 41, .12);
  transform: rotate(45deg);
}

body.auth-page .auth-shell {
  background: color-mix(in srgb, var(--work-surface-soft) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--work-surface) 55%, transparent);
  border-radius: 48px;
  gap: 12px;
  padding: 12px;
}

body.auth-page .auth-intro,
body.auth-page .auth-card {
  border-radius: 36px;
  overflow: hidden;
}

body.auth-page .auth-intro::before {
  transform: scale(1.08) translate3d(0, var(--scroll-shift, 0), 0);
  transition: transform .1s linear;
}

body.auth-page .eyebrow,
body.auth-check-page .eyebrow,
body.profile-page .kicker,
body.profile-page .section-label {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  line-height: 1;
}

body.auth-page .intro-note {
  border-radius: 20px;
}

body.auth-page input,
body.profile-page input {
  border-radius: 18px;
}

body.auth-page .btn-submit,
body.profile-page .btn-main,
body.profile-page .btn-outline,
body.profile-page .btn-danger,
body.profile-page .nav-btn {
  font-family: "Roboto Mono", monospace;
  line-height: 1;
  overflow: hidden;
  position: relative;
}

body.auth-page .btn-submit,
body.profile-page .btn-main {
  border-radius: 999px;
  min-height: 60px;
  padding: 0 8px 0 24px;
}

body.auth-page .btn-submit::after,
body.profile-page .btn-main::after {
  border-radius: 999px;
  height: 44px;
  width: 46px;
}

body.profile-page .btn-outline,
body.profile-page .btn-danger,
body.profile-page .nav-btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  min-height: 54px;
  padding-block: 0;
}

body.profile-page .panel {
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 42px;
}

body.profile-page .profile-hero {
  background: color-mix(in srgb, var(--work-surface-soft) 72%, transparent);
  border-radius: 48px;
  gap: 12px;
  overflow: hidden;
  padding: 12px;
}

body.profile-page .profile-copy,
body.profile-page .profile-spotlight {
  border-radius: 36px;
  overflow: hidden;
}

body.profile-page .profile-copy::after {
  transform: scale(1.08) translate3d(0, var(--scroll-shift, 0), 0);
  transition: transform .1s linear;
}

body.profile-page .spotlight-card {
  transform: translate3d(0, calc(var(--scroll-shift, 0px) * -.15), 0);
  transition: transform .12s linear;
}

body.profile-page .profile-grid {
  gap: 18px;
}

body.profile-page .profile-grid > .panel {
  border-radius: 40px;
}

body.profile-page .section-head {
  gap: clamp(28px, 5vw, 76px);
}

body.profile-page .hero-pill,
body.profile-page .stage-pill {
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}

body.profile-page .hero-pill:hover,
body.profile-page .stage-pill:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #261329;
  transform: translateY(-3px);
}

body.profile-page .hero-avatar,
body.profile-page .sprite-frame,
body.profile-page .sprite-preview {
  border-radius: 26px;
}

body.profile-page .metric-box {
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}

body.profile-page .metric-box:hover {
  background: rgba(239, 88, 242, .07);
  transform: translateY(-4px);
}

body.profile-page .security-card {
  transition: padding .4s var(--ease), color .4s var(--ease);
}

body.profile-page .security-card:hover {
  padding-left: 12px;
}

body.profile-page .header-avatar {
  border-radius: 50%;
}

body.auth-check-page .card {
  border-radius: 42px;
}

body.auth-check-page > .controls {
  background: rgba(248, 244, 247, .86);
  border: 1px solid rgba(38, 19, 41, .09);
  border-radius: 999px;
  box-shadow: 0 16px 50px rgba(15, 4, 18, .2);
  padding: 5px;
}

body.auth-check-page > .controls .pill-btn {
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

body.secondary-motion .motion-reveal {
  clip-path: inset(0 0 100% 0 round 18px);
  filter: blur(8px);
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    clip-path .9s var(--ease),
    filter .75s var(--ease),
    opacity .65s var(--ease),
    transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path, filter, opacity, transform;
}

body.secondary-motion .motion-reveal.is-visible {
  clip-path: inset(0 0 0 0 round 0);
  filter: blur(0);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.secondary-motion .motion-pop {
  opacity: 0;
  transform: scale(.82) rotate(-4deg);
  transition: opacity .55s var(--ease), transform .85s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

body.secondary-motion .motion-pop.is-visible {
  opacity: 1;
  transform: scale(1) rotate(0);
}

@media (max-width: 720px) {
  body.auth-page .header-bar,
  body.profile-page .header-bar {
    border-radius: 30px;
    min-height: 64px;
    padding: 7px 8px 7px 13px;
  }

  body.auth-page .header-actions,
  body.profile-page .header-actions,
  body.profile-page .header-side {
    gap: 5px;
  }

  body.auth-page .header-bar .controls,
  body.profile-page .header-bar .controls {
    gap: 2px;
    padding: 3px;
  }

  body.auth-page .header-bar .pill-btn,
  body.profile-page .header-bar .pill-btn {
    font-size: 9px;
    height: 40px;
    min-height: 40px;
    min-width: 42px;
    padding: 0 9px;
  }

  body.profile-page .back-link {
    font-size: 9px;
    gap: 7px;
    height: 46px;
    min-height: 46px;
    padding: 0 8px 0 12px;
  }

  body.profile-page .back-link::after {
    height: 24px;
    width: 24px;
  }

  body.auth-page .auth-shell,
  body.profile-page .profile-hero {
    border-radius: 30px;
    gap: 8px;
    padding: 8px;
  }

  body.auth-page .auth-intro,
  body.auth-page .auth-card,
  body.profile-page .profile-copy,
  body.profile-page .profile-spotlight {
    border-radius: 24px;
  }

  body.profile-page .panel,
  body.profile-page .profile-grid > .panel {
    border-radius: 30px;
  }

  body.profile-page .profile-copy {
    min-height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-page *,
  body.profile-page *,
  body.auth-check-page * {
    animation: none !important;
    transition: none !important;
  }
}