/*
 * v3 account pages: sign-in, registration, password reset, email verification, two-factor,
 * the reader's library, profile, preferences and book discussion. Owned by the account slice;
 * merged into bde-v3-site.css at the end.
 *
 * The account pages keep their own shell (account/layout) in the v3 look, because they carry
 * what the cached catalogue shell may not: the signed-in reader, the sign-out form, the
 * account language, the reader's own catalogue exit and a light, dark or device appearance.
 *
 * Every colour is an --account-* token, set once for light and once for dark, so the reader's
 * appearance choice (Preferences > Appearance) keeps working. The handoff's own tokens
 * (--ink, --blue, --field ...) are pointed at these inside the account pages, so a v3 class
 * used here follows the reader's appearance too.
 *
 * Accessibility (WCAG 2.2 AA): text at least 4.5:1, field and button outlines at least 3:1,
 * every control at least 44px tall, a visible focus ring, no horizontal scroll at 320px.
 * For that the account pages use a deeper blue (#0B63DE, 5.45:1 on white) than the handoff's
 * #1478FF (4.07:1 on white, below AA for normal text), and a darker field outline than #DCE5F2.
 */

/* ---------- palette ---------- */
body.account-body {
  --account-canvas: #FFFFFF;
  --account-surface: #FFFFFF;
  --account-soft: #F7FAFE;
  --account-ink: #0B214D;
  --account-body: #465C80;
  --account-muted: #5A6F92;
  --account-line: #EDF2F9;
  --account-border: #E6EDF7;
  --account-input-line: #7D8FAD;
  --account-accent: #0B63DE;
  --account-accent-hover: #0A52B8;
  --account-accent-soft: #EAF2FF;
  --account-on-accent: #FFFFFF;
  --account-danger: #B8324A;
  --account-danger-bg: #FDECEE;
  --account-danger-line: #F6D3D9;
  --account-success: #0B6E4B;
  --account-success-bg: #E8F8F1;
  --account-info: #1A4E9A;
  --account-info-bg: #F1F6FD;
  --account-track: #E8EEF7;
  --account-auth-from: #F7FBFF;
  --account-auth-to: #FFF8F8;
  --account-shadow: rgba(31, 75, 135, .08);
  --account-footer: #0B1B36;
  --account-footer-ink: #A9BAD2;
  color-scheme: light;
}

html[data-account-appearance='dark'] body.account-body {
  --account-canvas: #0B1426;
  --account-surface: #111D33;
  --account-soft: #16233D;
  --account-ink: #E8EEF8;
  --account-body: #C3CFE2;
  --account-muted: #A7B6CF;
  --account-line: #1B2944;
  --account-border: #243452;
  --account-input-line: #6B80A3;
  --account-accent: #7FB2FF;
  --account-accent-hover: #A3C6FF;
  --account-accent-soft: #14254A;
  --account-on-accent: #0B1426;
  --account-danger: #FF8FA0;
  --account-danger-bg: #2B1622;
  --account-danger-line: #5A2433;
  --account-success: #7ADBB0;
  --account-success-bg: #0F2A21;
  --account-info: #A9C8FF;
  --account-info-bg: #14254A;
  --account-track: #243452;
  --account-auth-from: #0E1A30;
  --account-auth-to: #0B1426;
  --account-shadow: rgba(0, 0, 0, .35);
  --account-footer: #070E1C;
  --account-footer-ink: #A9BAD2;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-account-appearance='system'] body.account-body {
    --account-canvas: #0B1426;
    --account-surface: #111D33;
    --account-soft: #16233D;
    --account-ink: #E8EEF8;
    --account-body: #C3CFE2;
    --account-muted: #A7B6CF;
    --account-line: #1B2944;
    --account-border: #243452;
    --account-input-line: #6B80A3;
    --account-accent: #7FB2FF;
    --account-accent-hover: #A3C6FF;
    --account-accent-soft: #14254A;
    --account-on-accent: #0B1426;
    --account-danger: #FF8FA0;
    --account-danger-bg: #2B1622;
    --account-danger-line: #5A2433;
    --account-success: #7ADBB0;
    --account-success-bg: #0F2A21;
    --account-info: #A9C8FF;
    --account-info-bg: #14254A;
    --account-track: #243452;
    --account-auth-from: #0E1A30;
    --account-auth-to: #0B1426;
    --account-shadow: rgba(0, 0, 0, .35);
    --account-footer: #070E1C;
    --account-footer-ink: #A9BAD2;
    color-scheme: dark;
  }
}

