/* ============================================================
   Account page — layout only.

   Every colour here now resolves to a site.css token, so this
   page themes with the rest of the site instead of carrying its
   own palette. The --account-* names are kept as ALIASES rather
   than deleted: they say what the colour is FOR on this page,
   and re-pointing them was a smaller, safer change than editing
   ~120 call sites by hand.

   site.css must be linked BEFORE this file.
   ============================================================ */
:root {
  --account-blue: var(--blue);          /* headings, icons, links — TEXT tone */
  --account-blue-dark: var(--solid-hover);
  --account-blue-soft: var(--sky);
  --account-orange: var(--orange-text);
  --account-ink: var(--ink);
  --account-muted: var(--muted);
  --account-line: var(--line);
  --account-surface: var(--paper);
  --account-page: var(--app-bg);
  --account-success: var(--green-ink);
  --account-warning: var(--orange-ink);
  --account-danger: var(--red-ink);
  --account-shadow: var(--sh-4);

  /* The printed certificate is a DOCUMENT, not a UI surface: it is meant
     to come out of a printer as ink on paper, and the dialog shows a
     preview of exactly that. So these five stay the same in both themes
     on purpose — a dark certificate would print as a black rectangle. */
  --cert-paper: #fffdf7;
  --cert-edge: #b47a18;
  --cert-inset: #ead293;
  --cert-ink: #9b6300;
  --cert-name: #17243a;
  --cert-muted: #5f7183;
  --cert-title: #054a91;
}

html { min-width: 320px; }
body { min-height: 100vh; color: var(--account-ink); background: var(--account-page); }
button, a { -webkit-tap-highlight-color: transparent; }

.account-topbar { position: sticky; top: 0; z-index: 30; min-height: 78px; display: flex; align-items: center; background: var(--topbar-bg); border-bottom: 1px solid var(--account-line); backdrop-filter: blur(14px); }
.account-topbar-inner { width: min(1180px, 92%); margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.account-brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.account-brand img { width: auto; height: 62px; display: block; }
/* logo.png is dark-on-transparent and vanishes on a dark topbar; site.css
   does this swap for .brand, and .account-brand needs its own copy. */
.account-brand .logo-dark { display: none; }
[data-theme="dark"] .account-brand .logo-light { display: none; }
[data-theme="dark"] .account-brand .logo-dark { display: block; }
.account-nav { display: flex; align-items: center; gap: 22px; }
.account-nav > a { color: var(--account-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.account-nav > a:hover { color: var(--account-blue); }

.account-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: clamp(34px, 6vw, 68px) 0 72px; }
.account-loading { min-height: 55vh; display: grid; place-items: center; color: var(--account-muted); font-size: 13px; }
.loading-mark { width: 42px; height: 42px; margin: 0 auto 14px; border: 4px solid var(--track); border-top-color: var(--account-blue); border-radius: 50%; animation: account-spin .8s linear infinite; }
@keyframes account-spin { to { transform: rotate(360deg); } }

.account-guest { min-height: 65vh; display: grid; place-items: center; }
.guest-card { width: min(520px, 100%); padding: clamp(30px, 5vw, 48px); background: var(--paper); border: 1px solid var(--account-line); border-radius: 26px; box-shadow: var(--account-shadow); text-align: center; }
.guest-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 19px; color: var(--account-blue); background: var(--account-blue-soft); border-radius: 20px; font-size: 24px; }
.guest-icon.success { color: var(--account-success); background: var(--green-soft); }
.guest-card h1 { margin: 0 0 11px; color: var(--account-blue); font-size: clamp(27px, 5vw, 38px); letter-spacing: -.035em; }
.guest-card p { margin: 0 auto 24px; max-width: 400px; color: var(--account-muted); font-size: 13px; line-height: 1.7; }
.guest-actions { display: flex; justify-content: center; gap: 10px; }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border: 0; border-radius: 11px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); }
/* The solid ("Sign up") fill from site.css. A --blue fill would carry white
   text into dark mode, where --blue is a light tint. */
