.account-page { width: 100%; max-width: 1120px; margin-inline: auto; padding-block: 48px 80px; font-family: var(--ap-ui-font); }
.account-hero { position: relative; display: flex; align-items: center; gap: 22px; min-height: 180px; padding: 30px 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 26px; background: radial-gradient(circle at 0 0, rgba(204,102,255,.22), transparent 38%), radial-gradient(circle at 100% 0, rgba(255,42,127,.12), transparent 34%), linear-gradient(135deg, rgba(23,16,43,.98), rgba(7,4,13,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.38); }
.account-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 15px); pointer-events: none; }
.account-avatar, .account-identity, .account-logout-form { position: relative; z-index: 1; }
.account-avatar { width: 112px; height: 112px; flex: 0 0 112px; padding: 4px; border-radius: 34px; background: linear-gradient(135deg,#cc66ff,#ff2a7f); box-shadow: 0 16px 36px rgba(204,102,255,.20); }
.account-avatar img { width: 100%; height: 100%; border-radius: 30px; object-fit: cover; background: #100b18; }
.account-identity { min-width: 0; }
.account-kicker { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(200,145,255,.25); border-radius: 999px; background: rgba(130,75,255,.20); color: #f1c8ff; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.account-identity h1 { margin: 9px 0 2px; overflow-wrap: anywhere; font-size: clamp(26px,4vw,42px); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; }
.account-identity p { margin: 0; color: var(--ap-muted); font-size: 13px; font-weight: 700; }
.account-logout-form { margin-left: auto; }
.account-logout-button { min-height: 42px; padding: 0 18px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(255,255,255,.055); color: #fff; font-family: inherit; font-size: 11px; font-weight: 900; letter-spacing: .7px; cursor: pointer; }
.account-logout-button:hover { background: rgba(255,42,80,.13); border-color: rgba(255,42,80,.35); }
.account-notice { margin: 18px 0; padding: 13px 16px; border: 1px solid; border-radius: 14px; font-size: 13px; font-weight: 700; }
.account-notice.is-success { color: #b9f7b0; border-color: rgba(97,218,89,.25); background: rgba(97,218,89,.10); }
.account-notice.is-error { color: #ffb2c1; border-color: rgba(255,80,112,.25); background: rgba(255,80,112,.10); }
.account-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }
.account-stats > div { min-height: 96px; display: flex; flex-direction: column; justify-content: center; padding: 18px 20px; border: 1px solid var(--ap-border); border-radius: 18px; background: rgba(255,255,255,.045); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.account-stats strong { color: #fff; font-size: 18px; font-weight: 900; }
.account-stats span { margin-top: 4px; color: var(--ap-muted); font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.account-panel { padding: 26px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: radial-gradient(circle at 100% 0, rgba(204,102,255,.09), transparent 34%), rgba(12,7,21,.82); box-shadow: 0 18px 46px rgba(0,0,0,.25); }
.account-panel-heading { margin-bottom: 20px; }
.account-panel-heading > span { color: var(--ap-accent); font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.account-panel-heading h2 { margin: 5px 0 5px; font-size: 22px; font-weight: 900; line-height: 1.2; letter-spacing: -.03em; }
.account-panel-heading p { margin: 0; color: #bdb5cc; font-size: 12px; font-weight: 500; line-height: 1.55; }
.account-form { display: grid; gap: 8px; }
.account-form label { color: #bcb7cf; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.account-form input:not([type=hidden]) { width: 100%; min-height: 49px; margin-bottom: 6px; padding: 0 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: #050913; color: #fff; font: 500 15px/1.4 var(--ap-ui-font); outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.account-form input:focus { border-color: rgba(204,102,255,.48); box-shadow: 0 0 0 3px rgba(204,102,255,.10); }
.account-field-hint { display: block; margin: -4px 2px 8px; color: #817a99; font-size: 10px; font-weight: 600; line-height: 1.5; }
.account-readonly { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0 15px; border: 1px solid rgba(255,255,255,.06); border-radius: 15px; background: rgba(255,255,255,.025); }
.account-readonly span { color: #817a99; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.account-readonly strong { overflow: hidden; color: #d7d0e3; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-primary-button, .account-secondary-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: 16px; font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: .5px; text-decoration: none; cursor: pointer; }
.account-primary-button { background: linear-gradient(90deg,#9c3dff,#ff2d6d); color: #fff; box-shadow: 0 12px 28px rgba(255,45,109,.18); }
.account-secondary-button { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.055); color: #fff; }
.account-access-card { width: min(520px,100%); margin: 28px auto 0; padding: 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 28px; background: radial-gradient(circle at 0 0,rgba(204,102,255,.18),transparent 36%),linear-gradient(180deg,rgba(20,13,35,.98),rgba(7,4,13,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.38); text-align: center; }
.account-access-card h1 { margin: 13px 0 8px; font-size: clamp(27px,5vw,38px); line-height: 1.1; font-weight: 900; letter-spacing: -.04em; }
.account-access-card > p { max-width: 400px; margin: 0 auto 22px; color: #bdb5cc; font-size: 13px; line-height: 1.55; }
.account-access-form { text-align: left; }
.account-access-actions { display: grid; gap: 10px; }
.account-text-link { display: inline-block; margin-top: 18px; color: #dfa5ff; font-size: 12px; font-weight: 800; }
@media (max-width:760px) {
  .account-page { padding-block: 22px 52px; }
  .account-hero { align-items: flex-start; flex-wrap: wrap; padding: 22px 18px; border-radius: 22px; }
  .account-avatar { width: 78px; height: 78px; flex-basis: 78px; border-radius: 24px; }
  .account-avatar img { border-radius: 20px; }
  .account-identity { flex: 1; }
  .account-identity h1 { font-size: 25px; }
  .account-logout-form { width: 100%; }
  .account-logout-button { width: 100%; }
  .account-stats { grid-template-columns: 1fr; gap: 8px; }
  .account-stats > div { min-height: 76px; }
  .account-grid { grid-template-columns: 1fr; }
  .account-panel { padding: 22px 18px; }
  .account-access-card { margin-top: 0; padding: 28px 20px; border-radius: 22px; }
}