html[data-account-appearance='dark'] { background: #0B1426; }
@media (prefers-color-scheme: dark) { html[data-account-appearance='system'] { background: #0B1426; } }

/* The handoff's tokens follow the account palette on these pages. */
body.account-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  --ink: var(--account-ink);
  --body: var(--account-body);
  --muted: var(--account-muted);
  --sub: var(--account-body);
  --line: var(--account-line);
  --border: var(--account-border);
  --field: var(--account-input-line);
  --soft: var(--account-soft);
  --blue: var(--account-accent);
  --blue-h: var(--account-accent-hover);
  --blue-50: var(--account-accent-soft);
  --red: var(--account-danger);
  --red-50: var(--account-danger-bg);
  --green: var(--account-success);
  --green-50: var(--account-success-bg);
  background: var(--account-canvas);
  color: var(--account-ink);
  font-family: var(--f2-ui, ui-sans-serif, system-ui, sans-serif);
  line-height: 1.5;
}
html[lang='bn'] body.account-body { font-family: var(--f2-ui, 'Hind Siliguri', ui-sans-serif, system-ui, sans-serif); }
html[lang='bn'] body.account-body :is(h1, h2, h3) { line-height: 1.35; letter-spacing: 0; }

.account-body a { color: var(--account-accent); }
.account-body a:hover { color: var(--account-accent-hover); }
.account-body :is(h1, h2, h3, p, a, label, small, strong, code, dt, dd, summary, span, b) { overflow-wrap: anywhere; }
.account-body :is(button, input, select, textarea) { font-family: inherit; }

/* Focus: one visible ring on every control, clear of the fixed phone bar when scrolled to. */
.account-body :is(a, button, input, select, textarea, summary) { scroll-margin-block: 24px 96px; }
.account-body :is(a, button, input, select, textarea, summary):focus-visible,
.account-body .account-appearance-options input:focus-visible + span {
  outline: 3px solid var(--account-accent);
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: none;
}

/* ---------- shell ---------- */
.account-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }

.account-header { background: var(--account-surface); border-bottom: 1px solid var(--account-line); position: relative; z-index: 20; }
.account-header__inner { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.account-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; flex-shrink: 0; color: var(--account-ink); font-size: 16.5px; font-weight: 700; letter-spacing: -.4px; }
.account-body .account-brand, .account-body .account-brand:hover { color: var(--account-ink); }
.account-brand .bdebooks-brand__symbol { flex: 0 0 auto; width: 24px; height: 22px; color: var(--account-accent); }
.account-brand .bdebooks-brand__wordmark { font-weight: 700; white-space: nowrap; }
.account-brand > span { padding-left: 10px; border-left: 1px solid var(--account-border); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--account-muted); white-space: nowrap; }
.account-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 0; }
.account-header__actions form { margin: 0; }

.account-language { position: relative; }
.account-language summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--account-border); border-radius: 9px; background: var(--account-surface);
  font-size: 12.5px; font-weight: 600; color: var(--account-ink); cursor: pointer; list-style: none;
}
.account-language summary::-webkit-details-marker { display: none; }
.account-language summary span, .account-header__logout { white-space: nowrap; overflow-wrap: normal; }
.account-language__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 180px; padding: 6px;
  display: flex; flex-direction: column; background: var(--account-surface); border: 1px solid var(--account-border);
  border-radius: 12px; box-shadow: 0 20px 50px var(--account-shadow);
}
.account-language__menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--account-ink); }
.account-body .account-language__menu a { color: var(--account-ink); }
.account-language__menu a:hover { background: var(--account-accent-soft); }
.account-language__menu a[aria-current='page'] { background: var(--account-accent-soft); font-weight: 700; }
.account-body .account-language__menu a[aria-current='page'] { color: var(--account-accent); }

.account-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 50%; background: var(--account-accent-soft); font-size: 14px; font-weight: 700;
}
.account-body .account-avatar { color: var(--account-accent); }
.account-header__logout {
  min-height: 44px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--account-danger); cursor: pointer;
}
.account-header__logout:hover { background: var(--account-danger-bg); }

.account-main { flex: 1 0 auto; }
.account-footer { flex-shrink: 0; }
.account-main:focus { outline: none; }

