/* Self-hosted Heebo + Assistant (variable weight, Hebrew + Latin subsets).
   Files vendored in static/fonts/ under the SIL Open Font License (see
   static/fonts/OFL-Heebo.txt and static/fonts/OFL-Assistant.txt).
   No third-party font requests: CSP font-src/style-src are 'self' only. */
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/fonts/heebo-hebrew-var.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/fonts/heebo-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;src:url('/static/fonts/assistant-hebrew-var.woff2') format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;src:url('/static/fonts/assistant-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html{overflow-y:scroll;scrollbar-gutter:stable}:root{font-family:var(--font-body);color:#1f2937;background:#f5f3ef}body{margin:0}.topbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;background:#2f3a2f;color:white;padding:1rem 2rem}.topbar span{display:block;font-size:var(--font-size-small);opacity:.8}.topbar a{color:white;margin-inline-start:1rem;text-decoration:none}.container{max-width:1180px;margin:2rem auto;padding:0 1rem}.panel{background:white;border-radius:18px;padding:1.5rem;box-shadow:0 10px 30px #0001}.narrow{max-width:760px;margin:auto}.row{display:flex;align-items:center;gap:1rem}.space{justify-content:space-between}.button,button{background:#7b4f2c;color:white;border:0;border-radius:10px;padding:.65rem 1rem;text-decoration:none;cursor:pointer;display:inline-block}.secondary{background:#2f6173}input,textarea,select{width:100%;box-sizing:border-box;border:1px solid #d1d5db;border-radius:10px;padding:.65rem;margin-top:.25rem}textarea{min-height:95px}.grid-form{display:grid;gap:1rem}.hint{color:#6b7280}.error{background:#fee2e2;color:#991b1b;padding:1rem;border-radius:12px}.success{background:#dcfce7;color:#166534;padding:1rem;border-radius:12px;margin:1rem 0}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #e5e7eb;padding:.75rem;text-align:start;vertical-align:top}.actions{display:grid;gap:.5rem}.inline-form{display:grid;grid-template-columns:1.6fr 1fr .7fr .7fr auto auto;gap:.4rem;align-items:end}.checkbox-inline{display:flex;align-items:center;gap:.35rem;white-space:nowrap}.checkbox-inline input{width:auto;margin:0}.downloads{display:flex;gap:.75rem;flex-wrap:wrap}.customer{max-width:860px}.reader-protection{-webkit-user-select:none;user-select:none;background:#111827;color:#e5e7eb}.reader-shell{min-height:100dvh;display:flex;flex-direction:column}.reader-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.5rem;background:#0f172a;border-bottom:1px solid #334155}.reader-header span{display:block;color:#cbd5e1;font-size:var(--font-size-small)}.reader-stage{position:relative;flex:1;overflow:hidden}.reader-frame{display:block;width:100%;height:calc(100dvh - 75px);border:0;background:white}.preview-message{background:white;color:#1f2937;border-radius:18px;margin:2rem auto;padding:2rem;max-width:760px;box-shadow:0 10px 30px #0002}.access-actions{align-items:center}.audio-panel{margin-top:1.5rem;padding:1rem;border:1px solid #e5e7eb;border-radius:14px;background:#fafafa}.audio-panel audio{width:100%;margin-top:.75rem}.watermark-grid{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4rem;opacity:.18;transform:rotate(-24deg);align-content:center;color:#7b1f1f;font-size:1.05rem;font-weight:700;text-align:center;mix-blend-mode:multiply}.reader-help{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;padding:.65rem 1rem;background:#0f172a;border-top:1px solid #334155;color:#cbd5e1;font-size:var(--font-size-small)}.reader-help a{color:#bfdbfe}.screen-warning{position:fixed;inset:auto 2rem 2rem 2rem;background:#991b1b;color:white;padding:1rem;border-radius:12px;text-align:center;z-index:20}@media print{body.reader-protection *{display:none!important}body.reader-protection:before{content:'Printing is disabled for this protected reader.';display:block;color:#000;padding:2rem}}@media(max-width:850px){.inline-form{grid-template-columns:1fr}.topbar,.reader-header{flex-direction:column;align-items:flex-start}}


.danger{background:#991b1b}.segment-admin{margin-top:1.5rem}.segment-form,.segment-admin-item{border:1px solid #e5e7eb;border-radius:14px;padding:1rem;margin:1rem 0;background:#fafafa}.segment-admin-item{display:grid;gap:1rem}.book-cover{display:block;max-width:220px;width:100%;height:auto;border-radius:14px;margin:1rem auto;box-shadow:0 8px 24px #0002}.segmented-player h1,.segmented-player h2,.segmented-player h3{line-height:1.3}.wide-audio{width:100%;margin:1rem 0}.now-playing{background:#f9fafb;border:2px solid #e5e7eb;border-radius:14px;padding:1rem;margin:1rem 0}.now-playing p{font-size:1.35rem;font-weight:700;margin:.5rem 0}.player-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:1rem 0}.player-controls button,.segment-choice{font-size:1.05rem;line-height:1.35;min-height:48px}.segments-list{padding-inline-start:1.5rem}.segments-list li{margin:.5rem 0}.segment-choice{width:100%;text-align:start;background:#2f6173}.segment-choice.active,.segment-choice[aria-current="true"]{background:#7b4f2c;outline:3px solid #f59e0b}button:focus-visible,.button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}@media (max-width:640px){.player-controls{grid-template-columns:1fr}.button,button{width:100%;box-sizing:border-box;text-align:center}}


/* Floating customer accessibility toolbar. Fixed overlay, outside normal
   document flow: it reserves no grid column, body padding, or wrapper width,
   so the header/content/footer always render full-width. --a11y-header-h is
   measured from the page's real <header> by accessibility-toolbar.js so the
   rail starts below the header and centers in the remaining viewport height;
   4.5rem is only the pre-JS fallback (matches the public header's assumed
   height used elsewhere in this file). */
.accessibility-toolbar{position:fixed;inset-inline-start:.75rem;top:calc(var(--a11y-header-h,4.5rem) + (100dvh - var(--a11y-header-h,4.5rem))/2);transform:translateY(-50%);z-index:2147483000;direction:rtl;font-family:var(--font-body);overflow:visible}.accessibility-toolbar .accessibility-floating-button{box-shadow:0 10px 28px #0004;border:2px solid #fff;background:#1d4ed8;color:#fff;border-radius:999px;padding:.6rem .4rem;font-weight:800;box-sizing:border-box;width:7.5rem;min-width:0;min-height:44px;white-space:normal}.accessibility-floating-button:focus-visible{outline:4px solid #fbbf24;outline-offset:3px}.accessibility-panel{position:absolute;inset-inline-start:calc(100% + .6rem);top:50%;transform:translateY(-50%);width:min(340px,calc(100vw - 11rem));max-height:min(80dvh,calc(100dvh - 1.5rem));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;color:#111827;border:2px solid #1d4ed8;border-radius:18px;box-shadow:0 18px 48px #0004;padding:1rem}.accessibility-panel[hidden]{display:none}.accessibility-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom:1px solid #e5e7eb;margin-bottom:.75rem;position:sticky;top:-1rem;z-index:1;background:inherit;padding-top:1rem}.accessibility-panel h2{font-size:1.25rem;margin:.25rem 0 .75rem}.accessibility-close{background:#111827;border-radius:999px;min-width:2.25rem;padding:.4rem .7rem;font-size:1.3rem;line-height:1}.accessibility-panel-help{color:#4b5563;font-size:.95rem;margin:.5rem 0 1rem}.accessibility-options{display:grid;gap:.6rem}.accessibility-text-controls{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.accessibility-option,.accessibility-reset{width:100%;text-align:center;border-radius:12px;min-height:44px;background:#2f6173}.accessibility-option[aria-pressed="true"],.accessibility-option.active{background:#14532d;box-shadow:inset 0 0 0 3px #bbf7d0}.accessibility-reset{background:#7f1d1d}.accessibility-text-large{font-size:112.5%}.accessibility-text-xl{font-size:125%}.accessibility-high-contrast body,.accessibility-high-contrast{background:#050505!important;color:#fff!important}.accessibility-high-contrast .panel,.accessibility-high-contrast .reader-help,.accessibility-high-contrast .now-playing,.accessibility-high-contrast .preview-message,.accessibility-high-contrast .accessibility-panel{background:#000!important;color:#fff!important;border-color:#facc15!important;box-shadow:none!important}.accessibility-high-contrast .hint,.accessibility-high-contrast .accessibility-panel-help{color:#f3f4f6!important}.accessibility-high-contrast a,.accessibility-high-contrast .button,.accessibility-high-contrast button{color:#fff!important;border:2px solid #facc15!important}.accessibility-high-contrast .button,.accessibility-high-contrast button{background:#1e40af!important}.accessibility-high-contrast .secondary{background:#065f46!important}.accessibility-grayscale{filter:grayscale(1)}.accessibility-invert{background:#111!important;color:#f8fafc!important}.accessibility-invert body{background:#111!important;color:#f8fafc!important}.accessibility-invert img,.accessibility-invert iframe,.accessibility-invert video{filter:invert(1)}.accessibility-highlight-links a,.accessibility-highlight-links .button,.accessibility-highlight-links button{outline:3px solid #f59e0b!important;outline-offset:2px!important;border:2px solid #111827!important;text-decoration:underline!important;font-weight:800!important}.accessibility-focus *:focus,.accessibility-focus *:focus-visible{outline:5px solid #f59e0b!important;outline-offset:4px!important;box-shadow:0 0 0 8px #1d4ed866!important}.accessibility-focus .segment-choice[aria-current="true"]{outline:5px solid #f59e0b!important}


/* Customer light/dark theme variables and overrides */
:root,
.theme-light{
  --bg:#f5f3ef;
  --card-bg:#ffffff;
  --text:#1f2937;
  --muted-text:#6b7280;
  --button-bg:#7b4f2c;
  --button-text:#ffffff;
  --secondary-button-bg:#2f6173;
  --border:#e5e7eb;
  --accent:#1d4ed8;
  --danger:#991b1b;
  --success:#166534;
  --panel-shadow:#0001;
  --audio-bg:#f9fafb;
}
.theme-dark{
  --bg:#0f172a;
  --card-bg:#172033;
  --text:#f8fafc;
  --muted-text:#cbd5e1;
  --button-bg:#d97706;
  --button-text:#111827;
  --secondary-button-bg:#38bdf8;
  --border:#475569;
  --accent:#93c5fd;
  --danger:#fca5a5;
  --success:#86efac;
  --panel-shadow:#0008;
  --audio-bg:#1e293b;
}
html.theme-light,body.theme-light,html.theme-dark,body.theme-dark{background:var(--bg);color:var(--text)}
body.theme-light .panel,body.theme-dark .panel,
body.theme-light .reader-header,body.theme-dark .reader-header,
body.theme-light .reader-help,body.theme-dark .reader-help,
body.theme-light .accessibility-panel,body.theme-dark .accessibility-panel,
body.theme-light .now-playing,body.theme-dark .now-playing,
body.theme-light .segment-form,body.theme-dark .segment-form,
body.theme-light .segment-admin-item,body.theme-dark .segment-admin-item{background:var(--card-bg);color:var(--text);border-color:var(--border);box-shadow:0 10px 30px var(--panel-shadow)}
body.theme-light .hint,body.theme-dark .hint,
body.theme-light .reader-header span,body.theme-dark .reader-header span{color:var(--muted-text)}
body.theme-light .button,body.theme-dark .button,
body.theme-light button,body.theme-dark button{background:var(--button-bg);color:var(--button-text);border:1px solid transparent}
body.theme-light .secondary,body.theme-dark .secondary,
body.theme-light .segment-choice,body.theme-dark .segment-choice{background:var(--secondary-button-bg);color:var(--button-text)}
body.theme-dark .secondary,body.theme-dark .segment-choice{color:#06121f}
body.theme-light .audio-panel,body.theme-dark .audio-panel,
body.theme-light .now-playing,body.theme-dark .now-playing{background:var(--audio-bg);border-color:var(--border)}
body.theme-light input,body.theme-dark input,
body.theme-light textarea,body.theme-dark textarea,
body.theme-light select,body.theme-dark select{background:var(--card-bg);color:var(--text);border-color:var(--border)}
body.theme-light hr,body.theme-dark hr{border:0;border-top:1px solid var(--border)}
body.theme-dark a{color:#bfdbfe}
body.theme-dark .button,body.theme-dark button{color:var(--button-text)}
body.theme-dark .accessibility-floating-button{background:#60a5fa;color:#08111f;border-color:#e0f2fe}
body.theme-dark .floating-control-button{background:#334155;color:#f8fafc;border-color:#94a3b8}
body.theme-dark .accessibility-close{background:#e2e8f0;color:#0f172a}
body.theme-dark .accessibility-option,body.theme-dark .accessibility-reset{background:#1e293b;color:#f8fafc;border-color:#64748b}
body.theme-dark .accessibility-option.active{background:#f59e0b;color:#111827}
body.theme-dark .reader-stage{background:#020617}
body.theme-dark .screen-warning{background:#fef3c7;color:#111827}
body.theme-dark .error{background:#7f1d1d;color:#fecaca}
body.theme-dark .success{background:#064e3b;color:#bbf7d0}
.floating-controls{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}
/* aside-qualified (0,2,0): must outrank the legacy generic
   body.theme-light/theme-dark button (0,1,1) background rules. */
.accessibility-toolbar .floating-control-button{box-shadow:0 10px 28px #0003;border:2px solid #fff;background:#334155;color:#fff;border-radius:999px;padding:.6rem .4rem;font-weight:800;box-sizing:border-box;width:7.5rem;min-width:0;min-height:44px;white-space:normal}
.floating-control-button:focus-visible{outline:4px solid #fbbf24;outline-offset:3px}
/* The language control is a real link on the bilingual funnel; give anchors
   the same pill look as the buttons in the rail. */
a.floating-control-button{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#fff;font-size:var(--font-size-control)!important;line-height:var(--line-height-control)}
[dir="ltr"] .accessibility-toolbar{direction:ltr}
/* Compact rail on narrow screens (also covers ~200% zoom reflow). This block
   must come after ALL base button rules above so the cascade favors it. */
@media (max-width:760px){
  .accessibility-toolbar{inset-inline-start:max(.5rem,env(safe-area-inset-left),env(safe-area-inset-right))}
  .floating-controls{gap:.4rem}
  .accessibility-toolbar .accessibility-floating-button,.accessibility-toolbar .floating-control-button{padding:.5rem .4rem}
  .accessibility-panel,.customer-theme-panel{width:min(320px,calc(100vw - 9.5rem));max-height:min(78dvh,calc(100dvh - 1rem))}
  .accessibility-text-controls{grid-template-columns:1fr}
}
[dir="ltr"] .segment-choice{text-align:start}
.accessibility-high-contrast body,
body.accessibility-high-contrast{--bg:#000;--card-bg:#000;--text:#fff;--muted-text:#fff;--button-bg:#ff0;--button-text:#000;--secondary-button-bg:#0ff;--border:#fff;--accent:#ff0}
body.accessibility-high-contrast .panel,
body.accessibility-high-contrast .accessibility-panel,
body.accessibility-high-contrast .reader-header,
body.accessibility-high-contrast .reader-help,
body.accessibility-high-contrast .now-playing{background:#000!important;color:#fff!important;border-color:#fff!important}
body.accessibility-high-contrast .button,
body.accessibility-high-contrast button{background:#ff0!important;color:#000!important;border:2px solid #fff!important}

/* Modern admin dashboard shell and overview patterns */
body.admin-page{
  --admin-bg:#f6f7fb;
  --admin-surface:#ffffff;
  --admin-surface-soft:#f8fafc;
  --admin-text:#172033;
  --admin-muted:#64748b;
  --admin-border:#dbe3ef;
  --admin-primary:#2557a7;
  --admin-primary-dark:#1e3f7d;
  --admin-success:#0f766e;
  --admin-warning:#b45309;
  --admin-danger:#b42318;
  --admin-shadow:0 18px 48px rgba(15,23,42,.08);
  background:var(--admin-bg);
  color:var(--admin-text);
  line-height:1.5;
}
body.admin-page .admin-topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:block;
  padding:0;
  background:rgba(255,255,255,.92);
  color:var(--admin-text);
  border-bottom:1px solid rgba(219,227,239,.9);
  box-shadow:0 1px 0 rgba(15,23,42,.03),0 12px 32px rgba(15,23,42,.06);
  backdrop-filter:blur(14px);
}
.admin-topbar-inner{
  width:min(1320px,calc(100% - 2rem));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
}
.admin-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--admin-text);
  text-decoration:none;
  min-width:max-content;
}
.admin-brand strong{display:block;font-size:1rem;letter-spacing:-.01em}.admin-brand span span{display:block;color:var(--admin-muted);font-size:var(--font-size-small)}.admin-brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--admin-primary),#43a2b8);color:#fff;font-weight:800;box-shadow:0 10px 22px rgba(37,87,167,.25)}
.admin-nav{display:flex;align-items:center;gap:.25rem;overflow-x:auto;padding:.2rem;scrollbar-width:thin}.admin-topbar .admin-nav-link{display:inline-flex;align-items:center;min-height:38px;margin:0;padding:.48rem .78rem;border-radius:999px;color:#334155;text-decoration:none;font-weight:700;font-size:var(--font-size-small);white-space:nowrap;border:1px solid transparent}.admin-topbar .admin-nav-link:hover{background:#eef4ff;color:var(--admin-primary-dark)}.admin-topbar .admin-nav-link.active{background:#e8f0ff;color:var(--admin-primary-dark);border-color:#b9cdf6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.admin-container{width:min(1320px,calc(100% - 2rem));max-width:none;margin:1.5rem auto 3rem;padding:0}.admin-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.25rem;padding:1.55rem;border:1px solid var(--admin-border);border-radius:28px;background:radial-gradient(circle at top right,rgba(37,87,167,.13),transparent 34%),linear-gradient(135deg,#fff,#f8fafc);box-shadow:var(--admin-shadow)}.admin-eyebrow{margin:0 0 .35rem;color:var(--admin-primary);font-size:var(--font-size-small);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.admin-hero h1{margin:0;font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;letter-spacing:-.045em}.admin-hero-subtitle{max-width:760px;margin:.65rem 0 0;color:var(--admin-muted);font-size:1.05rem}.admin-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}.admin-page .button,.admin-page button{border-radius:12px;font-weight:800;box-shadow:0 8px 18px rgba(123,79,44,.14)}.admin-page .secondary{background:#e8f0ff;color:var(--admin-primary-dark);border:1px solid #b9cdf6;box-shadow:none}.admin-section{background:var(--admin-surface);border:1px solid var(--admin-border);border-radius:24px;padding:1.25rem;box-shadow:0 14px 36px rgba(15,23,42,.06);margin-bottom:1.25rem}.admin-section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.admin-section-header.compact{align-items:center}.admin-section h2{margin:0;font-size:1.18rem;line-height:1.2;letter-spacing:-.02em}.admin-section-note{margin:0;color:var(--admin-muted);font-size:.94rem}.admin-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}.admin-metric-card{position:relative;overflow:hidden;display:grid;gap:.35rem;min-height:112px;padding:1rem;border:1px solid var(--admin-border);border-radius:18px;background:linear-gradient(180deg,#fff,var(--admin-surface-soft))}.admin-metric-card:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:#94a3b8}.admin-metric-card--primary:before{background:var(--admin-primary)}.admin-metric-card--success:before{background:var(--admin-success)}.admin-metric-card--warning:before{background:var(--admin-warning)}.admin-metric-card--danger:before{background:var(--admin-danger)}.admin-metric-label{color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}.admin-metric-value{font-size:2.05rem;line-height:1;letter-spacing:-.04em;color:var(--admin-text)}.admin-metric-description{align-self:end;color:#718096;font-size:var(--font-size-small)}.admin-activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.admin-activity-card{margin-bottom:0}.admin-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;border-radius:999px;background:#e8f0ff;color:var(--admin-primary-dark);font-weight:800;border:1px solid #b9cdf6}.admin-count-badge.warning{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.admin-count-badge.danger{background:#fef3f2;color:#b42318;border-color:#fecaca}.admin-activity-list{display:grid;gap:.7rem}.admin-activity-item{display:grid;gap:.55rem;padding:.78rem;border:1px solid #e6edf6;border-radius:16px;background:#fbfdff}.admin-activity-main{display:flex;align-items:flex-start;gap:.65rem;min-width:0}.admin-activity-main strong{display:block;color:var(--admin-text);font-size:.94rem;overflow-wrap:anywhere}.admin-activity-main span:not(.admin-status-dot){display:block;color:var(--admin-muted);font-size:var(--font-size-small);overflow-wrap:anywhere}.admin-status-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:.42rem;background:#94a3b8;box-shadow:0 0 0 4px #f1f5f9}.admin-status-dot.success{background:var(--admin-success);box-shadow:0 0 0 4px #ccfbf1}.admin-status-dot.warning{background:var(--admin-warning);box-shadow:0 0 0 4px #ffedd5}.admin-status-dot.danger{background:var(--admin-danger);box-shadow:0 0 0 4px #fee4e2}.admin-activity-time{color:#7c8899;font-size:var(--font-size-small);direction:ltr;text-align:start}.admin-empty-state{display:grid;gap:.25rem;padding:1rem;border:1px dashed #cbd5e1;border-radius:16px;background:#f8fafc;color:var(--admin-muted)}.admin-empty-state strong{color:#334155}.admin-page table{border:1px solid var(--admin-border);border-radius:16px;overflow:hidden;background:#fff}.admin-page th{background:#f8fafc;color:#334155;font-size:var(--font-size-small);text-transform:none}.admin-page td,.admin-page th{border-color:#e5edf6}.admin-page .panel{border:1px solid var(--admin-border);box-shadow:0 14px 36px rgba(15,23,42,.06)}
@media (max-width:1100px){.admin-topbar-inner{align-items:flex-start;flex-direction:column}.admin-nav{width:100%}.admin-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-activity-grid{grid-template-columns:1fr}}
@media (max-width:760px){.admin-container,.admin-topbar-inner{width:min(100% - 1rem,1320px)}.admin-hero{flex-direction:column;padding:1.15rem;border-radius:22px}.admin-hero-actions{justify-content:flex-start;width:100%}.admin-hero-actions .button{flex:1 1 150px;text-align:center}.admin-section{padding:1rem;border-radius:20px}.admin-section-header{align-items:flex-start;flex-direction:column}.admin-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.admin-metric-card{min-height:104px;padding:.85rem}.admin-metric-value{font-size:1.75rem}}
@media (max-width:460px){.admin-metric-grid{grid-template-columns:1fr}.admin-topbar .admin-nav-link{font-size:var(--font-size-small);padding:.45rem .65rem}}



/* Admin dashboard design system v2 */
body.admin-page{
  --admin-bg:#f3f6fb;
  --admin-bg-2:#eaf0f8;
  --admin-surface:#ffffff;
  --admin-surface-soft:#f8fafc;
  --admin-text:#142033;
  --admin-muted:#667085;
  --admin-border:#d9e2ef;
  --admin-border-strong:#c5d2e4;
  --admin-primary:#2657a4;
  --admin-primary-dark:#173b73;
  --admin-success:#087f5b;
  --admin-warning:#b54708;
  --admin-danger:#b42318;
  --admin-shadow:0 18px 45px rgba(16,24,40,.08);
  --admin-radius:24px;
  background:
    radial-gradient(circle at 85% 0%, rgba(38,87,164,.12), transparent 32rem),
    linear-gradient(180deg,var(--admin-bg),#f8fafc 52rem);
  color:var(--admin-text);
  font-size:var(--font-size-body);
  line-height:1.55;
}
body.admin-page .topbar.admin-topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:block;
  padding:0;
  background:rgba(255,255,255,.94);
  color:var(--admin-text);
  border-bottom:1px solid rgba(217,226,239,.92);
  box-shadow:0 1px 0 rgba(16,24,40,.03),0 12px 30px rgba(16,24,40,.07);
  backdrop-filter:blur(16px);
}
.admin-topbar-inner{
  width:min(1400px,calc(100% - 48px));
  margin:0 auto;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}
.admin-brand{display:flex;align-items:center;gap:.85rem;min-width:max-content;color:var(--admin-text);text-decoration:none}.admin-brand strong{font-size:1.08rem;letter-spacing:-.015em}.admin-brand span span{color:var(--admin-muted);font-size:var(--font-size-small)}.admin-brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#1d4ed8,#0f766e);color:#fff;font-weight:800;box-shadow:0 12px 24px rgba(29,78,216,.24)}
.admin-nav{display:flex;align-items:center;gap:.35rem;overflow-x:auto;padding:.25rem;scrollbar-width:thin}.admin-topbar .admin-nav-link{display:inline-flex;align-items:center;min-height:42px;margin:0;padding:.55rem .9rem;border:1px solid transparent;border-radius:999px;color:#344054;text-decoration:none;font-size:.96rem;font-weight:800;white-space:nowrap}.admin-topbar .admin-nav-link:hover{background:#eef4ff;color:var(--admin-primary-dark)}.admin-topbar .admin-nav-link.active{background:#e7f0ff;color:var(--admin-primary-dark);border-color:#b8cbed;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
body.admin-page .admin-container{width:min(1400px,calc(100% - 48px));max-width:none;margin:2rem auto 4rem;padding:0}.admin-page-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:start;margin-bottom:1.25rem;padding:2rem;border:1px solid var(--admin-border);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,252,.95));box-shadow:var(--admin-shadow);position:relative;overflow:hidden}.admin-page-header:before{content:"";position:absolute;inset:0 0 auto auto;width:34rem;height:20rem;background:radial-gradient(circle,rgba(38,87,164,.14),transparent 68%);pointer-events:none;transform:translate(35%,-45%)}.admin-page-header-copy{position:relative}.admin-page-header h1{margin:0;font-size:clamp(2.25rem,3.8vw,4rem);line-height:1.02;letter-spacing:-.055em}.admin-page-header p{max-width:800px;margin:.75rem 0 0;color:var(--admin-muted);font-size:1.1rem}.admin-eyebrow{margin:0 0 .45rem;color:var(--admin-primary);font-size:var(--font-size-small);font-weight:800;letter-spacing:.09em;text-transform:uppercase}.admin-actions{position:relative;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end;max-width:560px}.admin-button,.admin-page .admin-button,body.admin-page button.admin-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.7rem 1rem;border-radius:13px;border:1px solid transparent;text-decoration:none;font-weight:800;line-height:1.1;cursor:pointer;box-shadow:none}.admin-button-primary{background:linear-gradient(135deg,var(--admin-primary),#1d4ed8);color:#fff;box-shadow:0 12px 24px rgba(37,87,164,.2)}.admin-button-secondary{background:#fff;color:var(--admin-primary-dark);border-color:var(--admin-border-strong)}.admin-button-secondary:hover{background:#f1f6ff}.admin-button-danger{background:#fff1f0;color:var(--admin-danger);border-color:#ffcdc7}.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--admin-border);border-radius:20px;background:rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(16,24,40,.05)}.admin-toolbar strong{display:block;font-size:1rem}.admin-toolbar span{display:block;color:var(--admin-muted);font-size:.95rem}.admin-section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.admin-section-header h2{margin:0;font-size:1.42rem;line-height:1.18;letter-spacing:-.025em}.admin-section-header p{margin:.3rem 0 0;color:var(--admin-muted)}.admin-section-header-outside{margin:1.8rem 0 1rem}.admin-grid{display:grid;gap:1rem}.admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-card,.admin-section{background:var(--admin-surface);border:1px solid var(--admin-border);border-radius:var(--admin-radius);box-shadow:0 12px 34px rgba(16,24,40,.06)}.admin-card{padding:1.25rem}.admin-kpi-card{position:relative;overflow:hidden;min-height:172px;display:flex;flex-direction:column;justify-content:space-between}.admin-kpi-card:before{content:"";position:absolute;inset:0 0 auto auto;width:8rem;height:8rem;background:var(--kpi-glow,rgba(38,87,164,.1));border-radius:999px;transform:translate(35%,-35%)}.admin-kpi-card-primary{--kpi-glow:rgba(38,87,164,.14)}.admin-kpi-card-success{--kpi-glow:rgba(8,127,91,.14)}.admin-kpi-card-warning{--kpi-glow:rgba(181,71,8,.15)}.admin-kpi-card-danger{--kpi-glow:rgba(180,35,24,.14)}.admin-kpi-card-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.75rem}.admin-kpi-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--admin-surface-soft);border:1px solid var(--admin-border);font-weight:800}.admin-kpi-value{position:relative;margin-top:1.35rem;font-size:clamp(2.4rem,4vw,3.5rem);font-weight:800;line-height:.95;letter-spacing:-.06em;text-align:start;color:#0f172a}.admin-kpi-label{position:relative;margin:.7rem 0 .2rem;font-size:1.05rem;line-height:1.2}.admin-kpi-card p{position:relative;margin:0;color:var(--admin-muted);font-size:.95rem}.admin-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:.28rem .65rem;border-radius:999px;border:1px solid var(--admin-border);background:#f8fafc;color:#344054;font-size:var(--font-size-small);font-weight:800;white-space:nowrap}.admin-badge-primary{background:#e7f0ff;color:var(--admin-primary-dark);border-color:#b8cbed}.admin-badge-success{background:#ecfdf3;color:#067647;border-color:#abefc6}.admin-badge-warning{background:#fff7ed;color:#b54708;border-color:#fed7aa}.admin-badge-danger{background:#fff1f0;color:#b42318;border-color:#ffcdc7}.admin-badge-neutral{background:#f8fafc;color:#475467;border-color:#d0d5dd}.admin-section{padding:1.35rem;margin-top:1.25rem}.admin-attention-section{border-color:#cdd8ea}.admin-attention-list{display:grid;gap:.75rem}.admin-attention-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.9rem;align-items:center;padding:.9rem 1rem;border:1px solid var(--admin-border);border-radius:16px;background:#fbfdff;color:var(--admin-text);text-decoration:none}.admin-attention-row:hover{background:#f3f7ff;border-color:#b8cbed}.admin-attention-marker{width:10px;height:42px;border-radius:999px;background:#94a3b8}.admin-attention-marker-warning{background:var(--admin-warning)}.admin-attention-marker-danger{background:var(--admin-danger)}.admin-attention-content strong,.admin-attention-content span{display:block}.admin-attention-content span{color:var(--admin-muted);overflow-wrap:anywhere}.admin-attention-row time{color:var(--admin-muted);font-size:var(--font-size-small);white-space:nowrap}.admin-empty-state{display:grid;place-items:center;text-align:center;gap:.35rem;padding:1.25rem;border:1px dashed var(--admin-border-strong);border-radius:18px;background:var(--admin-surface-soft);color:var(--admin-muted)}.admin-empty-state strong{color:var(--admin-text);font-size:1.05rem}.admin-empty-state-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:#e7f8ef;color:var(--admin-success);font-weight:800}.admin-empty-state-large{min-height:170px}.admin-activity-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.admin-activity-card{min-width:0}.admin-activity-card-wide{grid-column:1/-1}.admin-table-wrap{overflow-x:auto;border:1px solid var(--admin-border);border-radius:18px}.admin-table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px;background:#fff}.admin-table th,.admin-table td{padding:.9rem 1rem;text-align:start;border-bottom:1px solid var(--admin-border);vertical-align:middle}.admin-table th{background:#f8fafc;color:#475467;font-size:var(--font-size-small);text-transform:uppercase;letter-spacing:.05em}.admin-table tr:last-child td{border-bottom:0}.admin-table td{font-size:.96rem}.admin-table td[dir="ltr"],.admin-table time{unicode-bidi:plaintext}.admin-page [dir="ltr"]{direction:ltr;unicode-bidi:isolate}.admin-page [dir="auto"]{unicode-bidi:plaintext}
@media (min-width:1500px){body.admin-page .admin-container,.admin-topbar-inner{width:min(1440px,calc(100% - 72px))}.admin-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1180px){.admin-page-header{grid-template-columns:1fr}.admin-actions{justify-content:flex-start;max-width:none}.admin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-topbar-inner{align-items:flex-start;flex-direction:column;padding:.85rem 0}.admin-nav{width:100%}}
@media (max-width:820px){body.admin-page .admin-container,.admin-topbar-inner{width:min(100% - 24px,1400px)}.admin-page-header{padding:1.25rem;border-radius:24px}.admin-page-header h1{font-size:2.25rem}.admin-actions .admin-button{flex:1 1 190px}.admin-toolbar{align-items:flex-start;flex-direction:column}.admin-kpi-grid,.admin-activity-grid{grid-template-columns:1fr}.admin-attention-row{grid-template-columns:auto minmax(0,1fr);align-items:start}.admin-attention-row .admin-badge,.admin-attention-row time{grid-column:2}.admin-section{padding:1rem}.admin-section-header{flex-direction:column}.admin-table{min-width:620px}}
@media (max-width:520px){body.admin-page{font-size:var(--font-size-body)}.admin-kpi-card{min-height:150px}.admin-kpi-value{font-size:2.35rem}.admin-topbar .admin-nav-link{font-size:var(--font-size-small);padding:.5rem .7rem}.admin-table{min-width:560px}}

/* Admin dashboard table fit refinements */
.admin-activity-card:not(.admin-activity-card-wide) .admin-table{min-width:0;}
.admin-activity-card:not(.admin-activity-card-wide) .admin-table th,
.admin-activity-card:not(.admin-activity-card-wide) .admin-table td{padding:.85rem .75rem;}
.admin-table .admin-empty-state{min-width:0;white-space:normal;overflow-wrap:anywhere;}

.admin-empty-state{direction:ltr;}


/* Admin customers page extensions */
.admin-flash{border:1px solid rgba(22,101,52,.18);box-shadow:0 10px 22px rgba(16,185,129,.08)}
.admin-customer-section,.admin-access-section{margin-top:1.25rem}.admin-filter-form{display:grid;grid-template-columns:minmax(200px,1.5fr) repeat(3,minmax(140px,1fr)) auto;align-items:end;gap:.85rem;margin-bottom:1rem}.admin-filter-form-wide{grid-template-columns:minmax(200px,1.5fr) minmax(200px,1.5fr) repeat(3,minmax(130px,1fr)) auto}.admin-filter-field{display:grid;gap:.35rem;min-width:0}.admin-filter-field label{color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}.admin-filter-field input,.admin-filter-field select,.admin-compact-form input,.admin-grant-form select{height:44px;margin:0;border:1px solid var(--admin-border);border-radius:12px;background:#fff;color:var(--admin-text);font-weight:700}.admin-toolbar-actions{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:flex-end}.admin-table-wrap{overflow-x:auto;border:1px solid var(--admin-border);border-radius:20px;background:#fff}.admin-customer-table{min-width:1180px}.admin-access-table{min-width:980px}.admin-customer-table th,.admin-access-table th{white-space:nowrap}.admin-customer-table td{vertical-align:top}.admin-row-attention{background:linear-gradient(90deg,rgba(180,83,9,.06),rgba(255,255,255,0) 34%)}.admin-customer-identity,.admin-count-stack,.admin-device-cell,.admin-request-badges{display:grid;gap:.32rem}.admin-primary-link{color:var(--admin-primary-dark);font-weight:800;text-decoration:none}.admin-primary-link:hover{text-decoration:underline}.admin-subtext{display:block;color:var(--admin-muted);font-size:var(--font-size-small);line-height:1.35}.admin-count-stack strong{font-size:1.35rem;line-height:1;color:var(--admin-text)}.admin-count-stack span{color:var(--admin-muted);font-size:var(--font-size-small)}.admin-request-badges{align-items:start;justify-items:start}.admin-badge-success{background:#e7f8f1;color:#05603a;border-color:#a6e9d5}.admin-badge-warning{background:#fff4e5;color:#93370d;border-color:#ffd6a3}.admin-badge-danger{background:#fff0ed;color:#b42318;border-color:#f7b8ae}.admin-badge-neutral{background:#f2f4f7;color:#475467;border-color:#d0d5dd}.admin-compact-form{display:grid;grid-template-columns:minmax(64px,78px) auto;gap:.4rem;margin-top:.55rem;align-items:center}.admin-action-group{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;min-width:280px}.admin-action-group form{margin:0}.admin-button-compact{min-height:36px;padding:.45rem .65rem;border-radius:10px;font-size:var(--font-size-small);box-shadow:none}.admin-grant-form{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:.45rem;flex:1 1 100%;align-items:center}.admin-button-danger{background:#b42318;color:#fff;border-color:#b42318}.admin-button-danger:hover{background:#921b13}.admin-empty-state-card{margin:1rem 0;padding:2rem;border:1px dashed var(--admin-border-strong);border-radius:22px;background:linear-gradient(135deg,#fff,#f8fafc);text-align:center;display:grid;justify-items:center;gap:.6rem;color:var(--admin-muted)}.admin-empty-state-card strong{font-size:1.2rem;color:var(--admin-text)}.admin-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1180px){.admin-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-toolbar-actions{justify-content:flex-start}}
@media (max-width:720px){.admin-filter-form{grid-template-columns:1fr}.admin-toolbar-actions .admin-button{flex:1 1 140px;text-align:center}.admin-customer-table{min-width:1060px}.admin-action-group{min-width:250px}.admin-grant-form{grid-template-columns:1fr}.admin-compact-form{grid-template-columns:1fr auto}}

.admin-customer-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.admin-customer-summary-grid .admin-kpi-card{min-height:156px}.admin-customer-summary-grid .admin-kpi-value{font-size:clamp(2.1rem,3vw,3rem)}
@media (max-width:1320px){.admin-customer-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.admin-customer-summary-grid{grid-template-columns:1fr}}

/* Admin books catalog page extensions */
.admin-books-section{margin-top:1.25rem;overflow:hidden}.admin-book-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}.admin-book-summary-grid .admin-kpi-card{min-height:142px;padding:1.15rem;background:linear-gradient(180deg,#fff,#fbfdff)}.admin-book-summary-grid .admin-kpi-icon{width:36px;height:36px;font-size:1rem}.admin-book-summary-grid .admin-kpi-value{font-size:clamp(1.95rem,2.6vw,2.8rem)}.admin-book-summary-grid .admin-kpi-label{margin-top:.4rem;font-size:1rem}.admin-book-summary-grid .admin-kpi-card p{font-size:var(--font-size-small)}.admin-book-filter-form{grid-template-columns:minmax(260px,1.35fr) minmax(160px,.7fr) minmax(180px,.8fr) auto;margin-bottom:1rem;background:var(--admin-surface-soft)}.admin-book-table{min-width:1180px;table-layout:auto}.admin-book-table td{vertical-align:middle}.admin-book-table th:nth-child(5),.admin-book-table td:nth-child(5){width:270px}.admin-book-identity{display:grid;grid-template-columns:58px minmax(0,1fr);gap:.85rem;align-items:center;min-width:260px}.admin-book-cover-thumb,.admin-book-cover-placeholder{width:58px;height:78px;border-radius:14px;border:1px solid var(--admin-border);box-shadow:0 10px 22px rgba(16,24,40,.08)}.admin-book-cover-thumb{display:block;object-fit:cover;background:#f8fafc}.admin-book-cover-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#e7f0ff,#f8fafc);color:var(--admin-primary-dark);font-weight:800;font-size:var(--font-size-small)}.admin-book-copy{display:grid;gap:.25rem;min-width:0}.admin-book-copy .admin-primary-link{font-size:1rem}.admin-asset-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;min-width:240px}.admin-asset-badge{justify-content:space-between;gap:.45rem;min-width:0;border-radius:12px;padding:.35rem .55rem}.admin-asset-badge span{overflow:hidden;text-overflow:ellipsis}.admin-asset-badge strong{font-size:var(--font-size-small)}.admin-book-actions{display:grid;grid-template-columns:1fr;gap:.5rem;min-width:136px;align-items:start}.admin-book-actions .admin-button{width:100%;justify-content:center;text-align:center;box-sizing:border-box}.admin-book-actions form{width:100%}.admin-inline-details{position:relative}.admin-inline-details summary{list-style:none;display:flex!important;align-items:center;justify-content:center;white-space:normal}.admin-inline-details summary::-webkit-details-marker{display:none}.admin-inline-details[open] summary{margin-bottom:.55rem}.admin-access-create-form{display:grid;gap:.65rem;width:min(330px,78vw);padding:.85rem;border:1px solid var(--admin-border);border-radius:18px;background:#fff;box-shadow:0 18px 42px rgba(16,24,40,.14)}.admin-access-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.admin-access-create-form input{height:42px;margin:0}.admin-checkbox-line{display:flex;align-items:center;gap:.45rem;color:var(--admin-muted);font-weight:800}.admin-checkbox-line input{width:auto;margin:0}@media (max-width:1320px){.admin-book-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1180px){.admin-book-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:820px){.admin-book-summary-grid,.admin-book-filter-form{grid-template-columns:1fr}.admin-book-table{min-width:0;background:transparent}.admin-book-table thead{display:none}.admin-book-table,.admin-book-table tbody,.admin-book-table tr,.admin-book-table td{display:block;width:100%;box-sizing:border-box}.admin-book-table tbody{display:grid;gap:.85rem}.admin-book-table tr{border:1px solid var(--admin-border);border-radius:18px;background:#fff;overflow:hidden}.admin-book-table td{display:grid;grid-template-columns:minmax(74px,.35fr) minmax(0,1fr);gap:.75rem;align-items:start;padding:.85rem .95rem;border-bottom:1px solid var(--admin-border)}.admin-book-table tr td:last-child{border-bottom:0}.admin-book-table td:before{content:attr(data-label);color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}.admin-book-table td[data-label="ספר"]{grid-template-columns:1fr}.admin-book-table td[data-label="ספר"]:before{display:none}.admin-access-options{grid-template-columns:1fr}.admin-book-identity{min-width:0}.admin-asset-badges{grid-template-columns:1fr;min-width:0}.admin-book-actions{min-width:0}}

/* Admin customer detail page */
.admin-customer-detail-header .admin-actions form,.admin-stacked-actions form,.admin-action-group form{margin:0}.admin-customer-detail-title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.admin-customer-email{font-size:clamp(1.15rem,2vw,1.55rem)!important;font-weight:800;color:var(--admin-text)!important;overflow-wrap:anywhere}.admin-customer-meta-row{display:flex;flex-wrap:wrap;gap:.55rem 1rem;margin-top:1rem;color:var(--admin-muted);font-weight:800}.admin-customer-meta-row span:not(.admin-badge){display:inline-flex;gap:.35rem;align-items:center;padding:.42rem .7rem;border:1px solid var(--admin-border);border-radius:999px;background:#fff}.admin-customer-header-actions{align-items:flex-start}.admin-button-quiet-danger{background:#fff5f5!important;color:var(--admin-danger)!important;border-color:#fecaca!important;box-shadow:none!important}.admin-customer-detail-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:1.25rem}.admin-customer-detail-summary-grid .admin-kpi-card{min-height:156px}.admin-customer-detail-summary-grid .admin-kpi-value{font-size:clamp(1.8rem,2.4vw,2.65rem)}.admin-detail-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(440px,.9fr);gap:1.25rem;align-items:start}.admin-detail-main,.admin-detail-sidebar{display:grid;gap:1.25rem;min-width:0}.admin-detail-sidebar{position:sticky;top:96px}.admin-detail-section{margin:0;min-width:0;overflow:hidden}.admin-detail-section .admin-section-header p{max-width:760px}.admin-access-subsection{display:grid;gap:.75rem}.admin-access-subsection+.admin-access-subsection{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--admin-border)}.admin-detail-subheader{display:flex;align-items:center;justify-content:space-between;gap:1rem}.admin-detail-subheader h3{margin:0;font-size:1.08rem}.admin-detail-access-table{min-width:1120px}.admin-detail-log-table{min-width:900px}.admin-row-muted{background:#f8fafc;color:#667085}.admin-row-muted strong{color:#475467}.admin-definition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0}.admin-definition-grid div,.admin-mini-definition-list div{display:grid;gap:.22rem;padding:.78rem;border:1px solid var(--admin-border);border-radius:16px;background:var(--admin-surface-soft);min-width:0}.admin-definition-grid dt,.admin-mini-definition-list dt{color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.admin-definition-grid dd,.admin-mini-definition-list dd{margin:0;font-weight:800;overflow-wrap:anywhere}.admin-request-card-list,.admin-device-card-list,.admin-stacked-actions{display:grid;gap:.85rem}.admin-request-card,.admin-device-card{display:grid;gap:.65rem;padding:1rem;border:1px solid var(--admin-border);border-radius:18px;background:#fff}.admin-request-card-danger{border-color:#fecaca;background:linear-gradient(135deg,#fff,#fff7f7)}.admin-request-card-warning{border-color:#fed7aa;background:linear-gradient(135deg,#fff,#fff8ed)}.admin-device-card-top{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.admin-mini-definition-list{display:grid;gap:.55rem;margin:0}.admin-mini-definition-list div{padding:.65rem}.admin-user-agent{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:var(--font-size-small);direction:ltr;text-align:left;overflow-wrap:anywhere;color:#344054}.admin-detail-form{display:grid;gap:.45rem}.admin-detail-form label{color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}.admin-detail-form input,.admin-detail-form select{height:44px;margin:0;border:1px solid var(--admin-border);border-radius:12px;background:#fff;color:var(--admin-text);font-weight:700}.admin-stacked-actions .admin-button{width:100%;text-align:center}.admin-detail-section .admin-empty-state-card{border:1px dashed var(--admin-border);background:var(--admin-surface-soft)}.admin-tracking-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:var(--font-size-small);color:var(--admin-muted);letter-spacing:.03em;overflow-wrap:anywhere}.admin-tracking-code-full{font-size:var(--font-size-small);color:var(--admin-text);font-weight:700}.admin-definition-grid-full{grid-column:1/-1}
@media (max-width:1320px){.admin-customer-detail-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-detail-layout{grid-template-columns:minmax(0,1.25fr) minmax(440px,.85fr)}}
@media (max-width:1100px){.admin-detail-layout{grid-template-columns:1fr}.admin-detail-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.admin-detail-sidebar .admin-detail-section{min-width:0}}
@media (max-width:900px){.admin-customer-detail-summary-grid{grid-template-columns:1fr}.admin-detail-sidebar{grid-template-columns:1fr}.admin-definition-grid{grid-template-columns:1fr}.admin-customer-meta-row span:not(.admin-badge){width:100%}.admin-detail-subheader{align-items:flex-start;flex-direction:column}.admin-detail-access-table{min-width:980px}.admin-detail-log-table{min-width:760px}}


/* Admin book create/edit form */
.admin-book-form-header{margin-bottom:1rem}.admin-alert{display:grid;gap:.35rem;margin:0 0 1rem;padding:1rem 1.15rem;border-radius:18px;border:1px solid var(--admin-border);background:#fff;box-shadow:0 12px 28px rgba(16,24,40,.07)}.admin-alert strong{font-size:1rem}.admin-alert span{color:var(--admin-muted);font-weight:700}.admin-alert-danger{border-color:#fecaca;background:#fff5f5;color:var(--admin-danger)}.admin-alert-danger span{color:#991b1b}.admin-book-form-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);gap:1.25rem;align-items:start}.admin-book-form-layout-single{grid-template-columns:minmax(0,1fr);max-width:1040px}.admin-book-form-main{display:grid;gap:1.25rem;min-width:0}.admin-book-form-card,.admin-book-side-card{padding:1.25rem}.admin-book-form-card .admin-section-header,.admin-book-side-card .admin-section-header{margin-bottom:1rem}.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.admin-form-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-form-field{display:grid;gap:.4rem;min-width:0}.admin-form-field-wide{grid-column:span 1}.admin-form-field-full{grid-column:1/-1}.admin-form-field label,.admin-upload-card label{color:var(--admin-text);font-size:.95rem;font-weight:800}.admin-form-field input,.admin-form-field textarea,.admin-form-field select,.admin-upload-card input[type="file"]{width:100%;box-sizing:border-box;margin:0;border:1px solid var(--admin-border);border-radius:14px;background:#fff;color:var(--admin-text);font-size:1rem;font-weight:700;box-shadow:0 1px 0 rgba(16,24,40,.02);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.admin-form-field input,.admin-form-field select{min-height:48px;padding:.75rem .85rem}.admin-form-field textarea{min-height:132px;padding:.85rem;resize:vertical;line-height:1.55}.admin-form-field input:focus,.admin-form-field textarea:focus,.admin-form-field select:focus,.admin-upload-card input[type="file"]:focus{outline:3px solid rgba(38,87,164,.18);outline-offset:2px;border-color:#8fb0e8;box-shadow:0 0 0 1px rgba(38,87,164,.08)}.admin-field-help{margin:0;color:var(--admin-muted);font-size:var(--font-size-small);font-weight:600}.admin-form-note{margin-top:1rem}.admin-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.admin-upload-card{display:grid;align-content:start;gap:.85rem;min-width:0;padding:1rem;border:1px solid var(--admin-border);border-radius:20px;background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 10px 24px rgba(16,24,40,.05)}.admin-upload-card-header{display:grid;grid-template-columns:48px minmax(0,1fr);gap:.8rem;align-items:start}.admin-upload-card-header p{margin:.25rem 0 0;color:var(--admin-muted);font-size:var(--font-size-small);font-weight:600}.admin-upload-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#e7f0ff;color:var(--admin-primary-dark);font-size:var(--font-size-small);font-weight:800}.admin-upload-card input[type="file"]{padding:.7rem;background:#fff;min-height:48px}.admin-file-control{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;align-items:center;min-height:48px;padding:.42rem;border:1px solid var(--admin-border);border-radius:14px;background:#fff}.admin-file-input{position:absolute;inset:0;width:1px!important;height:1px!important;opacity:0;pointer-events:none}.admin-file-trigger{display:inline-flex!important;align-items:center;justify-content:center;min-height:36px;padding:.45rem .75rem;border-radius:11px;background:#e7f0ff;color:var(--admin-primary-dark)!important;font-weight:800;cursor:pointer}.admin-file-control span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}.admin-file-control:focus-within{outline:3px solid rgba(38,87,164,.18);outline-offset:2px;border-color:#8fb0e8}.admin-file-name{display:inline-flex;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}.admin-book-submit-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid rgba(197,210,228,.9);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 18px 45px rgba(16,24,40,.10)}.admin-book-submit-bar div:first-child{display:grid;gap:.2rem}.admin-book-submit-bar span{color:var(--admin-muted);font-weight:700}.admin-book-form-sidebar{position:sticky;top:96px;display:grid;gap:1rem;min-width:0}.admin-readiness-list{display:flex;flex-wrap:wrap;gap:.55rem}.admin-asset-status-list{display:grid;gap:.85rem;margin:0}.admin-asset-status-list div{display:grid;gap:.35rem;padding-bottom:.85rem;border-bottom:1px solid var(--admin-border)}.admin-asset-status-list div:last-child{padding-bottom:0;border-bottom:0}.admin-asset-status-list dt{color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.admin-asset-status-list dd{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:0;min-width:0}.admin-segment-admin{margin-top:1.25rem}.admin-segment-form{display:grid;gap:1rem;padding:1rem;border:1px solid var(--admin-border);border-radius:20px;background:var(--admin-surface-soft)}.admin-segment-list{display:grid;gap:1rem;margin-top:1rem}.admin-segment-card{display:grid;gap:.85rem;padding:1rem;border:1px solid var(--admin-border);border-radius:20px;background:#fff}.admin-segment-edit-form{display:grid;gap:1rem}.admin-segment-card form{margin:0}.admin-button-danger{background:#fff5f5!important;color:var(--admin-danger)!important;border-color:#fecaca!important;box-shadow:none!important}
@media (max-width:1180px){.admin-book-form-layout{grid-template-columns:1fr}.admin-book-form-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.admin-upload-grid{grid-template-columns:1fr}.admin-form-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.admin-book-form-sidebar{grid-template-columns:1fr}.admin-form-grid,.admin-form-grid-three{grid-template-columns:1fr}.admin-form-field-wide,.admin-form-field-full{grid-column:auto}.admin-book-submit-bar{position:static;align-items:stretch;flex-direction:column}.admin-book-submit-bar .admin-toolbar-actions{width:100%}.admin-book-submit-bar .admin-button{flex:1 1 160px;text-align:center}.admin-upload-card-header{grid-template-columns:42px minmax(0,1fr)}.admin-upload-icon{width:42px;height:42px}.admin-segment-card{padding:.85rem}}

/* Admin dashboard baseline redesign */
.admin-dashboard-header{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  margin-bottom:1.5rem;
  padding:2rem 2.25rem;
}
.admin-dashboard-header .admin-page-header-copy p:not(.admin-eyebrow){
  max-width:520px;
}
.admin-dashboard-actions{
  align-items:center;
  max-width:none;
}
.admin-dashboard-actions .admin-button{
  min-height:40px;
  padding:.58rem .9rem;
}
.admin-section-heading{
  margin:0 0 .75rem;
}
.admin-section-heading h2{
  margin:0;
  font-size:1.25rem;
  letter-spacing:-.02em;
}
.admin-dashboard-kpis{
  margin-bottom:1.25rem;
}
.admin-dashboard-kpi-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.admin-dashboard-kpi-grid .admin-kpi-card{
  min-height:142px;
  padding:1.15rem;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.admin-dashboard-kpi-grid .admin-kpi-icon{
  width:36px;
  height:36px;
  font-size:1rem;
}
.admin-kpi-number{
  font-size:clamp(2.3rem,4vw,3.45rem);
  letter-spacing:-.055em;
}
.admin-dashboard-kpi-grid .admin-kpi-label{
  margin-top:.35rem;
}
.admin-dashboard-kpi-grid .admin-kpi-card p{
  margin:.2rem 0 0;
  font-size:var(--font-size-small);
}
.admin-priority-list,
.admin-activity-list{
  display:grid;
  grid-template-columns:1fr;
  gap:.65rem;
}
.admin-priority-item,
.admin-activity-row{
  display:grid;
  align-items:center;
  gap:.8rem;
  min-width:0;
  padding:.85rem .95rem;
  border:1px solid var(--admin-border);
  border-radius:16px;
  background:var(--admin-surface-soft);
}
.admin-priority-item{
  grid-template-columns:auto minmax(0,1fr) auto;
  width:100%;
  color:var(--admin-text);
  text-decoration:none;
}
.admin-priority-item time{
  justify-self:end;
  white-space:nowrap;
}
.admin-priority-item:hover{
  border-color:var(--admin-border-strong);
  background:#fff;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
}
.admin-priority-main{
  display:grid;
  gap:.15rem;
  min-width:0;
}
.admin-priority-main strong,
.admin-activity-context{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-priority-main span,
.admin-priority-item time,
.admin-activity-row time{
  color:var(--admin-muted);
  font-size:var(--font-size-small);
  font-weight:800;
}
.admin-dashboard-activity-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.admin-dashboard-activity-grid .admin-section{
  min-width:0;
}
.admin-activity-row{
  grid-template-columns:auto auto minmax(0,1fr);
}
.admin-empty-state-compact{
  direction:rtl;
  min-height:auto;
  padding:1rem;
  border:1px dashed var(--admin-border);
  border-radius:16px;
  background:var(--admin-surface-soft);
  color:var(--admin-muted);
  text-align:start;
}
.admin-empty-state-compact strong{
  color:var(--admin-muted);
  font-size:.95rem;
}
@media (max-width:1180px){
  .admin-dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .admin-dashboard-activity-grid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .admin-dashboard-header{grid-template-columns:1fr;align-items:start;padding:1.25rem;}
  .admin-dashboard-actions{justify-content:flex-start;}
  .admin-dashboard-actions .admin-button{flex:0 1 auto;}
  .admin-priority-item,.admin-activity-row{grid-template-columns:1fr;align-items:start;}
  .admin-priority-item .admin-badge,.admin-activity-row .admin-badge{justify-self:start;}
}
@media (max-width:560px){
  .admin-dashboard-kpi-grid{grid-template-columns:1fr;}
}
/* --- Admin Logs --- */
.admin-log-filter-form{grid-template-columns:minmax(180px,1fr) minmax(200px,1.4fr) minmax(160px,1fr) auto}
.admin-log-table{min-width:960px}
.admin-log-table td{vertical-align:top}
.admin-log-type-cell{display:grid;gap:.25rem}
.admin-log-type-raw{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:var(--font-size-small);color:var(--admin-muted);direction:ltr;text-align:start;overflow-wrap:anywhere}
.admin-log-message{display:grid;gap:.22rem}
.admin-log-message strong{color:var(--admin-text);font-size:var(--font-size-small);font-weight:800;overflow-wrap:anywhere}
@media (max-width:960px){
  .admin-log-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-log-table{min-width:0;background:transparent}
  .admin-log-table thead{display:none}
  .admin-log-table,.admin-log-table tbody,.admin-log-table tr,.admin-log-table td{display:block;width:100%;box-sizing:border-box}
  .admin-log-table tbody{display:grid;gap:.85rem}
  .admin-log-table tr{border:1px solid var(--admin-border);border-radius:18px;background:#fff;overflow:hidden}
  .admin-log-table td{display:grid;grid-template-columns:minmax(68px,.3fr) minmax(0,1fr);gap:.75rem;align-items:start;padding:.85rem .95rem;border-bottom:1px solid var(--admin-border)}
  .admin-log-table tr td:last-child{border-bottom:0}
  .admin-log-table td:before{content:attr(data-label);color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}
}
@media (max-width:560px){
  .admin-log-filter-form{grid-template-columns:1fr}
}

/* Admin access page */
.admin-alert-success{border-color:#a6e9d5;background:linear-gradient(135deg,#f0fdf9,#ecfdf3);color:#065f46}
.admin-alert-success strong{color:#065f46}
.admin-alert-success span{color:#047857}
.admin-access-created-alert{border-color:#a6e9d5;background:linear-gradient(135deg,#f0fdf9,#ecfdf3);color:#065f46}
.admin-access-created-alert strong{color:#065f46}
.admin-access-created-alert span{color:#047857}
.admin-access-created-link{display:block;margin-top:.55rem;padding:.65rem .85rem;border:1px solid #a6e9d5;border-radius:12px;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:var(--font-size-small);direction:ltr;text-align:left;overflow-wrap:anywhere;word-break:break-all;color:#065f46}
.admin-access-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1.25rem}
.admin-access-summary-grid .admin-kpi-card{min-height:142px;padding:1.15rem;background:linear-gradient(180deg,#fff,#fbfdff)}
.admin-access-summary-grid .admin-kpi-icon{width:36px;height:36px;font-size:1rem}
.admin-access-summary-grid .admin-kpi-value{font-size:clamp(1.95rem,2.6vw,2.8rem)}
.admin-access-summary-grid .admin-kpi-label{margin-top:.4rem;font-size:1rem}
.admin-access-summary-grid .admin-kpi-card p{font-size:var(--font-size-small)}
.admin-access-security{display:grid;gap:.35rem}
.admin-access-actions{min-width:0;align-items:flex-start;flex-direction:column}
@media (max-width:1180px){.admin-access-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .admin-access-summary-grid{grid-template-columns:1fr}
  .admin-access-table{min-width:0;background:transparent}
  .admin-access-table thead{display:none}
  .admin-access-table,.admin-access-table tbody,.admin-access-table tr,.admin-access-table td{display:block;width:100%;box-sizing:border-box}
  .admin-access-table tbody{display:grid;gap:.85rem}
  .admin-access-table tr{border:1px solid var(--admin-border);border-radius:18px;background:#fff;overflow:hidden}
  .admin-access-table td{display:grid;grid-template-columns:minmax(74px,.35fr) minmax(0,1fr);gap:.75rem;align-items:start;padding:.85rem .95rem;border-bottom:1px solid var(--admin-border)}
  .admin-access-table tr td:last-child{border-bottom:0}
  .admin-access-table td:before{content:attr(data-label);color:var(--admin-muted);font-size:var(--font-size-small);font-weight:800}
}


/* ==========================================================================
   Customer Design System — auth baseline v1
   Scoped to body.customer-page
   ========================================================================== */

body.customer-page {
  --c-bg: #f4f2ef;
  --c-surface: #ffffff;
  --c-surface-raised: #fdfcfb;
  --c-text: #1a1a2e;
  --c-muted: #6b7280;
  --c-subtle: #9ca3af;
  --c-border: #e2ddd8;
  --c-border-focus: #8b7355;
  --c-primary: #2d4a6e;
  --c-primary-dark: #1e3250;
  --c-accent: #c4783a;
  --c-accent-dark: #a5622e;
  --c-success-bg: #f0fdf4;
  --c-success-text: #166534;
  --c-success-border: #bbf7d0;
  --c-error-bg: #fff5f5;
  --c-error-text: #991b1b;
  --c-error-border: #fecaca;
  --c-info-bg: #eff6ff;
  --c-info-text: #1e40af;
  --c-info-border: #bfdbfe;
  --c-shadow-card: 0 4px 6px -1px rgba(26,26,46,.06), 0 20px 48px -4px rgba(26,26,46,.1);
  --c-shadow-input: 0 1px 2px rgba(26,26,46,.04);
  --c-radius-card: 20px;
  --c-radius-input: 12px;
  --c-radius-button: 12px;
  /* Theme-sensitive interactive tokens — override per theme */
  --c-accent-light: #cf8242;
  --c-btn-shadow: rgba(196,120,58,.25);
  --c-btn-shadow-hover: rgba(196,120,58,.32);
  --c-surface-hover: #f1ede8;
  --c-surface-hover-border: #c5b9ae;
  --c-tab-hover-bg: rgba(196,120,58,.05);
  --c-focus-ring: rgba(139,115,85,.15);
  --c-focus-outline: rgba(196,120,58,.55);
  --c-focus-glow: rgba(196,120,58,.28);
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  font-size:var(--font-size-body);
  min-height: 100dvh;
}

/* --- Shell & layout --- */

.customer-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 70% -10%, rgba(196,120,58,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(45,74,110,.1) 0%, transparent 55%),
    var(--c-bg);
}

.customer-auth-layout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* --- Card/surface --- */

.customer-auth-card {
  width: min(420px, 100%);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  box-shadow: var(--c-shadow-card);
  padding: 2.5rem 2rem 2rem;
  box-sizing: border-box;
}

.customer-surface {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  box-shadow: var(--c-shadow-card);
}

/* --- Header / brand mark inside card --- */

.customer-auth-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.customer-auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  font-family: var(--font-heading);
  font-weight:800;
  font-size: 1.1rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 8px 20px rgba(45,74,110,.22);
}

.customer-auth-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--c-text);
  margin: 0;
}

/* --- Form --- */

.customer-auth-form {
  display: grid;
  gap: 1rem;
}

.customer-form-field {
  display: grid;
  gap: .4rem;
}

.customer-form-field label {
  font-size:var(--font-size-small);
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.customer-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: 48px;
  padding: 0 .9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--c-radius-input);
  background: var(--c-surface-raised);
  color: var(--c-text);
  font-family: inherit;
  font-size: 1rem;
  box-shadow: var(--c-shadow-input);
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.customer-input:focus {
  outline: none;
  border-color: var(--c-border-focus);
  box-shadow: 0 0 0 3px var(--c-focus-ring), var(--c-shadow-input);
}

.customer-input::placeholder {
  color: var(--c-subtle);
}

/* --- Buttons --- */

.customer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 48px;
  padding: .75rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--c-radius-button);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .1s ease;
  -webkit-appearance: none;
  appearance: none;
}

.customer-button:active {
  transform: translateY(1px);
}

.customer-button-primary {
  width: 100%;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: #fff;
  box-shadow: 0 8px 20px var(--c-btn-shadow);
}

.customer-button-primary:hover {
  background: linear-gradient(135deg, var(--c-accent-light), var(--c-accent));
  box-shadow: 0 10px 24px var(--c-btn-shadow-hover);
}

.customer-button-secondary {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-border);
}

.customer-button-secondary:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-surface-hover-border);
}

/* --- Links --- */

.customer-link {
  color: var(--c-primary);
  font-weight: 700;
  text-decoration: none;
  transition: color .15s;
}

.customer-link:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

/* --- Divider / footer row --- */

.customer-form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .25rem;
  font-size:var(--font-size-small);
  color: var(--c-muted);
  flex-wrap: wrap;
}

/* --- Checkbox row --- */

.customer-checkbox-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size:var(--font-size-small);
  color: var(--c-muted);
}

.customer-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Notes & helper text --- */

.customer-note {
  font-size:var(--font-size-small);
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- Alert messages --- */

.customer-alert {
  padding: .9rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  font-size:var(--font-size-small);
  font-weight: 700;
  line-height: 1.45;
}

.customer-alert-error {
  background: var(--c-error-bg);
  border-color: var(--c-error-border);
  color: var(--c-error-text);
}

.customer-alert-success {
  background: var(--c-success-bg);
  border-color: var(--c-success-border);
  color: var(--c-success-text);
}

.customer-alert-info {
  background: var(--c-info-bg);
  border-color: var(--c-info-border);
  color: var(--c-info-text);
}

/* --- Icon wrapper --- */

.customer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-subtle);
  line-height: 1;
}

/* --- Focus accessibility (customer pages) --- */

body.customer-page button:focus-visible,
body.customer-page a:focus-visible,
body.customer-page input:focus-visible,
body.customer-page select:focus-visible {
  outline: 3px solid var(--c-focus-outline);
  outline-offset: 3px;
}

/* --- Responsive --- */

@media (max-width: 480px) {
  .customer-auth-card {
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 16px;
  }
  .customer-auth-layout {
    align-items: flex-start;
    padding: 1.25rem .75rem;
  }
  body.customer-page {
    font-size:var(--font-size-body);
  }
}

/* ==========================================================================
   Customer Dashboard — app shell v2
   ========================================================================== */

/* --- App header (dashboard, non-auth pages) --- */

.customer-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 3px rgba(26,26,46,.06);
}

.customer-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 64px;
}

.customer-header-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--c-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  flex-shrink: 0;
}

.customer-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(45,74,110,.2);
}

.customer-brand-name {
  font-weight: 700;
  letter-spacing: -.015em;
}

.customer-header-actions {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.customer-greeting {
  color: var(--c-muted);
  font-size:var(--font-size-small);
  font-weight: 600;
  white-space: nowrap;
}

.customer-button-ghost {
  background: transparent;
  color: var(--c-muted);
  border: 1.5px solid var(--c-border);
  padding: .45rem .85rem;
  min-height: 36px;
  font-size:var(--font-size-small);
  border-radius: 10px;
  box-shadow: none;
}

.customer-button-ghost:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
  border-color: var(--c-surface-hover-border);
}

/* --- Tab navigation --- */

.customer-tab-nav {
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid var(--c-border);
}

.customer-tab-nav-inner {
  display: flex;
  gap: .25rem;
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.customer-tab-btn {
  position: relative;
  padding: .85rem 1.15rem;
  border: none;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  color: var(--c-muted);
  font-family: inherit;
  font-size: .94rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .15s, border-color .15s;
  box-shadow: none;
  border-radius: 0;
  min-height: unset;
  white-space: nowrap;
  margin-bottom: -1px;
}

.customer-tab-btn[aria-selected="true"],
.customer-tab-btn[aria-current="page"] {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.customer-tab-btn:hover:not([aria-selected="true"]):not([aria-current="page"]) {
  color: var(--c-text);
  background: var(--c-tab-hover-bg);
}

/* Override body.theme-light/dark global button styles so tab buttons stay clean */
body.customer-page .customer-tab-btn {
  background: transparent;
  color: var(--c-muted);
  border-top: none;
  border-inline: none;
  border-bottom: 2.5px solid transparent;
  box-shadow: none;
}
body.customer-page .customer-tab-btn[aria-selected="true"],
body.customer-page .customer-tab-btn[aria-current="page"] {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  background: transparent;
}
body.customer-page .customer-tab-btn:hover:not([aria-selected="true"]):not([aria-current="page"]) {
  color: var(--c-text);
  background: var(--c-tab-hover-bg);
}

/* --- Page content container --- */

.customer-page-content {
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0;
}

.customer-page-alerts {
  width: min(1100px, calc(100% - 2rem));
  margin: 1.25rem auto 0;
}

/* --- Book grid --- */

.customer-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.customer-book-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.15rem;
  padding: 1.15rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(26,26,46,.05), 0 10px 28px rgba(26,26,46,.07);
  transition: box-shadow .2s, transform .2s;
}

.customer-book-card:hover {
  box-shadow: 0 4px 12px rgba(26,26,46,.09), 0 18px 38px rgba(26,26,46,.11);
  transform: translateY(-2px);
}

.customer-book-cover {
  display: block;
  width: 90px;
  height: 122px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(26,26,46,.15);
}

.customer-book-cover-placeholder {
  width: 90px;
  height: 122px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8e2d9, #f0ebe4);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-subtle);
}

.customer-book-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

.customer-book-title {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
  margin: 0;
  overflow-wrap: anywhere;
}

.customer-book-author {
  font-size:var(--font-size-small);
  color: var(--c-muted);
  margin: 0;
  font-weight: 600;
}

.customer-book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: auto;
  padding-top: .75rem;
}

.customer-button-sm {
  min-height: 36px;
  padding: .42rem .8rem;
  font-size:var(--font-size-small);
  border-radius: 9px;
  width: auto;
}

/* --- Empty library state --- */

.customer-empty-state {
  display: grid;
  place-items: center;
  gap: .85rem;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--c-muted);
}

.customer-empty-icon {
  color: var(--c-subtle);
}

.customer-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-muted);
  margin: 0;
}

/* --- Profile section --- */

.customer-profile-layout {
  max-width: 580px;
}

.customer-profile-card {
  padding: 1.5rem;
  border-radius: 18px;
  margin-bottom: 1.25rem;
}

.customer-profile-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-profile-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: .5rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--c-border);
}

.customer-profile-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.customer-profile-label {
  font-size: .8rem;
  font-weight:800;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.customer-profile-value {
  font-size: .96rem;
  font-weight: 600;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.customer-status-active {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: .8rem;
  font-weight: 700;
}

.customer-profile-actions {
  display: grid;
  gap: .75rem;
}

.customer-danger-zone {
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid #fecaca;
  background: #fff5f5;
}

.customer-danger-zone h3 {
  margin: 0 0 .5rem;
  font-size: .96rem;
  color: var(--c-error-text);
}

.customer-danger-note {
  margin: 0 0 1rem;
  font-size:var(--font-size-small);
  color: #b91c1c;
  line-height: 1.5;
}

.customer-button-danger {
  background: transparent;
  color: var(--c-error-text);
  border-color: #fecaca;
}

.customer-button-danger:hover {
  background: #fff1f0;
  border-color: #f7b8ae;
}

/* --- Responsive --- */

@media (max-width: 680px) {
  .customer-book-grid {
    grid-template-columns: 1fr;
  }
  .customer-book-card {
    grid-template-columns: 72px 1fr;
  }
  .customer-book-cover,
  .customer-book-cover-placeholder {
    width: 72px;
    height: 98px;
  }
  .customer-header-inner {
    min-height: 56px;
  }
  .customer-brand-name {
    display: none;
  }
  .customer-page-content,
  .customer-page-alerts {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .customer-profile-row {
    grid-template-columns: 110px 1fr;
  }
  .customer-greeting {
    display: none;
  }
}

@media (max-width: 400px) {
  .customer-tab-btn {
    padding: .75rem .85rem;
    font-size:var(--font-size-small);
  }
}

/* ==========================================================================
   Customer — Dark mode (theme-dark class applied by customer-preferences.js)
   ========================================================================== */

html.theme-dark body.customer-page,
body.customer-page.theme-dark {
  --c-bg: #111827;
  --c-surface: #1f2937;
  --c-surface-raised: #243144;
  --c-text: #f1ede8;
  --c-muted: #9ca3af;
  --c-subtle: #6b7280;
  --c-border: #374151;
  --c-border-focus: #e8945a;
  --c-accent: #e8945a;
  --c-accent-dark: #c4783a;
  --c-success-bg: #052e16;
  --c-success-text: #86efac;
  --c-success-border: #166534;
  --c-error-bg: #450a0a;
  --c-error-text: #fca5a5;
  --c-error-border: #7f1d1d;
  --c-info-bg: #1e3a5f;
  --c-info-text: #93c5fd;
  --c-info-border: #1e40af;
  --c-shadow-card: 0 4px 6px -1px rgba(0,0,0,.35), 0 20px 48px -4px rgba(0,0,0,.5);
  --c-accent-light: #f0a070;
  --c-btn-shadow: rgba(232,148,90,.2);
  --c-btn-shadow-hover: rgba(232,148,90,.3);
  --c-surface-hover: #243144;
  --c-surface-hover-border: #374151;
  --c-tab-hover-bg: rgba(255,255,255,.04);
  --c-focus-ring: rgba(232,148,90,.2);
  --c-focus-outline: rgba(232,148,90,.55);
  --c-focus-glow: rgba(232,148,90,.25);
}

html.theme-dark body.customer-page .customer-shell,
body.customer-page.theme-dark .customer-shell {
  background:
    radial-gradient(ellipse at 70% -10%, rgba(200,100,50,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(45,74,110,.1) 0%, transparent 55%),
    var(--c-bg);
}

html.theme-dark body.customer-page .customer-header,
body.customer-page.theme-dark .customer-header {
  background: rgba(17,24,39,.97);
  border-bottom-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-tab-nav,
body.customer-page.theme-dark .customer-tab-nav {
  background: rgba(31,41,55,.95);
  border-bottom-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-tab-btn,
body.customer-page.theme-dark .customer-tab-btn {
  color: var(--c-muted);
}

html.theme-dark body.customer-page .customer-tab-btn[aria-selected="true"],
html.theme-dark body.customer-page .customer-tab-btn[aria-current="page"],
body.customer-page.theme-dark .customer-tab-btn[aria-selected="true"],
body.customer-page.theme-dark .customer-tab-btn[aria-current="page"] {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  background: transparent;
}

html.theme-dark body.customer-page .customer-tab-btn:hover:not([aria-selected="true"]):not([aria-current="page"]),
body.customer-page.theme-dark .customer-tab-btn:hover:not([aria-selected="true"]):not([aria-current="page"]) {
  background: rgba(255,255,255,.05);
}

html.theme-dark body.customer-page .customer-book-card,
body.customer-page.theme-dark .customer-book-card {
  background: var(--c-surface);
  border-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-book-card:hover,
body.customer-page.theme-dark .customer-book-card:hover {
  border-color: #4b5563;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

html.theme-dark body.customer-page .customer-book-cover-placeholder,
body.customer-page.theme-dark .customer-book-cover-placeholder {
  background: #243144;
  border-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-profile-card,
body.customer-page.theme-dark .customer-profile-card {
  background: var(--c-surface);
  border-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-profile-row,
body.customer-page.theme-dark .customer-profile-row {
  border-bottom-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-danger-zone,
body.customer-page.theme-dark .customer-danger-zone {
  background: #2d1515;
  border-color: #7f1d1d;
}

html.theme-dark body.customer-page .customer-button-ghost,
body.customer-page.theme-dark .customer-button-ghost {
  color: var(--c-muted);
  border-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-button-ghost:hover,
body.customer-page.theme-dark .customer-button-ghost:hover {
  background: #243144;
  color: var(--c-text);
}

html.theme-dark body.customer-page .customer-button-secondary,
body.customer-page.theme-dark .customer-button-secondary {
  color: var(--c-text);
  border-color: var(--c-border);
}

html.theme-dark body.customer-page .customer-button-secondary:hover,
body.customer-page.theme-dark .customer-button-secondary:hover {
  background: #243144;
  border-color: #4b5563;
}

html.theme-dark body.customer-page .customer-input,
body.customer-page.theme-dark .customer-input {
  background: var(--c-surface-raised);
  border-color: var(--c-border);
  color: var(--c-text);
}

html.theme-dark body.customer-page .customer-auth-card,
body.customer-page.theme-dark .customer-auth-card {
  background: var(--c-surface);
  border-color: var(--c-border);
}

/* ==========================================================================
   Customer — High contrast mode
   ========================================================================== */

html.accessibility-high-contrast body.customer-page,
body.customer-page.accessibility-high-contrast {
  --c-bg: #000;
  --c-surface: #000;
  --c-surface-raised: #000;
  --c-text: #fff;
  --c-muted: #fff;
  --c-subtle: #e0e0e0;
  --c-border: #fff;
  --c-border-focus: #ff0;
  --c-accent: #ff0;
  --c-accent-dark: #cc0;
  --c-primary: #0ff;
  --c-primary-dark: #00cccc;
  --c-success-bg: #000;
  --c-success-text: #0f0;
  --c-success-border: #0f0;
  --c-error-bg: #000;
  --c-error-text: #f77;
  --c-error-border: #f77;
}

html.accessibility-high-contrast body.customer-page .customer-shell,
body.customer-page.accessibility-high-contrast .customer-shell {
  background: #000 !important;
}

html.accessibility-high-contrast body.customer-page .customer-header,
body.customer-page.accessibility-high-contrast .customer-header {
  background: #000 !important;
  border-bottom: 2px solid #fff !important;
  backdrop-filter: none !important;
}

html.accessibility-high-contrast body.customer-page .customer-tab-nav,
body.customer-page.accessibility-high-contrast .customer-tab-nav {
  background: #000 !important;
  border-bottom: 2px solid #fff !important;
}

html.accessibility-high-contrast body.customer-page .customer-tab-btn,
body.customer-page.accessibility-high-contrast .customer-tab-btn {
  color: #fff !important;
  background: #000 !important;
}

html.accessibility-high-contrast body.customer-page .customer-tab-btn[aria-selected="true"],
html.accessibility-high-contrast body.customer-page .customer-tab-btn[aria-current="page"],
body.customer-page.accessibility-high-contrast .customer-tab-btn[aria-selected="true"],
body.customer-page.accessibility-high-contrast .customer-tab-btn[aria-current="page"] {
  color: #ff0 !important;
  border-bottom-color: #ff0 !important;
}

html.accessibility-high-contrast body.customer-page .customer-book-card,
html.accessibility-high-contrast body.customer-page .customer-auth-card,
html.accessibility-high-contrast body.customer-page .customer-profile-card,
body.customer-page.accessibility-high-contrast .customer-book-card,
body.customer-page.accessibility-high-contrast .customer-auth-card,
body.customer-page.accessibility-high-contrast .customer-profile-card {
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

html.accessibility-high-contrast body.customer-page .customer-button,
body.customer-page.accessibility-high-contrast .customer-button {
  background: #ff0 !important;
  color: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

html.accessibility-high-contrast body.customer-page .customer-input,
body.customer-page.accessibility-high-contrast .customer-input {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

html.accessibility-high-contrast body.customer-page .customer-danger-zone,
body.customer-page.accessibility-high-contrast .customer-danger-zone {
  background: #000 !important;
  border: 2px solid #f77 !important;
}

html.accessibility-high-contrast body.customer-page a,
body.customer-page.accessibility-high-contrast a {
  color: #0ff !important;
}

/* ==========================================================================
   Customer — Accessible dark mode (accessibility-invert)
   ========================================================================== */

html.accessibility-invert body.customer-page,
body.customer-page.accessibility-invert {
  --c-bg: #111;
  --c-surface: #1a1a1a;
  --c-surface-raised: #222;
  --c-text: #f0ece6;
  --c-muted: #a0a0a8;
  --c-subtle: #6b7280;
  --c-border: #374151;
  --c-border-focus: #e8945a;
}

html.accessibility-invert body.customer-page .customer-shell,
body.customer-page.accessibility-invert .customer-shell {
  background: #111 !important;
}

html.accessibility-invert body.customer-page .customer-header,
body.customer-page.accessibility-invert .customer-header {
  background: rgba(17,17,17,.97) !important;
  border-bottom-color: #374151 !important;
}

html.accessibility-invert body.customer-page .customer-tab-nav,
body.customer-page.accessibility-invert .customer-tab-nav {
  background: rgba(26,26,26,.97) !important;
  border-bottom-color: #374151 !important;
}

html.accessibility-invert body.customer-page .customer-book-card,
html.accessibility-invert body.customer-page .customer-auth-card,
html.accessibility-invert body.customer-page .customer-profile-card,
body.customer-page.accessibility-invert .customer-book-card,
body.customer-page.accessibility-invert .customer-auth-card,
body.customer-page.accessibility-invert .customer-profile-card {
  background: #1a1a1a !important;
  border-color: #374151 !important;
}

html.accessibility-invert body.customer-page .customer-input,
body.customer-page.accessibility-invert .customer-input {
  background: #222 !important;
  color: #f0ece6 !important;
  border-color: #374151 !important;
}

html.accessibility-invert body.customer-page .customer-danger-zone,
body.customer-page.accessibility-invert .customer-danger-zone {
  background: #1a0a0a !important;
  border-color: #7f1d1d !important;
}

html.accessibility-invert body.customer-page .customer-book-cover-placeholder,
body.customer-page.accessibility-invert .customer-book-cover-placeholder {
  background: #222 !important;
  border-color: #374151 !important;
}

/* ==========================================================================
   Customer — Focus enhancement (accessibility-focus class)
   ========================================================================== */

html.accessibility-focus body.customer-page *:focus,
html.accessibility-focus body.customer-page *:focus-visible,
body.customer-page.accessibility-focus *:focus,
body.customer-page.accessibility-focus *:focus-visible {
  outline: 5px solid var(--c-accent) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px var(--c-focus-glow) !important;
}

/* ==========================================================================
   Customer color themes — applied via data-customer-theme on <html>
   Light is the default (no attribute needed). Dark also sets theme-dark class.
   ========================================================================== */

/* Dark */
html[data-customer-theme="dark"] body.customer-page {
  --c-bg: #111827;
  --c-surface: #1f2937;
  --c-surface-raised: #243144;
  --c-text: #f1ede8;
  --c-muted: #9ca3af;
  --c-subtle: #6b7280;
  --c-border: #374151;
  --c-border-focus: #e8945a;
  --c-accent: #e8945a;
  --c-accent-dark: #c4783a;
  --c-primary: #93c5fd;
  --c-primary-dark: #60a5fa;
  --c-success-bg: #052e16;
  --c-success-text: #86efac;
  --c-success-border: #166534;
  --c-error-bg: #450a0a;
  --c-error-text: #fca5a5;
  --c-error-border: #7f1d1d;
  --c-info-bg: #1e3a5f;
  --c-info-text: #93c5fd;
  --c-info-border: #1e40af;
  --c-shadow-card: 0 4px 6px -1px rgba(0,0,0,.35), 0 20px 48px -4px rgba(0,0,0,.5);
  --c-accent-light: #f0a070;
  --c-btn-shadow: rgba(232,148,90,.2);
  --c-btn-shadow-hover: rgba(232,148,90,.3);
  --c-surface-hover: #243144;
  --c-surface-hover-border: #374151;
  --c-tab-hover-bg: rgba(255,255,255,.04);
  --c-focus-ring: rgba(232,148,90,.2);
  --c-focus-outline: rgba(232,148,90,.55);
  --c-focus-glow: rgba(232,148,90,.25);
}
html[data-customer-theme="dark"] body.customer-page .customer-shell {
  background:
    radial-gradient(ellipse at 70% -10%, rgba(200,100,50,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(45,74,110,.1) 0%, transparent 55%),
    var(--c-bg);
}
html[data-customer-theme="dark"] body.customer-page .customer-header {
  background: rgba(17,24,39,.97);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="dark"] body.customer-page .customer-tab-nav {
  background: rgba(31,41,55,.95);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="dark"] body.customer-page .customer-tab-btn { color: var(--c-muted); }
html[data-customer-theme="dark"] body.customer-page .customer-tab-btn[aria-selected="true"],
html[data-customer-theme="dark"] body.customer-page .customer-tab-btn[aria-current="page"] {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  background: transparent;
}
html[data-customer-theme="dark"] body.customer-page .customer-book-card,
html[data-customer-theme="dark"] body.customer-page .customer-auth-card,
html[data-customer-theme="dark"] body.customer-page .customer-profile-card {
  background: var(--c-surface);
  border-color: var(--c-border);
}
html[data-customer-theme="dark"] body.customer-page .customer-book-cover-placeholder { background: #243144; border-color: var(--c-border); }
html[data-customer-theme="dark"] body.customer-page .customer-input { background: var(--c-surface-raised); border-color: var(--c-border); color: var(--c-text); }
html[data-customer-theme="dark"] body.customer-page .customer-button-ghost { color: var(--c-muted); border-color: var(--c-border); }
html[data-customer-theme="dark"] body.customer-page .customer-button-ghost:hover { background: #243144; color: var(--c-text); }
html[data-customer-theme="dark"] body.customer-page .customer-button-secondary { color: var(--c-text); border-color: var(--c-border); }
html[data-customer-theme="dark"] body.customer-page .customer-danger-zone { background: #2d1515; border-color: #7f1d1d; }

/* Olive */
html[data-customer-theme="olive"] body.customer-page {
  --c-bg: #f2f0e6;
  --c-surface: #ffffff;
  --c-surface-raised: #fafaf4;
  --c-text: #1e2a0e;
  --c-muted: #5a6b45;
  --c-subtle: #8fa070;
  --c-border: #d4d9c0;
  --c-border-focus: #5a6e35;
  --c-accent: #5a6e35;
  --c-accent-dark: #3f4e26;
  --c-primary: #4a5e28;
  --c-primary-dark: #35441e;
  --c-accent-light: #7a9048;
  --c-btn-shadow: rgba(90,110,53,.2);
  --c-btn-shadow-hover: rgba(90,110,53,.3);
  --c-surface-hover: #e8e6d8;
  --c-surface-hover-border: #c0c4a8;
  --c-tab-hover-bg: rgba(90,110,53,.06);
  --c-focus-ring: rgba(90,110,53,.15);
  --c-focus-outline: rgba(90,110,53,.55);
  --c-focus-glow: rgba(90,110,53,.25);
}
html[data-customer-theme="olive"] body.customer-page .customer-shell {
  background:
    radial-gradient(ellipse at 70% -10%, rgba(90,110,53,.1) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(74,94,40,.08) 0%, transparent 55%),
    var(--c-bg);
}
html[data-customer-theme="olive"] body.customer-page .customer-header {
  background: rgba(242,240,230,.97);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="olive"] body.customer-page .customer-tab-nav {
  background: rgba(242,240,230,.92);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="olive"] body.customer-page .customer-button-ghost:hover { background: #e8e6d8; }

/* Sky */
html[data-customer-theme="sky"] body.customer-page {
  --c-bg: #eef4fb;
  --c-surface: #ffffff;
  --c-surface-raised: #f5f9ff;
  --c-text: #0d2340;
  --c-muted: #4a6a8a;
  --c-subtle: #7a9ab5;
  --c-border: #c8ddef;
  --c-border-focus: #2d7dd2;
  --c-accent: #2d7dd2;
  --c-accent-dark: #1e63b0;
  --c-primary: #1a4d8c;
  --c-primary-dark: #103876;
  --c-accent-light: #4a92e2;
  --c-btn-shadow: rgba(45,125,210,.22);
  --c-btn-shadow-hover: rgba(45,125,210,.32);
  --c-surface-hover: #ddeaf7;
  --c-surface-hover-border: #aac8e8;
  --c-tab-hover-bg: rgba(45,125,210,.06);
  --c-focus-ring: rgba(45,125,210,.15);
  --c-focus-outline: rgba(45,125,210,.55);
  --c-focus-glow: rgba(45,125,210,.25);
}
html[data-customer-theme="sky"] body.customer-page .customer-shell {
  background:
    radial-gradient(ellipse at 70% -10%, rgba(45,125,210,.1) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(26,77,140,.08) 0%, transparent 55%),
    var(--c-bg);
}
html[data-customer-theme="sky"] body.customer-page .customer-header {
  background: rgba(238,244,251,.97);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="sky"] body.customer-page .customer-tab-nav {
  background: rgba(238,244,251,.92);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="sky"] body.customer-page .customer-button-ghost:hover { background: #ddeaf7; }

/* Lavender */
html[data-customer-theme="lavender"] body.customer-page {
  --c-bg: #f3f0f9;
  --c-surface: #ffffff;
  --c-surface-raised: #faf8fe;
  --c-text: #1e1428;
  --c-muted: #6b5490;
  --c-subtle: #9c82b8;
  --c-border: #d9cff0;
  --c-border-focus: #7c4daf;
  --c-accent: #7c4daf;
  --c-accent-dark: #5e3588;
  --c-primary: #5a3880;
  --c-primary-dark: #422860;
  --c-accent-light: #9461c4;
  --c-btn-shadow: rgba(124,77,175,.2);
  --c-btn-shadow-hover: rgba(124,77,175,.3);
  --c-surface-hover: #eae4f7;
  --c-surface-hover-border: #c4b5e8;
  --c-tab-hover-bg: rgba(124,77,175,.06);
  --c-focus-ring: rgba(124,77,175,.15);
  --c-focus-outline: rgba(124,77,175,.55);
  --c-focus-glow: rgba(124,77,175,.25);
}
html[data-customer-theme="lavender"] body.customer-page .customer-shell {
  background:
    radial-gradient(ellipse at 70% -10%, rgba(124,77,175,.1) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(90,56,128,.08) 0%, transparent 55%),
    var(--c-bg);
}
html[data-customer-theme="lavender"] body.customer-page .customer-header {
  background: rgba(243,240,249,.97);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="lavender"] body.customer-page .customer-tab-nav {
  background: rgba(243,240,249,.92);
  border-bottom-color: var(--c-border);
}
html[data-customer-theme="lavender"] body.customer-page .customer-button-ghost:hover { background: #eae4f7; }

/* ==========================================================================
   Customer theme panel (floating popover replacing old dark-mode button)
   ========================================================================== */

.customer-theme-panel {
  position: absolute;
  inset-inline-start: calc(100% + .6rem);
  top: 50%;
  transform: translateY(-50%);
  width: min(260px, calc(100vw - 11rem));
  max-height: min(80dvh, calc(100dvh - 1.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #111827;
  border: 2px solid #1d4ed8;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.15);
  padding: .85rem 1rem 1rem;
  box-sizing: border-box;
  z-index: 2147483000;
}

.customer-theme-panel[hidden] { display: none; }

.customer-theme-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}

.customer-theme-panel-title {
  font-size:var(--font-size-small);
  font-weight: 800;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.customer-theme-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem;
}

.customer-theme-option {
  min-height: 44px;
  padding: .35rem .1rem;
  font-size:var(--font-size-small);
  font-weight: 700;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #f1f5f9;
  color: #374151;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  text-align: center;
  line-height: 1.25;
  width: 100%;
}

.customer-theme-option:hover { background: #e2e8f0; }

.customer-theme-option[aria-pressed="true"] {
  border-color: #1d4ed8;
  background: #eff6ff;
  color: #1e40af;
  box-shadow: inset 0 0 0 1px #93c5fd;
}

html.theme-dark .customer-theme-panel,
body.theme-dark .customer-theme-panel {
  background: #1e293b;
  color: #f8fafc;
  border-color: #60a5fa;
}
html.theme-dark .customer-theme-panel-title,
body.theme-dark .customer-theme-panel-title { color: #f8fafc; }
html.theme-dark .customer-theme-option,
body.theme-dark .customer-theme-option { background: #334155; color: #f8fafc; }
html.theme-dark .customer-theme-option:hover,
body.theme-dark .customer-theme-option:hover { background: #475569; }
html.theme-dark .customer-theme-option[aria-pressed="true"],
body.theme-dark .customer-theme-option[aria-pressed="true"] {
  background: #1e3a5f;
  border-color: #60a5fa;
  color: #93c5fd;
}

/* ==========================================================================
   Customer typography follows the shared Heebo/Assistant contract.
   ========================================================================== */

body.customer-page h1,
body.customer-page h2,
body.customer-page h3,
body.customer-page h4,
body.customer-page h5,
body.customer-page h6 {
  font-family: var(--font-heading);
}

body.customer-page .customer-auth-title,
body.customer-page .customer-brand-name {
  font-family: var(--font-heading);
}

body.customer-page .customer-button,
body.customer-page button.customer-button {
  font-family: var(--font-body);
}

/* Customer-page accessibility panel buttons follow the active theme */
body.customer-page .accessibility-option,
body.customer-page .accessibility-reset {
  font-family: var(--font-body);
  background: var(--c-accent);
  color: #fff;
}
body.customer-page .accessibility-option[aria-pressed="true"],
body.customer-page .accessibility-option.active {
  background: var(--c-accent-dark);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.28);
}

/* Reader back button — readable against the dark reader background */
body.reader-protection .reader-actions .button.secondary {
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
  border: 1px solid #334155;
  font-family: var(--font-body);
}
body.reader-protection .reader-actions .button.secondary:hover {
  background: rgba(255,255,255,.12);
  color: #e2e8f0;
  border-color: #475569;
}

/* ==========================================================================
   Customer — Segmented audio player (cust-player-* classes)
   ========================================================================== */

.cust-player-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Slim sticky header */
.cust-player-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-customer-theme="dark"] .cust-player-header,
html.theme-dark .cust-player-header {
  background: rgba(17,24,39,.97);
}
html[data-customer-theme="olive"] .cust-player-header {
  background: rgba(242,240,230,.97);
}
html[data-customer-theme="sky"] .cust-player-header {
  background: rgba(238,244,251,.97);
}
html[data-customer-theme="lavender"] .cust-player-header {
  background: rgba(243,240,249,.97);
}

.cust-player-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(900px, calc(100% - 2rem));
  margin: 0 auto;
  min-height: 56px;
}

.cust-player-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-accent);
  font-weight: 700;
  font-size:var(--font-size-small);
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.cust-player-back:hover {
  background: var(--c-surface-hover);
  color: var(--c-accent-dark);
}

.cust-player-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  flex-shrink: 0;
}

/* Main content */
.cust-player-main {
  flex: 1;
  width: min(760px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

/* Book identity */
.cust-player-book {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cust-player-cover {
  display: block;
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  flex-shrink: 0;
}

.cust-player-cover-placeholder {
  width: 120px;
  height: 160px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-surface-raised, #f0ede8), var(--c-surface, #fff));
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-subtle);
  flex-shrink: 0;
}

.cust-player-book-info {
  padding-bottom: .25rem;
}

.cust-player-title {
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--c-text);
  margin: 0 0 .4rem;
}

.cust-player-author {
  font-size: .95rem;
  color: var(--c-muted);
  font-weight: 600;
  margin: 0;
}

/* Audio stage */
.cust-player-stage {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  padding: 1.5rem 1.75rem 1.75rem;
  box-shadow: var(--c-shadow-card);
  margin-bottom: 1.5rem;
}

/* Now playing indicator */
.cust-now-playing {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
  min-height: 2.2rem;
  flex-wrap: wrap;
}

.cust-now-playing-label {
  font-size: .8rem;
  font-weight:800;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.cust-now-playing-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

/* Progress bar */
.cust-player-progress-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.cust-player-time {
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-muted);
  min-width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.cust-player-progress-track {
  flex: 1;
  height: 6px;
  background: var(--c-border);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}

.cust-player-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--c-accent);
  border-radius: 999px;
  transition: width .4s linear;
}

/* Controls */
.cust-player-controls {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
}

.cust-player-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
}

/* Control buttons */
.cust-player-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, transform .08s, box-shadow .15s;
  font-family: var(--font-body);
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
}

.cust-player-btn:active {
  transform: scale(.95);
}

/* Play/pause — large central button */
.cust-player-btn-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 6px 20px var(--c-btn-shadow);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cust-player-btn-play:hover {
  background: var(--c-accent-dark);
  box-shadow: 0 8px 24px var(--c-btn-shadow-hover);
}

/* Skip ±15 buttons */
.cust-player-btn-skip {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-surface-raised, #fdfcfb);
  color: var(--c-text);
  border: 1.5px solid var(--c-border);
  font-size:var(--font-size-small);
  flex-direction: column;
  gap: .1rem;
  flex-shrink: 0;
}

.cust-player-btn-skip:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-surface-hover-border);
}

.cust-player-btn-skip-label {
  font-size:var(--font-size-small);
  font-weight:800;
  line-height: 1;
}

/* Previous/next segment buttons */
.cust-player-btn-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--c-accent);
  border: 1.5px solid var(--c-border);
  font-size: .9rem; /* Icon glyph, not user-facing text. */
  flex-shrink: 0;
}

.cust-player-btn-nav:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-accent);
}

/* Stop/reset */
.cust-player-btn-stop {
  padding: .5rem 1.25rem;
  min-height: 38px;
  background: transparent;
  color: var(--c-muted);
  border: 1.5px solid var(--c-border);
  font-size:var(--font-size-small);
  border-radius: 10px;
}

.cust-player-btn-stop:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
  border-color: var(--c-surface-hover-border);
}

/* Focus on player controls */
.cust-player-btn:focus-visible {
  outline: 3px solid var(--c-focus-outline);
  outline-offset: 2px;
}

/* Segment list */
.cust-segment-list-section {
  margin-top: .25rem;
}

.cust-segment-list-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .75rem;
}

.cust-segment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}

.cust-segment-item {
  margin: 0;
  padding: 0;
}

.cust-segment-btn {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .75rem 1rem;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.cust-segment-btn:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-surface-hover-border);
  box-shadow: 0 3px 8px rgba(0,0,0,.07);
}

.cust-segment-btn.active,
.cust-segment-btn[aria-current="true"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  box-shadow: 0 4px 14px var(--c-btn-shadow);
}

.cust-segment-btn.active:hover,
.cust-segment-btn[aria-current="true"]:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
}

.cust-segment-num {
  font-weight:800;
  color: inherit;
  opacity: .65;
  font-size:var(--font-size-small);
  text-align: center;
}

.cust-segment-btn.active .cust-segment-num,
.cust-segment-btn[aria-current="true"] .cust-segment-num {
  opacity: .85;
}

.cust-segment-name {
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.cust-segment-active-indicator {
  font-size: .75rem; /* Decorative active-state glyph. */
  opacity: 0;
  color: inherit;
  transition: opacity .15s;
}

.cust-segment-btn.active .cust-segment-active-indicator,
.cust-segment-btn[aria-current="true"] .cust-segment-active-indicator {
  opacity: 1;
}

.cust-segment-btn:focus-visible {
  outline: 3px solid var(--c-focus-outline);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .cust-player-main {
    padding: 1.5rem 0 3rem;
  }
  .cust-player-book {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
  .cust-player-book-info {
    text-align: center;
  }
  .cust-player-stage {
    padding: 1.25rem 1.1rem 1.4rem;
    border-radius: 18px;
  }
  .cust-player-btn-play {
    width: 56px;
    height: 56px;
  }
  .cust-player-btn-skip {
    width: 46px;
    height: 46px;
  }
  .cust-player-btn-nav {
    width: 38px;
    height: 38px;
  }
  .cust-segment-btn {
    font-size:var(--font-size-small);
    padding: .65rem .85rem;
  }
}
.admin-wm-banner{display:grid;gap:.3rem;padding:.85rem 1.1rem;border-radius:14px;border:1px solid;margin-bottom:.85rem;font-size:var(--font-size-small)}
.admin-wm-banner strong{font-size:.97rem}
.admin-wm-banner-success{background:#e7f8f1;border-color:#a6e9d5;color:#05603a}
.admin-wm-banner-warning{background:#fff4e5;border-color:#ffd6a3;color:#93370d}
.admin-wm-banner-danger{background:#fff0ed;border-color:#f7b8ae;color:#b42318}
.admin-wm-banner-neutral{background:#f2f4f7;border-color:#d0d5dd;color:#475467}
.admin-wm-banner-meta{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:var(--font-size-small)}
.admin-wm-banner-meta code{background:rgba(0,0,0,.07);padding:.1em .35em;border-radius:4px}
.admin-wm-score{display:inline-block;font-size:var(--font-size-small);font-weight:700;background:rgba(180,83,9,.12);color:#93370d;border:1px solid #ffd6a3;border-radius:6px;padding:.08em .4em;line-height:1.4}


/* ============================================================
   Catalog public pages: /catalog and /catalog/{slug}
   Colors are routed through the --pub-* tokens (defined in the
   public design-system section at the end of this file) so the
   color-theme selector restyles the funnel coherently; every
   fallback equals the token's light value.
   ============================================================ */
.catalog-hero{text-align:center;padding:2.5rem 1rem 1.5rem;max-width:860px;margin:0 auto}
.catalog-hero h1{font-size:2rem;margin:.25rem 0}
.catalog-hero-sub{color:var(--pub-muted,#6b7280);margin:.5rem 0 0}
.catalog-hero-count{color:var(--pub-muted,#6b7280);font-size:var(--font-size-small);margin:.25rem 0 0}
/* Filter toolbar (direction follows the document: rtl on Hebrew, ltr on /en) */
.catalog-filter-wrap{max-width:1180px;margin:0 auto 1rem;padding:0 1rem}
.catalog-filter-form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;background:var(--pub-surface,#fff);border:1px solid var(--pub-border,#e5e7eb);border-radius:14px;padding:1rem 1.25rem}
.catalog-filter-group{display:flex;flex-direction:column;gap:.25rem;min-width:140px;flex:1}
.catalog-filter-label{font-size:.8rem;color:var(--pub-muted,#6b7280);font-weight:600}
.catalog-filter-input,.catalog-filter-select{border:1px solid var(--pub-border,#d1d5db);border-radius:8px;padding:.45rem .7rem;font-size:var(--font-size-small);background:var(--pub-surface-alt,#f9fafb);color:var(--pub-text,#1f2937);width:100%;box-sizing:border-box}
.catalog-filter-input:focus-visible,.catalog-filter-select:focus-visible,.catalog-filter-input:focus,.catalog-filter-select:focus{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:1px}
.catalog-filter-actions{display:flex;align-items:center;gap:.5rem;padding-top:1.4rem}
.catalog-filter-btn-submit{background:var(--pub-primary,#7b4f2c);color:var(--pub-primary-text,#fff);border:none;border-radius:10px;padding:.5rem 1.25rem;font-size:.95rem;font-weight:600;cursor:pointer;white-space:nowrap}
.catalog-filter-btn-submit:hover{background:var(--pub-primary-hover,#5c3820)}
.catalog-filter-btn-submit:focus-visible{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:2px}
.catalog-filter-btn-clear{color:var(--pub-link,#7b4f2c);text-decoration:underline;font-size:var(--font-size-small);white-space:nowrap}
/* Genre chips */
.catalog-genre-chips{display:flex;flex-wrap:wrap;gap:.5rem;max-width:1180px;margin:0 auto .75rem;padding:0 1rem}
.catalog-genre-chip{display:inline-flex;align-items:center;min-height:36px;padding:.15rem .85rem;border-radius:999px;font-size:var(--font-size-small);font-weight:600;background:var(--pub-surface,#f3f0eb);color:var(--pub-text,#374151);border:1px solid var(--pub-border,#d1d5db);text-decoration:none;transition:background .15s,border-color .15s}
.catalog-genre-chip:hover{background:var(--pub-surface-alt,#e8ddd3);border-color:var(--pub-primary,#7b4f2c)}
.catalog-genre-chip:focus-visible{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:2px}
.catalog-genre-chip.active{background:var(--pub-primary,#7b4f2c);color:var(--pub-primary-text,#fff);border-color:var(--pub-primary,#7b4f2c)}
/* Results count */
.catalog-results-count{max-width:1180px;margin:.25rem auto .5rem;padding:0 1rem;font-size:var(--font-size-small);color:var(--pub-muted,#6b7280)}
/* Sections */
.catalog-section{max-width:1180px;margin:0 auto 2rem;padding:0 1rem}
.catalog-section-heading{font-size:1.25rem;font-weight:700;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--pub-border,#e5e7eb);color:var(--pub-text,#1f2937);text-align:start}
.catalog-featured-section .catalog-section-heading{border-bottom-color:var(--pub-primary,#7b4f2c);color:var(--pub-primary,#7b4f2c)}
/* Featured strip */
.catalog-featured-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}
/* Book grid */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem}
/* Cards */
.catalog-card{background:var(--pub-surface,#fff);border:1px solid var(--pub-border,transparent);border-radius:18px;box-shadow:0 4px 18px #0001;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s}
.catalog-card:hover{box-shadow:0 8px 28px #0002}
.catalog-card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1}
.catalog-card-link:focus-visible{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:-3px;border-radius:18px}
/* Covers keep the artwork's composition: portrait box + object-fit:contain
   (never crop a book cover); mixed source sizes letterbox onto a quiet
   backdrop so the card grid stays uniform. */
.catalog-card-cover{background:var(--pub-cover-bg,#f3f0eb);display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;overflow:hidden}
.catalog-card-cover img{width:100%;height:100%;object-fit:contain}
.catalog-card-cover-placeholder{font-size:3rem;opacity:.4}
.catalog-card-body{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.catalog-card-title{font-size:1.1rem;font-weight:700;margin:0;line-height:1.3}
.catalog-card-author{color:var(--pub-muted,#6b7280);font-size:var(--font-size-small);margin:0}
.catalog-card-desc{color:var(--pub-muted,#6b7280);font-size:var(--font-size-small);margin:0;flex:1}
.catalog-card-price{font-weight:700;color:var(--pub-text,#1f2937);margin:0}
.catalog-card-price-tbd{color:var(--pub-subtle,#9ca3af);font-weight:400;font-style:italic}
.catalog-card-badge-featured{display:inline-block;background:var(--pub-primary,#7b4f2c);color:var(--pub-primary-text,#fff);font-size:var(--font-size-small);font-weight:700;border-radius:6px;padding:.1em .5em;margin-bottom:.2rem;align-self:flex-start}
.catalog-card-genre-chip{display:inline-block;background:var(--pub-chip-bg,#e9f1f3);color:var(--pub-chip-text,#275f70);border:1px solid var(--pub-chip-border,#c4d8dd);border-radius:20px;font-size:var(--font-size-small);padding:.1rem .5rem;align-self:flex-start}
.catalog-card-formats{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.catalog-format-chip-sm{background:var(--pub-surface-alt,#f0f0f0);border:1px solid var(--pub-border,#ddd);border-radius:12px;font-size:var(--font-size-small);padding:.1rem .45rem;color:var(--pub-muted,#555)}
.catalog-card-cta{padding:.75rem 1rem;border-top:1px solid var(--pub-border,#e5e7eb)}
.catalog-cta-button{display:block;width:100%;text-align:center;background:var(--pub-primary,#7b4f2c);color:var(--pub-primary-text,#fff);border:0;border-radius:10px;padding:.65rem 1rem;text-decoration:none;cursor:pointer;font-size:1rem;box-sizing:border-box}
.catalog-cta-button:hover{background:var(--pub-primary-hover,#5c3820)}
.catalog-cta-button:focus-visible{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:2px}
/* Empty states */
.catalog-empty{text-align:center;padding:3rem 1rem;color:var(--pub-muted,#6b7280)}
.catalog-empty-state{text-align:center;padding:3rem 1rem;color:var(--pub-muted,#6b7280);max-width:480px;margin:0 auto}
.catalog-empty-icon{font-size:3rem;display:block;margin-bottom:.75rem;opacity:.5}
.catalog-empty-title{font-size:1.1rem;font-weight:600;margin:.25rem 0}
.catalog-empty-msg{font-size:.95rem;margin:.5rem 0 0}
.catalog-empty-msg a{color:var(--pub-link,#7b4f2c)}
/* Customer catalog link in tab nav */
a.customer-catalog-link{display:inline-flex;align-items:center;text-decoration:none}
a.customer-catalog-link:hover{background:rgba(255,255,255,.15)}
@media(max-width:640px){.catalog-filter-form{gap:.5rem}.catalog-filter-group{min-width:calc(50% - .25rem)}.catalog-featured-strip{grid-template-columns:1fr 1fr}}
/* Product page */
.product-page{max-width:960px;margin:2rem auto;padding:0 1rem}
.product-hero{display:flex;gap:2.5rem;align-items:flex-start;flex-wrap:wrap}
.product-cover-wrap{flex:0 0 220px}
.product-cover{width:100%;border-radius:14px;box-shadow:0 8px 24px #0002;display:block}
.product-cover-placeholder{width:220px;max-width:100%;height:280px;background:var(--pub-cover-bg,#f3f0eb);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:4rem;opacity:.4}
.product-hero-copy{flex:1;min-width:min(240px,100%)}
.product-eyebrow{color:var(--pub-muted,#6b7280);font-size:var(--font-size-small);margin:.25rem 0;text-transform:uppercase;letter-spacing:.05em}
.product-title{font-size:1.75rem;margin:.25rem 0;line-height:1.25}
.product-author{color:var(--pub-muted,#6b7280);margin:.25rem 0 .75rem;font-size:1rem}
.product-price{font-size:1.4rem;font-weight:800;margin:.5rem 0}
.product-meta{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0;font-size:var(--font-size-small);color:var(--pub-muted,#6b7280)}
.product-meta-item{display:inline-block}
.product-cta-block{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.product-cta-disabled{opacity:.5;cursor:not-allowed;background:var(--pub-primary,#7b4f2c)}
.product-cta-note{font-size:var(--font-size-small);color:var(--pub-muted,#6b7280);margin:0}
.product-description-section{margin:2.5rem 0;max-width:720px}
.product-description-section h2{font-size:1.2rem;margin-bottom:.75rem}
.product-description{line-height:1.7;white-space:pre-line}
.product-back-link{margin:2rem 0}
/* Admin catalog checkbox row */
.admin-checkbox-row{display:flex;align-items:center;gap:.5rem;margin:.25rem 0}
.admin-checkbox-row input[type="checkbox"]{width:auto;margin:0}
.admin-radio-group{display:flex;flex-direction:column;gap:.5rem;margin:.25rem 0}
.admin-radio-group label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:600}
.admin-radio-group input[type="radio"]{width:auto;min-height:unset;padding:0;margin:0;flex-shrink:0;border:none;box-shadow:none;background:none}
@media(max-width:640px){.product-hero{flex-direction:column}.product-cover-wrap{flex:0 0 auto;width:100%;max-width:220px}.catalog-grid{grid-template-columns:1fr}}

/* === Catalog Product Page — 3-column layout (direction from document) === */
.catalog-product-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 260px;grid-template-areas:"sidebar-a main sidebar-b";gap:2rem;max-width:1280px;margin:0 auto;padding:2rem 1.5rem;align-items:start}
.catalog-product-main{grid-area:main}
.catalog-sidebar-recommendations{grid-area:sidebar-a}
.catalog-sidebar-featured{grid-area:sidebar-b}
@media(max-width:1024px){.catalog-product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"main main" "sidebar-a sidebar-b"}}
@media(max-width:640px){.catalog-product-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "sidebar-a" "sidebar-b"}}
/* Main product section — hero */
.catalog-product-hero{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap}
.catalog-product-cover-wrap{min-width:0}
.catalog-product-cover{width:180px;max-width:100%;height:auto;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.2);display:block}
.catalog-product-cover-placeholder{width:180px;max-width:100%;height:260px;background:var(--pub-cover-bg,#e8e8e8);border-radius:8px}
.catalog-product-info{flex:1;min-width:min(240px,100%)}
.catalog-product-title{font-size:1.75rem;font-weight:700;line-height:1.3;margin-bottom:.4rem;text-align:start}
.catalog-product-author{font-size:1.1rem;color:var(--pub-muted,#666);margin-bottom:1rem}
.catalog-product-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.catalog-meta-chip{background:var(--pub-surface-alt,#f0f0f0);border:1px solid var(--pub-border,#ddd);padding:.2rem .65rem;border-radius:20px;font-size:var(--font-size-small);color:var(--pub-text,#1f2937)}
.catalog-meta-chip-genre{background:var(--pub-chip-bg,#e9f1f3);color:var(--pub-chip-text,#275f70);border-color:var(--pub-chip-border,#c4d8dd)}
.catalog-format-chip{background:var(--pub-chip-bg,#e9f1f3);color:var(--pub-chip-text,#275f70);padding:.2rem .65rem;border-radius:20px;font-size:var(--font-size-small);font-weight:500}
.catalog-product-price{margin:1rem 0;font-size:1.6rem;font-weight:700;color:var(--pub-primary,#7b4f2c)}
.catalog-price-value{display:inline-block}
.catalog-price-currency{font-size:1rem;font-weight:400;color:var(--pub-muted,#666);margin-inline-end:.35rem}
.catalog-cta-wrap{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.catalog-cta{display:inline-block;padding:.75rem 2.5rem;font-size:1rem;font-weight:600;border-radius:12px;border:none;background:var(--pub-primary,#7b4f2c);color:var(--pub-primary-text,#fff);cursor:pointer}
.catalog-cta:hover{background:var(--pub-primary-hover,#5c3820)}
.catalog-cta:focus-visible{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:2px}
.catalog-cta-disabled,.catalog-cta[disabled]{background:var(--pub-subtle,#bbb);cursor:not-allowed;opacity:.7}
.catalog-cta-disabled:hover,.catalog-cta[disabled]:hover{background:var(--pub-subtle,#bbb)}
.catalog-cta-note{font-size:var(--font-size-small);color:var(--pub-muted,#888);margin:0}
/* Summary & description */
.catalog-product-summary{font-size:1.05rem;line-height:1.7;padding:1rem 1.25rem;background:var(--pub-surface-alt,#fafafa);border-inline-start:4px solid var(--pub-accent,#2f6173);border-radius:4px;margin-bottom:1.5rem}
.catalog-product-about{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--pub-border,#e0e0e0)}
.catalog-about-heading{font-size:1.2rem;font-weight:700;margin-bottom:1rem;text-align:start}
.catalog-about-body{line-height:1.85;text-align:start}
.catalog-product-back{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--pub-border,#e0e0e0)}
.catalog-back-link{color:var(--pub-muted,#666);text-decoration:none;font-size:var(--font-size-small);direction:ltr;display:inline-block}
.catalog-back-link:hover{text-decoration:underline}
.catalog-back-link:focus-visible{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:2px}
/* Sidebars — sticky on desktop */
.catalog-sidebar{display:flex;flex-direction:column;gap:1rem;position:sticky;top:2rem;align-self:start;min-width:0}
.catalog-rec-block,.catalog-promo-block{background:var(--pub-surface-alt,#fafafa);border:1px solid var(--pub-border,#e8e8e8);border-radius:8px;padding:1.25rem;margin-bottom:0}
.catalog-rec-heading{font-size:.95rem;font-weight:700;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--pub-border,#e0e0e0);color:var(--pub-text,#1a1a2e);text-align:start}
.catalog-promo-heading{font-size:.95rem;font-weight:700;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--pub-primary,#7b4f2c);color:var(--pub-primary,#7b4f2c);text-align:start}
.catalog-rec-list,.catalog-promo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.catalog-rec-card{display:flex}
.catalog-rec-card-link{display:flex;gap:.75rem;align-items:flex-start;text-decoration:none;color:inherit;width:100%}
.catalog-rec-card-link:hover{opacity:.85}
.catalog-rec-card-link:focus-visible{outline:3px solid var(--pub-focus,#1d4ed8);outline-offset:2px;border-radius:6px}
.catalog-rec-cover{width:48px;height:68px;object-fit:cover;border-radius:4px;flex-shrink:0;background:var(--pub-cover-bg,#e0e0e0)}
.catalog-rec-cover-placeholder{width:48px;height:68px;background:var(--pub-cover-bg,#e0e0e0);border-radius:4px;flex-shrink:0}
.catalog-rec-info{flex:1;min-width:0}
.catalog-rec-title{font-size:var(--font-size-small);font-weight:600;display:block;line-height:1.3;margin-bottom:.2rem}
.catalog-rec-author{font-size:var(--font-size-small);color:var(--pub-muted,#777);display:block}
.catalog-rec-genre{font-size:var(--font-size-small);color:var(--pub-subtle,#999);display:block;margin-top:.1rem}
.catalog-rec-price{font-size:var(--font-size-small);font-weight:700;color:var(--pub-primary,#7b4f2c);display:inline-block;margin-top:.2rem;direction:ltr}
.catalog-rec-placeholder,.catalog-promo-placeholder{text-align:center;padding:1.5rem .5rem;color:var(--pub-subtle,#aaa)}
.catalog-rec-placeholder-label{font-size:var(--font-size-small)}
.catalog-promo-placeholder-title{font-weight:600;font-size:var(--font-size-small);margin:0 0 .4rem;display:block}
.catalog-promo-placeholder-text{font-size:var(--font-size-small);margin:0}
/* === Catalog public topbar (legacy shell, kept for compatibility) === */
body.catalog-page .topbar.catalog-topbar{background:var(--pub-header-bg,#2f3a2f);padding:.9rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.catalog-brand{display:flex;flex-direction:column;text-decoration:none;color:white;line-height:1.25}
.catalog-brand strong{font-size:1.1rem;font-weight:800}
.catalog-brand span{font-size:var(--font-size-small);opacity:.8}
.catalog-topbar-nav{display:flex;align-items:center;gap:.25rem}
.catalog-nav-link{color:white;text-decoration:none;padding:.4rem .85rem;border-radius:999px;font-size:var(--font-size-small);font-weight:600;border:1px solid transparent;white-space:nowrap}
.catalog-nav-link:hover{background:rgba(255,255,255,.15)}
.catalog-nav-link.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)}
@media(max-width:600px){body.catalog-page .topbar.catalog-topbar{flex-direction:column;align-items:flex-start;gap:.65rem}.catalog-topbar-nav{flex-wrap:wrap}}

/* ---- Password requirements checklist ---- */
.pw-checklist{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.2rem}
.pw-checklist li{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--c-error-text,#991b1b);font-weight:600;transition:color .15s ease}
.pw-checklist li[data-ok="1"]{color:var(--c-success-text,#166534)}
.pw-icon{display:inline-flex;align-items:center;justify-content:center;width:1.1em;font-style:normal;font-size:.9em;flex-shrink:0}

/* ---- Shared typography contract: Heebo headings, Assistant UI text ---- */
:root{
  --font-heading:"Heebo","Noto Sans Hebrew",Arial,sans-serif;
  --font-body:"Assistant","Noto Sans Hebrew",Arial,sans-serif;
  --font-size-body:1rem;
  --font-size-small:.9375rem;
  --font-size-control:1rem;
  --font-size-subheading:1.125rem;
  --font-size-h3:1.25rem;
  --font-size-h2:1.5rem;
  --font-size-h1:clamp(1.75rem,4vw,2.25rem);
  --line-height-body:1.6;
  --line-height-heading:1.25;
  --line-height-control:1.4;
}

html,body{
  font-family:var(--font-body);
  font-size:var(--font-size-body);
  line-height:var(--line-height-body);
}

h1,h1[class],h2,h2[class],h3,h3[class],h4,h4[class],h5,h5[class],h6,h6[class]{
  font-family:var(--font-heading);
  line-height:var(--line-height-heading)!important;
  overflow-wrap:anywhere;
}
h1,h1[class]{font-size:var(--font-size-h1)!important}
h2,h2[class]{font-size:var(--font-size-h2)!important}
h3,h3[class]{font-size:var(--font-size-h3)!important}
h4,h4[class],h5,h5[class],h6,h6[class]{font-size:var(--font-size-subheading)!important}

.admin-brand,.admin-page-title,.admin-section-title,.admin-card-title,
.admin-empty-state strong,.customer-auth-title,.customer-brand-name,
.customer-book-title,.customer-empty-title,.cust-player-title,
.catalog-section-heading,.catalog-card-title,.catalog-empty-title,
.product-title,.catalog-product-title,.catalog-about-heading,
.catalog-rec-heading,.catalog-promo-heading,.catalog-brand strong{
  font-family:var(--font-heading);
  line-height:var(--line-height-heading);
  overflow-wrap:anywhere;
}

p,nav,nav a,table,thead,tbody,tr,th,td,label,.hint,.error,.success,
.admin-alert,.customer-alert,.admin-nav-link,.admin-button,.button,
.customer-button,.admin-actions a,.admin-action-group a,.catalog-nav-link,
.catalog-back-link,button,input,textarea,select,option{
  font-family:var(--font-body);
}

input::placeholder,textarea::placeholder{
  font-family:var(--font-body);
}

input:not([type="checkbox"]):not([type="radio"]),textarea,select,
button:not(.accessibility-close):not(.cust-player-btn-play):not(.cust-player-btn-nav),
.button,.admin-button,.customer-button{
  font-size:var(--font-size-control)!important;
  line-height:var(--line-height-control);
}

.topbar span,.reader-header span,.reader-help,.hint,small,
.admin-brand span span,.admin-eyebrow,.admin-section-note,.admin-metric-label,
.admin-metric-description,.admin-activity-main span:not(.admin-status-dot),
.admin-activity-time,.admin-page th,.admin-badge,.admin-attention-row time,
.admin-topbar .admin-nav-link,.admin-dashboard-kpi-grid .admin-kpi-card p,
.admin-priority-main span,.admin-priority-item time,.admin-activity-row time,
.admin-filter-field label,.admin-count-stack span,.admin-book-summary-grid .admin-kpi-card p,
.admin-asset-badge strong,.admin-book-table td:before,.admin-upload-card-header p,
.admin-file-control span,.admin-file-name,.admin-asset-status-list dt,
.admin-log-table td:before,.admin-log-message strong,
.admin-access-summary-grid .admin-kpi-card p,.admin-access-table td:before,
.admin-definition-grid dt,.admin-mini-definition-list dt,.admin-detail-form label,
.admin-user-agent,.admin-tracking-code,.admin-log-type-raw,.admin-access-created-link,
.admin-form-note,.admin-field-help,.admin-subtext,.admin-muted,.admin-wm-banner,
.admin-wm-banner-meta,.admin-wm-score,.customer-form-field label,
.customer-form-meta,.customer-checkbox-row,.customer-note,.customer-greeting,
.customer-book-author,.customer-profile-label,.customer-profile-value,
.customer-status-badge,.customer-danger-note,.customer-tab-btn,
.cust-player-back,.cust-player-author,.cust-now-playing-label,.cust-player-time,
.cust-player-btn-skip,.cust-player-btn-skip-label,.cust-player-btn-stop,
.cust-segment-btn,.cust-segment-num,.catalog-hero-count,.catalog-filter-label,
.catalog-filter-input,.catalog-filter-select,.catalog-filter-btn-clear,
.catalog-genre-chip,.catalog-results-count,.catalog-card-author,.catalog-card-desc,
.catalog-card-badge-featured,.catalog-card-genre-chip,.catalog-format-chip-sm,
.product-eyebrow,.product-meta,.product-cta-note,.catalog-back-link,
.catalog-meta-chip,.catalog-format-chip,.catalog-cta-note,.catalog-rec-title,
.catalog-rec-author,.catalog-rec-genre,.catalog-rec-price,
.catalog-rec-placeholder-label,.catalog-promo-placeholder-title,
.catalog-promo-placeholder-text,.catalog-brand span,.catalog-nav-link,
.pw-checklist li{
  font-size:var(--font-size-small)!important;
  line-height:var(--line-height-body);
}

.admin-page td,body.admin-page,body.customer-page,body.catalog-page,body.reader-protection{
  font-family:var(--font-body);
  font-size:var(--font-size-body);
}

.admin-table td,.admin-table a,.admin-page [dir="ltr"],
.customer-book-title,.catalog-card-title,.product-title,.catalog-product-title,
.catalog-rec-title{
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media(max-width:640px){
  h1,h1[class]{font-size:clamp(1.75rem,8vw,2rem)!important}
  .cust-segment-btn{font-size:var(--font-size-small)!important}
}

/* ==========================================================================
   Public bilingual site — design tokens + components
   (home / catalog / authors / contact / legal / auth / purchase / errors)

   Direction-agnostic by design: logical properties only; the document dir
   (rtl for Hebrew, ltr for English) governs layout.

   Every public color routes through the --pub-* tokens below. The tokens are
   defined on <html> (not body) so the shared header, footer and the utility
   cluster theme correctly on standalone funnel pages too. Selection order:
   light default → olive/sky/lavender → dark (also "accessible dark mode") →
   high contrast last, so combined states resolve predictably.
   ========================================================================== */
:root{
  --pub-bg:#f5f3ef;
  --pub-surface:#ffffff;
  --pub-surface-alt:#f7f5f0;
  --pub-cover-bg:#efeae2;
  --pub-text:#1f2937;
  --pub-muted:#4b5563;
  --pub-subtle:#8b93a1;
  --pub-border:#e3ded4;
  --pub-header-bg:#2f3a2f;
  --pub-header-text:#ffffff;
  --pub-primary:#7b4f2c;
  --pub-primary-hover:#65401f;
  --pub-primary-text:#ffffff;
  --pub-link:#275f70;
  --pub-accent:#2f6173;
  --pub-focus:#1d4ed8;
  --pub-focus-on-dark:#fbbf24;
  --pub-chip-bg:#e9f1f3;
  --pub-chip-text:#275f70;
  --pub-chip-border:#c4d8dd;
  --pub-whatsapp:#1f7a37;
  --pub-whatsapp-bg:#ffffff;
  --pub-whatsapp-hover-bg:#e7f7eb;
  --pub-success-bg:#dcfce7;
  --pub-success-text:#166534;
  --pub-error-bg:#fee2e2;
  --pub-error-text:#991b1b;
  --pub-draft-bg:#fef3c7;
  --pub-draft-text:#78350f;
}
html[data-customer-theme="olive"]{
  --pub-bg:#f2f0e6;--pub-surface:#ffffff;--pub-surface-alt:#f6f5ea;--pub-cover-bg:#eae8da;
  --pub-text:#212b12;--pub-muted:#4c5c39;--pub-subtle:#8a9873;--pub-border:#d8dcc4;
  --pub-header-bg:#333f21;--pub-header-text:#ffffff;
  --pub-primary:#4a5e28;--pub-primary-hover:#3a4a1f;--pub-primary-text:#ffffff;
  --pub-link:#44582a;--pub-accent:#5a6e35;
  --pub-chip-bg:#ecefdd;--pub-chip-text:#44582a;--pub-chip-border:#ccd2ad;
}
html[data-customer-theme="sky"]{
  --pub-bg:#eef4fb;--pub-surface:#ffffff;--pub-surface-alt:#f4f8fd;--pub-cover-bg:#e2ebf5;
  --pub-text:#10263f;--pub-muted:#3f5c79;--pub-subtle:#7e99b3;--pub-border:#cdddef;
  --pub-header-bg:#16324f;--pub-header-text:#ffffff;
  --pub-primary:#1a4d8c;--pub-primary-hover:#143e73;--pub-primary-text:#ffffff;
  --pub-link:#1e63b0;--pub-accent:#2d7dd2;
  --pub-chip-bg:#e4eefa;--pub-chip-text:#1a4d8c;--pub-chip-border:#c1d7ef;
}
html[data-customer-theme="lavender"]{
  --pub-bg:#f3f0f9;--pub-surface:#ffffff;--pub-surface-alt:#f8f6fc;--pub-cover-bg:#eae4f3;
  --pub-text:#221733;--pub-muted:#5b4a77;--pub-subtle:#9887b3;--pub-border:#ddd3f0;
  --pub-header-bg:#372753;--pub-header-text:#ffffff;
  --pub-primary:#5a3880;--pub-primary-hover:#482c68;--pub-primary-text:#ffffff;
  --pub-link:#6b3fa0;--pub-accent:#7c4daf;
  --pub-chip-bg:#eee7f8;--pub-chip-text:#5a3880;--pub-chip-border:#d5c5ec;
}
/* Dark theme; "accessible dark mode" (accessibility-invert) maps to the same
   dark tokens so the two never fight. Placed after the tinted themes so
   invert wins over a stored tinted theme. */
html[data-customer-theme="dark"],
html.theme-dark,
html.accessibility-invert{
  --pub-bg:#10161f;--pub-surface:#1b2430;--pub-surface-alt:#232e3d;--pub-cover-bg:#243144;
  --pub-text:#eef2f7;--pub-muted:#a7b2c0;--pub-subtle:#7a8697;--pub-border:#36414f;
  --pub-header-bg:#0b1017;--pub-header-text:#f5f7fa;
  --pub-primary:#cf8446;--pub-primary-hover:#dd975c;--pub-primary-text:#1c1208;
  --pub-link:#8fc7dd;--pub-accent:#6ba7ba;--pub-focus:#93c5fd;
  --pub-chip-bg:#1e3038;--pub-chip-text:#9fd3e4;--pub-chip-border:#33505c;
  --pub-whatsapp:#86e29e;--pub-whatsapp-bg:#16301e;--pub-whatsapp-hover-bg:#1d402a;
  --pub-success-bg:#052e16;--pub-success-text:#86efac;
  --pub-error-bg:#450a0a;--pub-error-text:#fca5a5;
  --pub-draft-bg:#3f3010;--pub-draft-text:#fde68a;
}
/* High contrast wins over every theme. */
html.accessibility-high-contrast{
  --pub-bg:#000;--pub-surface:#000;--pub-surface-alt:#000;--pub-cover-bg:#000;
  --pub-text:#fff;--pub-muted:#fff;--pub-subtle:#fff;--pub-border:#fff;
  --pub-header-bg:#000;--pub-header-text:#fff;
  --pub-primary:#ff0;--pub-primary-hover:#ff0;--pub-primary-text:#000;
  --pub-link:#facc15;--pub-accent:#facc15;--pub-focus:#f59e0b;
  --pub-chip-bg:#000;--pub-chip-text:#fff;--pub-chip-border:#fff;
  --pub-whatsapp:#facc15;--pub-whatsapp-bg:#000;--pub-whatsapp-hover-bg:#000;
  --pub-success-bg:#000;--pub-success-text:#fff;
  --pub-error-bg:#000;--pub-error-text:#fff;
  --pub-draft-bg:#000;--pub-draft-text:#facc15;
}

/* ---- Page shell ---- */
body.public-page{background:var(--pub-bg);color:var(--pub-text)}
/* The theme-light/theme-dark body classes (added by customer-preferences.js)
   carry higher-specificity legacy rules; re-assert the public tokens. */
body.theme-light.public-page,body.theme-dark.public-page{background:var(--pub-bg);color:var(--pub-text)}
.public-skip-link{position:absolute;inset-inline-start:-999px;top:0;background:var(--pub-focus);color:#fff;padding:.6rem 1rem;border-radius:0 0 10px 10px;z-index:2147483001;text-decoration:none;font-weight:700}
.public-skip-link:focus{inset-inline-start:1rem}

/* ---- Shared public header (also on standalone funnel pages) ---- */
.topbar.public-topbar{background:var(--pub-header-bg);color:var(--pub-header-text);padding:.8rem clamp(1rem,3vw,2rem);display:flex;justify-content:space-between;align-items:center;gap:.75rem 1rem;flex-wrap:wrap}
.public-brand{display:flex;flex-direction:column;text-decoration:none;color:var(--pub-header-text);line-height:1.25;border-radius:8px}
.public-brand strong{font-size:1.15rem;font-weight:800;font-family:var(--font-heading)}
.public-brand span{font-size:var(--font-size-small);opacity:.85}
.public-brand:focus-visible{outline:3px solid var(--pub-focus-on-dark);outline-offset:3px}
.public-topbar-nav{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
a.public-nav-link{color:var(--pub-header-text);text-decoration:none;padding:.4rem .85rem;border-radius:999px;font-size:var(--font-size-small);font-weight:600;border:1px solid transparent;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;gap:.35rem}
a.public-nav-link:hover{background:rgba(255,255,255,.15)}
a.public-nav-link:active{background:rgba(255,255,255,.25)}
a.public-nav-link:focus-visible{outline:3px solid var(--pub-focus-on-dark);outline-offset:2px}
a.public-nav-link.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}
/* WhatsApp header CTA: visually distinct, never louder than the nav */
a.public-nav-link.public-nav-whatsapp{border:1px solid #4fce5d;color:#e4fbe8}
a.public-nav-link.public-nav-whatsapp:hover{background:rgba(37,211,102,.18)}
a.public-nav-link.public-nav-whatsapp svg{flex-shrink:0}

/* The accessibility/theme/language rail on public pages is the same shared
   fixed vertical rail defined at the top of this file (inline-start = right
   on RTL Hebrew pages, left on LTR English pages). No public-specific
   layout overrides are needed. */

/* ---- Hero, sections, cards ---- */
.public-hero{text-align:center;padding:3.25rem 1rem 2.5rem;max-width:860px;margin:0 auto}
.public-hero h1{font-family:var(--font-heading);font-size:var(--font-size-h1);line-height:var(--line-height-heading);margin:0 0 .75rem}
.public-hero-lead{font-size:1.15rem;color:var(--pub-muted);margin:0 auto 1.5rem;max-width:680px}
.public-hero-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;align-items:center}
.public-section{max-width:980px;margin:0 auto 2.75rem;padding:0 1rem}
.public-section-heading{font-family:var(--font-heading);font-size:var(--font-size-h2);margin:0 0 1rem;text-align:start}
.public-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1rem}
.public-card{background:var(--pub-surface);border:1px solid var(--pub-border);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column}
.public-card h3{margin:0 0 .5rem;font-size:var(--font-size-h3);font-family:var(--font-heading)}
.public-card p{margin:0;color:var(--pub-muted)}
.public-steps{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;counter-reset:public-step}
.public-steps li{background:var(--pub-surface);border:1px solid var(--pub-border);border-radius:14px;padding:1rem 1.25rem;display:flex;gap:.85rem;align-items:baseline;counter-increment:public-step;min-width:0;overflow-wrap:anywhere}
.public-steps li::before{content:counter(public-step);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:999px;background:var(--pub-accent);color:#fff;font-weight:700;align-self:flex-start}
.public-list{margin:0;padding-inline-start:1.25rem;display:grid;gap:.5rem;color:var(--pub-text)}
.public-note{background:var(--pub-surface);border:1px solid var(--pub-border);border-inline-start:4px solid var(--pub-accent);border-radius:10px;padding:1rem 1.25rem;color:var(--pub-text)}
.public-faq details{background:var(--pub-surface);border:1px solid var(--pub-border);border-radius:12px;padding:.85rem 1.1rem;margin-bottom:.6rem}
.public-faq summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center}
.public-faq summary:focus-visible{outline:3px solid var(--pub-focus);outline-offset:2px;border-radius:6px}
.public-faq p{margin:.6rem 0 0;color:var(--pub-muted)}
.public-closing{text-align:center;background:var(--pub-surface);border:1px solid var(--pub-border);border-radius:18px;padding:2rem 1.25rem}
.public-closing h2{margin-top:0;font-family:var(--font-heading)}
.public-closing p{color:var(--pub-muted);max-width:620px;margin-inline:auto}
.public-books-more{margin-top:1rem;text-align:center}

/* ---- CTA system: one solid primary, quiet outlined secondary, and a
   distinct (but not louder) WhatsApp variant ---- */
a.public-cta,button.public-cta{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.7rem 1.9rem;font-size:1rem;font-weight:600;border-radius:12px;border:1px solid transparent;background:var(--pub-primary);color:var(--pub-primary-text);text-decoration:none;cursor:pointer}
a.public-cta:hover,button.public-cta:hover{background:var(--pub-primary-hover)}
a.public-cta:active,button.public-cta:active{transform:translateY(1px)}
a.public-cta:focus-visible,button.public-cta:focus-visible{outline:3px solid var(--pub-focus);outline-offset:2px}
a.public-cta.public-cta-secondary,button.public-cta.public-cta-secondary{background:transparent;color:var(--pub-link);border:2px solid currentColor}
a.public-cta.public-cta-secondary:hover,button.public-cta.public-cta-secondary:hover{background:var(--pub-surface-alt)}
a.public-cta.public-cta-whatsapp,button.public-cta.public-cta-whatsapp{background:var(--pub-whatsapp-bg);color:var(--pub-whatsapp);border:2px solid currentColor}
a.public-cta.public-cta-whatsapp:hover{background:var(--pub-whatsapp-hover-bg)}
/* Legacy theme-class guards: body.theme-* button/link rules are more
   specific than single-class selectors; re-assert the public CTA system. */
body.theme-light button.public-cta,body.theme-dark button.public-cta{background:var(--pub-primary);color:var(--pub-primary-text);border:1px solid transparent}
body.theme-light button.public-cta:hover,body.theme-dark button.public-cta:hover{background:var(--pub-primary-hover)}
body.theme-light .catalog-cta,body.theme-dark .catalog-cta{background:var(--pub-primary);color:var(--pub-primary-text)}
body.theme-light .catalog-cta:hover,body.theme-dark .catalog-cta:hover{background:var(--pub-primary-hover)}
body.theme-light .catalog-cta[disabled],body.theme-dark .catalog-cta[disabled],body.theme-light .catalog-cta-disabled,body.theme-dark .catalog-cta-disabled{background:var(--pub-subtle);color:var(--pub-primary-text);cursor:not-allowed;opacity:.7}
body.theme-light .catalog-filter-btn-submit,body.theme-dark .catalog-filter-btn-submit{background:var(--pub-primary);color:var(--pub-primary-text)}
body.theme-light .catalog-filter-btn-submit:hover,body.theme-dark .catalog-filter-btn-submit:hover{background:var(--pub-primary-hover)}
body.theme-light .catalog-cta-button,body.theme-dark .catalog-cta-button{background:var(--pub-primary);color:var(--pub-primary-text)}
body.theme-light .catalog-cta-button:hover,body.theme-dark .catalog-cta-button:hover{background:var(--pub-primary-hover)}
body.theme-light .catalog-filter-input,body.theme-dark .catalog-filter-input,body.theme-light .catalog-filter-select,body.theme-dark .catalog-filter-select{background:var(--pub-surface-alt);color:var(--pub-text);border-color:var(--pub-border)}
body.theme-light .public-form input,body.theme-dark .public-form input,body.theme-light .public-form select,body.theme-dark .public-form select,body.theme-light .public-form textarea,body.theme-dark .public-form textarea{background:var(--pub-surface);color:var(--pub-text);border-color:var(--pub-border)}

/* ---- Contact form ---- */
.public-form{display:grid;gap:1rem;max-width:640px;background:var(--pub-surface);border:1px solid var(--pub-border);border-radius:14px;padding:1.5rem}
.public-form label{font-weight:600}
.public-form .required::after{content:" *";color:var(--pub-error-text)}
.public-form input:focus-visible,.public-form select:focus-visible,.public-form textarea:focus-visible{outline:3px solid var(--pub-focus);outline-offset:1px}
.public-field-error{color:var(--pub-error-text);font-size:var(--font-size-small);margin:.25rem 0 0}
.public-form-privacy{font-size:var(--font-size-small);color:var(--pub-muted);background:var(--pub-surface-alt);border-radius:10px;padding:.85rem 1rem;margin:0}
.public-form-privacy a{color:var(--pub-link)}
/* Honeypot: visually and programmatically removed for humans and AT alike */
.public-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.public-alert-success{background:var(--pub-success-bg);color:var(--pub-success-text);padding:1rem 1.25rem;border-radius:12px}
.public-alert-error{background:var(--pub-error-bg);color:var(--pub-error-text);padding:1rem 1.25rem;border-radius:12px}
.public-alt-channels{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}

/* ---- Error page ---- */
.public-error-page{max-width:560px;margin:4rem auto;text-align:center;background:var(--pub-surface);border:1px solid var(--pub-border);border-radius:18px;padding:2.5rem 1.5rem}
.public-error-page h1{font-family:var(--font-heading);margin:0 0 .75rem}
.public-error-page p{color:var(--pub-muted)}
.public-error-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.25rem}

/* ---- Footer ---- */
.public-footer{background:var(--pub-header-bg);color:var(--pub-header-text);margin-top:3rem;padding:2rem 1rem 1.25rem}
.public-footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1.5rem}
.public-footer-about strong{display:block;font-size:1.05rem;margin-bottom:.4rem;color:var(--pub-header-text);font-family:var(--font-heading)}
.public-footer-about p{margin:0;font-size:var(--font-size-small);opacity:.85}
.public-footer nav{display:grid;gap:.4rem;align-content:start}
.public-footer a{color:var(--pub-header-text);text-decoration:none;font-size:var(--font-size-small);min-height:32px;display:inline-flex;align-items:center;opacity:.92}
.public-footer a:hover{text-decoration:underline;opacity:1}
.public-footer a:focus-visible{outline:3px solid var(--pub-focus-on-dark);outline-offset:2px}
.public-footer-bottom{max-width:1180px;margin:1.5rem auto 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:var(--font-size-small);opacity:.8}

/* ---- Legal pages ---- */
.public-legal{max-width:760px;margin:2rem auto;background:var(--pub-surface);border:1px solid var(--pub-border);border-radius:18px;padding:2rem 1.75rem}
.public-legal h1{font-family:var(--font-heading)}
.public-legal h2{font-family:var(--font-heading);font-size:var(--font-size-h3);margin-top:1.75rem}
.public-legal p,.public-legal li{color:var(--pub-text);line-height:1.7}
.public-legal a{color:var(--pub-link)}
.public-legal table{margin:1rem 0}
.public-legal-draft{background:var(--pub-draft-bg);color:var(--pub-draft-text);border-radius:10px;padding:.85rem 1rem;font-size:var(--font-size-small)}
.public-table-wrap{overflow-x:auto}

/* ---- Standalone funnel pages: the auth/purchase shell sits below the
   shared header + utility bar, so it no longer needs a full viewport. ---- */
.public-topbar ~ .customer-shell{min-height:calc(100dvh - 4.5rem)}

/* ---- Responsive ---- */
@media(max-width:640px){
  .topbar.public-topbar{flex-direction:column;align-items:flex-start;gap:.5rem;padding-block:.7rem}
  a.public-nav-link{min-height:40px;padding:.3rem .7rem}
  .public-hero{padding-top:2rem}
  .public-hero-actions .public-cta{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .public-cta,.catalog-card,.catalog-genre-chip,.public-nav-link,
  .accessibility-floating-button,.floating-control-button{transition:none!important}
  a.public-cta:active,button.public-cta:active{transform:none}
}

/* ==========================================================================
   Mobile & small-screen remediation
   --------------------------------------------------------------------------
   Appended as one block so the change is reviewable and revertible in a single
   region. New work uses the four canonical breakpoints documented below; the
   pre-existing media queries are deliberately NOT rewritten (that refactor is
   large, risky and invisible to users). Existing rules migrate only when a
   file is touched for another reason.

   Canonical breakpoints:  sm 480 | md 768 | lg 1024 | xl 1280
   Nothing here modifies a desktop selector: every layout rule lives inside a
   max-width query, so >=768px (>=900px for the admin nav) renders as before.
   ========================================================================== */

:root{
  /* Documented for humans — custom properties cannot be used in media queries,
     so the literals below must match these. */
  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;
  --bp-xl:1280px;
  /* WCAG 2.2 2.5.8 requires 24px; 44px is the practical touch standard. */
  --touch-target-min:44px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}

/* ---- Reduced motion: one global guard for the whole stylesheet ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---- Dynamic viewport height: 100vh is wrong on mobile browsers whose
        toolbars collapse, which is what cropped the reader. ---- */
/* Pinned to the viewport, not merely at least as tall as it: the stage must
   be able to shrink so the document scrolls INSIDE the reader rather than
   scrolling the whole page (which is what broke landscape). */
.reader-shell{min-height:100dvh;height:100dvh}
/* Without min-height:0 a flex child refuses to shrink below its content. */
.reader-stage{min-height:0}

/* ---- Narrow-viewport grid tracks. A fixed minimum track wider than the
        viewport forces page-level horizontal scrolling at 320px. ---- */
.customer-book-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.catalog-featured-strip{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}

/* ---- Cover images: reserve the box so slow connections do not reflow. ---- */
.customer-book-cover,.catalog-card-cover img,.book-cover{max-width:100%;height:auto}

/* ==========================================================================
   Shared navigation disclosure (public header, admin/author/editor topbar)
   ========================================================================== */

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:var(--touch-target-min);
  min-width:var(--touch-target-min);
  height:var(--touch-target-min);
  padding:0;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  flex:0 0 auto;
}
.nav-toggle:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
/* These controls are emitted with `hidden` and unhidden by JavaScript. The
   media queries below set an explicit `display`, which would otherwise beat
   the UA stylesheet's [hidden] rule and leave an inoperable button on screen
   when the script fails to load. */
.nav-toggle[hidden],.a11y-launcher[hidden]{display:none!important}
.nav-toggle .nav-toggle-icon-close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-close{display:block}

/* ---- Public header: hamburger + slide-in drawer below md ----
   The drawer uses logical inline properties only, so Hebrew (RTL) opens from
   the right and English (LTR) from the left with no direction-specific rules. */
@media (max-width:767.98px){
  .topbar.public-topbar{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    padding-block:.6rem;
    padding-inline:max(1rem,var(--safe-left)) max(1rem,var(--safe-right));
  }
  .public-nav-toggle{display:inline-flex;color:var(--pub-header-text,#fff)}

  /* Only collapse once the script has confirmed it can reopen the menu. */
  html.js-nav .public-topbar-nav{
    position:fixed;
    inset-block:0;
    inset-inline-start:0;
    z-index:2147482000;
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:.25rem;
    width:min(20rem,86vw);
    padding:calc(1rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--pub-header-bg,#2f3a2f);
    box-shadow:0 0 0 100vmax rgba(15,23,42,.45);
    transform:translateX(var(--nav-drawer-hidden,100%));
    visibility:hidden;
    transition:transform .22s ease,visibility .22s;
  }
  html.js-nav [dir="ltr"] .public-topbar-nav{--nav-drawer-hidden:-100%}
  html.js-nav .public-topbar-nav[data-nav-open]{transform:translateX(0);visibility:visible}
  html.js-nav .public-topbar-nav a.public-nav-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    box-sizing:border-box;
    min-height:48px;
    padding:.6rem .85rem;
  }
}

/* ---- Admin / author / editor topbar: hamburger + inline expand below 900px.
   These are dense work surfaces navigated frequently, so the menu expands in
   place beneath the bar rather than covering the page. Link markup and every
   role-gating condition are untouched — only the wrapper collapses. ---- */
@media (max-width:899.98px){
  .admin-topbar-inner{position:relative}
  .admin-nav-toggle{
    display:inline-flex;
    position:absolute;
    inset-block-start:.35rem;
    inset-inline-end:0;
    color:var(--admin-primary-dark,#1d4ed8);
    border-color:var(--admin-border,#d0d5dd);
    background:#fff;
  }
  html.js-nav .admin-nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    overflow-x:visible;
    gap:.25rem;
    padding-block:.4rem;
  }
  html.js-nav .admin-nav[data-nav-open]{display:flex}
  html.js-nav .admin-topbar .admin-nav-link{
    width:100%;
    box-sizing:border-box;
    min-height:var(--touch-target-min);
    white-space:normal;
  }
}

/* ==========================================================================
   Customer navigation strip
   ========================================================================== */

/* The global `@media(max-width:640px){button{width:100%}}` rule inflated these
   <button> tabs to full width each, which is what made the strip scroll
   horizontally. The links in the same strip were never affected. */
.customer-tab-btn{width:auto}
.customer-tab-group{display:flex;align-items:center;gap:.25rem}

@media (max-width:767.98px){
  .customer-tab-nav-inner{flex-wrap:wrap;overflow-x:visible;row-gap:.35rem}
  .customer-tab-btn{min-height:var(--touch-target-min);display:inline-flex;align-items:center}
}

/* ==========================================================================
   Accessibility controls — compact launcher + bottom sheet below md
   ========================================================================== */

.a11y-launcher{
  display:none;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  border:2px solid #fff;
  border-radius:999px;
  background:#1d4ed8;
  color:#fff;
  box-shadow:0 10px 28px #0004;
  cursor:pointer;
}
.a11y-launcher:focus-visible{outline:4px solid #fbbf24;outline-offset:3px}

@media (max-width:767.98px){
  /* Bottom-anchored, not vertically centred. Centring is exactly what put the
     control cluster on top of body copy; a bottom corner is where users expect
     a floating utility and where the least content sits. */
  .accessibility-toolbar{
    top:auto;
    transform:none;
    inset-block-end:max(1rem,var(--safe-bottom));
    inset-inline-start:max(.75rem,var(--safe-left),var(--safe-right));
  }
  .a11y-launcher{display:inline-flex}

  html.js-nav .floating-controls{display:none}
  html.js-nav .floating-controls[data-nav-open]{
    display:flex;
    position:fixed;
    inset-inline:0;
    inset-block-end:0;
    z-index:2147483000;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:.5rem;
    box-sizing:border-box;
    padding:1rem 1rem calc(1rem + var(--safe-bottom));
    background:#0f172a;
    border-start-start-radius:20px;
    border-start-end-radius:20px;
    box-shadow:0 -12px 40px #0006;
  }
  html.js-nav .floating-controls[data-nav-open] > *{flex:1 1 8rem;max-width:14rem}

  /* Sub-panels become full-width bottom sheets instead of a side panel that
     covered 58% x 78% of a 360px viewport. */
  .accessibility-panel,.customer-theme-panel{
    position:fixed;
    inset-inline:0;
    inset-block:auto 0;
    top:auto;
    transform:none;
    width:100%;
    max-width:none;
    max-height:min(70dvh,calc(100dvh - 4rem));
    box-sizing:border-box;
    border-radius:20px 20px 0 0;
    padding-block-end:calc(1rem + var(--safe-bottom));
    z-index:2147483100;
  }
  /* Long-form content must never end underneath the launcher. The .container
     variant is spelled out because `.container{padding:0 1rem}` would
     otherwise win on specificity and reset this to zero. */
  body{scroll-padding-block-end:5rem}
  main,main.container,main.customer-page-content{padding-block-end:4.5rem}
}

/* The reader docks its own controls; the launcher must not sit over the page
   canvas. */
@media (max-width:767.98px){
  body.reader-protection .accessibility-toolbar{
    inset-block-end:max(4.75rem,calc(3.75rem + var(--safe-bottom)));
  }
  body.reader-protection main{padding-block-end:0}
}

/* ==========================================================================
   Reader
   ========================================================================== */

.reader-viewer{
  position:relative;
  height:100%;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#1f2937;
}
/* Block layout with auto margins, not flex centring: a zoomed page is wider
   than the container, and flex centring would clip its leading edge out of
   reach instead of letting the viewer scroll to it. */
.reader-pages{
  padding:.75rem;
  box-sizing:border-box;
}
.reader-page{position:relative;margin-inline:auto;width:max-content}
.reader-page-canvas{display:block;height:auto;background:#fff;box-shadow:0 10px 30px #0006}

/* PDF.js text layer: keeps the page selectable to assistive technology while
   staying visually invisible over the canvas. */
.reader-text-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  line-height:1;
  text-align:initial;
  forced-color-adjust:none;
  transform-origin:0 0;
}
.reader-text-layer span,.reader-text-layer br{
  position:absolute;
  white-space:pre;
  color:transparent;
  transform-origin:0 0;
}

.reader-status{
  position:absolute;
  inset-inline:0;
  inset-block-start:0;
  display:grid;
  justify-items:center;
  gap:.75rem;
  padding:2rem 1.25rem;
  color:#e5e7eb;
  text-align:center;
}
.reader-status[hidden]{display:none}
.reader-status p{margin:0;max-width:40ch;line-height:1.5}
.reader-progress{width:min(18rem,70vw);height:.5rem}

.reader-controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem max(.75rem,var(--safe-left)) calc(.5rem + var(--safe-bottom)) max(.75rem,var(--safe-right));
  background:#0f172a;
  border-top:1px solid #334155;
  color:#e5e7eb;
}
.reader-controls[hidden]{display:none}
.reader-control{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--touch-target-min);
  min-width:var(--touch-target-min);
  height:var(--touch-target-min);
  padding:0;
  border:1px solid #334155;
  border-radius:12px;
  background:#1e293b;
  color:#e5e7eb;
  cursor:pointer;
}
.reader-control[disabled]{opacity:.4;cursor:default}
.reader-control-spacer{flex:1 1 auto}
.reader-page-label{font-variant-numeric:tabular-nums;font-weight:700;min-width:6.5rem;text-align:center}
/* Direction-neutral: the chevrons point at the physical edge they move toward. */
[dir="rtl"] .reader-control svg{transform:scaleX(-1)}

.screen-warning{inset:auto max(2rem,var(--safe-right)) max(2rem,calc(1rem + var(--safe-bottom))) max(2rem,var(--safe-left))}

@media (max-width:767.98px){
  .reader-header{padding:.65rem .85rem;gap:.5rem}
  .reader-pages{padding:.35rem}
}

/* Short viewports are almost always a phone held sideways. The legacy
   `@media(max-width:850px)` rule stacks the reader header into a column, which
   cost 144px of a 360px-tall landscape screen. */
@media (max-height:520px){
  .reader-header{
    flex-direction:row;
    align-items:center;
    gap:.5rem;
    padding:.4rem .75rem;
  }
  .reader-header strong{font-size:1rem}
  .reader-controls{padding-block:.35rem}
}

/* PDF.js appends a zero-height measuring canvas to <body>. It is laid out in
   normal flow, so on a short screen it pushed the document past the viewport
   and produced page-level vertical scrolling. */
canvas.hiddenCanvasElement{position:absolute;inset-block-start:0;inset-inline-start:0;visibility:hidden}

/* ==========================================================================
   Forms, filters, tables and touch targets
   ========================================================================== */

@media (max-width:767.98px){
  /* iOS zooms the page when a focused control is under 16px. */
  input,textarea,select{font-size:16px}
  .admin-form-field input,.admin-form-field textarea,.admin-form-field select,
  .admin-filter-field input,.admin-filter-field select{font-size:16px}
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  .button,button,.admin-button,.customer-button{min-height:var(--touch-target-min)}
  .customer-header{padding-block-start:max(0px,var(--safe-top))}
}

@media (max-width:479.98px){
  .admin-filter-form,.catalog-filter-form{grid-template-columns:1fr}
}

/* ---- Stacked tables.
   Generalises the pattern the admin book table already used: below md the
   table becomes a list of cards, each cell labelled from its data-label. This
   removes the fixed min-width that was pushing whole pages sideways. ---- */
@media (max-width:767.98px){
  .admin-table--stacked{min-width:0;background:transparent}
  .admin-table--stacked thead{display:none}
  .admin-table--stacked,
  .admin-table--stacked tbody,
  .admin-table--stacked tr,
  .admin-table--stacked td{display:block;width:100%;box-sizing:border-box}
  .admin-table--stacked tbody{display:grid;gap:.85rem}
  .admin-table--stacked tr{
    border:1px solid var(--admin-border);
    border-radius:18px;
    background:#fff;
    overflow:hidden;
  }
  .admin-table--stacked td{
    display:grid;
    grid-template-columns:minmax(74px,.35fr) minmax(0,1fr);
    gap:.75rem;
    align-items:start;
    padding:.85rem .95rem;
    border-bottom:1px solid var(--admin-border);
  }
  .admin-table--stacked tr td:last-child{border-bottom:0}
  .admin-table--stacked td:before{
    content:attr(data-label);
    color:var(--admin-muted);
    font-size:var(--font-size-small);
    font-weight:800;
  }
  .admin-table--stacked td:not([data-label]):before{display:none}
  .admin-table--stacked td:not([data-label]){grid-template-columns:1fr}
  .admin-table--stacked .admin-action-group,
  .admin-table--stacked .admin-grant-form{min-width:0}
  /* The wrapper no longer needs to scroll once the table is stacked. */
  .admin-table-wrap:has(.admin-table--stacked){overflow-x:visible}
}

@media (max-width:767.98px){
  /* Standalone call-to-action links sat at text height (~23px). */
  a.customer-link,a.public-nav-link,.customer-alert a{
    display:inline-flex;
    align-items:center;
    min-height:var(--touch-target-min);
  }
}

/* A table that genuinely must scroll has to be reachable by keyboard and
   announced as a scrollable region (WCAG 2.2 2.1.1). */
.admin-table-wrap[tabindex="0"]:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}