.button-primary { color: var(--solid-ink); background: var(--solid-bg); }
.button-primary:hover { background: var(--solid-hover); }
.button-secondary { color: var(--account-blue); background: var(--account-blue-soft); }
.button-ghost { color: var(--account-muted); background: var(--paper); border: 1px solid var(--account-line); }
/* --red/--on-red, not --red-ink: on dark, --red-ink IS the light tone and
   would leave white text on pink. */
.button-danger { color: var(--on-red); background: var(--red); }
.button-danger-outline { color: var(--account-danger); background: var(--paper); border: 1px solid var(--red-line); }
.button:disabled { opacity: .58; cursor: not-allowed; transform: none; }

.account-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: var(--account-orange); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.account-heading h1 { margin: 0 0 10px; color: var(--account-blue); font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.account-heading p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--account-muted); font-size: 14px; line-height: 1.7; }
.verification-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 15px; align-items: center; margin-bottom: 22px; padding: 17px 18px; color: var(--callout-ink); background: var(--callout-bg); border: 1px solid var(--callout-line); border-radius: 16px; }
.verification-banner-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--orange-ink); background: var(--callout-ico); border-radius: 12px; font-size: 17px; }
.verification-banner h2 { margin: 0 0 4px; color: var(--orange-ink); font-size: 14px; }
.verification-banner p { margin: 0; font-size: 10px; line-height: 1.55; }

.account-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: start; }
.panel { background: var(--account-surface); border: 1px solid var(--account-line); border-radius: 22px; box-shadow: var(--account-shadow); }
.profile-panel { position: sticky; top: 100px; overflow: hidden; }
/* A "deep panel": stays deep blue in both themes, which is why the
   white-on-blue treatment below is theme-invariant. */