/* The reader's own catalogue, kept across sign-in: a way back, never a list of catalogues. */
.reader-library-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-top: 14px; font-size: 12.5px; font-weight: 600; }
.reader-library-breadcrumbs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.reader-library-breadcrumbs a:first-child::before { content: '\2190'; font-weight: 700; }

/* Signed in: the handoff's account sidebar beside the page. */
.account-frame { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; align-items: start; padding-top: 26px; padding-bottom: 44px; }
.account-frame__content { min-width: 0; }
.account-shell:has(> .reader-library-breadcrumbs) + .account-frame { padding-top: 10px; }
.account-frame .account-shell { max-width: none; padding: 0; }
.account-primary-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.account-primary-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 500; }
.account-body .account-primary-nav a { color: var(--account-body); }
.account-body .account-primary-nav a:hover { background: var(--account-soft); color: var(--account-ink); }
.account-body .account-primary-nav a[aria-current='page'] { background: var(--account-accent-soft); color: var(--account-accent); font-weight: 700; }

.account-footer { margin-top: 40px; background: var(--account-footer); color: var(--account-footer-ink); }
.account-footer .account-shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 18px; padding-bottom: 18px; }
.account-footer strong { color: #FFFFFF; font-size: 14px; }
.account-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.account-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 500; }
.account-body .account-footer a { color: var(--account-footer-ink); }
.account-body .account-footer a:hover { color: #FFFFFF; }

.account-mobile-nav { display: none; }

/* ---------- shared pieces ---------- */
.account-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--account-muted); }
.account-page-head { margin-bottom: 18px; }
.account-page-head h1, .account-body .account-main h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2; color: var(--account-ink); }
.account-page-head > p, .account-page-head > div > p:not(.account-kicker) { margin: 6px 0 0; font-size: 13px; color: var(--account-muted); max-width: 640px; }
.account-body .account-main h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; color: var(--account-ink); }
.account-body .account-main h3 { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--account-ink); }

.account-card { background: var(--account-surface); border: 1px solid var(--account-border); border-radius: 16px; padding: 20px 22px; }
.account-card + .account-card, .account-stack > * + * { margin-top: 18px; }
.account-stack > .account-feedback { margin-bottom: 0; }
.account-main:has(> .account-auth) + .account-footer { margin-top: 0; }
/* The sign-in backdrop fills the space down to the footer (designs/49 Mobile Login), so a
   short page never ends in a white band between the card and the footer. */
body.account-body { min-height: 100dvh; }
.account-main:has(> .account-auth) { display: flex; flex-direction: column; }
.account-main > .account-auth { flex: 1 0 auto; }
.account-card > header { margin-bottom: 14px; }
.account-card > header p { margin: 4px 0 0; font-size: 12.5px; color: var(--account-muted); }

.account-field { margin-bottom: 14px; }
.account-field > label, .account-field__label-row label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; color: var(--account-body); }
.account-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.account-field > p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--account-muted); }
.account-body .account-field :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea),
.account-body .account-library-editor__controls :is(input, select) {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--account-input-line); border-radius: 10px;
  background: var(--account-surface); color: var(--account-ink); font-weight: 500; font-size: 15px; line-height: 1.4;
}
.account-body .account-field select, .account-body .account-library-editor__controls select { padding-right: 32px; }
.account-body .account-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.account-body :is(.account-field, .account-library-editor__controls) :is(input, select, textarea):focus { border-color: var(--account-accent); }
.account-body :is(.account-field, .account-library-editor__controls) :is(input, select, textarea)[aria-invalid='true'] { border-color: var(--account-danger); background: var(--account-danger-bg); }
.account-field-error, .reader-library-field-error { display: block; margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: var(--account-danger); }

.account-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--account-body); cursor: pointer; }
.account-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--account-accent); }
.account-check--panel { padding: 8px 0; border-bottom: 1px solid var(--account-line); margin: 0; }
.account-check--panel + :is(button, .account-primary-action, .account-danger-action) { margin-top: 16px; }

