.account-page { background: var(--toolkit-field); }
.account-shell { width: min(1180px,calc(100% - 112px)); margin-inline: auto; padding: 192px 0 100px; min-height: calc(100svh - var(--footer-height)); }
.signin-shell { width: min(1120px,calc(100% - 112px)); display: grid; align-items: center; padding-block: 176px 88px; }
.signin-panel { --card-fill: url(#signin-surface); --card-line: #4a6848; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); min-height: 510px; }
.signin-panel > .panel-surface > .panel-fill { filter: drop-shadow(0 16px 30px #0003); }
.signin-panel > .panel-surface > .panel-accent { stroke: #86b45c; }
.signin-brand { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 35px; padding: 58px 55px; }
.signin-brand::before { content: ''; position: absolute; inset: 25px 10px; z-index: -1; background: radial-gradient(ellipse at 48% 46%,#74c43e1c,transparent 65%); pointer-events: none; }
.signin-emblem { width: min(240px,100%); }
.signin-emblem img { width: 100%; height: auto; filter: drop-shadow(0 14px 20px #0005); }
.signin-wordmark { color: #bdd2b3; font: 500 18px/1.2 var(--heading); letter-spacing: 2px; }
.signin-seam { position: absolute; top: 40px; bottom: 40px; right: 0; width: 36px; height: calc(100% - 80px); fill: none; stroke: #365238; stroke-width: 1; pointer-events: none; }
.signin-content { align-self: center; min-width: 0; padding: 57px 60px 57px 65px; }
.signin-content .eyebrow { font-size: 10px; color: #99bd83; margin-bottom: 24px; }
.signin-content h1 { font-size: clamp(54px,5.5vw,74px); line-height: .99; letter-spacing: -3.5px; }
.signin-description { margin: 24px 0 32px; color: #b5c6af; font-size: 13px; }
.signin-panel .commerce-action { min-height: 66px; padding: 20px 26px 20px 33px; }
.signin-first-visit { margin-top: 24px; max-width: 290px; color: #91a98a; font-size: 10px; line-height: 1.9; }
.auth-status { margin-top: 18px; color: #a6c29b; font-size: 12px; line-height: 1.8; }
.auth-status:empty { display: none; }
.auth-status.is-error { color: #e0b7a7; }
.auth-retry { min-height: 44px; margin-top: 12px; padding: 10px 17px; border: 1px solid #527348; border-radius: 8px; background: #17281b; font-size: 12px; }
.auth-retry:hover { border-color: #86b463; }
.account-heading { margin-bottom: 28px; }
.account-heading h1 { font-size: clamp(48px,5.5vw,76px); line-height: 1.05; letter-spacing: -3.5px; }
.account-layout { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.7fr); gap: 22px; }
.account-profile-panel,.account-orders { display: flex; flex-direction: column; padding: 28px 36px; }
.account-profile-panel { --card-fill: url(#account-profile-surface); --card-line: #506c4c; align-self: start; }
.account-profile-panel > .panel-surface > .panel-accent,.account-orders > .panel-surface > .panel-accent { stroke: #8bb665; }
.account-profile-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.account-label { color: #a9c39b; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.account-connected { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #4c6640; border-radius: 999px; padding: 4px 9px; background: #172b19; color: #c0d9b3; font-size: 10px; line-height: 1.5; }
.account-connected > span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px #5acc0255; }
.account-identity { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 17px; min-width: 0; }
.account-avatar { width: 76px; aspect-ratio: 1; padding: 4px; border: 1px solid #6a8a5c; border-radius: 19px; background: #1a3020; box-shadow: 0 8px 20px #0004; }
.account-avatar img,.account-avatar > span { width: 100%; height: 100%; border-radius: 14px; }
.account-avatar img { object-fit: cover; }
.account-avatar > span { display: grid; place-items: center; background: #203922; color: #d9ebc9; font: 500 38px/1 var(--heading); }
.account-identity h2 { max-width: 100%; font-size: clamp(26px,3vw,37px); line-height: 1.12; letter-spacing: -.8px; overflow-wrap: anywhere; }
.account-details { display: grid; margin: 22px 0 16px; border-top: 1px solid #354a36; }
.account-details > div { display: grid; grid-template-columns: minmax(75px,.75fr) minmax(0,1.25fr); align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid #354a36; }
.account-details dt { color: #a7bca0; font-size: 11px; }
.account-details dd { margin: 0; color: #e3ecdf; font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.account-email-action { align-self: flex-start; margin-top: 0; }
#account-id { font-variant-numeric: tabular-nums; }
.account-sign-out { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; padding: 7px 0; background: none; border: 0; color: #c1d5b6; font-size: 12px; transition: color .2s ease; }
.account-sign-out .icon { width: 17px; height: 17px; }
.account-sign-out:is(:hover,:focus-visible) { color: #a7e66f; }
.account-sign-out:disabled { opacity: .55; cursor: wait; }
.account-orders { --card-fill: #111e16; --card-line: #425c44; min-width: 0; }
.account-orders-heading { margin-bottom: 24px; }
.account-orders-heading h2 { margin: 9px 0 10px; font-size: clamp(31px,4vw,50px); letter-spacing: -.05em; }
.account-orders-heading p:last-child,.account-orders-empty p,.account-order-description p { color: #aabfa6; font-size: 13px; }
.account-orders-status { color: #aabfa6; font-size: 13px; }
.account-orders-status.is-error,.account-order-feedback.is-error { color: #e0b7a7; }
.account-orders-error-icon,.account-orders-feedback > .panel-surface { display: none; }
.account-orders-feedback:has(.account-orders-status.is-error) {
  --card-fill: url(#account-orders-error-surface);
  --card-line: #536047;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 17px 28px;
}
.account-orders-feedback:has(.account-orders-status.is-error) > .panel-surface { display: block; }
.account-orders-feedback > .panel-surface > .panel-accent { stroke: #9ba672; }
.account-orders-feedback:has(.account-orders-status.is-error) > .account-orders-error-icon {
  --card-fill: #2a2b1e;
  --card-line: #655a42;
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  color: #e0b7a7;
}
.account-orders-error-icon > .panel-surface > .panel-accent { stroke: #a38662; }
.account-orders-error-icon .icon,.account-orders-retry .icon { width: 18px; height: 18px; }
.account-orders-feedback .account-orders-retry {
  width: auto;
  min-height: 46px;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  white-space: nowrap;
}
.account-orders-empty {
  --card-fill: #101a13;
  --card-line: #3d5340;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 18px;
  margin-block-start: auto;
  padding: 33px;
}
.account-orders-empty > .panel-surface > .panel-accent { stroke: #5f8354; }
.account-orders-emblem { --card-fill: #192a1c; --card-line: #4d6849; display: grid; place-items: center; width: 46px; aspect-ratio: 1; color: #bdd7ae; }
.account-orders-emblem .icon { width: 21px; height: 21px; }
.account-orders-empty h3,.account-order-description h3 { font-size: 21px; letter-spacing: -.45px; line-height: 1.25; overflow-wrap: anywhere; }
.account-orders-empty p,.account-order-description p { margin-top: 5px; }
.account-orders-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.account-checkout-activity { margin-top: 22px; }
.account-checkout-activity h3 { margin-bottom: 10px; font-size: 20px; }
.account-checkout-activity ul { margin: 0; padding: 0; list-style: none; }
.account-checkout-activity a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid #354a36; font-size: 13px; transition: color .2s; }
.account-checkout-activity a span:last-child { color: #a9c39b; }
.account-checkout-activity a:is(:hover,:focus-visible) { color: #bce29d; }
.account-order {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(190px,1.2fr);
  align-items: start;
  gap: 18px;
  padding: 18px;
  border: 1px solid #3d5440;
  border-radius: 12px;
  background: #121d16;
}
.account-order-description h3 { font-size: 18px; }
.account-order-description p { font-size: 12px; }
.account-order-license { min-width: 0; }
.account-order-caption { display: block; margin-bottom: 5px; color: #aabfa6; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.account-order-license code { display: block; min-height: 37px; padding: 8px 10px; border: 1px solid #425841; border-radius: 6px; background: #0b140e; color: #d8efcc; font-size: 12px; overflow-wrap: anywhere; }
.account-order-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.account-order-button { min-height: 44px; padding: 8px 11px; border: 1px solid #496449; border-radius: 7px; background: #17271b; color: #dfecda; font-size: 11px; transition: background .2s ease, border-color .2s ease; }
.account-order-button:is(:hover,:focus-visible) { background: #223a25; border-color: #85ae6c; }
.account-order-feedback { margin-top: 7px; color: #bdd9b3; font-size: 11px; }
.account-order-feedback:empty { margin-top: 0; }
.account-order-redemption { margin-top: 12px; color: #b8cbb4; font-size: 11px; line-height: 1.6; }
.account-order-redemption a { color: #c7e5b4; text-decoration: underline; text-underline-offset: 3px; }
.account-order-redemption a:hover { color: var(--green); }
.account-actions { display: grid; grid-column: 1/-1; gap: 12px; }
.account-shortcuts { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr)); gap: inherit; }
.account-route { --card-fill: #111d15; --card-line: #425b42; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 18px 24px 18px 38px; font-size: 13px; transition: color .2s ease; }
.account-route:is([href="/products"],[href="/discord"]) { padding-inline: clamp(44px,4vw,50px) clamp(30px,3vw,38px); }
.account-route .icon { color: #a5d57f; width: 17px; height: 17px; }
.account-route:is(:hover,:focus-visible) { color: #bce29d; }
.account-access { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 24px; }
.account-access:has(> :not([hidden])) + .account-layout:not([hidden]) { margin-top: 26px; }
.account-guest { --card-fill: #142219; --card-line: #4c6b49; padding: 36px 38px; }
.account-guest h2 { font-size: 30px; letter-spacing: -1px; margin-bottom: 28px; }
.account-guest .commerce-action { padding-left: 44px; padding-right: 36px; }
.account-notice { --card-fill: #132017; --card-line: #49634e; display: flex; flex-direction: column; justify-content: center; padding: 36px 38px; }
.account-notice-heading { display: flex; align-items: center; gap: 15px; }
.account-notice-heading > .icon { width: 25px; height: 25px; color: #a9c68d; }
.account-notice h2 { font-size: 25px; letter-spacing: -.7px; line-height: 1.2; }
.account-notice .auth-status { margin-top: 15px; color: #b9cbb1; }
.account-notice.is-error { --card-fill: #16231a; --card-line: #647450; }
.account-notice.is-error > .panel-surface > .panel-accent { stroke: #b3b77d; }
.account-notice.is-error .account-notice-heading > .icon { color: #d0c295; }
.account-notice .account-notice-retry { margin-top: 23px; min-height: 50px; font-size: 11px; }
@media (max-width: 1100px) {
  .account-shell { width: calc(100% - 80px); }
  .signin-content { padding-inline: 42px; }
  .signin-brand { padding-inline: 45px; }
  .account-layout { grid-template-columns: minmax(270px,.8fr) minmax(0,1.6fr); gap: 18px; }
  .account-profile-panel,.account-orders { padding-inline: 28px; }
}
@media (max-width: 860px) {
  .account-shell { width: calc(100% - 64px); padding-top: 164px; }
  .signin-panel { grid-template-columns: 1fr; min-height: 0; }
  .signin-brand { flex-direction: row; justify-content: space-between; gap: 25px; padding: 33px 42px 30px; }
  .signin-emblem { width: 105px; }
  .signin-seam { display: none; }
  .signin-brand::after { content: ''; position: absolute; bottom: 0; left: 42px; right: 42px; height: 1px; background: linear-gradient(90deg,#4a6848,transparent); }
  .signin-content { padding: 37px 42px 43px; }
  .signin-content .eyebrow { margin-bottom: 18px; }
  .signin-content h1 { font-size: 58px; letter-spacing: -2.8px; }
  .signin-content h1 br { display: none; }
  .signin-description { margin: 18px 0 28px; }
  .signin-first-visit { max-width: none; margin-top: 20px; }
  .account-layout { grid-template-columns: 1fr; }
  .account-identity { gap: 19px; }
  .account-details { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 15px; }
  .account-details > div { grid-template-columns: 1fr; gap: 4px; }
  .account-details dd { text-align: left; }
  .account-access { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 680px) {
  .account-shell { width: calc(100% - 2 * var(--mobile-gutter,16px)); padding: calc(var(--scroll-offset) + 12px) 0 60px; }
  .signin-shell { align-items: start; }
  .signin-brand { padding: 24px 24px 19px; gap: 16px; }
  .signin-brand::after { left: 24px; right: 24px; }
  .signin-emblem { width: 64px; flex-shrink: 0; }
  .signin-wordmark { font-size: 14px; letter-spacing: 1px; }
  .signin-content { padding: 24px 24px 30px; }
  .signin-content .eyebrow { font-size: 10px; margin-bottom: 12px; }
  .signin-content h1 { font-size: clamp(37px,8vw,52px); letter-spacing: -1.6px; }
  .signin-description { font-size: 13px; margin: 15px 0 22px; }
  .signin-panel .commerce-action { min-height: 54px; padding: 14px 22px 14px 27px; font-size: 12px; gap: 12px; }
  .signin-panel .commerce-action > span { overflow-wrap: anywhere; }
  .signin-panel .commerce-action .icon { width: 17px; height: 17px; }
  .signin-first-visit,.auth-status { font-size: 12px; }
  .account-heading { margin-bottom: 25px; }
  .account-heading .eyebrow { margin-bottom: 12px; }
  .account-heading h1 { font-size: clamp(38px,8vw,49px); letter-spacing: -1.8px; }
  .account-profile-panel,.account-orders { padding: 26px 22px; }
  .account-identity { gap: 14px; }
  .account-avatar { width: 68px; border-radius: 15px; }
  .account-avatar > span { font-size: 30px; }
  .account-avatar img,.account-avatar > span { border-radius: 10px; }
  .account-identity h2 { font-size: 25px; }
  .account-details { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
  .account-details > div { grid-template-columns: minmax(84px,.75fr) minmax(0,1.25fr); gap: 9px; }
  .account-details dd { text-align: right; }
  .account-email-action { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; }
  .account-orders-heading { margin-bottom: 18px; }
  .account-orders-feedback:has(.account-orders-status.is-error) { grid-template-columns: auto minmax(0,1fr); padding: 14px; gap: 10px 12px; }
  .account-orders-feedback .account-orders-retry { grid-column: 2; justify-self: start; }
  .account-orders-empty { gap: 12px; padding: 22px; }
  .account-orders-emblem { width: 38px; }
  .account-order { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
  .account-order-button { flex: 1 1 auto; }
  .account-route,.account-route:is([href="/products"],[href="/discord"]) { min-height: 54px; padding: 13px 24px 13px 30px; }
  .account-guest,.account-notice { padding: 31px 27px; }
  .account-guest h2 { font-size: 27px; }
  .account-notice h2 { font-size: 23px; }
  .account-notice-heading { gap: 12px; }
}
@media (max-width: 460px) {
  .account-shortcuts { grid-template-columns: 1fr; }
}

.account-page:has(> .account-shell[data-auth-page="account"]) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.account-shell[data-auth-page="account"] {
  flex: 1 0 auto;
  min-height: 0;
  padding-block: calc(var(--scroll-offset) + 12px) clamp(18px,3svh,28px);
}