.profile-hero { padding: 28px; color: var(--on-deep); background: linear-gradient(145deg, var(--deep-alt-1), var(--deep-alt-2)); text-align: center; }
.profile-avatar { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 15px; background: var(--deep-track); border: 2px solid color-mix(in srgb, var(--on-deep) 32%, transparent); border-radius: 50%; font-size: 23px; font-weight: 800; letter-spacing: .02em; }
.profile-hero h2 { margin: 0 0 5px; color: var(--on-deep); font-size: 20px; overflow-wrap: anywhere; }
.profile-hero p { margin: 0; color: var(--on-deep-dim); font-size: 11px; overflow-wrap: anywhere; }
.profile-details { padding: 21px; }
.profile-detail { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.profile-detail:first-child { padding-top: 0; }
.profile-detail:last-of-type { border-bottom: 0; }
.profile-detail-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--account-blue); background: var(--account-blue-soft); border-radius: 10px; font-size: 13px; }
.profile-detail small, .profile-detail strong { display: block; }
.profile-detail small { margin-bottom: 3px; color: var(--account-muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.profile-detail strong { color: var(--account-ink); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.status-verified { color: var(--account-success) !important; }
.status-unverified { color: var(--account-warning) !important; }
.profile-actions { display: grid; gap: 8px; margin-top: 18px; }

.history-column { min-width: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.metric-card { padding: 19px; background: var(--paper); border: 1px solid var(--account-line); border-radius: 17px; box-shadow: var(--sh-3); }
.metric-card span { display: block; margin-bottom: 7px; color: var(--account-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.metric-card strong { color: var(--account-blue); font-size: 26px; line-height: 1; }
.metric-card small { margin-left: 4px; color: var(--account-muted); font-size: 10px; font-weight: 600; }

.resume-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 17px; align-items: center; margin-bottom: 18px; padding: 21px 22px; color: var(--on-deep); background: linear-gradient(125deg, var(--deep-1), var(--deep-2)); border-radius: 19px; box-shadow: var(--sh-4); }
.resume-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--deep-track); border: 1px solid color-mix(in srgb, var(--on-deep) 22%, transparent); border-radius: 14px; font-size: 16px; }
.resume-copy { min-width: 0; }
/* --chip-warm-ink, not --orange-2: this sits on the deep gradient, whose
   light end is #0864ad in Daylight — --orange-2 measures 3.6:1 there.
   --chip-warm-ink is the system's warm-text-on-a-deep-panel tone: 4.98:1
   at the same worst-case end. */
.resume-copy .eyebrow { margin-bottom: 4px; color: var(--chip-warm-ink); }
.resume-copy h2 { margin: 0 0 4px; color: var(--on-deep); font-size: 17px; }
.resume-copy > p:not(.eyebrow) { margin: 0; color: var(--on-deep-dim); font-size: 10px; line-height: 1.5; }
.resume-progress { height: 5px; margin-top: 11px; overflow: hidden; background: var(--deep-track); border-radius: 999px; }
.resume-progress span { display: block; width: 0; height: 100%; background: var(--orange-2); border-radius: inherit; transition: width .25s ease; }
/* On the deep panel, so it takes the panel's own invariant colours. */
.resume-button { color: var(--deep-1); background: var(--on-deep); }

.achievements-panel { margin-bottom: 18px; overflow: hidden; }
.achievements-heading { align-items: center; }
.achievement-total { flex: 0 0 auto; padding: 7px 10px; color: var(--account-blue); background: var(--account-blue-soft); border-radius: 999px; font-size: 9px; font-weight: 800; }
.achievement-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 13px 13px 0; }
.achievement-stat { min-width: 0; min-height: 92px; display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 14px; }
.achievement-stat-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; color: var(--orange-ink); background: var(--orange-soft); border-radius: 13px; font-size: 17px; }
.achievement-stat-icon.weekly-icon { color: var(--account-blue); background: var(--account-blue-soft); }
.achievement-stat-icon.mastery-icon { color: var(--violet); background: var(--violet-soft); }
.achievement-stat-copy { min-width: 0; flex: 1; }
.achievement-stat strong, .achievement-stat span { display: block; }
.achievement-stat strong { overflow: hidden; color: var(--account-ink); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.achievement-stat div > span { margin-top: 3px; color: var(--account-muted); font-size: 8px; font-weight: 700; line-height: 1.4; }
.achievement-track { height: 5px; margin-top: 9px; overflow: hidden; background: var(--track); border-radius: 999px; }
.achievement-track span { height: 100%; background: linear-gradient(90deg, var(--account-blue), var(--blue-2)); border-radius: inherit; transition: width .25s ease; }
.achievement-track.mastery-track span { background: linear-gradient(90deg, var(--violet), var(--violet-2)); }
.badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 13px; }
.badge-card { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 13px; }
.badge-card.earned { background: var(--callout-bg); border-color: var(--callout-line); }
.badge-card.locked { background: var(--surface-2); }
.badge-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--orange-ink); background: var(--callout-ico); border-radius: 50%; font-size: 14px; }
.badge-card.locked .badge-icon { color: var(--muted-2); background: var(--track); }
.badge-card h3 { margin: 0 0 3px; color: var(--account-ink); font-size: 10px; }
.badge-card p { margin: 0; color: var(--account-muted); font-size: 8px; font-weight: 600; line-height: 1.45; }
.certificate-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 13px 13px; padding: 17px; background: linear-gradient(120deg, var(--surface-3), var(--line-2)); border: 1px solid var(--line); border-radius: 15px; }
/* Ends on --orange-soft rather than --callout-ico: --callout-ico is deep
   enough that no warm text token clears 4.5:1 on it (--orange-ink managed
   4.34). On --orange-soft the card keeps its "earned" warmth and the type
   passes — --orange-ink 4.7:1, --muted 4.6:1. */