.account-primary-action, .account-secondary-action, .account-danger-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 13px; line-height: 1.3;
  text-align: center; white-space: normal; cursor: pointer; text-decoration: none;
}
.account-body .account-primary-action { background: var(--account-accent); border-color: var(--account-accent); color: var(--account-on-accent); box-shadow: 0 5px 14px rgba(20, 120, 255, .18); }
.account-body .account-primary-action:hover { background: var(--account-accent-hover); border-color: var(--account-accent-hover); color: var(--account-on-accent); }
.account-body .account-secondary-action { background: var(--account-surface); border-color: var(--account-input-line); color: var(--account-ink); }
.account-body .account-secondary-action:hover { border-color: var(--account-accent); color: var(--account-accent); }
.account-body .account-danger-action { background: var(--account-surface); border-color: var(--account-danger-line); color: var(--account-danger); }
.account-body .account-danger-action:hover { border-color: var(--account-danger); }
.account-body .account-danger-action--solid { background: var(--account-danger); border-color: var(--account-danger); color: var(--account-surface); }
.account-body .account-danger-action--solid:hover { background: var(--account-ink); border-color: var(--account-ink); color: var(--account-surface); }
.account-body :is(.account-primary-action, .account-secondary-action, .account-danger-action):disabled { opacity: .65; cursor: progress; }

/* Messages: the shared .notice look, following the reader's appearance. */
.account-feedback { margin: 0 0 16px; }
.account-feedback ul { margin: 0; padding-left: 18px; }
.account-body .notice-success { background: var(--account-success-bg); border-color: var(--account-success-bg); color: var(--account-success); }
.account-body .notice-error { background: var(--account-danger-bg); border-color: var(--account-danger-line); color: var(--account-danger); }
.account-body .notice-info { background: var(--account-info-bg); border-color: var(--account-info-bg); color: var(--account-info); }
.account-field .account-feedback { margin: 6px 0 0; padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 600; color: var(--account-danger); }

.account-empty { margin: 0; padding: 22px 12px; border: 1px dashed var(--account-input-line); border-radius: 12px; text-align: center; font-size: 12.5px; color: var(--account-muted); }

.account-status {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px; background: var(--account-soft); color: var(--account-body);
}
.account-status--approved { background: var(--account-success-bg); color: var(--account-success); }
.account-status--pending { background: var(--account-info-bg); color: var(--account-info); }
.account-status--rejected, .account-status--spam, .account-status--removed, .account-status--trash { background: var(--account-danger-bg); color: var(--account-danger); }

.account-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.account-inline-actions form { margin: 0; }
.account-inline-actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 600; }
.account-inline-actions button {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--account-input-line); border-radius: 9px;
  background: var(--account-surface); color: var(--account-ink); font-weight: 600; font-size: 12px; line-height: 1; cursor: pointer;
}
.account-history-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.account-history-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--account-input-line); font-size: 12px; font-weight: 600;
}

/* Native progress bars drawn as the handoff's thin track. */
.account-body progress {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 220px; height: 5px;
  border: 0; border-radius: 99px; background: var(--account-track); color: var(--account-accent); overflow: hidden;
}
.account-body progress::-webkit-progress-bar { background: var(--account-track); border-radius: 99px; }
.account-body progress::-webkit-progress-value { background: var(--account-accent); border-radius: 99px; }
.account-body progress::-moz-progress-bar { background: var(--account-accent); border-radius: 99px; }
.account-progress, .reader-library-continue-progress { display: flex; align-items: center; gap: 10px; }
.account-progress > :is(span, b), .reader-library-continue-progress b { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--account-accent); white-space: nowrap; overflow-wrap: normal; }
.account-progress progress, .reader-library-continue-progress progress { flex: 1 1 auto; min-width: 0; }

/* ---------- sign in, register, reset, verify, two-factor challenge ---------- */
.account-auth {
  display: grid; place-items: center; min-height: calc(100vh - 160px); padding: 40px 16px;
  background: linear-gradient(140deg, var(--account-auth-from), var(--account-canvas) 60%, var(--account-auth-to));
}
.account-auth__card {
  width: min(460px, 100%); padding: 30px; border: 1px solid var(--account-border); border-radius: 22px;
  background: var(--account-surface); box-shadow: 0 20px 50px var(--account-shadow);
}
.account-auth__intro .account-kicker {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin: 0 0 18px; padding: 0 10px;
  border: 1px solid var(--account-border); border-radius: 8px; background: var(--account-surface);
  font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--account-body);
}
.account-auth__intro .account-kicker svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--account-accent); }
.account-body .account-auth h1 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 6px; }
.account-auth__intro > p:not(.account-kicker) { margin: 0 0 20px; font-size: 13px; line-height: 1.55; color: var(--account-muted); }
.account-auth__form .account-primary-action { width: 100%; margin-top: 4px; }
.account-auth__form form { margin: 0; }
.account-auth__switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; margin: 12px 0 0; font-size: 12.5px; color: var(--account-body); }
.account-auth__switch a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- dashboard ---------- */
.account-hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-radius: 14px; }
.account-hello__who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.account-hello .account-avatar { width: 56px; height: 56px; font-size: 19px; }
.account-body .account-hello h1 { font-size: 21px; letter-spacing: -.6px; }
.account-hello p { margin: 4px 0 0; font-size: 12.5px; color: var(--account-muted); }

