.account-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 78% 4%, rgba(226, 105, 38, .12), transparent 31rem),
    linear-gradient(145deg, #0c0805 0%, #080604 56%, #100b07 100%);
}

.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 16px; }
[hidden] { display: none !important; }

.account-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 5vw, 80px);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 6, 4, .72);
  backdrop-filter: blur(18px);
}
.account-header > p { margin: 0; color: rgba(255,255,255,.4); font-size: 9px; letter-spacing: .24em; }
.account-home-link { justify-self: end; color: var(--muted); font-size: 11px; letter-spacing: .08em; transition: color .2s; }
.account-home-link:hover { color: var(--gold); }

.account-main { width: min(1480px, calc(100vw - 48px)); min-height: calc(100svh - 206px); margin: 0 auto; padding: clamp(58px, 7vw, 112px) 0; }
.account-status { margin-bottom: 28px; padding: 14px 18px; border: 1px solid rgba(247,202,115,.28); background: rgba(247,202,115,.07); color: var(--cream); font-size: 13px; line-height: 1.6; }
.account-status[data-tone="error"] { border-color: rgba(235,108,73,.45); background: rgba(206,78,37,.1); }
.account-status[data-tone="success"] { border-color: rgba(170,211,152,.32); background: rgba(100,147,78,.1); }

.account-entry { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: clamp(60px, 10vw, 180px); align-items: end; min-height: 610px; padding: 8vh max(0px, 3vw); }
.account-entry-copy { max-width: 850px; }
.account-entry h1 { margin: 28px 0 30px; font-size: clamp(54px, 7vw, 106px); line-height: .98; letter-spacing: -.058em; font-weight: 310; }
.account-entry h1 span { color: var(--cream); }
.account-entry-copy > p:not(.section-kicker):not(.account-availability) { max-width: 720px; color: var(--muted); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.85; }
.account-entry code { color: var(--cream); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
.email-access { max-width: 720px; margin-top: 40px; }
.email-auth-form { display: grid; gap: 12px; }
.email-auth-form label { color: var(--cream); font-size: 12px; }
.email-auth-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.email-auth-row input {
  min-width: 0;
  height: 53px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(255,255,255,.025);
  padding: 0 16px;
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.email-auth-row input:focus { border-color: var(--gold); }
.email-auth-row .account-primary { min-width: 126px; }
.email-challenge-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.email-challenge-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.email-challenge-heading strong { color: var(--cream); font-weight: 500; overflow-wrap: anywhere; }
.email-challenge-heading .account-text-action { flex: 0 0 auto; }
.resend-code { width: max-content; padding-left: 0; }
.code-timing { min-height: 1.6em; margin: -42px 0 0 112px; color: rgba(255,255,255,.42); font-size: 11px; line-height: 1.6; }
.account-availability { margin: 18px 0 0; color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.6; }
.session-retry { padding-left: 0; }
.account-entry-note { max-width: 460px; padding: 30px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,246,225,.045), rgba(255,246,225,.012)); }
.account-entry-note > span, .contract-notice > span, .credits-boundary > span { color: var(--orange); font-size: 9px; letter-spacing: .2em; }
.account-entry-note p { margin: 28px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.account-primary, .account-secondary, .account-text-action, .sidebar-sync, .account-nav button, .saved-remove {
  border: 0;
  cursor: pointer;
}
.account-primary, .account-secondary { min-height: 47px; padding: 0 21px; border-radius: 999px; font-size: 12px; letter-spacing: .04em; transition: transform .2s, background .2s, border-color .2s; }
.account-primary { background: var(--gold); color: var(--ink); font-weight: 620; }
.account-secondary { border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); color: var(--cream); }
.account-text-action { padding: 13px 8px; background: none; color: var(--gold); font-size: 12px; }
.account-primary:hover:not(:disabled), .account-secondary:hover:not(:disabled) { transform: translateY(-2px); }
button:disabled { cursor: not-allowed; opacity: .38; }

