.account { max-width: 680px; margin: 52px auto 90px; padding: 0 22px; color: #12364a; }
.account--wide { max-width: 1180px; }
.account h1, .account h2, .account h3 { color: #12364a; }
.account h1 { margin-bottom: 24px; }
.account form { display: grid; gap: 16px; }
.account label { display: grid; gap: 7px; color: #274b5d; font-weight: 600; }
.account input, .account textarea { width: 100%; padding: 12px 14px; border: 1px solid #b9cbd2; border-radius: 11px; background: #fff; color: #12364a; font: inherit; box-sizing: border-box; }
.account textarea { resize: vertical; line-height: 1.5; }
.account input:focus, .account textarea:focus { outline: 3px solid #d7ebe6; border-color: #3a8f82; }
.account input:disabled { background: #f2f5f5; color: #60747b; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 48px; }
.password-field__toggle { position: absolute; right: 8px; top: 50%; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #3a8f82; cursor: pointer; transform: translateY(-50%); }
.password-field__toggle:hover, .password-field__toggle:focus-visible { background: #eaf3f3; }
.account .btn { border: 0; cursor: pointer; justify-self: start; }
.account .hint { color: #53677b; }
.account .message { padding: 14px 18px; border-radius: 12px; background: #eaf3f3; }
.account .message.error { background: #fff0e8; }
.account .links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }

.cab-profile-card { display: grid; grid-template-columns: auto minmax(0,1fr) 190px; align-items: center; gap: 24px; padding: 28px; border: 1px solid #d5e1de; border-radius: 24px; background: radial-gradient(circle at 88% 5%, #d9ece6, transparent 31%), linear-gradient(145deg,#f8faf9,#eef5f2); box-shadow: 0 24px 48px -40px #153e4d; }
.cab-avatar { display: grid; width: 82px; height: 82px; place-items: center; border-radius: 24px; background: linear-gradient(145deg,#2f8b7e,#12364a); color: #fff; font: 700 1.45rem/1 var(--sans); box-shadow: 0 18px 30px -22px #12364a; }
.cab-profile-copy > small, .cab-section-title small, .cab-secret-section > div > small, .public-profile-head > div > small { color: #658087; font: 700 .66rem/1.2 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.cab-profile-copy h1 { margin: 5px 0 4px; font-size: clamp(1.55rem,3vw,2.25rem); }
.cab-profile-copy p { margin: 0; color: #60767c; }
.cab-profile-actions { display: flex; align-items: center; gap: 17px; margin-top: 17px; font: 600 .75rem/1.2 var(--sans); }
.cab-profile-actions .btn { padding: 10px 17px; }
.cab-profile-progress { padding: 17px; border: 1px solid #d3dfdc; border-radius: 16px; background: #fff; }
.cab-profile-progress > b { display: block; font: 600 1.55rem/1 var(--serif); }
.cab-profile-progress > span, .cab-profile-progress > small { display: block; margin-top: 5px; color: #687f85; font: 600 .65rem/1.25 var(--sans); }
.cab-profile-progress > div { height: 7px; overflow: hidden; margin-top: 12px; border-radius: 99px; background: #dce6e3; }
.cab-profile-progress i, .cab-course-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#efa576,#398d80); }

.cab-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 18px 0 38px; }
.cab-stats > div { padding: 18px 20px; border: 1px solid #dbe4e2; border-radius: 16px; background: #fff; }
.cab-stats b { display: block; font: 600 1.45rem/1 var(--serif); }
.cab-stats span { display: block; margin-top: 5px; color: #6a8086; font: 600 .68rem/1.2 var(--sans); }
.cab-section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 34px 0 15px; }
.cab-section-title h2 { margin: 4px 0 0; font-size: clamp(1.4rem,2.5vw,1.9rem); }
.cab-section-title > a, .cab-section-title > span { color: #5f777e; font: 600 .72rem/1.3 var(--sans); }

.cab-courses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.cab-course { position: relative; padding: 22px; border: 1px solid #d7e2df; border-radius: 18px; background: #fff; }
.cab-course > small { color: #568078; font: 700 .62rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.cab-course h3 { margin: 8px 0 8px; font-size: 1.15rem; }
.cab-course p { margin: 0; color: #687f85; font: 500 .72rem/1.3 var(--sans); }
.cab-course-progress { height: 7px; overflow: hidden; margin: 16px 48px 17px 0; border-radius: 99px; background: #e1e9e7; }
.cab-course > b { position: absolute; right: 22px; top: 83px; color: #267c70; font: 700 .72rem/1 var(--sans); }
.cab-course > a { display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid #e2e9e7; font: 700 .72rem/1 var(--sans); text-decoration: none; }

.cab-achievement-groups { display: grid; gap: 14px; }
.cab-achievement-group { padding: 20px; border: 1px solid #d9e3e0; border-radius: 18px; background: #fff; }
.cab-achievement-group h3 { margin: 0 0 14px; font-size: 1rem; }
.cab-achievements { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.cab-achievement { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; min-height: 76px; padding: 11px; border: 1px solid #d8e1df; border-radius: 13px; background: #f6f8f7; filter: grayscale(1); opacity: .58; }
.cab-achievement.is-earned { border-color: #dec999; background: linear-gradient(145deg,#fffaf0,#f7eedb); filter: none; opacity: 1; }
.cab-achievement.is-secret { border-color: #b7d8d0; background: linear-gradient(145deg,#edf8f5,#e2f0ed); }
.cab-achievement > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #e2e8e6; font: normal 800 .9rem/1 var(--sans); }
.cab-achievement.is-earned > i { background: #f0cd87; color: #664d20; }
.cab-achievement.is-secret > i { background: #5b998f; color: #fff; }
.cab-achievement b { display: block; font: 700 .68rem/1.2 var(--sans); }
.cab-achievement small { display: block; margin-top: 4px; color: #6d8085; font: 500 .58rem/1.25 var(--sans); }
.cab-achievement::after { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 10; width: max-content; max-width: 230px; padding: 8px 10px; border-radius: 9px; background: #12364a; color: #fff; content: attr(data-rarity); font: 600 .62rem/1.3 var(--sans); opacity: 0; pointer-events: none; transform: translate(-50%,5px); transition: .16s; }
.cab-achievement:hover::after, .cab-achievement:focus::after { opacity: 1; transform: translate(-50%,0); }
.cab-secret-section { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 24px; margin-top: 18px; padding: 24px; border: 1px solid #bddbd4; border-radius: 20px; background: radial-gradient(circle at 10% 20%,#d9eee8,transparent 48%),#f4f9f7; }
.cab-secret-section h2 { margin: 5px 0 8px; font-size: 1.35rem; }
.cab-secret-section p { margin: 0; color: #61797f; font: 500 .72rem/1.45 var(--sans); }
.cab-logout { margin-top: 35px; }

.profile-heading, .public-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.profile-heading h1, .public-profile-head h1 { margin: 7px 0 5px; }
.profile-heading p, .public-profile-head p { margin: 0; color: #62787f; }
.profile-heading > div:first-child > a { font: 600 .72rem/1 var(--sans); }
.profile-form { gap: 15px !important; }
.profile-form > section, .public-profile-about { padding: 24px; border: 1px solid #d8e2df; border-radius: 19px; background: #fff; }
.profile-form h2, .public-profile-about h2 { margin: 0 0 18px; font-size: 1.2rem; }
.profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.profile-wide { grid-column: 1 / -1; }
.profile-form label > small { color: #73868b; font: 500 .6rem/1.35 var(--sans); }
.profile-switches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.profile-switches label { display: grid; grid-template-columns: auto 1fr; align-items: start; padding: 15px; border: 1px solid #d8e2df; border-radius: 13px; background: #f6f9f8; cursor: pointer; }
.profile-switches input { width: 18px; height: 18px; margin: 1px 3px 0 0; accent-color: #337f74; }
.profile-switches b, .profile-switches small { display: block; }
.profile-switches small { margin-top: 4px; }
.profile-submit { display: flex; align-items: center; gap: 20px; padding-top: 6px; }
.profile-security { margin-top: 25px; }
.public-profile-head { justify-content: flex-start; padding: 28px; border: 1px solid #d4e1dd; border-radius: 23px; background: linear-gradient(145deg,#f7faf9,#eaf4f0); }
.public-profile-about p { color: #526c74; line-height: 1.65; white-space: pre-line; }
.public-profile-about dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin: 20px 0 0; }
.public-profile-about dt { color: #71858a; font: 700 .67rem/1.4 var(--sans); text-transform: uppercase; }
.public-profile-about dd { margin: 0; color: #34545f; white-space: pre-line; }
.public-achievements { grid-template-columns: repeat(3,minmax(0,1fr)); }
.empty-state { padding: 25px; border-radius: 16px; background: #f3f7f5; color: #687e84; }
.cab-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-upload, .account-panel { margin: 18px 0; padding: 22px; border: 1px solid #d8e2df; border-radius: 18px; background: #fff; }
.avatar-upload label, .account-panel label { display: grid; gap: 6px; }
.avatar-upload small, .account-panel small { color: #71858a; }
.account-panel h2 { margin: 0 0 14px; font-size: 1.25rem; }
.account-panel form { display: grid; gap: 14px; margin: 16px 0; }
.account-panel input:not([type=checkbox]), .account-panel textarea { width: 100%; padding: 11px 13px; border: 1px solid #b9cbd2; border-radius: 10px; font: inherit; }
.account-panel .account-checkbox { display: flex; align-items: center; gap: 10px; }
.account-panel .account-checkbox input { width: 18px; height: 18px; accent-color: #337f74; }
.account-panel .btn { justify-self: start; }
.account-panel details { margin-top: 15px; }
.account-panel summary { cursor: pointer; font-weight: 700; }
.account-list { display: grid; gap: 10px; margin-top: 14px; }
.account-list article { display: grid; gap: 5px; padding: 14px; border: 1px solid #e0e8e5; border-radius: 12px; }
.account-list article p { margin: 0; white-space: pre-line; }
.account-continue { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 26px; }
.account-continue small { color: #6a8086; }
.study-head { margin-bottom: 24px; }
.study-head h1 { margin: 8px 0; }
.study-head p { max-width: 680px; color: #62787f; }
.study-head .btn { margin-top: 10px; }
.study-lists { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.study-lists ul, .study-history { padding-left: 20px; }
.study-lists li, .study-history li { margin: 9px 0; }
.study-lists small, .study-history small { display: block; color: #71858a; }
.cab-note-body { white-space: pre-wrap; line-height: 1.55; }
.editorial-page { max-width: 790px; margin: 0 auto; }
.editorial-page h1 { margin: 16px 0; }
.editorial-page h2 { margin: 28px 0 10px; }
.editorial-page article p { line-height: 1.7; }
.editorial-page .account-list h2 { margin: 0; font-size: 1.25rem; }
.editorial-byline { color: #48636b; font-weight: 700; }
.editorial-lead { font-size: 1.15rem; color: #49666b; }
.editorial-crumbs { color: #55716c; font-size: .9rem; line-height: 1.5; }
.editorial-crumbs a { color: #174f46; }
.editorial-page h3 { margin: 20px 0 7px; }
.editorial-page section > p { line-height: 1.7; }
.editorial-toc { margin: 25px 0; padding: 18px 22px; border-radius: 16px; background: #f0f6f3; }
.editorial-toc ol { margin: 10px 0 0; padding-left: 22px; line-height: 1.7; }
.editorial-points { padding-left: 24px; line-height: 1.7; }
.editorial-points li + li { margin-top: 8px; }
.editorial-example { margin: 22px 0; padding: 17px 21px; border-left: 4px solid #277969; border-radius: 0 12px 12px 0; background: #f0f6f3; }
.editorial-example p { margin-bottom: 0; }
.editorial-faq { padding: 4px 0 15px; border-bottom: 1px solid #d8e5df; }
.cac-tool { margin: 26px 0 32px; padding: 24px; border: 1px solid #cfe0da; border-radius: 18px; background: #f8fbfa; }
.cac-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.cac-fields label:last-child { grid-column: 1 / -1; }
.cac-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cac-reset { border: 0; background: transparent; color: #175a4f; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cac-reset:focus-visible { outline: 3px solid #3a8f82; outline-offset: 3px; }
.cac-results { margin-top: 28px; padding-top: 6px; border-top: 1px solid #d5e3dc; }
.cac-results h2 { margin-top: 22px; }
.cac-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.cac-metrics > div { padding: 16px; border: 1px solid #d9e7e1; border-radius: 13px; background: #fff; }
.cac-metrics__primary { border-color: #a7cfc0 !important; background: #eaf5ef !important; }
.cac-metrics dt, .cac-rates dt { color: #4d6870; line-height: 1.35; }
.cac-metrics dd { margin: 10px 0 0; font: 700 1.35rem/1.25 var(--serif); }
.cac-formula { color: #4d6870; font-size: .92rem; }
.cac-rates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.cac-rates > div { padding: 12px 16px; border-left: 3px solid #4c9b87; background: #eef6f1; }
.cac-rates dd { margin: 4px 0 0; font-weight: 700; }
.cac-advice { padding: 15px 18px; border-radius: 12px; background: #eaf3f3; }
.cac-next { padding: 18px 22px; border-radius: 16px; background: #f0f6f3; }
.tool-checklist { display: grid; gap: 10px; }
.tool-checklist label { display: flex; align-items: start; gap: 12px; padding: 13px 15px; border: 1px solid #d9e7e1; border-radius: 12px; background: #fff; cursor: pointer; }
.tool-checklist input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #277969; }
.tool-checklist small { display: block; margin-bottom: 3px; color: #5d7a76; font-size: .74rem; }
.not-found { max-width: 720px; margin: 8vh auto; padding: 38px; border: 1px solid #d8e2df; border-radius: 22px; background: #fff; }
.not-found h1 { margin: 4px 0 12px; }
.not-found p { line-height: 1.6; }
.not-found__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.account-panel select { width: 100%; padding: 11px 13px; border: 1px solid #b9cbd2; border-radius: 10px; background: #fff; font: inherit; }

@media (max-width: 900px) { .cab-achievements { grid-template-columns: repeat(2,minmax(0,1fr)); } .cab-secret-section { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .account { margin-top: 28px; padding: 0 16px; }
  .cab-profile-card { grid-template-columns: auto 1fr; padding: 20px; }
  .cab-profile-progress { grid-column: 1 / -1; }
  .cab-courses, .profile-grid, .profile-switches { grid-template-columns: 1fr; }
  .study-lists { grid-template-columns: 1fr; }
  .profile-wide { grid-column: auto; }
  .cab-stats { grid-template-columns: 1fr; }
  .cab-section-title { align-items: flex-start; flex-direction: column; }
  .public-achievements { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cac-fields, .cac-metrics { grid-template-columns: 1fr; }
  .cac-fields label:last-child { grid-column: auto; }
}
@media (max-width: 480px) { .cab-achievements, .public-achievements { grid-template-columns: 1fr; } .cab-profile-card { grid-template-columns: 1fr; } .cab-avatar { width: 64px; height: 64px; border-radius: 19px; } }