.account-security-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.account-security-summary p { margin: 4px 0 0; font-size: 12.5px; color: var(--account-muted); }
.account-security-summary__action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.account-security-summary__action strong { font-size: 12px; color: var(--account-body); }

.account-library-summary__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.reader-library-shelf-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.reader-library-shelf-counts > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--account-soft); }
.reader-library-shelf-counts dt { font-size: 12px; font-weight: 600; }
.reader-library-shelf-counts dt a { display: inline-flex; align-items: center; min-height: 44px; }
.reader-library-shelf-counts dd { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.6px; color: var(--account-ink); }

.account-library-summary__continue { margin-top: 18px; }
.account-body .account-library-summary__continue h3 { margin-bottom: 10px; }
.account-library-summary__continue ol, .account-continue ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.account-library-summary__continue li a, .account-continue li a {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(120px, 220px); align-items: center; gap: 14px;
  padding: 10px 12px; border: 1px solid var(--account-border); border-radius: 12px; color: var(--account-ink);
}
.account-body .account-library-summary__continue li a, .account-body .account-continue li a { color: var(--account-ink); }
.account-body .account-library-summary__continue li a:hover, .account-body .account-continue li a:hover { border-color: var(--account-accent); }
.reader-library-continue-identity { display: flex; flex-direction: column; min-width: 0; }
.reader-library-continue-identity strong { font-size: 13.5px; font-weight: 700; }
.reader-library-continue-identity small { margin-top: 3px; font-size: 11.5px; color: var(--account-muted); }

.account-dashboard__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.account-dashboard__grid > .account-card { margin-top: 0; }
.account-panel__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.account-panel__heading > span { font-size: 11.5px; font-weight: 600; color: var(--account-muted); }
.account-notification-list, .account-activity-list, .account-own-note-list { list-style: none; margin: 0; padding: 0; }
.account-notification-list > li, .account-activity-list > li, .account-own-note-list > li { padding: 12px 0; border-top: 1px solid var(--account-line); }
.account-notification-list > li:first-child, .account-activity-list > li:first-child, .account-own-note-list > li:first-child { border-top: 0; padding-top: 0; }
.account-notification-list p, .account-activity-list p, .account-own-note-list p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--account-body); }
.account-notification-list strong { display: block; margin-top: 2px; font-size: 13px; }
.account-notification-list time, .account-activity-list time, .account-own-note-list time { display: block; margin-top: 2px; font-size: 11px; color: var(--account-muted); }
.account-notification-list > li.is-unread strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--account-accent); vertical-align: 1px; }
.account-activity-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-activity-list__meta time { margin: 0; }
.account-activity-list h3 { margin-top: 6px; }

/* ---------- library ---------- */
.account-library__hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.account-library__hero p { margin: 6px 0 0; font-size: 13px; color: var(--account-muted); }
.account-body .account-library__privacy, .account-library-editor__privacy { max-width: 360px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--account-soft); font-size: 11.5px; line-height: 1.5; color: var(--account-muted); }

.account-continue { margin-bottom: 22px; }
.account-continue > header { margin-bottom: 10px; }