.account-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(42px, 6vw, 100px); align-items: start; }
.account-sidebar { position: sticky; top: 32px; }
.account-person { display: flex; align-items: center; gap: 15px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.account-person > span { display: grid; place-items: center; width: 46px; aspect-ratio: 1; border: 1px solid rgba(247,202,115,.35); border-radius: 50%; background: rgba(247,202,115,.08); color: var(--gold); font-size: 17px; }
.account-person strong, .account-person small { display: block; max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-person strong { color: var(--cream); font-size: 14px; font-weight: 520; }
.account-person small { margin-top: 6px; color: var(--muted); font-size: 11px; }
.account-nav { display: grid; padding: 20px 0; border-bottom: 1px solid var(--line); }
.account-nav button { position: relative; padding: 13px 0 13px 18px; background: none; color: rgba(255,255,255,.48); text-align: left; font-size: 13px; transition: color .2s; }
.account-nav button::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: transparent; transition: width .2s, background .2s; }
.account-nav button:hover, .account-nav button.active { color: var(--cream); }
.account-nav button.active::before { width: 10px; background: var(--orange); }
.sidebar-sync { margin-top: 20px; padding: 8px 0; background: none; color: var(--gold); font-size: 11px; letter-spacing: .06em; }

.account-panels { min-width: 0; }
.account-panel { min-height: 650px; }
.panel-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; padding-bottom: clamp(40px, 5vw, 70px); border-bottom: 1px solid var(--line-strong); }
.account-panel h2 { max-width: 790px; margin: 20px 0 0; color: var(--paper); font-size: clamp(42px, 5vw, 76px); line-height: 1.07; letter-spacing: -.05em; font-weight: 320; }
.panel-intro { max-width: 750px; margin: 38px 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.panel-footnote { max-width: 780px; margin: 30px 0 0; color: rgba(255,255,255,.4); font-size: 12px; line-height: 1.7; }
.email-link-control { max-width: 690px; margin-top: 28px; }
.email-link-control > .email-auth-form { margin-top: 18px; padding: 24px; border: 1px solid var(--line); background: rgba(255,246,225,.018); }
.status-badge, .count-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--gold); font-size: 9px; letter-spacing: .13em; }
.count-badge { min-width: 30px; padding: 0 9px; font-size: 11px; }

.profile-form { display: grid; gap: 30px; max-width: 690px; margin-top: 48px; }
.profile-form label { display: grid; gap: 11px; color: var(--cream); font-size: 12px; }
.profile-form input { width: 100%; height: 53px; border: 1px solid var(--line-strong); border-radius: 0; background: rgba(255,255,255,.025); padding: 0 16px; color: var(--paper); font: inherit; font-size: 15px; outline: none; }
.profile-form input:focus { border-color: var(--gold); }
.profile-form small { color: rgba(255,255,255,.4); font-size: 11px; }
.input-prefix { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); }
.input-prefix:focus-within { border-color: var(--gold); }
.input-prefix i { padding-left: 16px; color: var(--muted); font-style: normal; }
.input-prefix input { border: 0; background: none; }
.profile-form .account-primary { width: max-content; margin-top: 8px; }

