/* Membership and account UI share the practice lab's charcoal, ivory and brass. */
.account-link { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .78rem; white-space: nowrap; color: var(--ink); text-decoration: none; padding: .5rem .65rem; border: 1px solid #cbb27e40; border-radius: 7px; }
.account-link .ui-icon { width: 17px; height: 17px; }
.top-tabs .account-link, .public-navigation .account-link { align-self: center; min-height: 44px; padding: 8px 12px; border: 1px solid #cbb27e40; border-radius: 7px; color: var(--accent); background: #cbb27e06; }
.top-tabs .account-link:hover, .public-navigation .account-link:hover { border-color: var(--accent); background: #cbb27e14; color: var(--accent-hover); }
.subscription-lock { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 7px 10px; color: var(--accent); font-size: .8rem; text-align: center; text-decoration: none; border: 1px solid #cbb27e40; border-radius: 7px; background: #cbb27e09; }
.subscription-lock .ui-icon { width: 16px; height: 16px; }
.subscription-lock:hover { color: var(--accent-hover); border-color: var(--accent); background: #cbb27e14; }
.sample-chooser { display: grid; align-content: start; gap: 8px; min-width: 0; }
.sample-chooser .field { margin: 0; min-width: 0; }
.sample-chooser select { width: 100%; min-width: 0; max-width: 100%; }
.sample-chooser a { color: var(--accent); font-size: 12px; line-height: 1.6; text-underline-offset: 4px; }
.training-panel > .sample-chooser { margin-bottom: 18px; }
.modal:has(.subscription-upgrade) { width: 480px; }
.content-feedback { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.content-feedback h2 { margin: 0 0 6px; font-family: inherit; font-size: 16px; font-weight: 600; }
.content-feedback p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.content-feedback .feedback-button { flex-shrink: 0; min-height: 44px; }
.feedback-modal { width: 520px; max-width: calc(100vw - 32px); }
.feedback-subject { margin: 0 0 20px; overflow-wrap: anywhere; }
.feedback-form .field { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.feedback-form textarea { box-sizing: border-box; width: 100%; min-height: 140px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.6; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); }
.feedback-form .hint { margin: 12px 0 0; font-size: 12px; line-height: 1.6; }
.feedback-status { line-height: 1.6; }
.feedback-error { color: var(--danger, #c85f51); }
@media (max-width: 600px) { .content-feedback { align-items: flex-start; flex-direction: column; gap: 14px; } }
.modal:has(.subscription-upgrade) .modal-actions:empty { display: none; }
.subscription-upgrade p { color: var(--subtle); font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.subscription-upgrade .button.primary { display: inline-flex; width: 100%; align-items: center; justify-content: center; background: var(--accent); border-color: var(--accent); color: var(--bg); text-decoration: none; font-weight: 600; }
.subscription-upgrade .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Page frame and shared navigation. */
.account-site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.account-header .header-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; }
.account-header .site-brand { grid-column: 1; grid-row: 1; }
.account-header .account-navigation { grid-column: 2; grid-row: 1; }
.account-header .language-selector { grid-column: 3; grid-row: 1; }
.account-navigation { display: flex; align-self: center; justify-content: center; align-items: center; gap: 6px; min-width: 0; }
.account-navigation a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13px; text-align: center; transition: color .18s, background .18s; }
.account-navigation .ui-icon { width: 17px; height: 17px; }
.account-navigation a:hover { color: var(--ink); background: #ffffff06; }
.account-navigation a[aria-current] { color: var(--accent-hover); background: var(--active-fill); }
@media (min-width: 761px) {
  .site-header-signed-in :is(.top-tabs, .public-navigation, .account-navigation) { justify-content: flex-end; }
  .site-header-signed-in .account-navigation { grid-column: 2 / -1; }
}
@media (min-width: 1251px) {
  .site-header-signed-in .header-inner > :is(.top-tabs, .public-desktop-navigation) { grid-column: 2 / -1; }
}
.account-page { width: 100%; max-width: 1104px; margin: 0 auto; padding: 56px 32px 64px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.account-page h1 { margin: 0 0 18px; font: 400 clamp(32px, 3.4vw, 46px)/1.15 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.account-page h2 { margin: 0 0 12px; font: 400 27px/1.25 var(--serif); letter-spacing: -.02em; }
.account-page p { color: var(--subtle); line-height: 1.75; margin: 0 0 18px; }
.account-page p:last-child { margin-bottom: 0; }
.account-page .account-eyebrow { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0; margin: 0 0 12px; }
.account-page .hint { color: var(--muted); font-size: 12px; line-height: 1.7; }
.account-page a { text-underline-offset: 4px; }
.account-page a:hover { color: var(--accent-hover); }
.account-page [hidden] { display: none !important; }
.subscription-panel { min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 12px 40px #00000014; }
.account-manage, .account-page > .subscription-panel { max-width: 760px; margin-inline: auto; }
.account-page .account-back { display: inline-flex; gap: 9px; align-items: center; margin-bottom: 22px; font-size: 13px; color: var(--muted); text-decoration: none; }
.account-page .account-back:hover { color: var(--accent-hover); }

/* A welcoming entrance, with the form first on small screens. */
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(40px, 6vw, 88px); align-items: center; }
.auth-intro { grid-column: 1; grid-row: 1; min-width: 0; padding: 24px 0; }
.auth-art { display: grid; place-items: center; width: 188px; height: 188px; margin-bottom: 30px; }
.auth-art img { display: block; width: 152px; height: 152px; filter: drop-shadow(0 12px 22px #00000030); }
.account-page .auth-title { margin-bottom: 18px; color: var(--ink); font: 400 clamp(40px, 4.3vw, 60px)/1.06 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.account-page .auth-description { max-width: 350px; font-size: 15px; line-height: 1.8; }
.auth-rhythm { display: flex; gap: 6px; margin: 28px 0; direction: ltr; }
.auth-rhythm span { display: grid; place-items: center; width: 32px; height: 36px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 11px; }
.auth-rhythm span:nth-child(1), .auth-rhythm span:nth-child(5) { background: var(--sand); color: var(--accent); border-color: #cbb27e40; }
.auth-rhythm span:nth-child(2), .auth-rhythm span:nth-child(4), .auth-rhythm span:nth-child(7) { background: #91b9b70c; color: var(--teal); border-color: #91b9b730; }
.auth-intro .account-back { margin: 0; }
.auth-card { grid-column: 2; grid-row: 1; padding: 36px; }
.auth-card h1 { font-size: 36px; }
.auth-card > p:not(.account-eyebrow) { font-size: 14px; }
.auth-card .account-form { margin-top: 28px; }
.auth-card .account-actions > .button { flex: 1 1 100%; }

/* Bound Django fields retain their validation, help text and native semantics. */
.account-page form { margin: 24px 0 0; }
.account-form-fields { display: grid; gap: 20px; min-width: 0; }
.account-field { min-width: 0; }
.account-page label { display: block; color: var(--subtle); font-size: 13px; line-height: 1.6; margin-bottom: 7px; }
.account-page input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .account-page textarea, .account-page select { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 12px 14px; padding-inline-end: var(--password-toggle-space, 14px); border: 1px solid #444b4d; border-radius: 9px; background: var(--field); color: var(--ink); font-size: 16px; line-height: 1.5; }
.account-page input:hover:not(:disabled), .account-page textarea:hover:not(:disabled) { border-color: #747569; }
.account-page input:focus-visible, .account-page textarea:focus-visible, .account-page select:focus-visible { border-color: var(--accent); outline-offset: 3px; }
.account-page input:disabled { color: var(--muted); background: #ffffff04; }
.account-page input[aria-invalid=true], .account-page select[aria-invalid=true] { border-color: var(--danger); }
.account-page input[type=checkbox], .account-page input[type=radio] { width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; flex-shrink: 0; accent-color: var(--accent); }
.account-field-check, .account-page .account-check { display: flex; align-items: flex-start; gap: 10px; min-height: 24px; }
.account-field-check label, .account-page .account-check { margin: 0; cursor: pointer; }
.account-field-check input, .account-page .account-check input { margin-top: 2px; }
.account-page .account-field-help, .account-form-fields > p > span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.account-field-help ul { padding-inline-start: 18px; margin: 0; }
.account-field-help li + li { margin-top: 4px; }
.account-field-help a { display: inline-block; padding-block: 4px; }
.account-form-fields > p { margin: 0; }
.account-form-fields > p:has(input[type=checkbox]), .account-form-fields > p:has(input[type=radio]) { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.account-form-fields > p:has(input[type=checkbox]) > input, .account-form-fields > p:has(input[type=radio]) > input { grid-column: 1; grid-row: 1; margin-top: 2px; }
.account-form-fields > p:has(input[type=checkbox]) > label, .account-form-fields > p:has(input[type=radio]) > label { grid-column: 2; grid-row: 1; }
.account-actions { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 24px; }
.account-page .button, .account-page button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; max-width: 100%; padding: 11px 18px; border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; white-space: normal; }
.account-page .primary { color: #181a19; background: var(--accent); border-color: var(--accent); }
.account-page .primary:hover { color: #181a19; background: var(--accent-hover); border-color: var(--accent-hover); }
.account-page .danger { color: var(--danger); border-color: #eda09255; background: #eda09208; }
.account-page .danger:hover { color: var(--danger); background: #eda09214; border-color: var(--danger); }
.account-page .small { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.account-password-input { position: relative; }
.account-password-input:has([data-password-toggle]:not([hidden])) { --password-toggle-space: 56px; }
.account-page .account-password-toggle { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: 44px; height: 44px; min-height: 44px; padding: 0; color: var(--muted); background: transparent; border-color: transparent; }
.account-page .account-password-toggle:hover { color: var(--accent-hover); background: var(--sand); border-color: transparent; }
.account-password-toggle .ui-icon { width: 20px; height: 20px; }
.account-password-toggle [data-icon=eye-off], .account-password-toggle[data-visible=true] [data-icon=eye] { display: none; }
.account-password-toggle[data-visible=true] [data-icon=eye-off] { display: block; }
.account-page .errorlist { padding: 0; margin: 0; color: var(--danger); list-style: none; font-size: 13px; line-height: 1.65; }
.account-field-errors { margin-top: 8px; }
.account-form-errors, .account-notice { border: 1px solid #cbb27e40; border-radius: 10px; padding: 14px 16px; background: #cbb27e08; font-size: 13px; }
.account-form-errors, .account-notice.error { border-color: #eda09255; background: #eda09208; }
.account-notice.success { border-color: #91b9b740; background: #91b9b708; }

/* Membership, settings and supporting pages. */
.account-heading { margin-bottom: 32px; }
.account-heading h1 { margin-bottom: 12px; }
.account-heading p { max-width: 650px; }
.account-page .account-identity { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; }
.account-identity bdi { min-width: 0; overflow-wrap: anywhere; }
.account-identity .ui-icon { width: 17px; height: 17px; }
.account-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #cbb27e40; border-radius: 5px; color: var(--accent); font: 500 11px/1.5 'Avenir Next', Avenir, ui-sans-serif, system-ui, sans-serif; vertical-align: middle; }
.account-options { display: grid; margin-top: 24px; }
.account-option { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
.account-option-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--subtle); }
.account-option > .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.account-option:hover .account-option-icon { color: var(--accent-hover); border-color: #cbb27e60; background: var(--sand); }
.account-option strong { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.account-option small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.account-option:hover strong { color: var(--accent-hover); }

/* Account home: saved practice first, then settings and a quieter plan summary. */
.account-overview { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.account-overview > div { min-width: 0; }
.account-overview .account-practice-link { flex-shrink: 0; background: transparent; font-size: 13px; font-weight: 500; }
.account-practice-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 28px; padding: 22px 26px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.account-practice-summary-copy { min-width: 0; }
.account-page .account-practice-summary h2 { margin: 0; font: 500 15px/1.5 var(--sans, 'Avenir Next', Avenir, ui-sans-serif, system-ui, sans-serif); color: var(--ink); }
.account-page .account-practice-week-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.account-practice-week-count strong { font: 400 28px/1.2 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.account-practice-week-count strong span { color: var(--muted); font-size: 20px; }
.account-practice-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.account-practice-day { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.account-practice-day-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--field); font-size: 17px; }
.account-practice-day-mark .ui-icon { width: 16px; height: 16px; }
.account-practice-day.is-complete .account-practice-day-mark { color: var(--accent); background: var(--sand); border-color: #cbb27e60; }
.account-practice-day.is-today time { color: var(--ink); }
.account-practice-day.is-today .account-practice-day-mark { outline: 1px solid var(--accent); outline-offset: 3px; }
.account-practice-day.is-future .account-practice-day-mark { opacity: .55; }
.account-practice-summary .account-practice-dashboard-link { background: transparent; font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) {
  .account-practice-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
  .account-practice-week-days { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 420px; }
}
@media (max-width: 600px) {
  .account-practice-summary { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 18px; margin-bottom: 20px; }
  .account-practice-week-days { gap: 4px; }
  .account-practice-day-mark { width: 28px; height: 28px; }
  .account-practice-summary .account-practice-dashboard-link { justify-self: start; }
}
.account-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.account-shortcuts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 8px; }
.account-shortcut { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 18px; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .18s, background .18s; }
.account-shortcut:hover { border-color: #cbb27e80; background: var(--surface); }
.account-shortcut.account-favourites-link { border-color: #cbb27e45; background: linear-gradient(115deg, #cbb27e09, transparent 85%), var(--paper); }
.account-shortcut.account-favourites-link:hover { border-color: var(--accent); background-color: var(--surface); }
.account-shortcut-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--teal); border: 1px solid #91b9b72b; background: #91b9b709; }
.account-favourites-link .account-shortcut-icon { color: var(--accent); border-color: #cbb27e35; background: #cbb27e0c; }
.account-home .account-shortcut-icon .ui-icon { width: 23px; height: 23px; }
.account-shortcut > .ui-icon { color: var(--muted); }
.account-shortcut:hover > .ui-icon { color: var(--accent-hover); }
.account-shortcut-copy strong { display: block; font: 400 24px/1.25 var(--serif); letter-spacing: -.02em; }
.account-shortcut-copy small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.account-home .account-settings-card { padding: 0; }
.account-card-heading { padding: 26px 26px 20px; }
.account-home .account-card-heading h2, .account-home .account-email-preferences h2 { margin: 0 0 6px; font-size: 24px; }
.account-settings-card .account-options { margin: 0; }
.account-home .account-display-name { margin: 0; padding: 0 26px 24px; border-bottom: 1px solid #ffffff0d; }
.account-display-name input { width: 100%; }
.account-display-name .hint { margin: 8px 0 12px; }
.account-home .account-email-preferences { grid-column: 1; margin: 0; padding: 26px; scroll-margin-top: 104px; }
.account-page .account-email-option { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0; cursor: pointer; }
.account-page .account-email-option input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.account-email-option strong { display: block; font-weight: 500; }
.account-email-option small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.account-email-time { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-inline-start: 30px; }
.account-page .account-email-time label { margin: 0; }
.account-page #email-preferences input[type=time] { width: 140px; min-width: 0; }
.account-settings-card .account-option { grid-template-columns: 32px minmax(0, 1fr) 16px; padding: 17px 26px; border-color: #ffffff0d; transition: background .18s; }
.account-settings-card .account-option:hover { background: #ffffff03; }
.account-settings-card .account-option-icon { width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); }
.account-settings-card .account-option:hover .account-option-icon { color: var(--accent); }
.account-language-setting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 17px 26px; border-top: 1px solid #ffffff0d; }
.account-language-label, .account-page .account-time-zone-label { display: inline-flex; align-items: center; gap: 14px; margin: 0; color: var(--ink); }
.account-language-label strong, .account-time-zone-label strong { font-size: 14px; font-weight: 500; }
.account-language-setting .language-trigger { min-width: 128px; }
.account-page #account-language { width: auto; }
#language { scroll-margin-top: 104px; }
#language .hint, #language .account-form-errors { flex-basis: 100%; margin: 0; }
.account-home .account-time-zone-setting { display: grid; grid-template-columns: minmax(0, 1fr) 128px; column-gap: 12px; margin: 0; }
.account-time-zone-label .account-option-icon { flex-shrink: 0; }
.account-time-zone-control { position: relative; width: 128px; max-width: 100%; }
.account-page .account-time-zone-control select { appearance: none; width: 100%; min-height: 26px; padding: 0 24px 0 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.account-time-zone-control > .ui-icon { position: absolute; inset-inline-end: 10px; pointer-events: none; }
.account-time-zone-control:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-page .account-time-zone-control select:focus-visible { outline: 0; }
.account-time-zone-control:has([aria-invalid=true]) { border-color: var(--danger); }
.account-time-zone-setting .account-form-errors, .account-time-zone-setting noscript { grid-column: 1 / -1; margin: 0; }
html[dir=rtl] .account-time-zone-control select { padding: 0 0 0 24px; }
.account-home .membership-panel { align-self: start; display: flex; flex-direction: column; padding: 26px; background: linear-gradient(160deg, #cbb27e07, transparent 55%), var(--paper); }
@media (min-width: 761px) {
  .account-home .membership-panel { grid-column: 2; grid-row: 2; }
}
.membership-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.membership-heading .account-eyebrow { margin-bottom: 5px; font-size: 12px; }
.account-home .membership-name { margin: 0; font-size: 36px; }
.membership-mark { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid #cbb27e30; border-radius: 50%; color: var(--accent); background: #cbb27e08; }
.account-home .membership-mark .ui-icon { width: 21px; height: 21px; }
.membership-benefits { display: grid; gap: 14px; list-style: none; padding: 0; margin: 24px 0; }
.membership-benefits li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--subtle); font-size: 13px; line-height: 1.6; }
.account-home .membership-benefits .ui-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.account-home .membership-validity { padding-top: 16px; border-top: 1px solid #ffffff0d; }
.membership-validity time { display: block; color: var(--subtle); }
.membership-footer { margin-top: auto; padding-top: 16px; }
.membership-footer .hint { margin-bottom: 18px; }
.account-home .membership-footer form { margin: 0; }
.account-home .membership-footer > a + form { margin-top: 10px; }
.account-home .membership-footer > form + a { margin-top: 16px; }
.membership-footer .button { width: 100%; }
.account-dashboard > .account-session-actions { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
html[dir=rtl] .account-shortcut-copy strong { letter-spacing: 0; }
html[dir=rtl] .account-home [data-icon=arrow] { transform: scaleX(-1); }

.favourites-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 200px); gap: 20px; align-items: end; margin-bottom: 20px; }
.favourites-toolbar .field { min-width: 0; margin: 0; }
.favourites-filters { grid-column: 1 / -1; flex-wrap: wrap; }
.favourites-filters button { display: inline-flex; flex: 1 0 auto; gap: 8px; align-items: center; justify-content: center; white-space: nowrap; }
.favourites-filter-count { color: var(--muted); font-size: 11px; }
.favourites-sync:empty { display: none; }
.favourites-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.favourites-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px; background: var(--surface); }
.favourites-item + .favourites-item { border-top: 1px solid var(--line); }
.favourites-item:hover { background: var(--field); }
.favourites-item-copy { min-width: 0; overflow-wrap: anywhere; }
.favourites-item .account-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.account-page .favourites-item h2 { font-size: 18px; line-height: 1.4; margin: 0; }
.favourites-item h2 a { color: var(--ink); text-decoration: none; }
.favourites-item h2 a:hover { color: var(--accent); text-decoration: underline; }
.account-page .favourites-item p { margin: 4px 0 0; font-size: 12px; }
.favourites-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 48px 24px; }
.account-page .favourites-empty > p { margin-inline: auto; }
.favourites-empty > .ui-icon { width: 32px; height: 32px; color: var(--accent); }
.favourites-empty .account-actions { justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .favourites-toolbar { grid-template-columns: minmax(0, 1fr); }
  .favourites-filters { width: 100%; }
  .favourites-item { grid-template-columns: 32px minmax(0, 1fr) 40px; padding: 16px 12px; gap: 10px; }
  .favourites-item .account-option-icon { width: 32px; height: 32px; }
  .account-page .favourites-item h2 { font-size: 16px; }
}
.account-session-actions { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.account-session-actions .button { min-height: 44px; padding: 10px 13px; font-size: 13px; font-weight: 500; }
.account-session-actions .account-delete-link { color: var(--muted); border-color: transparent; background: transparent; }
.account-session-actions .account-delete-link:hover { color: var(--danger); border-color: #eda09230; background: #eda09208; }
.account-session-list { display: grid; gap: 16px; list-style: none; padding: 0; margin: 24px 0; }
.account-session { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.account-session-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 14px 0; }
.account-session-meta dt { color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.account-session-meta dd { color: var(--ink); font-size: 13px; margin: 0; }
.account-session-agent { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 6px; }
.account-session-agent summary { min-height: 40px; padding: 10px 0; color: var(--accent); font-size: 12px; cursor: pointer; }
.account-page .account-session-agent p { margin: 4px 0 8px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.account-detail-panel { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.account-settings-panel h1 { font-size: clamp(30px, 3vw, 38px); }
.account-settings-panel pre { max-width: 100%; overflow: auto; padding: 16px; border-radius: 8px; background: var(--field); }
.account-settings-panel img, .account-settings-panel svg { max-width: 100%; height: auto; }
.account-page .ui-icon { width: 18px; height: 18px; }
.account-option-icon .ui-icon { width: 20px; height: 20px; }
.account-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.account-table-wrap table { width: 100%; border-collapse: collapse; text-align: start; font-size: 12px; }
.account-table-wrap th, .account-table-wrap td { padding: 14px; min-width: 105px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.account-table-wrap th { color: var(--subtle); background: var(--surface); font-weight: 500; }
.account-table-wrap tr:last-child td { border-bottom: 0; }
.account-table-wrap td { color: var(--muted); }
.pricing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'heading card' 'overview card'; gap: 24px 48px; align-items: start; }
.pricing-layout > .account-heading { grid-area: heading; margin: 0; }
.pricing-overview { grid-area: overview; }
.pro-features { display: grid; gap: 24px; list-style: none; padding: 0; margin: 30px 0; }
.pro-features li { position: relative; padding-inline-start: 30px; }
.pro-features li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 2px; color: var(--accent); }
.pro-features h2 { font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: 0; margin-bottom: 5px; }
.pro-features p { font-size: 13px; }
.pricing-card { grid-area: card; border-color: #cbb27e30; background: var(--paper); }
.pricing-card > .account-eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.pricing-card > h2 { font-size: 28px; margin-bottom: 8px; text-wrap: balance; }
.pricing-card .billing-intro { font-size: 13px; margin: 0; }
.billing-currency-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.account-page .billing-currency-form label { margin: 0; font-size: 13px; }
.account-page .billing-currency-form select { width: auto; flex: 1; min-width: 110px; margin: 0; }
.billing-currency-form .button { min-height: 38px; padding: 7px 12px; }
.billing-currency-form .button[hidden] { display: none; }
.account-page .billing-location { margin-top: 12px; font-size: 10px; }
.account-page .billing-form { margin-top: 24px; }
.billing-options { display: grid; gap: 10px; min-width: 0; padding: 0; margin: 0; border: 0; }
.account-page .billing-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 12px; padding: 17px 18px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--field); cursor: pointer; transition: border-color .15s, background .15s; }
.billing-option:hover:not(.billing-option-unavailable) { border-color: #cbb27e88; }
.account-page .billing-option:has(input:checked) { border-color: var(--accent); background: #cbb27e0a; box-shadow: inset 0 0 0 1px #cbb27e20; }
.billing-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-page .billing-option input { margin-top: 3px; cursor: inherit; }
.account-page .billing-option input:focus-visible { outline: none; }
.billing-option-content { display: grid; gap: 5px; min-width: 0; }
.billing-option-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.billing-option-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.billing-option-name { color: var(--ink); font-size: 14px; font-weight: 600; }
.billing-best-value { color: var(--accent); font-size: 11px; }
.billing-saving { display: inline-flex; gap: 4px; align-items: center; padding: 2px 7px; border-radius: 4px; background: #cbb27e14; color: var(--accent-hover); font-size: 11px; font-weight: 500; white-space: nowrap; }
.billing-monthly-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.billing-monthly-price bdi { color: var(--ink); white-space: nowrap; }
.billing-monthly-price strong { font-size: 27px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.billing-currency { color: var(--subtle); font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.billing-total { color: var(--subtle); font-size: 12px; line-height: 1.6; }
.billing-tax { display: block; }
.billing-status { color: var(--accent); font-size: 12px; }
.account-page .billing-option-unavailable { cursor: default; background: transparent; }
.billing-option-unavailable .billing-monthly-price bdi { color: var(--muted); }
.billing-actions { margin-top: 22px; }
.billing-actions > .button { width: 100%; min-height: 48px; }
.account-page .billing-signin { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.account-page .billing-signin-button { min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.account-page .billing-signin-button:hover { color: var(--accent-hover); background: transparent; }
.account-page .billing-terms { margin: 16px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; }
.pricing-overview .account-device-note { margin-top: 0; }
.pricing-free { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.pricing-free h2 { font-size: 24px; }
.pricing-free p { font-size: 13px; }
.pricing-free-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.pricing-free-actions .account-back { margin: 0; }
.account-page .development-note { padding: 12px 14px; border: 1px dashed #cbb27e40; border-radius: 8px; font-size: 11px; }
.account-danger-panel { border-top-color: #eda09288; }
.account-page .account-danger-panel .account-eyebrow { color: var(--danger); }
.account-status-panel { max-width: 660px; }
.account-status-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border: 1px solid #cbb27e40; border-radius: 50%; background: var(--sand); color: var(--accent); }
.account-status-panel #confirmation-status:not(:empty) { padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); font-size: 13px; }
.account-policy h1 { margin-bottom: 24px; }
.account-policy p { font-size: 14px; }
.privacy-header { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.privacy-policy .privacy-header h1 { margin-bottom: 12px; }
.privacy-policy .privacy-header p { margin-bottom: 10px; }
.privacy-policy .privacy-header p:last-child { margin-bottom: 0; }
.privacy-contents { margin-block: 24px 32px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.privacy-contents summary { cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 600; }
.privacy-contents nav { margin-top: 16px; }
.privacy-policy ul, .privacy-policy ol { padding-inline-start: 24px; margin-block: 0 20px; color: var(--subtle); font-size: 14px; line-height: 1.8; }
.privacy-policy li { margin-bottom: 12px; }
.privacy-contents ol { margin-bottom: 0; }
.privacy-contents li { margin-bottom: 6px; }
.privacy-section + .privacy-section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); }
.privacy-section h2, .privacy-section h3 { scroll-margin-top: 100px; }
.privacy-section h3 { margin: 24px 0 12px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.privacy-section strong { color: var(--ink); font-weight: 600; }
.privacy-policy [data-privacy-settings] { display: inline-flex; align-items: center; min-height: 44px; }
.support-panel h1 { margin-bottom: 16px; }
.support-intro { max-width: 60ch; color: var(--subtle); }
.support-contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.support-field-wide { grid-column: 1 / -1; }
.support-panel textarea { resize: vertical; min-height: 160px; }
.support-panel textarea[aria-invalid=true] { border-color: var(--danger); }
.support-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.support-panel .support-restart { margin-top: 20px; }
.support-panel .cf-turnstile { margin-top: 20px; }
.support-panel #id_code { max-width: 240px; letter-spacing: .3em; font-size: 22px; }
@media (max-width: 600px) { .support-contact-fields { grid-template-columns: minmax(0, 1fr); } }
html[dir=rtl] .account-page h1, html[dir=rtl] .account-page h2, html[dir=rtl] .account-page .auth-title { letter-spacing: 0; line-height: 1.45; }
html[dir=rtl] .account-page .account-eyebrow { letter-spacing: 0; }
html[dir=rtl] .account-page label { font-size: 14px; }
html[dir=rtl] .account-page .account-field-help, html[dir=rtl] .account-page .hint { font-size: 13px; }
html[dir=rtl] .back-arrow { transform: scaleX(-1); }
html[dir=rtl] .account-option > .ui-icon { transform: scaleX(-1); }

@media (max-width: 1000px) {
  .account-header .header-inner { gap: 16px; padding: 0 28px; grid-template-columns: auto 1fr auto; }
  .account-navigation { gap: 20px; }
  .account-page { padding-block: 40px 48px; }
  .auth-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .auth-card { padding: 28px; }
  .pricing-layout { gap: 28px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .account-header:not(.site-header-signed-in) .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 12px 0; }
  .account-header:not(.site-header-signed-in) .language-selector { grid-column: 2; }
  .account-header:not(.site-header-signed-in) .account-navigation { grid-column: 1 / -1; grid-row: 2; gap: 6px; padding-block: 8px; }
}
@media (max-width: 760px) {
  .account-home .account-email-preferences, .account-home #language { scroll-margin-top: 180px; }
  .privacy-section h2, .privacy-section h3 { scroll-margin-top: 144px; }
  .account-header .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 20px 0; }
  .account-header .site-brand { grid-column: 1; grid-row: 1; }
  .account-header .language-selector { grid-column: 2; grid-row: 1; }
  .account-header .account-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 2; gap: 6px; padding-block: 8px; }
  .account-navigation a { min-height: 46px; font-size: 12px; }
  .account-page { padding: 28px 20px 40px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 480px; margin-inline: auto; }
  .auth-card { grid-column: 1; grid-row: 1; }
  .auth-intro { grid-column: 1; grid-row: 2; padding: 8px 12px 0; text-align: center; }
  .auth-art, .auth-rhythm { display: none; }
  .account-page .auth-title { font-size: 32px; margin-bottom: 12px; }
  .account-page .auth-description { max-width: 360px; margin: 0 auto 16px; font-size: 13px; }
  .pricing-layout { grid-template-columns: minmax(0, 1fr); }
  .pricing-card { width: 100%; max-width: 520px; justify-self: center; }
  .account-dashboard { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .account-shortcuts { margin-bottom: 4px; }
  .account-shortcut { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 14px; padding: 20px; }
  .account-shortcut-icon { width: 40px; height: 40px; border-radius: 10px; }
  .account-shortcut-copy strong { font-size: 22px; }
  .account-session-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-tabs .account-link, .public-navigation .account-link { align-self: stretch; min-height: 44px; margin-top: 4px; }
  .pricing-layout { grid-template-areas: 'heading' 'card' 'overview'; grid-template-rows: auto; gap: 28px; }
  .pricing-overview .pro-features { margin-top: 0; }
  .account-heading { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .account-overview { align-items: flex-start; flex-direction: column; gap: 18px; }
  .account-overview .account-practice-link { min-height: 44px; padding: 8px 12px; font-size: 12px; }
  .account-shortcuts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .account-card-heading { padding: 22px 20px 18px; }
  .account-settings-card .account-option, .account-language-setting, .account-home .account-time-zone-setting { padding-inline: 20px; }
  .account-home .account-display-name, .account-home .account-email-preferences { padding-inline: 20px; }
  .account-home .membership-panel { padding: 24px; }
}
@media (max-width: 420px) {
  .account-header .header-inner { padding-inline: 16px; }
  .account-page { padding-inline: 16px; }
  .account-header .brand-name strong { font-size: 22px; }
  .account-header .account-navigation { justify-content: space-between; gap: 4px; }
  .account-navigation a { flex-direction: column; gap: 5px; padding-inline: 2px; min-width: 0; font-size: 11px; }
  .account-navigation a span { max-width: 100%; overflow-wrap: anywhere; }
  .account-navigation .ui-icon { width: 16px; height: 16px; }
  .subscription-panel, .auth-card { padding: 24px 20px; border-radius: 12px; }
  .pricing-card > h2 { font-size: 26px; }
  .account-page .billing-option { padding: 15px 12px; gap: 10px; }
  .billing-monthly-price strong { font-size: 25px; }
  .auth-card h1 { font-size: 32px; }
  .account-status-panel .account-actions > .button, .account-danger-panel .account-actions > .button { width: 100%; }
}
/* Free account shortcuts share the library and account page layout. */
.continue-practice { display: flex; align-items: center; gap: 1rem; margin-block: 1.25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border, #34383d); border-radius: 14px; background: var(--panel, #191c20); }
.continue-practice-copy, .signup-practice > div { flex: 1; min-width: 0; }
.continue-practice h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
.continue-practice p { margin: 0; overflow-wrap: anywhere; }
.continue-practice-copy p > .hint { display: inline; }
.continue-practice-icon { display: grid; place-items: center; flex: 0 0 3rem; height: 3rem; border: 1px solid #cbb27e30; border-radius: 12px; color: var(--accent, #cbb27e); background: #cbb27e09; }
.continue-practice .continue-practice-label { margin-bottom: .3rem; color: var(--muted, #a8aaa7); font-size: .8rem; font-weight: 500; }
.continue-practice .continue-practice-title { color: var(--ink, #f1eee7); font-size: 1.25rem; font-weight: 650; line-height: 1.4; }
.continue-practice-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 0; margin-top: .3rem; color: var(--muted, #a8aaa7); font-size: .8rem; line-height: 1.6; }
.continue-practice-meta > * + *::before { content: '·'; margin-inline: .55rem; color: var(--muted, #a8aaa7); }
.continue-practice-meta time { white-space: nowrap; }
.continue-practice .button { flex-shrink: 0; }
.continue-practice-open { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; }
.continue-practice-open .ui-icon { width: 17px; height: 17px; }
[dir="rtl"] .continue-practice-open .ui-icon { transform: scaleX(-1); }
.continue-practice .continue-practice-dismiss { display: grid; place-items: center; align-self: flex-start; flex: 0 0 36px; min-width: 36px; min-height: 36px; padding: 0; margin: -.35rem 0 0; margin-inline-end: -.5rem; border: 1px solid transparent; background: transparent; color: var(--muted, #a8aaa7); }
.continue-practice-dismiss .ui-icon { width: 17px; height: 17px; }
.continue-practice .continue-practice-dismiss:hover { color: var(--ink, #f1eee7); border-color: var(--border, #34383d); background: #ffffff06; }
.continue-practice :is(a, button):focus-visible { outline: 2px solid var(--accent, #cbb27e); outline-offset: 3px; }
.account-practice-setting { padding: 17px 26px; border-block: 1px solid #ffffff0d; }
.account-practice-setting .check { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; margin: 0; cursor: pointer; }
.account-practice-setting .switch-control { margin: 0; }
.account-practice-setting .check-label strong, .account-practice-setting .check-label small { display: block; }
.account-practice-setting strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.account-practice-setting small { margin-top: .35rem; color: var(--muted); font-size: 12px; line-height: 1.6; font-weight: 400; }
.account-settings-card .account-practice-status { margin: .5rem 26px; font-size: 12px; }
.account-home #account-practice-setting + .account-display-name { padding-top: 20px; }
@media (max-width: 600px) {
  .account-practice-setting { padding-inline: 20px; }
  .account-settings-card .account-practice-status { margin-inline: 20px; }
  .continue-practice { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 1rem; gap: .85rem .5rem; }
  .continue-practice-icon { display: none; }
  .continue-practice-copy { grid-column: 1; grid-row: 1; }
  .continue-practice .continue-practice-dismiss { grid-column: 2; grid-row: 1; min-width: 44px; min-height: 44px; margin: -.5rem 0 0; margin-inline-end: -.5rem; }
  .continue-practice .button { grid-column: 1 / -1; }
  .continue-practice .button { width: 100%; justify-content: center; }
  .continue-practice-meta time { flex-basis: 100%; }
  .continue-practice-meta time::before { content: none; }
  .signup-practice > div { grid-column: 1 / -1; }
}