.account-shelf-tabs { display: flex; gap: 26px; margin-top: 4px; border-bottom: 1px solid var(--account-line); overflow-x: auto; scrollbar-width: thin; }
.account-shelf-tabs a {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 44px; margin-bottom: -1px; padding: 0 2px;
  border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.account-body .account-shelf-tabs a { color: var(--account-body); }
.account-body .account-shelf-tabs a[aria-current='page'] { border-bottom-color: var(--account-accent); color: var(--account-accent); font-weight: 700; }
.account-shelf-tabs b { display: inline-flex; align-items: center; min-width: 20px; height: 18px; padding: 0 6px; justify-content: center; border-radius: 999px; background: var(--account-soft); font-size: 10.5px; font-weight: 700; color: var(--account-body); }

.account-library-list { margin-top: 16px; }
.reader-library-results-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.reader-library-results-heading > span { display: inline-flex; align-items: center; min-width: 22px; height: 20px; padding: 0 7px; justify-content: center; border-radius: 999px; background: var(--account-soft); font-size: 11px; font-weight: 700; color: var(--account-body); }
.account-library-list > ol { list-style: none; margin: 0; padding: 0; }
.account-library-book {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 170px auto; align-items: center; gap: 16px;
  margin-top: 12px; padding: 14px; border: 1px solid var(--account-border); border-radius: 12px; background: var(--account-surface);
}
.account-library-book__identity { min-width: 0; }
.account-library-book__catalogue { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--account-muted); }
.account-body .account-library-book h3 { margin-top: 3px; font-size: 13.5px; }
.account-body .account-library-book h3 a { color: var(--account-ink); }
.account-body .account-library-book h3 a:hover { color: var(--account-accent); }
.account-library-book__identity p { margin: 3px 0 0; font-size: 11.5px; color: var(--account-muted); }
.reader-library-book-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.reader-library-book-state .account-progress { width: 100%; }
.reader-library-shelf { display: inline-flex; align-items: center; min-height: 22px; margin: 0; padding: 0 8px; border-radius: 999px; background: var(--account-accent-soft); font-size: 10.5px; font-weight: 700; color: var(--account-accent); }
.reader-library-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.reader-library-actions a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 600; }
.reader-library-actions .account-secondary-action { font-size: 12px; }

.reader-library-cover { position: relative; display: block; flex: 0 0 auto; overflow: hidden; border-radius: 7px; background: #EEF2F8; }
.reader-library-cover img { width: 100%; height: 100%; object-fit: cover; }
.reader-library-cover--row { width: 52px; height: 78px; }
.reader-library-cover--list { width: 54px; height: 81px; }
.reader-library-cover--editor { width: 160px; height: 240px; border-radius: 10px; }
.reader-library-cover__blank { position: absolute; inset: 0; background: linear-gradient(160deg, #E9EFF8, #DCE6F3); }

.reader-library-empty { margin-top: 18px; padding: 40px 20px; border: 1px dashed var(--account-input-line); border-radius: 14px; text-align: center; }
.reader-library-empty p { margin: 10px auto 0; max-width: 460px; font-size: 12.5px; color: var(--account-muted); }
.reader-library-empty > a { margin: 14px 6px 0; }
.reader-library-empty__shelf { display: flex; justify-content: center; gap: 8px; opacity: .7; }

.reader-library-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; font-size: 12.5px; color: var(--account-muted); }

/* One saved book */
.account-library-editor__hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 10px 0 18px; }
.reader-library-editor-identity { display: flex; align-items: flex-end; gap: 20px; min-width: 0; }
.reader-library-editor-identity > div { min-width: 0; }
.account-library-editor__author { margin: 6px 0 0; font-size: 13px; color: var(--account-muted); }
.account-library-editor__form > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.account-library-editor__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.account-library-editor__controls > label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 650; color: var(--account-body); }
.account-library-editor__controls small { font-size: 11.5px; font-weight: 500; color: var(--account-muted); }
.account-library-editor__progress { display: flex; align-items: center; gap: 8px; }
.account-library-editor__progress b { font-size: 13px; color: var(--account-muted); }
.account-library-editor__controls > button, .account-library-editor__controls > a { grid-column: auto; justify-self: start; }
.account-library-editor__controls > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 600; }
.account-library-editor__remove { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--account-line); }

/* ---------- profile, preferences, two-factor ---------- */
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.account-settings-grid > .account-wide { grid-column: 1 / -1; }
.account-profile-email { margin-bottom: 14px; }
.account-profile-email > span { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; color: var(--account-body); }
.account-profile-email strong { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px dashed var(--account-input-line); border-radius: 10px; font-size: 14px; font-weight: 500; }
.account-profile-email p { margin: 6px 0 0; font-size: 11.5px; color: var(--account-muted); }

