.account-main { width: min(100% - 64px, 1220px); min-height: 68vh; margin: 0 auto; padding: 55px 0 100px; }
.account-heading { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 10px 0 37px; }
.account-heading h1 { margin-bottom: 15px; }
.account-heading__mark { width: 145px; height: 145px; flex: 0 0 auto; position: relative; display: grid; place-items: center; border: 1px solid rgba(166,255,223,.22); border-radius: 36px 10px 36px 10px; background: radial-gradient(circle at 35% 28%,rgba(166,255,223,.17),rgba(166,255,223,.02) 61%); transform: rotate(4deg); }
.account-heading__mark span { color: #a6ffdf; font: 700 72px/.9 "Space Grotesk",sans-serif; letter-spacing: -.1em; transform: rotate(-4deg); }
.account-heading__mark i { position: absolute; right: -11px; bottom: 17px; width: 26px; height: 1px; background: #a6ffdf; }
.account-heading__mark i:nth-of-type(2) { right: -11px; bottom: 24px; width: 17px; opacity: .65; }
.account-heading__mark i:nth-of-type(3) { right: -11px; bottom: 31px; width: 9px; opacity: .4; }
.account-panel { max-width: 900px; display: grid; grid-template-columns: 62px 1fr; gap: 22px; margin: 0 auto; padding: clamp(23px,4vw,42px); border: 1px solid rgba(166,255,223,.19); border-radius: 18px; background: linear-gradient(120deg,rgba(166,255,223,.07),rgba(255,255,255,.015) 50%),#10191e; box-shadow: 0 28px 70px rgba(0,0,0,.22); }
.account-panel[hidden], .account-signed-in[hidden] { display: none !important; }
.account-panel__icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(166,255,223,.28); border-radius: 15px; color: #a6ffdf; font-size: 23px; }
.account-panel .eyebrow { margin-bottom: 11px; }
.account-panel h2 { margin: 0 0 12px; font: 600 clamp(25px,3.2vw,36px)/1.05 "Space Grotesk",sans-serif; letter-spacing: -.06em; }
.account-panel > div:last-child > p:not(.eyebrow):not(.account-panel__privacy) { max-width: 680px; color: #a5b2af; font-size: 12px; line-height: 1.7; }
.account-panel .button { margin-top: 10px; }
.account-panel__privacy { max-width: 680px; margin: 17px 0 0; color: #71817d; font-size: 9px; line-height: 1.6; }
.account-signed-in { display: grid; gap: 24px; }
.account-profile { min-height: 100px; display: flex; align-items: center; gap: 15px; padding: 17px 20px; border: 1px solid rgba(228,245,242,.12); border-radius: 15px; background: #10191e; }
.account-profile__avatar { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(166,255,223,.3); border-radius: 17px 6px 17px 6px; color: #08211b; background: #a6ffdf; font: 700 13px "DM Mono",monospace; }
.account-profile__identity { min-width: 0; flex: 1; }
.account-profile__identity .eyebrow { margin-bottom: 6px; font-size: 8px; }
.account-profile__identity h2 { margin: 0; font: 600 20px "Space Grotesk",sans-serif; letter-spacing: -.04em; }
.account-profile__identity > p:last-child { margin: 3px 0 0; color: #a5b2af; font-size: 10px; overflow-wrap: anywhere; }
.account-signout, .account-clear { min-height: 36px; padding: 0 12px; border: 1px solid rgba(228,245,242,.16); border-radius: 8px; color: #d6e0dc; background: rgba(255,255,255,.025); font: 600 9px "DM Mono",monospace; cursor: pointer; }
.account-signout:hover, .account-clear:hover { border-color: rgba(166,255,223,.38); color: #a6ffdf; }
.account-history-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.account-history-heading .eyebrow { margin-bottom: 9px; font-size: 8px; }
.account-history-heading h2 { margin: 0 0 4px; font: 600 32px "Space Grotesk",sans-serif; letter-spacing: -.06em; }
.account-history-heading p:last-child { margin: 0; color: #8d9c97; font-size: 10px; }
.account-clear { color: #ffad8e; border-color: rgba(255,130,77,.23); }
.account-clear:hover { color: #ffc1aa; border-color: rgba(255,130,77,.5); }
.account-history-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; align-items: start; }
.account-history-card { min-width: 0; overflow: hidden; border: 1px solid rgba(228,245,242,.12); border-radius: 14px; background: #10191e; }
.account-history-card > header { min-height: 75px; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid rgba(228,245,242,.1); }
.account-history-card__icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(166,255,223,.16); border-radius: 10px; color: #a6ffdf; font-size: 17px; }
.account-history-card header h3 { margin: 0 0 4px; font: 600 13px "Space Grotesk",sans-serif; }
.account-history-card header p { margin: 0; color: #71817d; font-size: 9px; }
.account-activity-list, .account-study-list { padding: 5px 14px 10px; }
.account-activity-row { min-height: 55px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(228,245,242,.07); }
.account-activity-row:last-child { border-bottom: 0; }
.account-activity-row__icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #a6ffdf; background: rgba(166,255,223,.06); }
.account-activity-row__copy { min-width: 0; display: grid; gap: 4px; }
.account-activity-row__copy strong, .account-study-row strong { color: #dce6e2; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-activity-row__copy small, .account-study-row small { color: #71817d; font: 400 8px "DM Mono",monospace; }
.account-study-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; border-bottom: 1px solid rgba(228,245,242,.07); }
.account-study-row:last-child { border-bottom: 0; }
.account-study-row > div:first-child { min-width: 0; display: grid; gap: 5px; }
.account-study-row__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.account-study-row__actions a, .account-study-row__actions button { padding: 5px 7px; border: 0; color: #a6ffdf; background: transparent; font: 600 8px "DM Mono",monospace; cursor: pointer; }
.account-study-row__actions button { color: #ffad8e; }
.account-loading, .account-empty { margin: 0; padding: 19px 4px; color: #71817d; font-size: 10px; line-height: 1.55; }
.account-status { min-height: 18px; margin: 0; color: #a6ffdf; font-size: 10px; }
.account-status.is-error { color: #ffad8e; }
.account-footer { width: min(100% - 64px,1220px); margin: 0 auto; }
@media (max-width: 740px) {
  .account-main { width: calc(100% - 32px); padding: 33px 0 68px; }
  .account-heading { padding-bottom: 26px; }
  .account-heading h1 { font-size: clamp(43px,11vw,62px); }
  .account-heading__mark { width: 87px; height: 87px; border-radius: 24px 7px 24px 7px; }
  .account-heading__mark span { font-size: 43px; }
  .account-panel { grid-template-columns: 1fr; gap: 13px; }
  .account-panel__icon { width: 43px; height: 43px; }
  .account-history-layout { grid-template-columns: 1fr; }
  .account-history-heading { align-items: flex-start; flex-direction: column; }
  .account-footer { width: calc(100% - 32px); }
}
@media (max-width: 480px) {
  .account-heading__mark { display: none; }
  .account-profile { align-items: flex-start; padding: 13px; }
  .account-profile__avatar { width: 42px; height: 42px; }
  .account-profile__identity h2 { font-size: 17px; }
  .account-signout { margin-left: auto; }
  .account-study-row { align-items: flex-start; flex-direction: column; justify-content: center; padding: 11px 0; }
  .account-study-row__actions { align-self: flex-end; }
}