.certificate-card.earned { background: linear-gradient(120deg, var(--callout-bg), var(--orange-soft)); border-color: var(--callout-line); }
.certificate-card.earned .eyebrow { color: var(--orange-ink); }
.certificate-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--muted-2); background: var(--paper); border-radius: 15px; box-shadow: var(--sh-2); font-size: 21px; }
.certificate-card.earned .certificate-icon { color: var(--orange-ink); }
.certificate-copy { min-width: 0; }
.certificate-copy .eyebrow { margin-bottom: 2px; }
.certificate-copy h3 { margin: 0 0 3px; color: var(--account-ink); font-size: 13px; }
.certificate-copy > p:not(.eyebrow) { margin: 0; color: var(--account-muted); font-size: 9px; line-height: 1.5; }
.certificate-requirements { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.certificate-requirements span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 999px; font-size: 8px; font-weight: 700; }
.certificate-requirements .complete { color: var(--account-success); background: var(--green-soft); }
/* --nav-ink, not --muted: both of these sit on --track, a step darker than
   white, where --muted drops to 4.18:1. --nav-ink is 5.19:1 there. */
.certificate-requirements .pending { color: var(--nav-ink); background: var(--track); }
/* Locked: reads as inert in both themes rather than as a filled button. */
.certificate-button { color: var(--nav-ink); background: var(--track); white-space: nowrap; }
.certificate-card.earned .certificate-button { color: var(--on-orange); background: var(--orange-fill); }

.certificate-dialog { width: min(850px, calc(100% - 28px)); padding: 0; color: var(--cert-name); background: transparent; border: 0; }
/* Scrims stay dark literals in both themes — same convention as the
   lightbox in site.css. */
.certificate-dialog::backdrop { background: rgba(8,25,45,.66); backdrop-filter: blur(4px); }
.print-certificate { padding: clamp(34px, 7vw, 72px); background: var(--cert-paper); border: 12px double var(--cert-edge); box-shadow: inset 0 0 0 3px var(--cert-inset), 0 26px 80px rgba(8,25,45,.28); text-align: center; }
.certificate-brand img { width: auto; height: 68px; }
.certificate-kicker { margin: 24px 0 6px; color: var(--cert-ink); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.print-certificate h2 { margin: 0; color: var(--cert-title); font-family: Georgia, serif; font-size: clamp(30px, 6vw, 52px); font-weight: 500; }
.certificate-presented { margin: 25px 0 5px; color: var(--cert-muted); font-size: 11px; }
.print-certificate > strong { display: block; color: var(--cert-name); font-family: Georgia, serif; font-size: clamp(26px, 5vw, 43px); font-weight: 500; }
.print-certificate > p:not(.certificate-kicker, .certificate-presented) { max-width: 610px; margin: 18px auto; color: var(--cert-muted); font-size: 11px; line-height: 1.7; }
.certificate-rule { width: 170px; height: 1px; margin: 28px auto 10px; background: var(--cert-edge); }
.print-certificate > time, .print-certificate > span { display: block; }
.print-certificate > time { color: var(--cert-name); font-size: 11px; font-weight: 700; }
.print-certificate > span { margin-top: 5px; color: var(--cert-ink); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.certificate-dialog-actions { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }

.skills-panel { margin-bottom: 18px; overflow: hidden; }
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 13px; }
.skill-card { min-width: 0; padding: 16px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 14px; }
.skill-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.skill-heading h3 { margin: 0; color: var(--account-ink); font-size: 13px; }
.skill-heading p { margin: 4px 0 0; color: var(--account-muted); font-size: 9px; font-weight: 600; }
.skill-score { color: var(--account-blue); font-size: 20px; line-height: 1; white-space: nowrap; }
.skill-track { height: 7px; margin: 13px 0 10px; overflow: hidden; background: var(--track); border-radius: 999px; }
.skill-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--account-blue), var(--blue-2)); border-radius: inherit; }
.skill-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--account-muted); font-size: 9px; font-weight: 700; }
.skill-change { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; }
.skill-change.positive { color: var(--account-success); background: var(--green-soft); }
.skill-change.negative { color: var(--account-danger); background: var(--red-soft); }
.skill-change.steady { color: var(--account-muted); background: var(--line-2); }
.skill-empty { grid-column: 1 / -1; padding: 28px 20px; color: var(--account-muted); text-align: center; font-size: 11px; line-height: 1.6; }