.account-preference-group { margin: 0 0 18px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--account-line); }
.account-preference-group legend { padding: 0; font-size: 13.5px; font-weight: 700; color: var(--account-ink); }
.account-preference-group > p { margin: 4px 0 10px; font-size: 12.5px; color: var(--account-muted); }
.account-preference-note { font-size: 11.5px !important; }
.account-appearance-options { display: flex; flex-wrap: wrap; gap: 8px; }
.account-appearance-options label { position: relative; }
.account-appearance-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.account-appearance-options span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--account-input-line); background: var(--account-surface); font-size: 12.5px; font-weight: 600;
  color: var(--account-body); cursor: pointer;
}
.account-appearance-options input:checked + span { background: var(--account-accent); border-color: var(--account-accent); color: var(--account-on-accent); }

.account-privacy-card--danger { border-color: var(--account-danger-line); }
.account-body .account-privacy-card--danger h2 { color: var(--account-danger); }
.account-danger-notice { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--account-body); }
.account-export-history { margin-top: 16px; }
.account-export-history ul { list-style: none; margin: 8px 0 0; padding: 0; }
.account-export-history li { padding: 10px 0; border-top: 1px solid var(--account-line); }
.account-export-history li > div { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; }
.account-export-history li > div span, .account-export-history li p, .account-export-history > p { margin: 3px 0 0; font-size: 11.5px; color: var(--account-muted); }
.account-deletion-pending { margin-bottom: 14px; padding: 14px 16px; border-radius: 12px; background: var(--account-danger-bg); color: var(--account-danger); }
.account-deletion-pending p { margin: 4px 0 0; font-size: 12.5px; }
.account-deletion-pending code { font-size: 12px; }

.account-security__credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 14px 0; }
.account-security__credentials code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--account-soft); font-size: 13px; word-break: break-all; }
.account-security__credentials label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; color: var(--account-body); }
.account-body .account-security__credentials textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--account-input-line); border-radius: 10px; background: var(--account-surface); color: var(--account-ink); font: 500 12.5px/1.5 ui-monospace, monospace; }
.account-security__credentials p { margin: 6px 0 0; font-size: 11.5px; color: var(--account-muted); }
.account-recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.account-recovery-codes code { display: block; padding: 10px 12px; border-radius: 9px; background: var(--account-soft); font-size: 13px; text-align: center; }
.account-security__enabled { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--account-success-bg); color: var(--account-success) !important; font-weight: 700; }
.account-security__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-security__grid > .account-card { margin-top: 0; }
.account-security__grid p { font-size: 12.5px; color: var(--account-muted); }

.account-privacy__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.account-privacy__grid .account-card { margin-top: 0; }
.account-privacy__grid .account-privacy__side > * + * { margin-top: 18px; }
.account-security__hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.account-security__hero > div > p:not(.account-kicker) { margin: 6px 0 0; font-size: 13px; color: var(--account-muted); max-width: 640px; }
.account-security__setup > p:not(.account-kicker), .account-security__notice > p:not(.account-kicker) { margin: 6px 0 12px; font-size: 12.5px; color: var(--account-muted); }

/* ---------- discussion ---------- */
.account-discussion__hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.account-discussion__hero > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 600; }
.account-discussion__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.account-discussion__columns > .account-card { margin-top: 0; }
.account-own-note-list > li > form { margin-top: 6px; }
.account-disclosure { margin-top: 8px; }
.account-disclosure > summary, .account-spoiler summary {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 600;
  color: var(--account-accent); cursor: pointer;
}
.account-disclosure[open] > summary { margin-bottom: 8px; }
.account-public-note-list, .account-public-note-list__replies { list-style: none; margin: 0; padding: 0; }
.account-public-note-list > li { padding: 12px 0; border-top: 1px solid var(--account-line); }
.account-public-note-list > li:first-child { border-top: 0; padding-top: 0; }
.account-public-note-list__replies { margin: 10px 0 0 18px; padding-left: 14px; border-left: 2px solid var(--account-line); }
.account-public-note header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.account-public-note header strong { font-size: 13px; }
.account-public-note header time { font-size: 11px; color: var(--account-muted); }
.account-public-note p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--account-body); }
.account-body .account-disclosure--report > summary { color: var(--account-muted); font-weight: 500; font-size: 12px; }

