@layer components {
  .account-page { padding-block: 54px 90px; min-height: 70vh; }
  .account-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:34px; }
  .account-heading h1 { font-size:clamp(36px,5vw,58px); margin:10px 0 12px; }
  .account-heading p:not(.eyebrow) { color:var(--muted); }
  .account-tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:32px; }
  .account-tabs a { display:flex; gap:10px; align-items:center; padding:14px 4px; border-bottom:3px solid var(--green); font-weight:650; color:var(--green); }
  .history-overview { display:grid; grid-template-columns:1.7fr 1fr; gap:24px; margin-bottom:48px; }
  .history-chart-card { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; padding:34px; border-radius:24px; background:var(--green); color:white; }
  .history-chart-card .eyebrow { color:var(--lime); }
  .history-chart-card h2 { font-size:30px; margin:12px 0; }
  .history-chart-card p:not(.eyebrow) { font-size:14px; color:#d1ded6; }
  .result-donut { width:205px; height:205px; padding:18px; border-radius:50%; background:conic-gradient(var(--lime) 0deg var(--passed-angle),#e4a38d var(--passed-angle) 360deg); box-shadow:0 0 0 8px #ffffff08; }
  .result-donut.is-empty { background:#ffffff26; }
  .result-donut>div { display:flex; width:100%; height:100%; border-radius:50%; background:var(--green); align-items:center; justify-content:center; flex-direction:column; }
  .result-donut strong { font-size:44px; line-height:1.2; letter-spacing:-.055em; }
  .result-donut span { font-size:12px; color:#d1ded6; }
  .chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; font-size:13px; }
  .chart-legend span { display:flex; gap:7px; align-items:center; }.chart-legend strong { margin-left:3px; }
  .legend-dot { display:inline-block; width:9px; height:9px; border-radius:50%; }.legend-dot.passed { background:var(--lime); }.legend-dot.failed { background:#e4a38d; }
  .chart-note { grid-column:1/-1; border-top:1px solid #ffffff26; padding-top:18px; }
  .history-metrics { display:grid; gap:12px; }.history-metrics section { position:relative; border:1px solid var(--line); border-radius:18px; padding:18px 20px 18px 68px; background:white; }
  .metric-icon { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; color:var(--green); background:var(--soft); font-size:22px; }
  .history-metrics .metric-icon { position:absolute; left:20px; top:20px; }.history-metrics strong { font-size:26px; line-height:1; }.history-metrics h3 { display:inline; font-size:15px; margin-left:10px; letter-spacing:0; }.history-metrics p { font-size:12px; color:var(--muted); margin-top:7px; }
  .history-list-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-bottom:24px; }.history-list-heading h2 { font-size:32px; margin-top:8px; }.history-list-heading label { display:flex; align-items:center; gap:12px; }.history-list-heading select { background:white; border:1px solid var(--line); border-radius:12px; padding:12px 32px 12px 14px; }
  .history-table-wrap { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:white; }.history-table { border-collapse:collapse; width:100%; text-align:left; font-size:14px; }.history-table th { background:var(--soft); padding:15px 22px; font-size:12px; font-weight:650; color:var(--muted); }.history-table td { padding:22px; border-top:1px solid var(--line); vertical-align:middle; }.history-table small { display:block; color:var(--muted); font-size:12px; margin-top:5px; }.history-date-cell { display:flex; align-items:center; gap:14px; }.history-table .history-category { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--soft); color:var(--green); font-weight:700; flex-shrink:0; }.history-view-link { font-weight:650; color:var(--green); white-space:nowrap; }.history-view-link span { margin-left:8px; }.history-pending-note { font-size:12px; }
  .outcome { display:inline-flex; border-radius:30px; padding:5px 11px; font-size:12px; font-weight:650; white-space:nowrap; }.outcome-passed { color:#22543c; background:#e2f3c9; }.outcome-failed { color:#963d28; background:#fae7df; }.outcome-learning { color:#305c73; background:#e7f1f7; }.outcome-neutral,.outcome-pending { color:var(--muted); background:var(--soft); }
  .history-empty,.account-login { background:white; border:1px solid var(--line); border-radius:24px; padding:48px; }.history-empty { text-align:center; }.history-empty h3 { margin:16px 0 10px; }.history-empty p { color:var(--muted); margin-bottom:24px; }
  .account-login { max-width:600px; margin:0 auto; }.account-login h2 { margin:22px 0 18px; }.account-login p { margin-bottom:20px; }.account-login form label { display:block; font-size:14px; font-weight:600; margin-bottom:7px; }.account-login form input:not([type=checkbox]) { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; }.account-login form input[type=submit] { background:var(--green); color:white; cursor:pointer; }.account-login .login-remember label { display:flex; align-items:center; gap:8px; }.account-login>.muted { font-size:13px; margin-top:24px; margin-bottom:0; }
  .history-detail-bar { display:flex; justify-content:space-between; gap:20px; margin:16px 0 28px; font-size:13px; }.account-page .result-hero h1 { font-size:clamp(30px,4vw,48px); }.account-page .result-hero { border-radius:24px; }.account-page .summary-pages { margin-block:30px; }.account-page .mistake-card details { margin-top:18px; }.account-page [aria-busy=true] { cursor:progress; }
}
@layer responsive {
  @media(max-width:1100px) { .history-overview { grid-template-columns:1fr; }.history-metrics { grid-template-columns:repeat(3,1fr); }.history-metrics h3 { display:block; margin:8px 0 0; } }
  @media(max-width:740px) {
    .account-page { padding-block:30px 55px; }.account-heading { align-items:flex-start; }.account-heading>.text-link { font-size:12px; white-space:nowrap; margin-top:12px; }.history-chart-card { padding:24px; gap:22px; }.history-chart-card h2 { font-size:25px; }.result-donut { width:150px; height:150px; padding:13px; }.result-donut strong { font-size:34px; }.history-metrics { grid-template-columns:1fr; }.history-metrics h3 { display:inline; margin-left:10px; }.history-list-heading { align-items:flex-start; flex-direction:column; }.history-list-heading select { max-width:230px; }.history-table thead { display:none; }.history-table,.history-table tbody { display:block; }.history-table tr { display:grid; grid-template-columns:1.2fr 1fr; gap:18px 12px; padding:20px; border-bottom:1px solid var(--line); }.history-table tr:last-child { border-bottom:0; }.history-table td { display:block; border:0; padding:0; min-width:0; }.history-table td:nth-child(even) { text-align:right; }.history-date-cell { align-items:flex-start; gap:8px; }.history-date-cell .history-category { width:30px; height:30px; border-radius:9px; font-size:13px; }.history-date-cell strong { font-size:12px; }.history-view-link { font-size:13px; }.account-login,.history-empty { padding:25px; }.history-detail-bar { flex-direction:column; gap:10px; }
  }
  @media(max-width:430px) { .history-chart-card { grid-template-columns:1fr; }.result-donut { width:185px; height:185px; margin:0 auto; }.chart-legend { margin-top:16px; }.history-chart-card h2 br { display:none; } }
}

@layer components {
  .account-registration { margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
  .account-registration p { font-size:14px; margin-bottom:12px; }
}

@layer components {
  .account-enrollment { display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:white; max-width:1060px; margin-inline:auto; }
  .enrollment-story { background:var(--green); color:white; padding:42px; display:flex; flex-direction:column; justify-content:center; }
  .enrollment-story .eyebrow { color:var(--lime); }.enrollment-story h2 { font-size:clamp(30px,3vw,40px); margin:24px 0 18px; }.enrollment-story>p:not(.eyebrow) { font-size:15px; color:#d5e1d9; }
  .enrollment-story ul { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:15px; font-size:14px; }.enrollment-story li { display:flex; align-items:center; gap:12px; }.enrollment-story li span { display:grid; place-items:center; width:23px; height:23px; background:#ffffff15; border-radius:50%; color:var(--lime); }
  .enrollment-art { position:relative; height:165px; display:grid; place-items:center; margin:30px 0 0; overflow:hidden; border-radius:24px; background:#ffffff08; }.enrollment-art .enrollment-car { width:180px; height:100px; color:var(--lime); z-index:1; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.enrollment-road { position:absolute; width:150%; height:58px; background:#ffffff09; transform:rotate(-20deg); }.enrollment-road::after { content:''; position:absolute; top:28px; width:100%; border-top:2px dashed #ffffff30; }.enrollment-art-check { position:absolute; right:20px; top:20px; width:32px; height:32px; display:grid; place-items:center; background:var(--lime); color:var(--green); border-radius:50%; font-weight:700; }
  .enrollment-form-card { padding:40px; }.enrollment-form-card h2 { font-size:34px; margin:20px 0 10px; }.enrollment-description { color:var(--muted); font-size:14px; margin-bottom:26px; }.registration-fields { display:grid; gap:18px; }.registration-field label { display:block; font-size:14px; font-weight:650; margin-bottom:7px; }.registration-field input { width:100%; min-width:0; padding:12px 14px; border:1px solid #cfd8cb; border-radius:10px; background:#fcfdfb; color:var(--ink); font-size:16px; }.registration-field input[aria-invalid=true] { border-color:#b35b3c; background:#fffaf7; }.registration-input-wrap { position:relative; }.registration-input-wrap:has(.password-visibility:not([hidden])) input { padding-right:70px; }.password-visibility { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--green); padding:8px; font-size:12px; font-weight:650; }.registration-field small { display:block; font-size:12px; color:var(--muted); margin-top:7px; }.registration-field-error { color:#963d28; font-size:12px; margin-top:7px; }.registration-errors { background:#fff1e9; color:#853c27; border:1px solid #edc4b3; border-radius:12px; padding:15px 18px; margin-bottom:22px; font-size:13px; }.registration-errors ul { margin:8px 0 0; padding-left:18px; }.registration-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }.registration-submit { width:100%; margin-top:26px; }.registration-login-link { text-align:center; font-size:14px; margin-top:20px; }.registration-login-link a { color:var(--green); font-weight:650; }.registration-privacy { font-size:12px; color:var(--muted); margin-top:20px; }.registration-privacy a { text-decoration:underline; }
}
@layer responsive {
  @media(max-width:850px) { .account-enrollment { grid-template-columns:1fr; max-width:600px; }.enrollment-story { padding:30px; order:2; }.enrollment-form-card { order:1; }.enrollment-art { display:none; }.enrollment-story h2 { margin:15px 0; font-size:30px; }.enrollment-story h2 br { display:none; }.enrollment-story ul { gap:10px; margin-top:20px; }.enrollment-form-card { padding:30px; } }
  @media(max-width:430px) { .account-enrollment { border-radius:18px; }.enrollment-story,.enrollment-form-card { padding:24px 20px; }.enrollment-form-card h2 { font-size:29px; }.enrollment-story h2 { font-size:27px; } }
}
@layer components {
  .authentication-options { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12px; margin-top:20px; }
  .authentication-remember { display:flex; align-items:center; gap:8px; cursor:pointer; }
  .authentication-options a { color:var(--green); font-weight:650; }
  .account-authentication .registration-errors { overflow-wrap:anywhere; }
}