.settings-panel { margin-bottom: 18px; overflow: hidden; }
.settings-body { padding: 0 25px; }
.setting-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 23px 0; border-bottom: 1px solid var(--line-2); }
.setting-row:last-child { border-bottom: 0; }
.setting-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--account-blue); background: var(--account-blue-soft); border-radius: 12px; font-size: 15px; }
.danger-icon { color: var(--account-danger); background: var(--red-soft); }
.delete-setting h3 { color: var(--account-danger); }
.setting-content { min-width: 0; }
.setting-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.setting-heading h3 { margin: 1px 0 4px; color: var(--account-ink); font-size: 14px; }
.setting-heading p { margin: 0; color: var(--account-muted); font-size: 10px; line-height: 1.55; }
.setting-heading .button { flex: 0 0 auto; }
.setting-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 14px; }
/* 16px is deliberate: iOS Safari zooms the page when a focused input is
   under 16px, and site.css sets body type to 15px. */
.setting-control input, .password-grid input, .dialog-password input { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--account-ink); background: var(--paper); border: 1px solid var(--border-strong); border-radius: 10px; font-size: 16px; outline: none; }
.setting-control input:focus, .password-grid input:focus, .dialog-password input:focus { border-color: var(--account-blue); box-shadow: 0 0 0 4px var(--focus-ring); }
.password-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 14px 0 10px; }
.password-grid label, .dialog-password label { color: var(--account-ink); font-size: 9px; font-weight: 700; }
.password-grid input, .dialog-password input { display: block; margin-top: 6px; }
.provider-message { margin: 13px 0 0; padding: 11px 12px; color: var(--account-muted); background: var(--line-2); border-radius: 9px; font-size: 10px; line-height: 1.55; }
.form-notice { min-height: 0; margin: 10px 0 0; color: var(--account-muted); font-size: 10px; font-weight: 600; line-height: 1.55; }
.form-notice:empty { display: none; }
.form-notice.success { color: var(--account-success); }
.form-notice.error { color: var(--account-danger); }
.form-notice.info { color: var(--account-blue); }