/* ---------- tablet and phone ---------- */
@media (max-width: 980px) {
  .account-frame { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .account-primary-nav { position: static; flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .account-primary-nav a { flex: 0 0 auto; padding: 0 15px; border: 1px solid var(--account-border); border-radius: 999px; white-space: nowrap; }
  .account-dashboard__grid, .account-discussion__columns, .account-security__grid, .account-privacy__grid { grid-template-columns: minmax(0, 1fr); }
  .account-library-book { grid-template-columns: 54px minmax(0, 1fr); }
  .reader-library-book-state, .reader-library-actions { grid-column: 2 / -1; }
  .reader-library-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .account-primary-nav { display: none; }
  .account-mobile-nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    min-height: 62px; padding: 4px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--account-surface); border-top: 1px solid var(--account-border);
  }
  .account-mobile-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 4px 2px;
    font-size: 10.5px; font-weight: 600; line-height: 1.2; text-align: center; white-space: normal;
  }
  .account-body .account-mobile-nav a { color: var(--account-muted); }
  .account-body .account-mobile-nav a[aria-current='page'] { color: var(--account-accent); }
  .account-mobile-nav svg { width: 22px; height: 22px; }
  body.account-body:has(.account-mobile-nav) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .account-settings-grid, .account-security__credentials, .account-library-editor__controls { grid-template-columns: minmax(0, 1fr); }
  .reader-library-shelf-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-library-summary__continue li a, .account-continue li a { grid-template-columns: 52px minmax(0, 1fr); }
  .account-library-summary__continue li a > :last-child, .account-continue li a > :last-child { grid-column: 2; }
}

@media (max-width: 560px) {
  .account-header__inner { gap: 8px; }
  .account-brand > span { display: none; }
  .account-header__logout { padding: 0 6px; }
  .account-avatar { width: 40px; height: 40px; font-size: 13px; }
  .account-language summary { padding: 0 10px; }
  .account-auth { padding: 20px 12px 28px; place-items: start center; min-height: 0; }
  .account-auth__card { padding: 22px 18px; border-radius: 18px; }
  .account-body .account-auth h1 { font-size: 25px; }
  .account-card { padding: 16px; }
  .account-body .account-main h1 { font-size: 23px; }
  .account-body .account-field :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea),
  .account-body .account-library-editor__controls :is(input, select) { font-size: 16px; }
  .reader-library-cover--editor { width: 110px; height: 165px; }
  .reader-library-editor-identity { align-items: flex-start; gap: 14px; }
  .account-hello { padding: 16px; }
  .reader-library-book-state, .reader-library-actions { grid-column: 1 / -1; }
  .reader-library-actions .account-secondary-action { flex: 1 1 auto; }
  .account-hello .account-avatar { width: 48px; height: 48px; font-size: 16px; }
  .account-footer { margin-top: 28px; }
}

@media (max-width: 380px) {
  .account-header .account-avatar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .account-body :is(a, button, input, select, textarea, summary) { transition: none; scroll-behavior: auto; }
}

@media (forced-colors: active) {
  .account-body :is(.account-primary-nav, .account-mobile-nav, .account-language__menu, .account-shelf-tabs) a[aria-current='page'],
  .account-body .account-appearance-options input:checked + span { text-decoration: underline; }
  .account-body progress { border: 1px solid CanvasText; }
}

@media print {
  .account-header, .account-footer, .account-mobile-nav, .account-primary-nav { display: none; }
}

/* Handoff r2's img[width][height]{height:auto} outranks the single-class cover box. */
.reader-library-cover img[width][height] { height: 100%; }

/* A field's own error is red (designs/44 Interaction States), whatever paragraph rule the
   form it sits in sets for its muted notes. */
.account-body .account-field-error, .account-body .reader-library-field-error { color: var(--account-danger); }

/* Turnstile on the discussion page: rendered compact or flexible by the page, never wider
   than its form, so a 320px phone does not scroll sideways. */
.account-body .cf-turnstile { max-width: min(100%, 420px); margin: 4px 0 12px; }


/* r5 --------------------------------------------------------------------------------- */
/* r5-3 (34 phone): the shelf tabs scrolled sideways with no sign that "Finished" and
   "Archived" existed. On a phone all five tabs now wrap into view. */
@media (max-width: 560px) {
  .account-shelf-tabs { flex-wrap: wrap; gap: 0 20px; overflow-x: visible; }
}
/* r5-4 (36): a group ending in a checkbox drew two lines, the checkbox's and the group's. */
.account-preference-group > .account-check--panel:last-child { border-bottom: 0; }