.account-list { display: grid; gap: 10px; }
.account-list-item { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; min-height: 90px; padding: 20px 22px; border: 1px solid var(--line); background: rgba(255,246,225,.018); }
.account-list-item strong, .account-list-item small { display: block; }
.account-list-item strong { color: var(--cream); font-size: 14px; font-weight: 500; }
.account-list-item small { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.connected-badge { color: #b9d8aa; font-size: 9px; letter-spacing: .14em; }
.saved-remove { padding: 9px 0 9px 12px; background: none; color: var(--gold); font-size: 11px; }
.empty-state { padding: 38px 22px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.7; }
.list-more { width: max-content; margin-top: 14px; }

.contract-notice, .credits-boundary, .feature-notice { max-width: 820px; margin-top: 52px; padding: 32px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,246,225,.04), rgba(255,246,225,.01)); }
.feature-notice { margin-top: 0; border-color: rgba(235,108,73,.28); background: rgba(206,78,37,.06); }
.contract-notice h3, .feature-notice h3 { margin: 24px 0 16px; color: var(--cream); font-size: clamp(24px, 2.5vw, 36px); line-height: 1.25; font-weight: 360; }
.feature-notice h3 { font-size: 22px; }
.contract-notice > span, .feature-notice > span { color: var(--orange); font-size: 9px; letter-spacing: .2em; }
.contract-notice p, .credits-boundary p, .feature-notice p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.creator-state { max-width: 850px; margin-top: 48px; }
.creator-card { padding: clamp(28px, 4vw, 50px); border: 1px solid var(--line); background: radial-gradient(circle at 90% 5%, rgba(226,105,38,.1), transparent 20rem), rgba(255,246,225,.02); }
.creator-card > span { color: var(--orange); font-size: 9px; letter-spacing: .2em; }
.creator-card h3 { margin: 24px 0 14px; color: var(--cream); font-size: clamp(28px, 3vw, 44px); font-weight: 350; }
.creator-card p { max-width: 680px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.creator-card .creator-handoff-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: rgba(255,255,255,.48); font-size: 12px; }
.creator-card .account-primary { display: inline-flex; align-items: center; margin-top: 18px; }

.account-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 42px 0 0; border-top: 1px solid var(--line); }
.account-facts div { min-width: 0; padding: 25px 20px 25px 0; border-bottom: 1px solid var(--line); }
.account-facts div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.account-facts dt { color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.account-facts dd { margin: 12px 0 0; overflow-wrap: anywhere; color: var(--cream); font-size: 13px; line-height: 1.55; }
.credits-boundary { margin-top: 38px; }
.credits-boundary p { margin-top: 20px; }
.management-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.management-actions a { margin-left: auto; color: var(--gold); font-size: 12px; }

.account-footer { width: min(1480px, calc(100vw - 48px)); min-height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: rgba(255,255,255,.38); font-size: 10px; }
.account-footer p { margin: 0; }
.account-footer p:last-child { display: flex; gap: 20px; }
.account-footer a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .account-header { grid-template-columns: 1fr auto; }
  .account-header > p { display: none; }
  .account-entry { grid-template-columns: 1fr; min-height: auto; padding: 5vh 0; }
  .account-entry-note { max-width: none; }
  .account-shell { grid-template-columns: 1fr; gap: 50px; }
  .account-sidebar { position: static; }
  .account-nav { grid-template-columns: repeat(6, max-content); overflow-x: auto; padding: 15px 0; }
  .account-nav button { padding: 12px 16px; }
  .account-nav button::before { display: none; }
  .account-nav button:first-child { padding-left: 0; }
}

@media (max-width: 600px) {
  .account-header { min-height: 73px; padding: 0 20px; }
  .account-home-link { font-size: 9px; }
  .account-main, .account-footer { width: calc(100vw - 40px); }
  .account-main { min-height: calc(100svh - 183px); padding: 52px 0 80px; }
  .account-entry { gap: 45px; padding: 2vh 0; }
  .account-entry h1 { font-size: clamp(48px, 14vw, 70px); }
  .email-auth-row { grid-template-columns: 1fr; }
  .email-auth-row button { width: 100%; }
  .email-challenge-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .email-challenge-heading .account-text-action { padding-left: 0; }
  .code-timing { margin: -8px 0 0; }
  .account-entry-note { padding: 24px; }
  .account-panel { min-height: 560px; }
  .panel-heading { padding-bottom: 38px; }
  .account-panel h2 { font-size: 42px; }
  .status-badge { display: none; }
  .account-list-item { grid-template-columns: 1fr; gap: 8px; }
  .saved-remove { width: max-content; padding-left: 0; }
  .contract-notice, .credits-boundary, .feature-notice { padding: 24px; }
  .account-facts { grid-template-columns: 1fr; }
  .account-facts div:nth-child(even) { padding-left: 0; border-left: 0; }
  .management-actions { align-items: stretch; flex-direction: column; }
  .management-actions button { width: 100%; }
  .management-actions a { margin: 10px 0 0; text-align: center; }
  .account-footer { min-height: 110px; flex-direction: column; justify-content: center; gap: 16px; }
}