.auth-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(68,92,255,.08), transparent 27%),
    radial-gradient(circle at 87% 38%, rgba(255,59,63,.1), transparent 25%),
    linear-gradient(180deg, #07080a 0%, #0a0c10 55%, #08090b 100%);
}

:root[data-theme="light"] .auth-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(68,92,255,.07), transparent 27%),
    radial-gradient(circle at 87% 38%, rgba(255,59,63,.07), transparent 25%),
    linear-gradient(180deg, #f7f8fa, #eef1f6);
}

.auth-header .nav-wrap { min-height: 74px; }
.auth-home-link { color: var(--muted); }
.auth-main { position: relative; min-height: calc(100vh - 132px); display: grid; align-items: center; padding: 58px 0 70px; }
.auth-main::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  right: -300px;
  top: -90px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 50%;
  box-shadow: 0 0 0 75px rgba(255,255,255,.009), 0 0 0 150px rgba(255,255,255,.006);
  pointer-events: none;
}
.auth-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.88fr) minmax(390px,.72fr); align-items: center; gap: clamp(48px,8vw,118px); }
.auth-intro { max-width: 610px; }
.auth-intro h1 { margin: 15px 0 20px; font-size: clamp(3rem,6vw,5.45rem); line-height: .94; letter-spacing: -.065em; }
.auth-intro > p { max-width: 575px; margin: 0; color: var(--muted); font-size: 1.06rem; line-height: 1.75; }
.auth-features { display: grid; gap: 11px; margin-top: 34px; }
.auth-features > div { display: grid; grid-template-columns: 37px minmax(0,1fr); align-items: center; gap: 13px; }
.auth-features span { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(255,59,63,.19); border-radius: 12px; background: rgba(255,59,63,.07); color: #ff8c8f; font-size: .63rem; font-weight: 900; }
.auth-features p { margin: 0; color: #c7cbd3; font-size: .9rem; line-height: 1.45; }
:root[data-theme="light"] .auth-features p { color: #555d6a; }

.auth-card { position: relative; overflow: hidden; padding: clamp(24px,4vw,38px); border-radius: 30px; }
.auth-card::before { content: ''; position: absolute; top: -90px; right: -90px; width: 210px; height: 210px; border-radius: 50%; background: var(--red); filter: blur(76px); opacity: .13; pointer-events: none; }
.auth-card::after { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,91,95,.8),transparent); }
.auth-form { position: relative; z-index: 1; }
.auth-form[hidden] { display: none; }
.auth-form-head { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; align-items: start; margin-bottom: 27px; }
.auth-form-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: linear-gradient(135deg,var(--red),#ff674d); box-shadow: 0 12px 28px rgba(255,59,63,.22); font-size: 1.1rem; font-weight: 900; }
.auth-form-head h2 { margin: 0 0 6px; font-size: 1.65rem; letter-spacing: -.035em; }
.auth-form-head p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.auth-field { display: grid; gap: 8px; margin-top: 17px; color: #d7dae0; font-size: .82rem; font-weight: 750; }
:root[data-theme="light"] .auth-field { color: #303642; }
.auth-field > span:first-child { display: flex; justify-content: space-between; gap: 10px; }
.auth-field em { color: var(--muted); font-size: .7rem; font-style: normal; font-weight: 500; }
.auth-field input {
  width: 100%;
  min-height: 49px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  transition: border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.auth-field input:hover { border-color: rgba(255,255,255,.16); }
.auth-field input:focus { border-color: rgba(255,72,76,.62); box-shadow: 0 0 0 4px rgba(255,59,63,.1); background: rgba(255,255,255,.05); }
:root[data-theme="light"] .auth-field input { background: rgba(20,24,32,.025); }
:root[data-theme="light"] .auth-field input:hover { border-color: rgba(20,24,32,.2); }
.auth-field small { color: var(--muted); font-size: .69rem; font-weight: 500; }
.password-control { position: relative; display: block !important; }
.password-control input { padding-right: 48px; }
.password-toggle { position: absolute; top: 5px; right: 5px; width: 39px; height: 39px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: .9rem; }
.password-toggle:hover { background: rgba(255,255,255,.055); color: var(--text); }
.auth-consent { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: start; margin-top: 19px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.auth-consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--red); }
.auth-consent a { color: #ff8c8f; text-decoration: underline; text-underline-offset: 3px; }
.register-turnstile { display:grid; justify-items:center; gap:10px; margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }
.register-turnstile[hidden] { display:none; }
.register-turnstile > span { width:100%; color:var(--muted); font-size:.72rem; font-weight:700; }
.register-turnstile iframe { max-width:100%; }
.auth-status { min-height: 21px; margin: 16px 0 3px; color: #ff9d9f; font-size: .78rem; line-height: 1.45; }
.auth-status.is-success { color: #9cebb3; }
.auth-submit { min-height: 51px; border: 0; }
.auth-submit:disabled { cursor: wait; opacity: .65; transform: none; }
.auth-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 20px; color: var(--muted); font-size: .8rem; }
.auth-switch button { padding: 0; border: 0; background: transparent; color: #ff8c8f; font: inherit; font-weight: 750; }
.auth-switch button:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-secure-note { position: relative; z-index: 1; display: flex; justify-content: center; gap: 7px; margin: 25px 0 0; padding-top: 19px; border-top: 1px solid var(--line); color: #747b88; font-size: .69rem; text-align: center; }

.auth-footer { padding: 20px 0 24px; color: #737a87; font-size: .72rem; text-align: center; }
.auth-footer p { margin:0; }
.auth-footer a { color:inherit; font-weight:750; text-decoration:none; transition:color .2s ease; }
.auth-footer a:hover { color:#ff8c8f; }

html.auth-totp-open,html.auth-totp-open body { overflow:hidden; }
.auth-totp-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:22px; }
.auth-totp-modal[hidden] { display:none; }
.auth-totp-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(4,5,8,.78); backdrop-filter:blur(14px); }
.auth-totp-card { position:relative; width:min(440px,100%); overflow:hidden; padding:31px; border-radius:26px; box-shadow:0 35px 110px rgba(0,0,0,.58); }
.auth-totp-card::before { content:''; position:absolute; top:-90px; right:-75px; width:190px; height:190px; border-radius:50%; background:var(--red); filter:blur(72px); opacity:.16; pointer-events:none; }
.auth-totp-card:focus { outline:none; }
.auth-totp-eyebrow { display:block; margin-bottom:18px; color:#ff8c8f; font-size:.63rem; font-weight:850; letter-spacing:.15em; }
.auth-totp-icon { display:grid; width:48px; height:48px; place-items:center; margin-bottom:17px; border:1px solid rgba(255,59,63,.22); border-radius:15px; background:rgba(255,59,63,.09); color:#ff8c8f; font-weight:900; }
.auth-totp-card h2 { margin:0 0 9px; font-size:1.62rem; letter-spacing:-.035em; }
.auth-totp-card > p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.6; }
.auth-totp-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:10px; margin-top:8px; }
.auth-totp-actions .btn { min-height:49px; }
:root[data-theme="light"] .auth-totp-backdrop { background:rgba(231,235,242,.78); }

.profile-main { min-height: calc(100vh - 132px); padding: 64px 0 80px; }
.profile-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 37px; }
.profile-hero > div { max-width: 820px; }
.profile-hero h1 { margin: 12px 0 13px; font-size: clamp(2.45rem,5vw,4.6rem); line-height: .98; letter-spacing: -.055em; }
.profile-hero h1 span { color: var(--red); }
.profile-formatted-name { display:block; overflow-wrap:anywhere; }
.profile-formatted-name > span { display:inline; }
.profile-hero p { max-width: 670px; margin: 0; color: var(--muted); line-height: 1.65; }
.profile-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }
.profile-card { position: relative; overflow: hidden; padding: 25px; border-radius: 25px; }
.profile-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.profile-card-head > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: rgba(255,59,63,.09); color: var(--red); font-size: .61rem; font-weight: 900; }
.profile-card-head h2 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
.profile-identity { grid-column: span 7; }
.profile-server { grid-column: span 5; }
.profile-security { grid-column: span 4; }
.profile-wallet { grid-column: span 8; }
.profile-modes { grid-column: span 12; }
.profile-identity-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; align-items:center; }
.profile-skin-stage { position:relative; width:190px; height:250px; overflow:hidden; border:1px solid rgba(255,59,63,.2); border-radius:22px; background:radial-gradient(circle at 50% 30%,rgba(255,59,63,.13),transparent 55%),rgba(255,255,255,.025); }
.profile-skin-stage::after { content:''; position:absolute; left:22px; right:22px; bottom:16px; height:18px; border-radius:50%; background:rgba(0,0,0,.36); filter:blur(8px); }
.profile-skin-stage canvas { position:relative; z-index:2; display:block; width:190px; height:250px; opacity:0; transition:opacity .25s ease; }
.profile-skin-stage.has-skin canvas { opacity:1; }
.profile-skin-fallback { position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:rgba(255,255,255,.82); font-size:3.2rem; font-weight:900; }
.profile-skin-stage.has-skin .profile-skin-fallback { display:none; }
.profile-identity-details { min-width:0; }
.profile-player { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.profile-avatar { width: 58px; height: 58px; flex: 0 0 58px; border: 1px solid rgba(255,59,63,.24); border-radius: 17px; color: #fff; font-size: 1.45rem; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.profile-player strong,.profile-player small { display: block; }
.profile-player strong { margin-bottom: 5px; font-size: 1.16rem; }
.profile-player small { color: var(--muted); }
.profile-facts { margin:22px 0 0; }
.profile-facts div { min-width: 0; }
.profile-account-fact { display:block; }
.profile-date-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:22px; padding-top:19px; border-top:1px solid var(--line); }
.profile-facts dt { margin-bottom: 6px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.profile-facts dd { overflow: hidden; margin: 0; color: #dfe2e7; font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.profile-date-facts dd { overflow:visible; line-height:1.42; text-overflow:clip; white-space:normal; }
.profile-date-relative { color:var(--muted); font-weight:600; white-space:nowrap; }
:root[data-theme="light"] .profile-facts dd { color: #323843; }
.profile-player small { display:flex; flex-wrap:wrap; align-items:center; gap:0; line-height:1.45; }
.profile-player small > span { display:inline; }
.profile-server-status { display: flex; align-items: center; gap: 10px; margin: 7px 0 21px; color: var(--muted); font-size: .88rem; }
.profile-server-status i,.profile-security-state i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #747b88; box-shadow: none; }
.profile-server-status.is-online { color: #a8f2be; }
.profile-server-status.is-online i,.profile-security-state.is-enabled i { background: var(--green); box-shadow: 0 0 13px rgba(103,226,138,.66); }
.profile-ip { width: 100%; min-height: 83px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); color: var(--text); text-align: left; transition: border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.profile-ip:hover,.profile-ip:focus-within { border-color: rgba(255,59,63,.28); background: rgba(255,59,63,.045); }
.profile-ip-primary { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0; border:0; background:transparent; color:var(--text); text-align:left; cursor:copy; }
.profile-ip-primary:focus-visible { outline:2px solid rgba(255,91,95,.55); outline-offset:5px; border-radius:5px; }
.profile-ip-primary:hover strong,.profile-ip-primary:focus-visible strong { text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:4px; }
.profile-ip small,.profile-ip strong { display: block; }
.profile-ip small { margin-bottom: 5px; color: var(--muted); font-size: .59rem; letter-spacing: .12em; }
.profile-ip strong { font-size: 1.1rem; }
.profile-ip b { color: #ff8c8f; font-size: .7rem; white-space: nowrap; }
.profile-ip .server-alternates-title { display:block; margin:0 0 2px; color:var(--muted); font-size:.63rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.profile-ip .alternate-ip span { display:inline; margin:0; color:inherit; font:inherit; letter-spacing:0; }
.profile-security > p { color: var(--muted); font-size: .85rem; line-height: 1.62; }
.profile-security-state { display: flex; align-items: center; gap: 9px; margin-top: 23px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); color: #c5cad3; font-size: .76rem; font-weight: 700; }
:root[data-theme="light"] .profile-security-state { color: #4e5664; }
.profile-wallet-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.profile-wallet-summary > div { min-width:0; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }
.profile-wallet-summary small,.profile-wallet-summary strong { display:block; }
.profile-wallet-summary small { margin-bottom:7px; color:var(--muted); font-size:.65rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.profile-wallet-summary strong { overflow:hidden; color:#f4f6f9; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
:root[data-theme="light"] .profile-wallet-summary strong { color:#242a35; }
.profile-privilege { margin-top:13px; padding:15px 16px; border:1px solid var(--line); border-radius:16px; background:radial-gradient(circle at 0 0,rgba(255,59,63,.07),transparent 56%),rgba(255,255,255,.02); }
.profile-privilege-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.profile-privilege-head span { color:var(--muted); font-size:.72rem; }
.profile-privilege-head strong { font-size:.94rem; }
.profile-privilege-track { height:9px; overflow:hidden; margin:12px 0 8px; border-radius:999px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.12) calc(100% / 14 - 2px),transparent calc(100% / 14 - 2px),transparent calc(100% / 14)); }
.profile-privilege-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#aeb4c2,#ffd65a 25%,#76de81 46%,#72dff1 65%,#f5aa38 85%,#7b3bd4); transition:width .45s ease; }
.profile-privilege > small { color:var(--muted); font-size:.7rem; }
.profile-placeholder-line { display: grid; grid-template-columns: .7fr 1fr .45fr; gap: 8px; margin-top: 28px; }
.profile-placeholder-line i { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.055); }
.profile-placeholder-line i::after { content: ''; display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),#ff674d); opacity: .52; }
.profile-mode-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.profile-mode { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.022); }
.profile-mode-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: rgba(255,59,63,.08); color: #ff8c8f; }
.profile-mode strong,.profile-mode small { display: block; }
.profile-mode strong { margin-bottom: 4px; font-size: .83rem; }
.profile-mode small { color: var(--muted); font-size: .67rem; }
.profile-mode-lock { color: #626976; letter-spacing: .04em; }

@media (max-width: 920px) {
  .auth-layout { grid-template-columns: 1fr; max-width: 680px; }
  .auth-intro { text-align: center; }
  .auth-intro > p { margin-inline: auto; }
  .auth-features { width: min(440px,100%); margin-inline: auto; text-align: left; }
  .profile-identity,.profile-server,.profile-security,.profile-wallet { grid-column: span 6; }
  .profile-modes { grid-column: span 12; }
  .profile-identity-layout { grid-template-columns:150px minmax(0,1fr); }
  .profile-skin-stage,.profile-skin-stage canvas { width:150px; }
}

@media (max-width: 650px) {
  .auth-main { padding: 39px 0 52px; }
  .auth-layout { gap: 35px; }
  .auth-intro h1 { font-size: clamp(2.45rem,13vw,3.45rem); }
  .auth-intro > p { font-size: .94rem; }
  .auth-card { padding: 24px 18px; border-radius: 24px; }
  .auth-home-link span:last-child { display: none; }
  .auth-home-link { width: 40px; padding: 0; }
  .profile-main { padding-top: 42px; }
  .profile-hero { align-items: flex-start; flex-direction: column; }
  .profile-hero .btn { align-self: stretch; }
  .profile-identity,.profile-server,.profile-security,.profile-wallet,.profile-modes { grid-column: span 12; }
  .profile-identity-layout { grid-template-columns:1fr; }
  .profile-skin-stage { margin-inline:auto; }
  .profile-mode-list { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .auth-features > div { grid-template-columns: 33px minmax(0,1fr); }
  .auth-features span { width: 33px; height: 33px; }
  .auth-form-head { grid-template-columns: 38px minmax(0,1fr); }
  .auth-form-mark { width: 38px; height: 38px; }
  .profile-card { padding: 21px 17px; }
  .profile-wallet-summary { grid-template-columns:1fr; }
  .profile-date-facts { gap:13px; }
  .profile-date-facts dt { font-size:.59rem; }
  .profile-date-facts dd { font-size:.72rem; }
  .profile-ip-primary { align-items: flex-start; flex-direction: column; }
  .auth-totp-card { padding:25px 19px; border-radius:22px; }
  .auth-totp-actions { grid-template-columns:1fr; }
}