.history-panel { overflow: hidden; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 25px; border-bottom: 1px solid var(--account-line); }
.panel-heading h2 { margin: 2px 0 5px; color: var(--account-blue); font-size: 20px; }
.panel-heading p { margin: 0; color: var(--account-muted); font-size: 11px; line-height: 1.55; }
.history-body { padding: 13px; }
.history-list { display: grid; gap: 9px; }
.history-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; }
.history-score { width: 64px; height: 64px; display: grid; place-items: center; align-content: center; color: var(--account-blue); background: var(--account-blue-soft); border-radius: 14px; }
.history-score strong { font-size: 17px; line-height: 1; }
.history-score span { margin-top: 4px; color: var(--account-muted); font-size: 8px; font-weight: 700; }
.history-copy { min-width: 0; }
.history-copy h3 { margin: 0 0 6px; color: var(--account-ink); font-size: 14px; }
.history-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.history-chip { padding: 5px 8px; color: var(--account-muted); background: var(--line-2); border-radius: 999px; font-size: 9px; font-weight: 700; }
.history-side { display: grid; justify-items: end; gap: 8px; }
.history-date { color: var(--account-muted); font-size: 10px; font-weight: 600; text-align: right; white-space: nowrap; }
.history-repeat { min-height: 32px; padding: 6px 10px; color: var(--account-blue); background: var(--account-blue-soft); border-radius: 9px; font-size: 9px; white-space: nowrap; }
.history-state { padding: clamp(34px, 6vw, 62px) 20px; text-align: center; }
.history-state-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 15px; color: var(--account-blue); background: var(--account-blue-soft); border-radius: 17px; font-size: 19px; }
.history-state h3 { margin: 0 0 8px; color: var(--account-blue); font-size: 18px; }
.history-state p { max-width: 430px; margin: 0 auto 18px; color: var(--account-muted); font-size: 11px; line-height: 1.65; }
.history-error .history-state-icon { color: var(--account-danger); background: var(--red-soft); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

button:focus-visible, a:focus-visible, summary:focus-visible { outline: 4px solid var(--focus-ring); outline-offset: 2px; }

.account-dialog { width: min(470px, calc(100% - 28px)); padding: 0; color: var(--account-ink); background: transparent; border: 0; }
.account-dialog::backdrop { background: rgba(8,25,45,.58); backdrop-filter: blur(3px); }
.dialog-card { position: relative; padding: clamp(26px, 5vw, 38px); background: var(--paper); border: 1px solid var(--account-line); border-radius: 22px; box-shadow: var(--sh-4); }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--account-muted); background: var(--line-2); border: 0; border-radius: 10px; cursor: pointer; }
.dialog-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 17px; color: var(--account-danger); background: var(--red-soft); border-radius: 16px; font-size: 20px; }
.dialog-card h2 { margin: 0 0 8px; color: var(--account-blue); font-size: 23px; }
.dialog-card > p:not(.form-notice, .provider-message) { margin: 0; color: var(--account-muted); font-size: 11px; line-height: 1.65; }
.dialog-password { margin-top: 18px; }
#deletionConfirmation { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px; margin-top: 20px; }

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
  .profile-panel { position: static; }
  .profile-hero { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 15px; align-items: center; text-align: left; }
  .profile-avatar { width: 62px; height: 62px; margin: 0; font-size: 18px; grid-row: span 2; }
  .profile-hero h2 { align-self: end; }
  .profile-hero p { align-self: start; }
  .profile-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .profile-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .password-grid { grid-template-columns: 1fr; }
  .resume-panel { grid-template-columns: auto minmax(0, 1fr); }
  .resume-button { grid-column: 1 / -1; }
  .achievement-overview { grid-template-columns: 1fr; }
  .achievement-stat { min-height: 0; }
}

@media (max-width: 680px) {
  .account-topbar-inner { gap: 10px; }
  .account-brand img { height: 52px; max-width: 160px; }
  .account-nav { display: none; }
  .account-heading { display: block; }
  .account-heading .button { margin-top: 17px; }
  .verification-banner { grid-template-columns: auto minmax(0, 1fr); }
  .verification-banner .button { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .metric-card span { margin: 0; }
  .skill-grid { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certificate-card { grid-template-columns: auto minmax(0, 1fr); }
  .certificate-button { grid-column: 1 / -1; }
  .profile-details { grid-template-columns: 1fr; }
  .profile-actions { grid-column: auto; }
  .history-item { grid-template-columns: 55px minmax(0, 1fr); }
  .history-score { width: 55px; height: 55px; }
  .history-side { grid-column: 2; justify-items: start; }
  .history-date { text-align: left; }
  .panel-heading { padding: 20px; }
  .settings-body { padding: 0 20px; }
  .setting-row { grid-template-columns: 1fr; }
  .setting-control { grid-template-columns: 1fr; }
  .setting-heading { display: block; }
  .setting-heading .button { width: 100%; margin-top: 13px; }
  .setting-icon { width: 38px; height: 38px; }
  .guest-actions { flex-direction: column; }
  .dialog-actions { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .achievements-heading { display: block; }
  .achievement-total { display: inline-block; margin-top: 10px; }
  .badge-grid { grid-template-columns: 1fr; }
  .certificate-dialog-actions { flex-direction: column; }
}

@media print {
  body > :not(.certificate-dialog) { display: none !important; }
  .certificate-dialog[open] { position: static; width: 100%; max-width: none; margin: 0; overflow: visible; }
  .certificate-dialog::backdrop, .certificate-dialog-actions { display: none; }
  .print-certificate { min-height: 96vh; display: grid; align-content: center; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}