.account-view { max-width: 1400px; padding: 30px 30px 38px; }
.account-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.account-page-heading h2 { font-size: 24px; font-weight: 650; margin-top: 3px; }
.account-page-heading p { font-size: 12px; color: var(--muted); margin-top: 5px; }
.account-page-heading > button { gap: 8px; font-size: 12px; }
.account-hero { display: flex; align-items: center; gap: 22px; padding: 31px 30px; border: 1px solid var(--settings-border); border-radius: 16px; background: linear-gradient(110deg, var(--settings-surface), var(--theme-faint)); }
.account-home-avatar { display: grid; place-items: center; width: 76px; height: 76px; flex-shrink: 0; border-radius: 23px; background: linear-gradient(145deg, var(--accent), var(--theme-strong)); color: #fff; font-size: 32px; font-weight: 550; }
.account-identity { min-width: 0; flex: 1; }
.account-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-name-row h1 { font-size: 25px; font-weight: 650; overflow-wrap: anywhere; line-height: 1.4; }
.account-membership-badge { display: inline-block; padding: 3px 8px; border: 1px solid var(--settings-border); border-radius: 6px; background: var(--settings-control); color: var(--muted); font-size: 10px; white-space: nowrap; }
.account-membership-badge.is-pro { border-color: #d6a95455; background: #e7a42718; color: #b77b17; }
.account-identity > p { margin: 8px 0; font-size: 13px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; }
.account-profile-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--quiet); }
.account-profile-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.account-profile-status.is-ready { color: #379677; }
.account-hero > button { flex-shrink: 0; gap: 9px; font-size: 12px; padding-inline: 17px; }
.account-hero > button .icon { width: 16px; height: 16px; }
.account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.account-stats > button { display: flex; align-items: center; gap: 15px; padding: 20px; min-width: 0; border: 1px solid var(--settings-border); border-radius: 12px; background: var(--settings-surface); color: var(--ink); text-align: left; }
.account-stats > button:hover { border-color: var(--theme-line); background: var(--theme-faint); }
.account-stat-icon { display: grid; place-items: center; height: 41px; width: 41px; flex-shrink: 0; border-radius: 12px; color: var(--accent); background: var(--theme-soft); }
.account-stats strong, .account-stats small { display: block; }
.account-stats strong { font-size: 22px; font-weight: 600; line-height: 1.4; }
.account-stats small { margin-top: 3px; font-size: 11px; color: var(--muted); }
.account-stats > button > .icon { width: 14px; height: 14px; color: var(--quiet); margin-left: auto; }
.account-overview-grid, .account-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-details-grid { margin-top: 16px; }
.account-view .settings-card { padding: 21px; }
.account-resume-card .settings-card-heading > button { margin-left: auto; gap: 5px; font-size: 11px; color: var(--accent); white-space: nowrap; }
.account-resume-card .settings-card-heading > button .icon { height: 14px; width: 14px; }
.account-resume-preview { color: var(--muted); font-size: 13px; line-height: 1.9; margin: 14px 0 22px; min-height: 76px; overflow-wrap: anywhere; }
.account-resume-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--settings-border); padding-top: 13px; }
.account-resume-footer > span { font-size: 11px; color: var(--quiet); }
.account-resume-footer > button, .account-data-card > button { font-size: 11px; color: var(--accent); gap: 5px; }
.account-resume-footer > button .icon, .account-data-card > button .icon { width: 14px; height: 14px; }
.account-membership .settings-card-heading > .icon { fill: #e7a427; color: #e7a427; }
.account-data-note { color: var(--muted); line-height: 1.9; font-size: 12px; padding: 19px 0 10px; }
.account-entry .account-portrait { display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), var(--theme-strong)); color: #fff; border: 0; font-size: 18px; font-weight: 550; }
.account-entry[aria-current="page"] { background: var(--theme-soft); border-radius: 10px; padding-block: 8px; }
.profile-home-link { gap: 6px; margin-bottom: 18px; color: var(--accent); }
.profile-home-link .icon { width: 15px; height: 15px; }
/* After moving personal sections, settings has two top cards and three smaller cards. */
.settings-secondary-grid { grid-template-columns: 1.15fr 1fr 1fr; }
.settings-secondary-grid .settings-card:first-child .settings-card-heading { padding-right: 0; }
@media (max-width: 1250px) { .settings-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .account-view { padding: 23px 19px 30px; } .account-overview-grid, .account-details-grid, .settings-secondary-grid { grid-template-columns: 1fr; } .account-hero { padding: 25px 23px; flex-wrap: wrap; } .account-hero > button { margin-left: 98px; } }
@media (max-width: 600px) { .account-view { padding: 20px 14px 28px; } .account-page-heading { gap: 10px; margin-bottom: 17px; } .account-page-heading h2 { font-size: 22px; } .account-page-heading > button { font-size: 11px; padding: 7px 10px; } .account-page-heading > button .icon { width: 15px; height: 15px; } .account-hero { padding: 23px 18px; gap: 15px; } .account-home-avatar { width: 55px; height: 55px; border-radius: 17px; font-size: 26px; } .account-identity { flex-basis: calc(100% - 70px); } .account-name-row h1 { font-size: 22px; } .account-identity > p { font-size: 12px; } .account-hero > button { margin-left: 0; width: 100%; } .account-stats { gap: 8px; margin-block: 13px; } .account-stats > button { flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px 10px; } .account-stat-icon { width: 33px; height: 33px; border-radius: 9px; } .account-stat-icon .icon { width: 17px; height: 17px; } .account-stats strong { font-size: 18px; } .account-stats > button > .icon { display: none; } .account-view .settings-card { padding: 18px; } .account-resume-card .settings-card-heading { flex-wrap: wrap; } .account-resume-card .settings-card-heading > button { font-size: 10px; } .account-stats small { font-size: 10px; } }