@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Open+Sans:wght@300;400;600;700;800&family=Roboto+Condensed:wght@300;400;700&display=swap");
@import url("/static/shared_header.css?v=20260406-shared-header-scale2");
@import url("/static/book_qa_module.css?v=20261016-login-390");
@import url("/static/public_footer_v2.css?v=20261005-footer-no-branches");

:root {
  --ui-bg: #f4f1ea;
  --ui-bg-soft: #fbf8f2;
  --ui-surface: #fffdf8;
  --ui-surface-solid: #fff;
  --ui-surface-muted: #fcf8f2;
  --ui-surface-hover: #fffaf2;
  --ui-surface-elevated: #fffdf8;
  --ui-control-surface: var(--ui-surface-solid);
  --ui-control-surface-hover: var(--ui-surface-hover);
  --ui-text: #2f2b25;
  --ui-text-strong: #2f261f;
  --ui-text-muted: #6c6254;
  --ui-text-soft: #7d715f;
  --ui-text-disabled: #8e8273;
  --ui-link: #7a4a28;
  --ui-link-hover: #9a4b1c;
  --ui-border: #d8cfbf;
  --ui-border-soft: rgba(95, 78, 57, 0.12);
  --ui-border-subtle: rgba(95, 78, 57, 0.08);
  --ui-border-hairline: rgba(95, 78, 57, 0.05);
  --ui-border-overlay: rgba(43, 36, 29, 0.16);
  --ui-border-strong: #cdbfa8;
  --ui-border-hover: #b8a78a;
  --ui-divider: var(--ui-border-soft);
  --ui-divider-strong: rgba(78, 68, 56, 0.35);
  --ui-link-decoration: rgba(122, 74, 40, 0.24);
  --ui-link-decoration-hover: rgba(154, 75, 28, 0.4);
  --ui-accent: #ba5d2a;
  --ui-accent-hover: #9f4f22;
  --ui-accent-muted: #7e715f;
  --ui-on-accent: #fff;
  --ui-accent-border-soft: rgba(186, 93, 42, 0.18);
  --ui-accent-border: rgba(186, 93, 42, 0.55);
  --ui-accent-focus: rgba(186, 93, 42, 0.16);
  --ui-accent-shadow: rgba(143, 19, 26, 0.12);
  --ui-backdrop: rgba(34, 29, 24, 0.38);
  --ui-overlay: rgba(47, 38, 31, 0.9);
  --ui-shadow-soft: rgba(60, 48, 34, 0.14);
  --ui-shadow-subtle: rgba(60, 48, 34, 0.03);
  --ui-shadow-card: rgba(33, 27, 20, 0.16);
  --ui-surface-glass: rgba(255, 253, 248, 0.78);
  --ui-surface-glass-strong: rgba(255, 253, 248, 0.98);
  --ui-surface-wash: rgba(43, 36, 29, 0.06);
  --ui-surface-wash-soft: rgba(43, 36, 29, 0.025);
  --ui-success: #2f6f34;
  --ui-success-surface: #f6fbf6;
  --ui-success-border: #d4e2d3;
  --ui-warning: #6d3120;
  --ui-warning-surface: #fff4e6;
  --ui-warning-border: #c7b091;
  --ui-danger: #9b2027;
  --ui-danger-surface: #fbf1f1;
  --ui-danger-border: rgba(155, 32, 39, 0.16);
  --ui-danger-border-hover: rgba(155, 32, 39, 0.28);
  --ui-table-header-surface: var(--ui-surface-muted);
  --ui-table-row-surface: var(--ui-surface-solid);
  --ui-card-surface: var(--ui-surface);
  --ui-card-border: var(--ui-border);
  --ui-form-surface: var(--ui-control-surface);
  --ui-form-border: var(--ui-border-strong);
  --ui-button-surface: var(--ui-control-surface);
  --ui-button-surface-hover: var(--ui-control-surface-hover);
  --ui-button-border: var(--ui-border-strong);
  --ui-button-border-hover: var(--ui-border-hover);
  --ui-badge-surface: var(--ui-warning-surface);
  --ui-badge-text: var(--ui-warning);
  --ui-badge-border: var(--ui-warning-border);
  --ui-chip-surface: var(--ui-surface);
  --ui-chip-text: var(--ui-text-muted);
  --ui-chip-border: var(--ui-border-soft);
  --ui-banner-default-bg: #f7f2ea;
  --ui-banner-default-text: #111111;
  --ui-banner-default-accent: #2563eb;
  --ui-banner-border: rgba(17, 17, 17, 0.08);
  --ui-banner-shadow: rgba(17, 17, 17, 0.08);
  --st-public-banner-mobile-media-width: min(88vw, 430px);
  --st-public-banner-mobile-media-min-ratio: 0.78;
  --st-public-banner-mobile-media-max-ratio: 0.88;
  --st-public-banner-mobile-media-preferred-height-ratio: 0.88;
  --st-public-banner-mobile-media-max-height-ratio: 0.92;
  /* Banner drum layer (D-058): the drum circle must cover the banner corners (27:10 and 4:5 diagonals). */
  --st-public-banner-drum-size: 110%;
  --st-public-banner-drum-size-mobile: 130%;
  --st-public-banner-on-dark-text: #f4efe7;
  --st-public-banner-on-dark-muted: #f0e9df;
  --st-public-banner-on-dark-border: rgba(244, 239, 231, 0.72);
  --st-public-banner-on-dark-dot: rgba(244, 239, 231, 0.72);
  --st-public-banner-on-dark-dot-active: #fff7ed;
  /* Dark UI veil over the auto colour field (D-059): light text/dots stay >= AA on the lightest field pixel. */
  --st-public-banner-field-dark-veil-opacity: 0.88;
  /* Designed-image banner (D-093): full-bleed uploaded image, HTML copy over its empty side. */
  --st-designed-banner-min-height: 320px;
  --st-designed-banner-max-height: 640px;
  --st-designed-banner-mobile-max-height: 70svh;
  /* D-110 desktop A: 34% keeps the copy clear of a wide book row (44% overlapped banner 4). */
  --st-designed-banner-copy-max-width: min(34%, 32rem);
  --st-designed-banner-title-font: "Merriweather", Georgia, serif; /* the site serif (--font-body) with a serif fallback */
  --st-designed-banner-light-text: #ffffff;
  --st-designed-banner-dark-text: #231a14; /* public ink (--mz-ink) */
  --st-designed-banner-accent: #8f131a; /* public brand vermilion (--public-brand / --mz-red) */
  --st-designed-banner-paper: #fbf7ef; /* public paper (--mz-paper) */
  --ui-notification-dot: #9f7755;
  --ui-notification-dot-muted: rgba(159, 119, 85, 0.28);
  --ui-selection-surface: rgba(255, 255, 255, 0.22);
  --ui-selection-surface-soft: rgba(255, 255, 255, 0.18);
  --ui-selection-ring: rgba(182, 90, 42, 0.16);
  --ui-selection-ring-soft: rgba(182, 90, 42, 0.12);
  --ui-selection-ring-muted: rgba(182, 90, 42, 0.14);
  --ui-selection-ring-strong: rgba(182, 90, 42, 0.22);
  --ui-selection-shadow: rgba(73, 49, 24, 0.14);
  --ui-swatch-border: rgba(0, 0, 0, 0.12);
  --ui-swatch-border-strong: rgba(0, 0, 0, 0.16);
  --ui-swatch-inset: rgba(255, 255, 255, 0.2);
  --ui-swatch-inset-strong: rgba(255, 255, 255, 0.24);
  --ui-preview-object-surface: rgba(93, 139, 214, 0.08);
  --ui-preview-object-border: rgba(61, 96, 164, 0.45);
  --ui-preview-selection-surface: rgba(246, 215, 102, 0.34);
  --ui-preview-selection-border: rgba(175, 112, 12, 0.5);
  --ui-preview-hotspot-surface: rgba(73, 150, 255, 0.18);
  --ui-preview-hotspot-border: rgba(43, 108, 176, 0.45);
  --ui-preview-transparent-hit: rgba(255, 255, 255, 0.01);
  --ui-font-size-xs: 11px;
  --ui-font-size-sm: 12px;
  --ui-font-size-md: 13px;
  --ui-font-size-base: 14px;
  --ui-font-size-lg: 16px;
  --ui-font-size-xl: 20px;
  --ui-font-size-title: clamp(30px, 4vw, 44px);
  --ui-line-tight: 1.2;
  --ui-line-title: 1.08;
  --ui-line-body: 1.6;
  --ui-line-muted: 1.45;
  --ui-weight-regular: 400;
  --ui-weight-medium: 600;
  --ui-weight-bold: 700;
  --ui-symbol-hammer-sickle: #b71712;
  --bg: var(--ui-bg);
  --text: var(--ui-text);
  --card: var(--ui-surface);
  --accent: var(--ui-accent);
  --line: var(--ui-border);
  --focus-ring: 0 0 0 0 transparent;
  --btn-h: 40px;
  --btn-h-mobile: 36px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --app-shell-max-width: 1360px;
  --app-shell-gutter: clamp(16px, 2.4vw, 32px);
  --app-shell-rail-width: min(100% - (var(--app-shell-gutter) * 2), var(--app-shell-max-width));
  --app-shell-rail-inset: max(var(--app-shell-gutter), calc((100% - var(--app-shell-max-width)) / 2));
  --surface-shell-max-width: 1280px;
  --surface-shell-inline-padding: 24px;
  --surface-shell-content-max-width: calc(var(--surface-shell-max-width) - (var(--surface-shell-inline-padding) * 2));
  --surface-shell-max-width-strong: var(--app-shell-max-width);
  --surface-shell-inline-padding-strong: var(--app-shell-gutter);
  --surface-shell-content-max-width-strong: calc(var(--surface-shell-max-width-strong) - (var(--surface-shell-inline-padding-strong) * 2));
  --surface-hero-measure: 780px;
  --surface-hero-measure-strong: 840px;
  --surface-editorial-measure: 720px;
  --editorial-article-frame-max: 1120px;
  --editorial-article-measure: 688px;
  --editorial-caption-measure: 688px;
  --surface-section-gap: 40px;
  --surface-section-gap-strong: 48px;
  --surface-section-divider-gap: 92px;
  --surface-section-divider-gap-strong: 96px;
  --public-shell-header-tightness: 24px;
  --public-shell-header-tightness-strong: clamp(24px, 2vw, 32px);
  --public-layout-max-width: var(--surface-shell-max-width);
  --public-layout-padding: var(--surface-shell-inline-padding);
  --public-layout-content-max-width: var(--surface-shell-content-max-width);
  --public-layout-header-max-width: calc(var(--public-layout-max-width) - var(--public-shell-header-tightness));
  --layout-max-width: var(--surface-shell-max-width);
  --layout-padding: var(--surface-shell-inline-padding);
  --layout-content-max-width: var(--surface-shell-content-max-width);
  --admin-shell-width-base: var(--app-shell-max-width);
  --admin-shell-width-wide: var(--app-shell-max-width);
  --admin-shell-padding-inline: 0px;
  --admin-shell-padding-block: 32px;
  --admin-header-title-size: 24px;
  --admin-header-gap: 8px;
  --admin-header-to-content-gap: 24px;
  --admin-space-base: 8px;
  --admin-space-inner: 16px;
  --admin-space-section: 24px;
  --admin-space-major: 32px;
  --admin-page-gap: var(--admin-space-section);
  --admin-section-gap: var(--admin-space-section);
  --admin-card-gap: var(--admin-space-inner);
  --admin-form-gap: var(--admin-space-inner);
  --admin-toolbar-gap: var(--admin-space-inner);
  --admin-list-gap: var(--admin-space-inner);
  --admin-nested-gap: var(--admin-space-base);
  --admin-density-control-height-comfortable: 40px;
  --admin-density-control-height-compact: 36px;
  --admin-density-table-cell-padding-x: 16px;
  --admin-density-table-cell-padding-y-comfortable: 16px;
  --admin-density-table-cell-padding-y-compact: 8px;
  --topbar-inline-gutter: 24px;
  --topbar-flyout-ease: cubic-bezier(0.34, 0.06, 0.22, 1);
  --topbar-flyout-duration: 360ms;
  --topbar-flyout-fade-duration: 220ms;
  --topbar-flyout-offset: 14px;
  --topbar-flyout-content-duration: 440ms;
  --topbar-flyout-content-delay: 70ms;
  --topbar-flyout-max-height: min(78vh, 620px);
  --topbar-mobile-sheet-duration: 920ms;
  --topbar-mobile-sheet-fade-duration: 700ms;
  --topbar-mobile-sheet-ease: cubic-bezier(0.38, 0.02, 0.2, 1);
  --topbar-mobile-sheet-content-duration: 480ms;
  --topbar-mobile-sheet-content-delay: 90ms;
  --compact-action-hit-size-base: 36px;
  --compact-action-radius: 999px;
  --compact-action-hover-surface-base: var(--ui-surface-wash);
  --compact-action-hover-color-base: #362d25;
  --layout-grid-gap: 24px;
  --layout-grid-columns: repeat(12, minmax(0, 1fr));
  --book-list-page-max-width: var(--public-layout-max-width);
  --book-list-page-inline-padding: var(--public-layout-padding);
  --book-list-section-gap: var(--surface-section-gap);
  --book-list-section-divider-gap: var(--surface-section-divider-gap);
  --book-list-shell-max-width: 100%;
  --book-list-grid-columns-desktop: 4;
  --book-list-grid-columns-tablet: 3;
  --book-list-grid-columns-mobile: 2;
  --book-list-grid-columns-narrow: 1;
  --book-list-column-gap: clamp(40px, 4vw, 56px);
  --book-list-row-gap: clamp(64px, 6vw, 88px);
  --book-list-column-gap-tablet: 30px;
  --book-list-row-gap-tablet: 56px;
  --book-list-column-gap-mobile: 24px;
  --book-list-row-gap-mobile: 42px;
  --book-list-card-max-width: 248px;
  --book-list-card-max-width-tablet: 238px;
  --book-list-card-gap: 16px;
  --book-list-body-gap: 14px;
  --book-list-meta-gap: 8px;
  --book-list-cover-frame-ratio: 100 / 142;
  --book-cover-frame-width: 100%;
  --book-cover-frame-height: auto;
  --book-cover-frame-ratio: var(--book-list-cover-frame-ratio);
  --book-cover-image-width: 100%;
  --book-cover-image-height: 100%;
  --book-cover-image-max-width: 100%;
  --book-cover-image-max-height: 100%;
  --book-cover-radius: 0;
  --book-cover-depth-edge-color: rgb(24 24 24 / 34%);
  --book-cover-depth-contact-color: rgb(0 0 0 / 22%);
  --book-cover-depth-near-color: rgb(28 25 20 / 16%);
  --book-cover-depth-body-color: rgb(28 25 20 / 18%);
  --book-cover-depth-broad-color: rgb(28 25 20 / 10%);
  --book-cover-depth-floor-color: rgb(20 18 14 / 18%);
  --book-cover-depth-spine-highlight: rgb(255 255 255 / 16%);
  --book-cover-depth-spine-gradient: linear-gradient(
    90deg,
    rgb(0 0 0 / 23%) 0%,
    rgb(255 255 255 / 34%) 18%,
    rgb(0 0 0 / 15%) 38%,
    rgb(255 255 255 / 18%) 56%,
    transparent 100%
  );
  --book-cover-depth-body-shadow:
    0 0 0 1px var(--book-cover-depth-edge-color),
    0 1px 1px var(--book-cover-depth-contact-color),
    0 4px 7px -2px var(--book-cover-depth-near-color),
    0 12px 18px -7px var(--book-cover-depth-body-color),
    0 20px 24px -14px var(--book-cover-depth-broad-color);
  --book-list-cover-title-gap: 16px;
  --book-list-title-author-gap: 8px;
  --book-list-author-cta-gap: 14px;
  --book-list-badge-gap: 8px;
  --book-list-badge-stack-gap: 10px;
  --book-list-cover-shadow: drop-shadow(0 16px 20px rgba(42, 34, 24, 0.11)) drop-shadow(0 6px 10px rgba(42, 34, 24, 0.07));
  --book-list-cover-shadow-hover: drop-shadow(0 20px 24px rgba(42, 34, 24, 0.14)) drop-shadow(0 8px 12px rgba(42, 34, 24, 0.09));
  --book-list-cover-lift-y: -4px;
  --book-list-title-size: 16px;
  --book-list-title-line-height: 1.28;
  --book-list-title-color: var(--ui-text-strong);
  --book-list-title-hover-color: var(--ui-text);
  --book-list-author-size: 13px;
  --book-list-author-line-height: 1.45;
  --book-list-author-color: var(--ui-text-muted);
  --book-list-cta-size: 12px;
  --book-list-cta-color: var(--ui-link);
  --book-list-cta-color-hover: var(--ui-link-hover);
  --listing-card-grid-columns: repeat(12, minmax(0, 1fr));
  --listing-card-column-span-mobile: 6;
  --listing-card-column-span-tablet: 4;
  --listing-card-column-span-desktop: 3;
  --listing-card-column-gap-open: 32px;
  --listing-card-column-gap-base: 24px;
  --listing-card-column-gap-tablet: 20px;
  --listing-card-column-gap-mobile-compact: 16px;
  --listing-card-column-gap-mobile-relaxed: 20px;
  --listing-card-row-gap-desktop: 48px;
  --listing-card-row-gap-tablet: 40px;
  --listing-card-row-gap-mobile-compact: 32px;
  --listing-card-row-gap-mobile-relaxed: 28px;
  --listing-card-cover-ratio: var(--book-cover-frame-ratio);
  --listing-card-cover-width: var(--book-cover-image-width);
  --listing-card-cover-height: var(--book-cover-image-height);
  --listing-card-cover-max-width: var(--book-cover-image-max-width);
  --listing-card-cover-max-height: var(--book-cover-image-max-height);
  --listing-card-text-measure: min(100%, 21.5ch);
  --listing-card-body-gap-desktop: 16px;
  --listing-card-body-gap-mobile: 12px;
  --listing-card-body-margin-top-desktop: 16px;
  --listing-card-body-margin-top-mobile: 12px;
  --listing-card-body-min-height-desktop: 128px;
  --listing-card-body-min-height-tablet: 120px;
  --listing-card-body-min-height-mobile: 104px;
  --listing-card-text-gap: 8px;
  --listing-card-meta-stack-gap: 2px;
  --listing-card-title-size-desktop: 17px;
  --listing-card-title-size-tablet: 15px;
  --listing-card-title-size-mobile-showcase: 15px;
  --listing-card-title-size-mobile-catalog: 14px;
  --listing-card-title-line-height-desktop: 1.22;
  --listing-card-title-line-height-tablet: 1.24;
  --listing-card-title-line-height-mobile-showcase: 1.24;
  --listing-card-title-line-height-mobile-catalog: 1.3;
  --listing-card-meta-size-desktop: 13px;
  --listing-card-meta-size-tablet: 12px;
  --listing-card-meta-size-mobile: 12px;
  --listing-card-meta-line-height: 1.45;
  --listing-card-cta-size-desktop: 13px;
  --listing-card-cta-size-tablet: 12px;
  --listing-card-cta-size-mobile: 11px;
  /* Locked listing invariants: 4-up desktop, 3-up tablet, 2-up mobile.
     Card width is the canonical anchor; shell expansion must create margin,
     not silently squeeze cards past their readable threshold. */
  --listing-grid-columns-desktop: 4;
  --listing-grid-columns-tablet: 3;
  --listing-grid-columns-mobile: 2;
  --listing-gap-desktop: 80px;
  --listing-gap-desktop-tight: var(--listing-gap-desktop);
  --listing-gap-tablet: 24px;
  --listing-gap-mobile: 16px;
  --listing-grid-row-gap-desktop: 48px;
  --listing-grid-row-gap-tablet: 40px;
  --listing-grid-row-gap-mobile: 32px;
  --listing-card-target-width: 280px;
  --listing-card-target-width-tablet: 240px;
  --listing-card-min-width-desktop-catalog: 220px;
  --listing-card-min-width-desktop-showcase: 220px;
  --listing-card-min-width-tablet: 216px;
  --listing-card-cover-min-width-desktop: 220px;
  --listing-card-cover-min-width-tablet: 184px;
  --listing-card-cover-min-width-mobile: 128px;
  --listing-card-text-measure-showcase: min(100%, 21.5ch);
  --listing-card-text-measure-catalog: min(100%, 19.5ch);
  --listing-card-shell-max-width-showcase-desktop: calc((var(--listing-card-target-width) * var(--listing-grid-columns-desktop)) + (var(--listing-gap-desktop) * (var(--listing-grid-columns-desktop) - 1)));
  --listing-card-shell-max-width-catalog-desktop: calc((var(--listing-card-target-width) * var(--listing-grid-columns-desktop)) + (var(--listing-gap-desktop-tight) * (var(--listing-grid-columns-desktop) - 1)));
  --listing-card-shell-max-width-showcase-tablet: calc((var(--listing-card-target-width-tablet) * var(--listing-grid-columns-tablet)) + (var(--listing-gap-tablet) * (var(--listing-grid-columns-tablet) - 1)));
  --listing-card-shell-max-width-catalog-tablet: calc((var(--listing-card-target-width-tablet) * var(--listing-grid-columns-tablet)) + (var(--listing-gap-tablet) * (var(--listing-grid-columns-tablet) - 1)));
  --listing-section-space-primary: 48px;
  --listing-section-space-secondary: 40px;
  --listing-section-space-editorial: 32px;
  --listing-section-divider-space-primary: 96px;
  --listing-section-divider-space-secondary: 88px;
  --listing-section-divider-space-editorial: 64px;
  --listing-section-primary-head-gap: 28px;
  --public-breadcrumb-block-start-gap: var(--space-3);
  --public-breadcrumb-flow-gap: var(--space-3);
  --listing-section-primary-title-size: clamp(30px, 4vw, 44px);
  --listing-section-primary-title-line-height: 1.08;
  --listing-section-primary-title-weight: 700;
  --listing-section-secondary-head-gap: 24px;
  --listing-section-secondary-header-stack-gap: 12px;
  --listing-section-secondary-title-size: 26px;
  --listing-section-secondary-title-line-height: 1.12;
  --listing-section-secondary-title-weight: 650;
  --listing-section-secondary-title-measure: 17.5ch;
  --listing-section-secondary-action-size: 13px;
  --listing-section-secondary-action-line-height: 1.4;
  --listing-section-editorial-title-size: clamp(24px, 2.5vw, 30px);
  --listing-section-editorial-title-line-height: 1.12;
  --listing-section-editorial-title-weight: 700;
  /* Temporary font profile (Tap Chi Cong San-like mix). */
  --font-body: "Merriweather", sans-serif;
  --font-heading: "Roboto Condensed", "Open Sans", sans-serif;
  --font-ui: "Open Sans", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: linear-gradient(180deg, var(--ui-bg-soft) 0%, var(--bg) 100%);
  line-height: 1.6;
  min-height: 100vh;
}
/* Shared scale contract:
   - `page-listing-scale-family` opts public listing/index pages into the wider shell rhythm.
   - `page-admin-workspace` aligns admin workspaces to the same outer scale without making them visually identical.
   - `page-home-card-presentation` remains the canonical shared card-footprint contract for catalog grids. */
body.page-listing-scale-family {
  --public-layout-max-width: var(--app-shell-max-width);
  --public-layout-padding: var(--app-shell-gutter);
  --public-layout-content-max-width: var(--app-shell-max-width);
  --public-layout-header-max-width: var(--app-shell-max-width);
  --layout-max-width: var(--app-shell-max-width);
  --layout-padding: var(--app-shell-gutter);
  --layout-content-max-width: var(--app-shell-max-width);
  --surface-hero-measure: var(--surface-hero-measure-strong);
  --book-list-section-gap: var(--surface-section-gap-strong);
  --book-list-section-divider-gap: var(--surface-section-divider-gap-strong);
  --listing-page-stack-gap: 48px;
  --listing-page-bottom-padding: 88px;
}
body.page-public-content-start-lock {
  --book-list-page-inline-padding: var(--surface-shell-inline-padding);
}
body.page-admin-workspace {
  --layout-max-width: var(--app-shell-max-width);
  --layout-padding: var(--app-shell-gutter);
  --layout-content-max-width: var(--app-shell-max-width);
  --shared-header-content-max-width: var(--app-shell-max-width);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-shell,
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page {
  --admin-shell-inline-padding: 0px;
  --admin-shell-max-width: var(--app-shell-max-width);
  --admin-gap-section: var(--admin-space-section);
  --admin-gap-card: var(--admin-space-inner);
  --admin-gap-row: var(--admin-space-inner);
  --admin-gap-inline: var(--admin-space-base);
  --admin-page-gap: var(--admin-space-section);
  --admin-section-gap: var(--admin-space-section);
  --admin-card-gap: var(--admin-space-inner);
  --admin-form-gap: var(--admin-space-inner);
  --admin-toolbar-gap: var(--admin-space-inner);
  --admin-list-gap: var(--admin-space-inner);
  --admin-nested-gap: var(--admin-space-base);
  --admin-card-padding: var(--admin-space-section);
  --admin-workspace-padding: var(--admin-space-section);
  --admin-table-cell-padding-x: var(--admin-density-table-cell-padding-x);
  --admin-table-cell-padding-x-compact: var(--admin-density-table-cell-padding-x);
  --admin-icon-action-size: 34px;
  --admin-panel-surface: var(--admin-surface);
  --admin-panel-surface-soft: var(--admin-surface-soft);
  --admin-panel-surface-muted: var(--admin-surface-muted);
  --admin-panel-border: var(--admin-line);
  --admin-panel-border-soft: var(--admin-line-table);
  --admin-panel-text: var(--admin-text);
  --admin-panel-text-dim: var(--admin-text-dim);
  --admin-panel-text-soft: var(--admin-text-soft, var(--admin-text-dim));
  --admin-preview-surface: var(--admin-surface-muted);
  --admin-control-surface: var(--admin-surface);
  --admin-control-surface-hover: var(--admin-surface-hover);
  --admin-file-button-surface: var(--ui-accent-muted);
  --admin-file-button-surface-hover: var(--ui-accent-hover);
  --admin-file-button-text: var(--ui-on-accent);
  --line: var(--admin-panel-border);
  --line-2: var(--admin-panel-border-soft);
  --bg-soft: var(--admin-panel-surface-muted);
  --text-dim: var(--admin-panel-text-dim);
  --report-text-dim: var(--admin-panel-text-dim);
  --report-line-soft: var(--admin-panel-border-soft);
  --report-surface: var(--admin-panel-surface);
  width: var(--app-shell-rail-width);
  max-width: none;
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-shell[data-admin-layout="dashboard"],
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page[data-admin-layout="dashboard"] {
  --admin-shell-max-width: var(--app-shell-max-width);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-shell:not([data-admin-density]),
body:is(.page-admin-workspace, .page-account-workspace) .admin-shell[data-admin-density="comfortable"],
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page:not([data-admin-density]),
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page[data-admin-density="comfortable"] {
  --admin-control-height: var(--admin-density-control-height-comfortable);
  --admin-control-height-compact: var(--admin-density-control-height-compact);
  --admin-table-cell-padding-y: var(--admin-density-table-cell-padding-y-comfortable);
  --admin-table-cell-padding-y-compact: var(--admin-density-table-cell-padding-y-compact);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-shell[data-admin-density="compact"],
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page[data-admin-density="compact"] {
  --admin-control-height: var(--admin-density-control-height-compact);
  --admin-control-height-compact: var(--admin-density-control-height-compact);
  --admin-table-cell-padding-y: var(--admin-density-table-cell-padding-y-compact);
  --admin-table-cell-padding-y-compact: var(--admin-density-table-cell-padding-y-compact);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(.admin-ui-icon-action) {
  width: var(--admin-icon-action-size);
  min-width: var(--admin-icon-action-size);
  max-width: var(--admin-icon-action-size);
  height: var(--admin-icon-action-size);
  min-height: var(--admin-icon-action-size);
  max-height: var(--admin-icon-action-size);
  flex: 0 0 var(--admin-icon-action-size);
  padding: 0;
}
body.st-non-reader-shell :where(
  .account-status,
  .account-banner,
  .admin-ui-status,
  .admin-status,
  .editor-status,
  .admin-notice,
  .editor-notice,
  .notice,
  .flash,
  .message,
  .alert,
  .auth-msg,
  .tool-status-block,
  .epub-v2-status,
  .editorial-status,
  .email-settings-error,
  .forensics-error
) {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-shell {
  padding-top: var(--admin-shell-padding-block);
  padding-bottom: var(--admin-shell-padding-block);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-stack {
  gap: var(--admin-page-gap);
}
body.page-admin-workspace .admin-ui-head {
  gap: var(--admin-header-gap) var(--admin-card-gap);
}
body.page-admin-workspace .admin-ui-head h1 {
  font-size: var(--admin-header-title-size);
  line-height: 1.12;
}
body.page-admin-workspace .admin-ui-head__actions {
  gap: var(--admin-nested-gap);
}
body.page-admin-workspace .admin-ui-toolbar {
  gap: var(--admin-toolbar-gap);
}
body.page-admin-workspace .admin-ui-toolbar-meta,
body.page-admin-workspace .admin-ui-toolbar__actions {
  gap: var(--admin-nested-gap);
}
body.page-admin-workspace .admin-ui-card,
body.page-admin-workspace .admin-ui-workspace {
  gap: var(--admin-card-gap);
  padding: var(--admin-card-padding);
}
body.page-admin-workspace .admin-ui-section,
body.page-admin-workspace .admin-ui-panel,
body.page-admin-workspace .admin-ui-page > .panel,
body.page-admin-workspace .admin-ui-page .layout-grid-12 > .panel {
  display: grid;
  gap: var(--admin-card-gap);
  margin-bottom: 0;
  padding: var(--admin-card-padding);
  box-shadow: none;
}
body.page-admin-workspace .admin-ui-table-shell {
  border-radius: 16px;
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-form {
  gap: var(--admin-form-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-form-main {
  gap: var(--admin-section-gap) var(--admin-space-major);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-form-section,
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-side-section {
  gap: var(--admin-form-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-form-section + .admin-ui-form-section,
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-side-section + .admin-ui-side-section {
  padding-top: var(--admin-form-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-field {
  gap: var(--admin-nested-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-field-grid,
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-inline-fields {
  gap: var(--admin-form-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="form"] .admin-ui-action-bar {
  gap: var(--admin-toolbar-gap);
}
body.page-admin-workspace .admin-ui-media-form-layout {
  display: grid;
  grid-template-columns: var(--admin-media-form-columns, minmax(0, 600px) minmax(0, 1fr));
  gap: var(--admin-section-gap) var(--layout-grid-gap);
  align-items: start;
}
body.page-admin-workspace .admin-ui-media-form-layout > * {
  min-width: 0;
}
body.page-admin-workspace .admin-ui-media-strip {
  display: grid;
  grid-template-columns: var(
    --admin-media-strip-columns,
    minmax(132px, var(--admin-media-preview-width, 196px)) minmax(260px, 0.85fr) minmax(280px, 1fr)
  );
  gap: var(--admin-media-strip-gap, var(--admin-form-gap));
  align-items: start;
  align-content: start;
  justify-content: stretch;
  min-width: 0;
  padding: var(--admin-form-gap);
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-card);
  background: var(--admin-surface);
}
body.page-admin-workspace .admin-ui-media-strip > * {
  min-width: 0;
}
body.page-admin-workspace .admin-ui-media-strip > :is(.admin-ui-media-summary, .admin-ui-media-actions) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.page-admin-workspace .admin-ui-media-strip > .admin-ui-media-summary {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--admin-form-gap);
  row-gap: var(--admin-nested-gap);
  align-items: flex-start;
}
body.page-admin-workspace .admin-ui-media-strip > .admin-ui-media-summary > * {
  flex: 1 1 120px;
  min-width: 0;
}
body.page-admin-workspace .admin-ui-media-actions {
  width: 100%;
  max-width: var(--admin-media-actions-max-width, none);
}
body.page-admin-workspace .admin-ui-media-preview {
  justify-self: start;
}
body.page-admin-workspace .admin-ui-media-body {
  grid-column: 1 / -1;
  min-width: 0;
}
@media (max-width: 1180px) {
  body.page-admin-workspace .admin-ui-media-form-layout {
    --admin-media-form-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  body.page-admin-workspace .admin-ui-media-strip {
    --admin-media-strip-columns: minmax(120px, var(--admin-media-preview-width, 170px)) minmax(0, 1fr);
  }
  body.page-admin-workspace .admin-ui-media-actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  body.page-admin-workspace .admin-ui-media-strip {
    --admin-media-strip-columns: minmax(0, 1fr);
  }
  body.page-admin-workspace .admin-ui-media-preview {
    justify-self: center;
  }
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="dashboard"] {
  display: grid;
  gap: var(--admin-header-to-content-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="dashboard"] .dashboard-page-grid,
body.page-admin-workspace .admin-ui-page[data-admin-layout="dashboard"] .dashboard-stats {
  gap: var(--admin-section-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="dashboard"] .panel {
  margin-bottom: 0;
  padding: var(--admin-card-padding);
  border-radius: 16px;
  box-shadow: none;
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="dashboard"] .dashboard-hero,
body.page-admin-workspace .admin-ui-page[data-admin-layout="dashboard"] .dashboard-stat {
  gap: var(--admin-card-gap);
}
body.page-admin-workspace .admin-ui-page[data-admin-layout="dashboard"] .dashboard-stat {
  padding: var(--admin-card-padding);
}
body.page-admin-workspace .admin-ui-page :where(
  .homepage-admin-toolbar,
  .report-toolbar,
  .report-filter-form,
  .report-filter-actions,
  .report-anchor-nav
) {
  gap: var(--admin-toolbar-gap);
}
body.page-admin-workspace .admin-ui-page :where(
  .homepage-admin-table-shell,
  .report-table-shell,
  .books-admin-table,
  .admin-ui-card > .admin-ui-table-shell
) {
  margin-top: 0;
}
body.page-admin-workspace .admin-ui-page :where(
  .report-grid,
  .report-split,
  .bookshelf-workspace-shell,
  .forensics-report-grid
) {
  gap: var(--admin-section-gap);
}
body.page-admin-workspace .admin-ui-page :where(
  .home-module-form,
  .report-section-stack,
  .report-card,
  .report-card-head,
  .report-section-head,
  .report-panel,
  .report-metric-grid,
  .bookshelf-panel,
  .bookshelf-form,
  .bookshelf-form-main,
  .bookshelf-form-grid,
  .bookshelf-search-shell,
  .bookshelf-books-shell,
  .bookshelf-book-list,
  .bookshelf-search-results,
  .footer-editor-groups,
  .footer-link-group,
  .theme-admin-options
) {
  gap: var(--admin-card-gap);
}
body.page-admin-workspace .admin-ui-page :where(
  .home-module-item,
  .home-module-item-top,
  .home-module-item-actions,
  .report-inline-stats,
  .report-inline-stat,
  .bookshelf-toggle-row,
  .bookshelf-form-actions,
  .bookshelf-book-row,
  .bookshelf-search-result
) {
  gap: var(--admin-form-gap);
}
body.page-admin-workspace .admin-ui-page :where(
  .report-metric,
  .admin-ui-table-actions
) {
  gap: var(--admin-nested-gap);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .report-anchor-nav a,
  .report-filter-field input,
  .report-panel,
  .report-card,
  .report-metric,
  .report-inline-stat,
  .admin-ui-form-main,
  .author-editor-toggle,
  .author-linked-book,
  .bookshelf-panel,
  .bookshelf-toggle-row label,
  .bookshelf-book-row,
  .bookshelf-empty,
  .category-books-count,
  .category-book-chip,
  .dashboard-stat,
  .dashboard-subpanel,
  .count-pill,
  .email-settings-panel,
  .email-settings-error,
  .editor-upload-panel .tool-status-block,
  .interactive-view-toggle,
  .interactive-source-toggle,
  .interactive-page-stage,
  .interactive-page-slot-badge,
  .interactive-page-canvas,
  .interactive-selected-preview,
  .interactive-items-list,
  .interactive-preview-toggle,
  .interactive-items-panel,
  .interactive-item-row,
  .manual-trim-group,
  .upload-check,
  .home-module-item,
  .home-module-empty,
  .reader-security-note,
  .watermark-library-card,
  .forensics-card,
  .forensics-meta-item,
  .forensics-table-wrap,
  .forensics-badge,
  .admin-role-option,
  .admin-name-input,
  .admin-status-select,
  .admin-empty
) {
  border-color: var(--admin-panel-border);
  background: var(--admin-panel-surface);
  color: var(--admin-panel-text);
  box-shadow: none;
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .report-card-head p,
  .report-section-head p,
  .report-panel p,
  .report-empty,
  .report-small,
  .report-filter-field label,
  .report-metric-label,
  .report-inline-stat span,
  .author-editor-meta,
  .author-linked-book-meta,
  .bookshelf-row-slug,
  .bookshelf-row-description,
  .bookshelf-status,
  .bookshelf-order-meta,
  .dashboard-section-head p,
  .dashboard-block-label,
  .email-settings-label,
  .email-settings-note,
  .home-module-item-sub,
  .home-module-empty,
  .interactive-helper,
  .interactive-item-kind,
  .interactive-item-flag,
  .interactive-item-empty,
  .interactive-file-hint,
  .upload-helper-note,
  .compose-file-label,
  .compose-file-note,
  .manual-trim-group legend,
  .manual-trim-field span,
  .forensics-field label,
  .forensics-top,
  .admin-user-email,
  .admin-user-note,
  .admin-empty
) {
  color: var(--admin-panel-text-dim);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .report-card-head h2,
  .report-card-head h3,
  .report-section-head h2,
  .report-panel h3,
  .report-metric-value,
  .report-inline-stat strong,
  .dashboard-subpanel > h2,
  .forensics-card h2,
  .forensics-meta-item strong,
  .forensics-meta-item span,
  .admin-user-name
) {
  color: var(--admin-panel-text);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .forensics-table th,
  .admin-ui-table th
) {
  border-color: var(--admin-line-strong);
  background: var(--admin-surface-table-header);
  color: var(--admin-text-table-header);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .forensics-table td,
  .admin-ui-table td
) {
  border-color: var(--admin-line-table);
  background: var(--admin-panel-surface);
  color: var(--admin-panel-text);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(.forensics-table tbody tr:hover td, .admin-ui-table tbody tr:hover td) {
  background: var(--admin-surface-hover);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(.forensics-error) {
  border-color: var(--admin-danger-border);
  background: var(--admin-danger-soft);
  color: var(--admin-danger);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(.forensics-badge--medium) {
  border-color: var(--ui-warning-border);
  background: var(--ui-warning-surface);
  color: var(--ui-warning);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(.forensics-badge--high) {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-surface);
  color: var(--ui-danger);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"]) {
  border-color: var(--admin-line-strong);
  background: var(--admin-control-surface);
  color: var(--admin-text-dim);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::file-selector-button,
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::-webkit-file-upload-button {
  border-color: var(--admin-line-strong);
  background: var(--admin-file-button-surface);
  color: var(--admin-file-button-text);
}
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::file-selector-button:hover,
body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::-webkit-file-upload-button:hover {
  background: var(--admin-file-button-surface-hover);
}
@media (max-width: 720px) {
  body:is(.page-admin-workspace, .page-account-workspace) .admin-shell,
  body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page {
    --admin-page-gap: 20px;
    --admin-section-gap: 20px;
    --admin-card-gap: 14px;
    --admin-form-gap: 14px;
    --admin-toolbar-gap: 12px;
    --admin-list-gap: 14px;
    --admin-nested-gap: 8px;
    --admin-card-padding: 16px;
    --admin-workspace-padding: 16px;
  }
}
@media (max-width: 560px) {
  body:is(.page-admin-workspace, .page-account-workspace) .admin-shell,
  body:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page {
    --admin-page-gap: 16px;
    --admin-section-gap: 16px;
    --admin-card-gap: 12px;
    --admin-form-gap: 12px;
    --admin-toolbar-gap: 10px;
    --admin-list-gap: 12px;
    --admin-nested-gap: 8px;
    --admin-card-padding: 12px;
    --admin-workspace-padding: 12px;
  }
}
/*
 * Button groups - phase 1 ownership map
 *
 * 1. Action buttons:
 *    button, .primary, .secondary, .account-btn, .admin-ui-action,
 *    .admin-ui-head__link, .admin-ui-icon-action, .detail-action-btn,
 *    .auth-links .auth-sub-link, .auth-actions .auth-sub-link
 *
 * 2. Navigation triggers:
 *    .topbar .topbar-categories-toggle, .topbar .topbar-search-trigger,
 *    .topbar-mobile-domains .topbar-mobile-primary-toggle,
 *    .topbar-mobile-domains .topbar-mobile-category-link,
 *    .topbar-mobile-domains .topbar-mobile-secondary-link
 *
 * 3. Toolbar buttons:
 *    .topbar .topbar-icon-btn, .topbar .topbar-editor-toggle,
 *    .topbar .topbar-account-toggle.topbar-account-toggle--icon,
 *    .book-qa-popup__icon-btn, reader toolbar controls
 *
 * 4. Tab / filter buttons:
 *    .all-books-tab and other tab/filter controls migrated later
 *
 * 5. Utility / inline controls:
 *    password toggles, inline row actions, chip actions, compact helpers
 *
 * Phase 1 keeps the existing global button contract intact to avoid regressions.
 * Later phases will move selectors out of the global button baseline group by group.
 */
/* Phase 1: .all-books-tab still inherits the shared dark button theme baseline. */
body.theme-quoc-tang {
  --quoc-tang-page: #f2f2f2;
  --quoc-tang-page-soft: #fafafa;
  --quoc-tang-surface: #ffffff;
  --quoc-tang-elevated: #ececec;
  --quoc-tang-elevated-hover: #e2e2e2;
  --quoc-tang-border: #d0d0d0;
  --quoc-tang-border-strong: #a8a8a8;
  --quoc-tang-text: #242424;
  --quoc-tang-text-strong: #111111;
  --quoc-tang-text-muted: #5f5f5f;
  --quoc-tang-text-soft: #747474;
  --quoc-tang-link: #1f1f1f;
  --quoc-tang-link-hover: #000000;
  --quoc-tang-action-surface: #ffffff;
  --quoc-tang-action-surface-hover: #eeeeee;
  --quoc-tang-action-border: #a8a8a8;
  --quoc-tang-action-border-strong: #737373;
  --quoc-tang-action-text: #1f1f1f;
  --quoc-tang-banner-surface: #e9e9e9;
  --quoc-tang-banner-frame-surface: #eeeeee;
  --quoc-tang-danger: #2b2b2b;
  --quoc-tang-danger-surface: #ededed;
  --quoc-tang-danger-border: #b8b8b8;
  --quoc-tang-admin-text: #202020;
  --quoc-tang-admin-text-strong: #0f0f0f;
  --quoc-tang-admin-text-muted: #555555;
  --quoc-tang-admin-text-soft: #686868;
  --quoc-tang-admin-text-disabled: #626262;
  --quoc-tang-admin-surface: #ffffff;
  --quoc-tang-admin-surface-elevated: #f0f0f0;
  --quoc-tang-admin-surface-muted: #e8e8e8;
  --quoc-tang-admin-surface-hover: #dedede;
  --quoc-tang-admin-border: #c6c6c6;
  --quoc-tang-admin-border-strong: #8e8e8e;
  --quoc-tang-admin-border-soft: #d6d6d6;
  --quoc-tang-admin-control-surface: #ffffff;
  --quoc-tang-admin-control-surface-hover: #e9e9e9;
  --quoc-tang-admin-status-surface: #eeeeee;
  --quoc-tang-admin-status-border: #bdbdbd;
  --quoc-tang-admin-status-text: #242424;
  --ui-bg: var(--quoc-tang-page);
  --ui-bg-soft: var(--quoc-tang-page-soft);
  --ui-surface: var(--quoc-tang-surface);
  --ui-surface-solid: var(--quoc-tang-surface);
  --ui-surface-muted: var(--quoc-tang-elevated);
  --ui-surface-hover: var(--quoc-tang-elevated-hover);
  --ui-surface-elevated: var(--quoc-tang-elevated);
  --ui-control-surface: var(--quoc-tang-action-surface);
  --ui-control-surface-hover: var(--quoc-tang-action-surface-hover);
  --ui-text: var(--quoc-tang-text);
  --ui-text-strong: var(--quoc-tang-text-strong);
  --ui-text-muted: var(--quoc-tang-text-muted);
  --ui-text-soft: var(--quoc-tang-text-soft);
  --ui-text-disabled: var(--quoc-tang-admin-text-disabled);
  --ui-link: var(--quoc-tang-link);
  --ui-link-hover: var(--quoc-tang-link-hover);
  --ui-border: var(--quoc-tang-border);
  --ui-border-soft: var(--quoc-tang-border);
  --ui-border-subtle: var(--quoc-tang-border);
  --ui-border-hairline: var(--quoc-tang-border);
  --ui-border-overlay: var(--quoc-tang-border-strong);
  --ui-border-strong: var(--quoc-tang-border-strong);
  --ui-border-hover: var(--quoc-tang-admin-border-strong);
  --ui-divider: var(--quoc-tang-border);
  --ui-divider-strong: var(--quoc-tang-border-strong);
  --ui-link-decoration: var(--quoc-tang-border-strong);
  --ui-link-decoration-hover: var(--quoc-tang-action-border-strong);
  --ui-accent: #303030;
  --ui-accent-hover: #1c1c1c;
  --ui-accent-muted: #6f6f6f;
  --ui-on-accent: #ffffff;
  --ui-accent-border-soft: var(--quoc-tang-admin-border-soft);
  --ui-accent-border: var(--quoc-tang-action-border-strong);
  --ui-accent-focus: var(--quoc-tang-admin-border-soft);
  --ui-accent-shadow: var(--quoc-tang-admin-border-soft);
  --ui-backdrop: rgba(0, 0, 0, 0.44);
  --ui-overlay: rgba(17, 17, 17, 0.88);
  --ui-shadow-soft: transparent;
  --ui-shadow-subtle: transparent;
  --ui-shadow-card: transparent;
  --ui-surface-glass: var(--quoc-tang-surface);
  --ui-surface-glass-strong: var(--quoc-tang-surface);
  --ui-surface-wash: var(--quoc-tang-elevated);
  --ui-surface-wash-soft: var(--quoc-tang-elevated);
  --ui-success: #303030;
  --ui-success-surface: #eeeeee;
  --ui-success-border: var(--quoc-tang-admin-status-border);
  --ui-warning: #303030;
  --ui-warning-surface: #eeeeee;
  --ui-warning-border: var(--quoc-tang-admin-status-border);
  --ui-danger: var(--quoc-tang-danger);
  --ui-danger-surface: var(--quoc-tang-danger-surface);
  --ui-danger-border: var(--quoc-tang-danger-border);
  --ui-danger-border-hover: var(--quoc-tang-danger-border);
  --ui-table-header-surface: var(--quoc-tang-admin-surface-muted);
  --ui-table-row-surface: var(--quoc-tang-admin-surface);
  --ui-card-surface: var(--quoc-tang-surface);
  --ui-card-border: var(--quoc-tang-border);
  --ui-form-surface: var(--quoc-tang-admin-control-surface);
  --ui-form-border: var(--quoc-tang-admin-border-strong);
  --ui-button-surface: var(--quoc-tang-action-surface);
  --ui-button-surface-hover: var(--quoc-tang-action-surface-hover);
  --ui-button-border: var(--quoc-tang-action-border);
  --ui-button-border-hover: var(--quoc-tang-action-border-strong);
  --ui-badge-surface: var(--quoc-tang-admin-status-surface);
  --ui-badge-text: var(--quoc-tang-admin-status-text);
  --ui-badge-border: var(--quoc-tang-admin-status-border);
  --ui-chip-surface: var(--quoc-tang-admin-surface-elevated);
  --ui-chip-text: var(--quoc-tang-admin-text-muted);
  --ui-chip-border: var(--quoc-tang-admin-border-soft);
  --ui-banner-border: var(--quoc-tang-border);
  --ui-banner-shadow: transparent;
  --ui-notification-dot: var(--quoc-tang-text-muted);
  --ui-notification-dot-muted: var(--quoc-tang-border-strong);
  --ui-selection-surface: var(--quoc-tang-elevated);
  --ui-selection-surface-soft: var(--quoc-tang-elevated);
  --ui-selection-ring: var(--quoc-tang-admin-border-soft);
  --ui-selection-ring-soft: var(--quoc-tang-admin-border-soft);
  --ui-selection-ring-muted: var(--quoc-tang-admin-border-soft);
  --ui-selection-ring-strong: var(--quoc-tang-admin-border-strong);
  --ui-selection-shadow: transparent;
  --ui-swatch-border: var(--quoc-tang-border-strong);
  --ui-swatch-border-strong: var(--quoc-tang-action-border-strong);
  --ui-swatch-inset: transparent;
  --ui-swatch-inset-strong: transparent;
  --ui-preview-object-surface: var(--quoc-tang-elevated);
  --ui-preview-object-border: var(--quoc-tang-border-strong);
  --ui-preview-selection-surface: var(--quoc-tang-admin-status-surface);
  --ui-preview-selection-border: var(--quoc-tang-admin-status-border);
  --ui-preview-hotspot-surface: var(--quoc-tang-elevated);
  --ui-preview-hotspot-border: var(--quoc-tang-border-strong);
  --ui-preview-transparent-hit: transparent;
  --page: var(--quoc-tang-page);
  --card: var(--quoc-tang-surface);
  --line: var(--quoc-tang-border);
  --muted: var(--quoc-tang-text-muted);
  --text: var(--quoc-tang-text);
  --book-list-title-color: var(--quoc-tang-text-strong);
  --book-list-title-hover-color: var(--quoc-tang-link-hover);
  --book-list-author-color: var(--quoc-tang-text-muted);
  --book-list-cta-color: var(--quoc-tang-link);
  --book-list-cta-color-hover: var(--quoc-tang-link-hover);
  --shared-header-surface: var(--quoc-tang-surface);
  --shared-header-surface-solid: var(--quoc-tang-surface);
  --shared-header-border-color: var(--quoc-tang-border);
  --shared-header-action-color: var(--quoc-tang-text);
  --shared-header-action-color-strong: var(--quoc-tang-text-strong);
  --shared-header-hover-surface: var(--quoc-tang-elevated);
  --banner-surface-bg: var(--quoc-tang-banner-surface);
  --banner-text-color: var(--quoc-tang-text);
  --banner-title-color: var(--quoc-tang-text-strong);
  --banner-muted-color: var(--quoc-tang-text-muted);
  --banner-accent-color: var(--quoc-tang-link);
  --banner-button-text-color: var(--quoc-tang-text-strong);
  --st-public-banner-surface-bg: var(--quoc-tang-banner-surface);
  --st-public-banner-text-color: var(--quoc-tang-text);
  --st-public-banner-title-color: var(--quoc-tang-text-strong);
  --st-public-banner-muted-color: var(--quoc-tang-text-muted);
  --st-public-banner-action-color: var(--quoc-tang-text);
  --st-public-banner-action-border-color: var(--quoc-tang-border-strong);
  --st-public-banner-action-hover-color: var(--quoc-tang-text-strong);
  --st-public-banner-action-border-hover-color: #737373;
  --st-public-banner-dot-color: #a8a8a8;
  --st-public-banner-dot-active-color: #1f1f1f;
  --st-public-banner-dot-hover-color: #5f5f5f;
  background: var(--page);
  color: var(--text);
}
body.theme-quoc-tang :where(.topbar, .topbar .topbar-categories-dropdown, .topbar .topbar-auth .topbar-auth-panel, .topbar .topbar-search-panel-inner, .topbar .topbar-account-menu-panel, .topbar-mobile-menu-panel) {
  border-color: var(--line);
  background: var(--quoc-tang-surface);
  color: var(--text);
  box-shadow: none;
}
body.theme-quoc-tang :where(.topbar a, .topbar button, .topbar .topbar-categories-toggle, .topbar .topbar-account-toggle, .topbar .topbar-mobile-menu-toggle) {
  color: var(--text);
}
body.theme-quoc-tang :where(.topbar .topbar-categories-link, .topbar .topbar-category-link, .topbar .topbar-mobile-secondary-link, .topbar .topbar-mobile-category-link) {
  color: var(--quoc-tang-text-muted);
}
body.theme-quoc-tang :where(.topbar .topbar-categories-link:hover, .topbar .topbar-category-link:hover, .topbar .topbar-mobile-secondary-link:hover, .topbar .topbar-mobile-category-link:hover) {
  color: var(--quoc-tang-text-strong);
  background: var(--quoc-tang-elevated);
}
body.theme-quoc-tang :where(.container, .layout-shell, .book-list-page-shell, .book-list-page, .home-content-stack, .editorial-page, .account-page, .admin-ui-page) {
  color: var(--text);
}
body.theme-quoc-tang :where(.book-list-page__title, .book-list-section__title, .listing-section-title, .book-card__title, .book-detail-title, .detail-title, .detail-section-title, .notification-item__title, .editorial-article__title, .account-page-title, .account-section-heading h3, .admin-ui-head h1, .admin-ui-table-main) {
  color: var(--quoc-tang-text-strong);
}
body.theme-quoc-tang :where(.book-list-page__eyebrow, .book-list-page__context, .home-search-status, .book-card__meta-line, .book-card__badge, .detail-meta-item dt, .detail-meta-item dd, .detail-description, .detail-description p, .notification-item__meta, .editorial-article__meta, .notification-item__content, .editorial-article__excerpt, .account-page-copy, .account-summary-meta, .account-inline-meta, .account-note, .account-empty, .admin-ui-table-subtitle, .admin-ui-count) {
  color: var(--muted);
}
body.theme-quoc-tang :where(.book-list-section + .book-list-section, .detail-primary-meta .detail-meta-item, .notification-item, .public-site-footer, .public-site-footer__intro, .admin-ui-card, .admin-ui-form-main, .admin-ui-workspace, .admin-ui-table-shell, .panel, .account-section-card, .account-library-card, .account-session-row, .account-identity-row, .account-plan-row, .account-feature-row, .account-event-row, .account-state-card, .account-meta-row, .account-setting-row) {
  border-color: var(--line);
}
body.theme-quoc-tang :where(.panel, .admin-ui-card, .admin-ui-form-main, .admin-ui-workspace, .admin-ui-table-shell, .dashboard-subpanel, .dashboard-stat, .account-section-card, .account-library-card, .account-session-row, .account-identity-row, .account-plan-row, .account-feature-row, .account-event-row, .account-state-card, .account-meta-row, .home-search-results-empty) {
  background: var(--card);
  color: var(--text);
  box-shadow: none;
}
body.theme-quoc-tang :where(.st-public-banner-band, .st-public-banner-slider, .home-banner-module, .home-banner-preset) {
  color: var(--quoc-tang-text);
}
body.theme-quoc-tang :where(.home-banner-module, .home-banner-preset, .st-public-banner__hero-image-frame, .home-banner-preset-figure, .home-banner-preset-cover) {
  border-color: var(--quoc-tang-border);
  background: var(--quoc-tang-banner-frame-surface);
  color: var(--quoc-tang-text);
}
body.theme-quoc-tang :where(input, textarea, select) {
  border-color: var(--quoc-tang-border-strong);
  background: var(--quoc-tang-surface);
  color: var(--quoc-tang-text-strong);
}
body.theme-quoc-tang :where(input::placeholder, textarea::placeholder) {
  color: var(--quoc-tang-text-soft);
}
/* Phase 1: .all-books-tab still inherits the shared quoc-tang button theme baseline. */
body.theme-quoc-tang :where(button:not(.library-search-facet-item), .primary, .secondary, .account-btn, .admin-ui-action, .admin-ui-head__link, .admin-ui-icon-action, .detail-action-btn, .all-books-tab, .auth-links .auth-sub-link, .auth-actions .auth-sub-link) {
  border-color: var(--quoc-tang-action-border);
  background: var(--quoc-tang-action-surface);
  color: var(--quoc-tang-action-text);
  box-shadow: none;
}
body.theme-quoc-tang :where(button:not(.library-search-facet-item):hover, button:not(.library-search-facet-item):focus-visible, .secondary:hover, .secondary:focus-visible, .account-btn:hover, .account-btn:focus-visible, .admin-ui-action:hover, .admin-ui-action:focus-visible, .admin-ui-head__link:hover, .admin-ui-head__link:focus-visible, .detail-action-btn:hover, .detail-action-btn:focus-visible, .all-books-tab:hover, .all-books-tab:focus-visible) {
  border-color: var(--quoc-tang-action-border-strong);
  background: var(--quoc-tang-action-surface-hover);
  color: var(--quoc-tang-text-strong);
}
body.theme-quoc-tang :where(.primary, .account-btn--primary, .detail-action-btn--primary, .all-books-tab.is-active) {
  border-color: var(--quoc-tang-action-border-strong);
  background: var(--quoc-tang-action-surface);
  color: var(--quoc-tang-text-strong);
}
body.theme-quoc-tang :where(a, .book-card__title-link, .book-card__cta, .search-results-page__action, .editorial-article__footer a, .account-link-inline) {
  color: var(--quoc-tang-link);
}
body.theme-quoc-tang :where(.public-site-footer) {
  background: var(--quoc-tang-surface);
}
body.theme-quoc-tang :where(.book-card, .book-card__media, .detail-cover-shell, .detail-cover, .book-detail-cover) {
  background: transparent;
  box-shadow: none;
}
body.theme-quoc-tang .admin-ui-page {
  --admin-line: var(--quoc-tang-admin-border);
  --admin-line-strong: var(--quoc-tang-admin-border-strong);
  --admin-surface: var(--quoc-tang-admin-surface);
  --admin-surface-soft: var(--quoc-tang-admin-surface);
  --admin-surface-muted: var(--quoc-tang-admin-surface-muted);
  --admin-surface-hover: var(--quoc-tang-admin-surface-hover);
  --admin-surface-chip: var(--quoc-tang-admin-surface-elevated);
  --admin-surface-table-header: var(--quoc-tang-admin-surface-muted);
  --admin-surface-modal: var(--quoc-tang-admin-surface);
  --admin-control-surface: var(--quoc-tang-admin-control-surface);
  --admin-control-surface-hover: var(--quoc-tang-admin-control-surface-hover);
  --admin-file-button-surface: var(--quoc-tang-admin-surface-elevated);
  --admin-file-button-surface-hover: var(--quoc-tang-admin-surface-hover);
  --admin-file-button-text: var(--quoc-tang-admin-text-strong);
  --admin-text: var(--quoc-tang-admin-text);
  --admin-text-strong: var(--quoc-tang-admin-text-strong);
  --admin-text-muted: var(--quoc-tang-admin-text-muted);
  --admin-text-soft: var(--quoc-tang-admin-text-soft);
  --admin-text-disabled: var(--quoc-tang-admin-text-disabled);
  --admin-text-dim: var(--quoc-tang-admin-text-muted);
  --admin-text-chip: var(--quoc-tang-admin-text);
  --admin-text-table-header: var(--quoc-tang-admin-text-strong);
  --admin-accent: var(--quoc-tang-link);
  --admin-danger: var(--quoc-tang-danger);
  --admin-danger-soft: var(--quoc-tang-danger-surface);
  --admin-line-hover: var(--quoc-tang-admin-border-strong);
  --admin-line-table: var(--quoc-tang-admin-border-soft);
  --admin-danger-border: var(--quoc-tang-danger-border);
  --admin-danger-border-hover: var(--quoc-tang-admin-border-strong);
  --admin-badge-accent-border: var(--quoc-tang-admin-border-strong);
  --admin-badge-accent-surface: var(--quoc-tang-admin-surface-muted);
  --admin-badge-accent-text: var(--quoc-tang-admin-text);
  --admin-badge-success-surface: var(--quoc-tang-admin-surface-muted);
  --admin-badge-success-text: var(--quoc-tang-admin-text);
  --admin-badge-muted-surface: var(--quoc-tang-admin-surface-elevated);
  --admin-badge-muted-text: var(--quoc-tang-admin-text-muted);
  --admin-panel-surface: var(--quoc-tang-admin-surface);
  --admin-panel-surface-soft: var(--quoc-tang-admin-surface);
  --admin-panel-surface-muted: var(--quoc-tang-admin-surface-elevated);
  --admin-panel-border: var(--quoc-tang-admin-border);
  --admin-panel-border-soft: var(--quoc-tang-admin-border-soft);
  --admin-panel-text: var(--quoc-tang-admin-text);
  --admin-panel-text-dim: var(--quoc-tang-admin-text-muted);
  --admin-preview-surface: var(--quoc-tang-admin-surface-elevated);
  --report-text-dim: var(--quoc-tang-admin-text-muted);
  --report-line-soft: var(--quoc-tang-admin-border-soft);
  --report-surface: var(--quoc-tang-admin-surface);
  --admin-modal-backdrop: rgba(0, 0, 0, 0.48);
  color: var(--quoc-tang-admin-text);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) :where(.admin-ui-page, .admin-shell, .admin-ui-shell) {
  background: transparent;
  color: var(--quoc-tang-admin-text);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-head h1,
  .admin-ui-card-head h2,
  .admin-ui-card-head h3,
  .admin-ui-form-section h3,
  .admin-ui-side-section h3,
  .admin-ui-table-main,
  .admin-ui-table-title,
  .admin-ui-list-title,
  .admin-ui-field > span,
  .admin-ui-field label > span,
  .admin-ui-inline-fields label > span,
  .home-module-item-title,
  .book-title,
  .draft-title,
  .feedback-admin-content,
  .watermark-library-name,
  .watermark-preview-title,
  .watermark-preview-metric-value,
  .admin-user-name
) {
  color: var(--quoc-tang-admin-text-strong);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-card-head p,
  .admin-ui-status,
  .admin-ui-empty,
  .admin-ui-count,
  .admin-ui-table-meta,
  .admin-ui-table-subtitle,
  .admin-ui-table-index,
  .admin-ui-list-subtitle,
  .admin-ui-list-copy,
  .home-module-item-sub,
  .home-module-empty,
  .feedback-admin-contact,
  .feedback-admin-contact.is-empty,
  .feedback-admin-time,
  .book-meta-cell,
  .book-meta-cell.is-empty,
  .book-sub,
  .draft-sub,
  .watermark-library-sub,
  .watermark-library-empty,
  .watermark-book-option-sub,
  .watermark-book-results-empty,
  .watermark-preview-metric-label,
  .forensics-field label,
  .forensics-top,
  .admin-user-email,
  .admin-user-note,
  .admin-empty
) {
  color: var(--quoc-tang-admin-text-muted);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-card,
  .admin-ui-form-main,
  .admin-ui-workspace,
  .admin-ui-list-row,
  .admin-ui-table-shell,
  .admin-ui-modal__dialog,
  .admin-ui-empty,
  .admin-ui-count,
  .admin-ui-toggle,
  .admin-ui-chip,
  .admin-ui-badge,
  .count-pill,
  .panel,
  .dashboard-subpanel,
  .dashboard-stat,
  .report-panel,
  .report-card,
  .report-metric,
  .report-inline-stat,
  .home-module-item,
  .home-module-empty,
  .watermark-library-card,
  .watermark-book-results,
  .watermark-preview-panel,
  .watermark-preview-metric,
  .forensics-card,
  .forensics-meta-item,
  .forensics-table-wrap,
  .forensics-badge,
  .admin-role-option,
  .admin-name-input,
  .admin-status-select,
  .admin-empty
) {
  border-color: var(--quoc-tang-admin-border);
  background: var(--quoc-tang-admin-surface);
  color: var(--quoc-tang-admin-text);
  box-shadow: none;
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-toolbar,
  .admin-ui-table th,
  .forensics-table th,
  .watermark-preview-stage,
  .watermark-preview-page,
  .count-pill.is-active,
  .count-pill.is-inactive
) {
  border-color: var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-surface-elevated);
  color: var(--quoc-tang-admin-text-strong);
  box-shadow: none;
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-table,
  .forensics-table,
  .books-table
) {
  color: var(--quoc-tang-admin-text);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-table th,
  .forensics-table th,
  .books-table th
) {
  border-bottom-color: var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-surface-muted);
  color: var(--quoc-tang-admin-text-strong);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-table td,
  .forensics-table td,
  .books-table td
) {
  border-bottom-color: var(--quoc-tang-admin-border-soft);
  background: var(--quoc-tang-admin-surface);
  color: var(--quoc-tang-admin-text);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  input,
  textarea,
  select,
  .admin-ui-toolbar__search input,
  .admin-ui-search input,
  .feedback-admin-status-form select,
  .watermark-book-search
) {
  border-color: var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-control-surface);
  color: var(--quoc-tang-admin-text-strong);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input::placeholder, textarea::placeholder) {
  color: var(--quoc-tang-admin-text-soft);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"]) {
  border-color: var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-control-surface);
  color: var(--quoc-tang-admin-text-muted);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::file-selector-button,
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::-webkit-file-upload-button {
  border-color: var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-surface-elevated);
  color: var(--quoc-tang-admin-text-strong);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::file-selector-button:hover,
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(input[type="file"])::-webkit-file-upload-button:hover {
  background: var(--quoc-tang-admin-surface-hover);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-action,
  .admin-ui-list-action,
  .admin-ui-head__link,
  .admin-ui-icon-action,
  .secondary,
  .draft-link
) {
  border-color: var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-control-surface);
  color: var(--quoc-tang-admin-text);
  box-shadow: none;
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-action:hover,
  .admin-ui-action:focus-visible,
  .admin-ui-list-action:hover,
  .admin-ui-list-action:focus-visible,
  .admin-ui-head__link:hover,
  .admin-ui-head__link:focus-visible,
  .admin-ui-icon-action:hover,
  .admin-ui-icon-action:focus-visible,
  .secondary:hover,
  .secondary:focus-visible,
  .draft-link:hover,
  .draft-link:focus-visible
) {
  border-color: var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-control-surface-hover);
  color: var(--quoc-tang-admin-text-strong);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-action:disabled,
  .admin-ui-action[aria-disabled="true"],
  .admin-ui-icon-action:disabled,
  button:disabled,
  .home-module-item.is-inactive
) {
  background: var(--quoc-tang-admin-surface-elevated);
  color: var(--quoc-tang-admin-text-disabled);
  opacity: 1;
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-status,
  .admin-status,
  .editor-status,
  .admin-notice,
  .editor-notice,
  .notice,
  .flash,
  .message,
  .alert,
  .forensics-error
) {
  border-color: var(--quoc-tang-admin-status-border);
  background: var(--quoc-tang-admin-status-surface);
  color: var(--quoc-tang-admin-status-text);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-badge,
  .admin-ui-badge.is-accent,
  .admin-ui-badge.is-success,
  .admin-ui-badge.is-muted,
  .forensics-badge,
  .forensics-badge--medium,
  .forensics-badge--high
) {
  border: 1px solid var(--quoc-tang-admin-border-strong);
  background: var(--quoc-tang-admin-surface-elevated);
  color: var(--quoc-tang-admin-text);
}
body.theme-quoc-tang:is(.page-admin-workspace, .page-account-workspace) .admin-ui-page :where(
  .admin-ui-action.is-danger,
  .admin-ui-list-action.is-danger,
  .admin-ui-icon-action.is-danger,
  .danger-btn,
  .is-danger,
  .is-error
) {
  border-color: var(--quoc-tang-danger-border);
  background: var(--quoc-tang-danger-surface);
  color: var(--quoc-tang-danger);
}
.theme-admin-form-main {
  max-width: 760px;
}
.theme-admin-options {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
.theme-admin-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-text);
}
.theme-admin-option input {
  margin-top: 3px;
  accent-color: var(--admin-accent);
}
.theme-admin-option__body {
  display: grid;
  gap: 4px;
}
.theme-admin-option__label {
  color: var(--admin-text);
  font-family: var(--font-ui);
  font-size: var(--ui-font-size-base);
  font-weight: var(--ui-weight-bold);
  line-height: var(--ui-line-tight);
}
.theme-admin-option__description {
  color: var(--admin-text-dim);
  font-family: var(--font-ui);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-muted);
}
body.topbar-mobile-menu-open {
  overflow: hidden;
}
body.topbar-mobile-menu-open #app {
  pointer-events: none;
}
body.topbar-mobile-nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.topbar a,
.genre-title,
.book-title,
h1,
h2,
h3 {
  font-family: var(--font-heading);
}

button,
input,
textarea,
select,
.muted {
  font-family: var(--font-ui);
}
a { color: inherit; text-decoration: none; }
:where(
  a[href],
  button,
  [role="button"],
  summary,
  input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])
):focus {
  outline: none;
}
:where(
  a[href],
  button,
  [role="button"],
  summary,
  input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])
):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
:where(a, button, input, textarea, select, [role="button"], summary):focus {
  outline: none !important;
  box-shadow: none !important;
}
:where(a, button, input, textarea, select, [role="button"], summary):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.topbar {
  position: sticky;
  top: 0;
  --topbar-surface: var(--shared-header-surface);
  background: var(--topbar-surface);
  border-bottom: 1px solid var(--shared-header-border-color);
  width: 100%;
  padding: 12px 0;
  padding-left: var(--shared-header-inline-padding);
  padding-right: var(--shared-header-inline-padding);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "nav logo auth";
  align-items: center;
  column-gap: var(--shared-header-inline-gap);
  row-gap: 10px;
  min-height: var(--shared-header-height);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--ui-shadow-subtle);
  z-index: 200;
}
.topbar.topbar-menu-open,
.topbar.topbar-search-open {
  --topbar-surface: var(--shared-header-surface-solid);
  background: var(--topbar-surface);
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.topbar a {
  font-weight: 600;
}
.topbar .topbar-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  justify-self: start;
  min-width: 0;
}
.topbar .topbar-mobile-menu {
  display: none;
}
.topbar .topbar-mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--shared-header-action-color-strong);
  font-family: var(--shared-header-label-font-family);
  font-size: var(--shared-header-label-font-size);
  font-weight: var(--shared-header-label-font-weight);
  letter-spacing: var(--shared-header-label-letter-spacing);
  line-height: var(--shared-header-label-line-height);
  cursor: pointer;
}
.topbar-mobile-menu-panel {
  display: none;
}
.topbar .topbar-nav-primary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 22px;
  flex-wrap: wrap;
  min-width: 0;
}
.public-site-footer {
  margin-top: 80px;
  border-top: 1px solid var(--ui-border-soft);
  background: var(--ui-bg-soft);
}
.public-site-footer__inner {
  max-width: var(--public-layout-max-width);
  margin: 0 auto;
  padding: 56px 24px 24px;
  display: grid;
  gap: 32px;
}
.public-site-footer__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 24px 48px;
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ui-border-soft);
}
.public-site-footer__brand,
.public-site-footer__intro-copy,
.public-site-footer__nav-column {
  display: grid;
  align-content: start;
}
.public-site-footer__brand {
  gap: 12px;
}
.public-site-footer__eyebrow {
  margin: 0;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.public-site-footer__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 14ch;
  text-wrap: balance;
}
.public-site-footer__intro-copy {
  gap: 16px;
  max-width: 44ch;
}
.public-site-footer__copy {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 15px;
  line-height: 1.72;
}
.public-site-footer__main {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ui-border-soft);
}
.public-site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.public-site-footer__nav-column {
  gap: 16px;
}
.public-site-footer__heading {
  margin: 0;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.public-site-footer__summary {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.public-site-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.public-site-footer__nav a {
  width: fit-content;
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.public-site-footer__nav a:hover,
.public-site-footer__nav a:focus-visible,
.public-site-footer__meta a:hover,
.public-site-footer__meta a:focus-visible {
  color: var(--ui-text-strong);
}
.public-site-footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.public-site-footer__meta-primary,
.public-site-footer__meta-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: flex-start;
}
.public-site-footer__meta-primary {
  max-width: 48ch;
}
.public-site-footer__meta-secondary {
  justify-content: flex-end;
  max-width: 56ch;
}
.public-site-footer__meta span {
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.6;
}
.public-site-footer__meta a {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 900px) {
  .public-site-footer {
    margin-top: 72px;
  }
  .public-site-footer__inner {
    gap: 32px;
    padding: 48px 24px 24px;
  }
  .public-site-footer__intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .public-site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
  .public-site-footer__meta {
    flex-direction: column;
    gap: 12px;
  }
  .public-site-footer__meta-primary,
  .public-site-footer__meta-secondary {
    justify-content: flex-start;
    max-width: none;
  }
}
@media (max-width: 640px) {
  .public-site-footer {
    margin-top: 64px;
  }
  .public-site-footer__inner {
    padding: 40px 20px 24px;
    gap: 24px;
  }
  .public-site-footer__intro {
    padding-bottom: 32px;
  }
  .public-site-footer__title {
    font-size: 24px;
  }
  .public-site-footer__main {
    padding-bottom: 24px;
  }
  .public-site-footer__nav {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .public-site-footer__links {
    gap: 8px;
  }
  .public-site-footer__meta-primary,
  .public-site-footer__meta-secondary {
    display: grid;
    gap: 8px;
  }
}
.topbar .topbar-nav-item,
.topbar .topbar-mobile-nav-item {
  min-width: 0;
}
.topbar .topbar-nav-primary > a,
.topbar .topbar-categories-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  color: var(--shared-header-action-color-strong);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--shared-header-label-font-family);
  font-weight: var(--shared-header-label-font-weight);
  font-size: var(--shared-header-label-font-size);
  letter-spacing: var(--shared-header-label-letter-spacing);
  line-height: var(--shared-header-label-line-height);
  transition: color 160ms var(--topbar-flyout-ease), opacity 160ms var(--topbar-flyout-ease), border-color 160ms var(--topbar-flyout-ease);
}
.topbar .topbar-nav-primary > a:hover,
.topbar .topbar-categories-toggle:hover {
  color: var(--ui-link-hover);
}
.topbar .topbar-categories {
  position: static;
  display: inline-flex;
  min-width: 0;
}
.topbar .topbar-categories-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  border-bottom: 1px solid var(--ui-border-soft);
  background: var(--topbar-surface);
  box-shadow: none;
  backdrop-filter: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height var(--topbar-flyout-duration) var(--topbar-flyout-ease),
    opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease),
    visibility 0s linear var(--topbar-flyout-duration);
  z-index: 70;
}
.topbar .topbar-dropdown-menu.is-open .topbar-categories-dropdown {
  max-height: var(--topbar-flyout-max-height);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.topbar.topbar-menu-open .topbar-categories-dropdown {
  background: var(--topbar-surface);
  backdrop-filter: none;
}
/*
 * Navigation triggers - shared contract
 *
 * Group ownership:
 * - .topbar-categories-toggle
 * - desktop dropdown triggers for library / editor
 * - mobile compact nav trigger shape (media overrides below)
 *
 * This group is intentionally separate from toolbar buttons:
 * it owns disclosure/menu-opening behavior rather than tool actions.
 */
.topbar .topbar-categories-toggle {
  gap: 8px;
  position: relative;
  z-index: 72;
  transform: none;
  transition: color 160ms var(--topbar-flyout-ease), opacity 160ms var(--topbar-flyout-ease), border-color 160ms var(--topbar-flyout-ease), background-color 160ms var(--topbar-flyout-ease);
}
.topbar .topbar-categories-toggle-mark {
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1;
  opacity: 0.62;
  transition: transform var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease), opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease);
}
.topbar .topbar-dropdown-menu.is-open .topbar-categories-toggle-mark {
  transform: rotate(180deg);
  opacity: 0.9;
}
.topbar .topbar-dropdown-menu.is-open .topbar-categories-toggle {
  color: var(--ui-text-strong);
  background: transparent;
  box-shadow: none;
}
.topbar .topbar-categories-panel {
  position: static;
  display: block;
  margin-top: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: none;
  z-index: auto;
}
.topbar .topbar-categories-panel.show {
  opacity: 1;
}
@supports selector(.topbar:has(.topbar-dropdown-menu.is-open)) {
  .topbar:has(.topbar-dropdown-menu.is-open) {
    border-bottom-color: transparent;
    box-shadow: none;
  }
}
.topbar .topbar-categories-panel-inner {
  width: min(var(--shared-header-content-max-width), calc(100vw - (var(--topbar-inline-gutter) * 2)));
  margin: 0 auto;
  display: grid;
  gap: 0;
  padding: 14px 0 18px;
  transform: translateY(calc(var(--topbar-flyout-offset) * -1));
  opacity: 0;
  transition:
    transform var(--topbar-flyout-content-duration) var(--topbar-flyout-ease),
    opacity var(--topbar-flyout-content-duration) var(--topbar-flyout-ease);
}
.topbar .topbar-dropdown-menu.is-open .topbar-categories-panel-inner {
  transform: translateY(0);
  opacity: 1;
  transition-delay: var(--topbar-flyout-content-delay), var(--topbar-flyout-content-delay);
}
.topbar .topbar-categories-panel-content,
.topbar .topbar-categories-desktop-content {
  display: block;
}
.topbar .topbar-library-panel .topbar-categories-panel-inner {
  width: min(960px, calc(100vw - 48px));
}
.topbar .topbar-library-groups {
  display: grid;
  gap: 12px;
}
.topbar .topbar-library-group {
  min-width: 0;
}
.topbar .topbar-library-group--categories {
  padding-top: 12px;
  border-top: 1px solid var(--shared-header-library-divider-color);
}
.topbar .topbar-library-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar-mobile-domains {
  display: none;
}
.topbar .topbar-categories-mobile-content {
  display: none;
}
.topbar .topbar-mobile-shell-header,
.topbar .topbar-mobile-shell-close {
  display: none;
}
.topbar .topbar-categories-mobile-nav {
  display: block;
}
.topbar .topbar-mobile-primary-list,
.topbar .topbar-categories-mobile-primary-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar .topbar-mobile-primary-item {
  display: grid;
  gap: 0;
  border: none;
  box-shadow: none;
}
.topbar .topbar-mobile-primary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 6px 0;
  border: none;
  border-bottom: none;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.topbar .topbar-mobile-primary-toggle:hover,
.topbar .topbar-mobile-primary-toggle:focus-visible {
  color: var(--ui-text-strong);
}
.topbar .topbar-mobile-primary-label {
  display: block;
}
.topbar .topbar-mobile-primary-mark {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  color: var(--ui-text-muted);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease), opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease);
}
.topbar .topbar-mobile-primary-item[data-open="true"] .topbar-mobile-primary-mark {
  transform: rotate(0deg);
}
.topbar .topbar-mobile-primary-item[data-open="true"] .topbar-mobile-primary-mark::before {
  content: "-";
}
.topbar .topbar-mobile-primary-item[data-open="false"] .topbar-mobile-primary-mark::before {
  content: "+";
}
.topbar .topbar-mobile-primary-mark {
  color: transparent;
  position: relative;
}
.topbar .topbar-mobile-primary-mark::before {
  color: var(--ui-text-muted);
}
.topbar .topbar-mobile-primary-panel {
  display: block;
  overflow: hidden;
  padding-top: 2px;
  border: none;
  box-shadow: none;
  background-image: none;
}
.topbar .topbar-mobile-primary-item--categories,
.topbar .topbar-categories-mobile-primary-list {
  border: none;
  box-shadow: none;
  background-image: none;
}
.topbar .topbar-mobile-primary-item--categories::before,
.topbar .topbar-mobile-primary-item--categories::after,
.topbar .topbar-mobile-primary-toggle::before,
.topbar .topbar-mobile-primary-toggle::after,
.topbar .topbar-mobile-primary-panel::before,
.topbar .topbar-mobile-primary-panel::after,
.topbar .topbar-categories-mobile-primary-list::before,
.topbar .topbar-categories-mobile-primary-list::after {
  content: none;
}
.topbar .topbar-mobile-primary-panel[hidden] {
  display: none;
}
.topbar .topbar-mobile-primary-item[data-open="false"] .topbar-mobile-primary-panel {
  display: none;
}
.topbar .topbar-mobile-primary-item[data-open="true"] .topbar-mobile-primary-panel {
  display: block;
}
.topbar .topbar-categories-mobile-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0 0 0 12px;
  border-top: none;
  list-style: none;
}
.topbar .topbar-categories-mobile-list .topbar-mobile-category-item {
  display: block;
  border-top: none;
  list-style: none;
}
.topbar .topbar-categories-mobile-list .topbar-mobile-category-item:first-child {
  border-top: none;
  margin-top: -1px;
}
.topbar .topbar-categories-mobile-list .topbar-mobile-category-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 5px 0;
  border: none;
  border-top: none;
  color: var(--ui-text);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  list-style: none;
}
.topbar .topbar-categories-mobile-list .topbar-mobile-category-item:first-child .topbar-mobile-category-link {
  border-top: none;
  box-shadow: none;
  padding-top: 3px;
}
.topbar .topbar-categories-mobile-list .topbar-mobile-category-parent {
  color: var(--ui-text);
  font-weight: 400;
}
.topbar .topbar-categories-mobile-list .topbar-mobile-category-link:hover,
.topbar .topbar-categories-mobile-list .topbar-mobile-category-link:focus-visible {
  color: var(--ui-text-strong);
}
.topbar .topbar-mobile-secondary-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding-top: 6px;
}
.topbar .topbar-mobile-secondary-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  padding: 3px 0;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
}
.topbar .topbar-mobile-secondary-link:hover,
.topbar .topbar-mobile-secondary-link:focus-visible {
  color: var(--ui-text);
}
.topbar .topbar-desktop-auth-block {
  display: flex;
}
.topbar .topbar-mobile-auth-block {
  display: none;
}
.topbar .topbar-categories-nav,
.topbar .topbar-categories-desktop-nav,
.topbar .topbar-categories-groups,
.topbar .topbar-categories-desktop-groups,
.topbar .topbar-categories-grid,
.topbar .topbar-categories-list,
.topbar .topbar-categories-group-list,
.topbar .topbar-category-group-links {
  display: block;
}
.topbar .topbar-categories-grid,
.topbar .topbar-categories-list {
  display: grid;
  grid-template-columns: repeat(var(--topbar-category-columns, 3), minmax(0, 1fr));
  gap: 20px 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar .topbar-categories-groups,
.topbar .topbar-categories-desktop-groups {
  display: grid;
  grid-template-columns: repeat(var(--topbar-category-columns, 3), minmax(0, 1fr));
  gap: 22px 64px;
}
.topbar .topbar-category-group {
  display: grid;
  gap: 12px;
  align-content: start;
}
.topbar .topbar-categories-desktop-group-head {
  display: block;
}
.topbar .topbar-categories-desktop-group-body {
  display: block;
}
.topbar .topbar-category-group-title {
  display: inline-flex;
  width: fit-content;
  color: var(--ui-text);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ui-border-hairline);
  padding-bottom: 6px;
}
.topbar .topbar-categories-group-list,
.topbar .topbar-category-group-links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar .topbar-category-group-meta {
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.7;
  max-width: 26ch;
}
.topbar .topbar-categories-link,
.topbar .topbar-category-link {
  display: grid;
  gap: 0;
  align-content: start;
  min-height: 0;
  padding: 0;
  border-bottom: none;
  color: var(--ui-text-strong);
  transition: color 140ms ease, opacity 140ms ease;
}
.topbar .topbar-categories-item,
.topbar .topbar-categories-desktop-item {
  min-width: 0;
  margin: 0;
}
.topbar .topbar-categories-link:hover,
.topbar .topbar-categories-link:focus-visible,
.topbar .topbar-category-link:hover,
.topbar .topbar-category-link:focus-visible {
  color: var(--ui-text-strong);
  opacity: 0.9;
}
.topbar .topbar-categories-link-name,
.topbar .topbar-category-link-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.01em;
  text-wrap: balance;
  word-break: break-word;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 140ms ease;
}
.topbar .topbar-categories-link:hover .topbar-categories-link-name,
.topbar .topbar-categories-link:focus-visible .topbar-categories-link-name,
.topbar .topbar-category-link:hover .topbar-category-link-name,
.topbar .topbar-category-link:focus-visible .topbar-category-link-name {
  text-decoration-color: var(--ui-divider-strong);
}
.topbar .topbar-categories-link-meta,
.topbar .topbar-category-link-meta,
.topbar .topbar-categories-empty {
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.7;
}
.topbar .topbar-categories-link-meta,
.topbar .topbar-category-link-meta {
  display: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.topbar .topbar-categories-empty {
  padding: 4px 0 0;
}
@media (max-width: 1180px) and (min-width: 769px) {
  .topbar .topbar-categories-list,
  .topbar .topbar-categories-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 48px;
  }
}
.topbar .topbar-auth {
  grid-area: auth;
  position: relative;
  display: inline-flex;
  min-width: 0;
  justify-self: end;
}
.topbar .topbar-auth .topbar-auth-toggle {
  display: none;
}
.topbar .topbar-auth .topbar-auth-toggle::-webkit-details-marker {
  display: none;
}
.topbar .topbar-auth .topbar-auth-panel {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
@media (min-width: 769px) {
  .topbar details.topbar-auth:not([open]) > .topbar-auth-panel,
  .topbar details.topbar-auth[open] > .topbar-auth-panel {
    display: inline-flex;
  }
}
.topbar .auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface-solid);
  color: var(--ui-text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.topbar .auth-btn:hover {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-hover);
  text-decoration: none;
}
.topbar .auth-btn.auth-btn-primary {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-on-accent);
}
.topbar .auth-btn.auth-btn-primary:hover {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}
.topbar .auth-btn.auth-btn-logout {
  background: var(--ui-accent-muted);
  border-color: var(--ui-accent-muted);
  color: var(--ui-on-accent);
}
.topbar .auth-btn.auth-btn-logout:hover {
  background: var(--ui-text-muted);
  border-color: var(--ui-text-muted);
}
.topbar .auth-btn.auth-btn-editor {
  min-width: auto;
  min-height: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ui-symbol-hammer-sickle);
  box-shadow: none;
}
.topbar .auth-btn.auth-btn-editor:hover {
  background: transparent;
  color: var(--ui-symbol-hammer-sickle);
  box-shadow: none;
}
.topbar .topbar-editor-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(0);
  color: var(--ui-symbol-hammer-sickle);
}
.topbar .topbar-editor-menu {
  position: static;
  display: inline-flex;
  align-items: center;
}
.topbar .topbar-nav-item-editor.is-open .topbar-editor-toggle {
  color: var(--ui-symbol-hammer-sickle);
  background: transparent;
  box-shadow: none;
}
.topbar .topbar-editor-toggle {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.topbar .topbar-account-toggle {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 10px;
  min-height: 36px;
  max-width: min(42ch, 62vw);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  color: var(--shared-header-action-color);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  transition: color 160ms var(--topbar-flyout-ease), opacity 160ms var(--topbar-flyout-ease);
}
.topbar .topbar-account-toggle:hover {
  background: transparent;
}
.topbar .topbar-account-toggle .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: calc(min(42ch, 62vw) - 24px);
}
.topbar .topbar-account-toggle .caret {
  opacity: 0.78;
  font-size: 11px;
  flex: 0 0 auto;
}
.topbar .topbar-categories-link[aria-current="page"],
.topbar .topbar-category-link[aria-current="page"] {
  color: var(--ui-text-strong);
}
.topbar .topbar-categories-link[aria-current="page"] .topbar-categories-link-name,
.topbar .topbar-category-link[aria-current="page"] .topbar-category-link-name {
  text-decoration-color: var(--ui-divider-strong);
}
.topbar .topbar-user {
  margin-left: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ui-text-muted);
  padding: 6px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface-solid);
  max-width: 42ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .topbar-logo-link {
  grid-area: logo;
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--shared-header-logo-size);
  height: var(--shared-header-logo-size);
  border-radius: 0;
  padding: 0;
  overflow: visible;
  justify-self: center;
  background: transparent;
  box-shadow: none;
}
.topbar .topbar-logo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  object-fit: contain;
}
.topbar.topbar-layout-12 {
  grid-template-columns: var(--layout-grid-columns);
  grid-template-areas: none;
  column-gap: var(--layout-grid-gap);
  row-gap: 10px;
  align-items: center;
}
.topbar.topbar-layout-12 > * {
  grid-row: 1;
  min-width: 0;
  align-self: center;
}
.topbar.topbar-layout-12 .topbar-nav {
  grid-area: auto;
  grid-column: 1 / span 4;
}
.topbar.topbar-layout-12 .topbar-logo-link {
  grid-area: auto;
  grid-column: 5 / span 4;
  justify-self: center;
}
.topbar.topbar-layout-12 .topbar-slot-actions {
  grid-column: 9 / span 4;
  display: flex;
  justify-self: end;
  justify-content: flex-end;
  align-items: center;
  gap: var(--shared-header-right-gap);
  min-width: 0;
}
.topbar.topbar-layout-12 .topbar-extra-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.topbar.topbar-layout-12 .topbar-slot-actions .topbar-slot-search {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
}
.topbar.topbar-layout-12 .topbar-slot-actions .topbar-slot-user {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--shared-header-account-gap);
  min-width: 0;
  position: relative;
}
.topbar.topbar-layout-12 .topbar-slot-actions .topbar-slot-user > * {
  flex: 0 0 auto;
}
/*
 * Toolbar buttons - desktop shared contract
 *
 * Group ownership:
 * - .topbar-icon-btn
 * - .topbar-editor-toggle
 * - .topbar-account-toggle.topbar-account-toggle--icon
 *
 * This block keeps the current visuals unchanged and only centralizes
 * the shared toolbar-button contract before later group-by-group cleanup.
 */
.topbar :is(.topbar-icon-btn, .topbar-editor-toggle, .topbar-account-toggle.topbar-account-toggle--icon) {
  flex: 0 0 var(--shared-header-control-size);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--shared-header-action-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease;
}
.topbar .topbar-icon-btn.is-active {
  color: var(--shared-header-action-color-strong);
  background: var(--shared-header-hover-surface);
  transform: none;
}
/* Header-icon marker keeps flyout timing aligned for search/book-qa/editor. */
.topbar .topbar-header-icon-btn {
  transition: color 160ms var(--topbar-flyout-ease), background-color 160ms var(--topbar-flyout-ease), opacity 160ms var(--topbar-flyout-ease);
}
/* Search trigger state owner: touch fallback + open state live here. */
@media (hover: none) {
  .topbar .topbar-search-trigger:hover {
    color: var(--shared-header-action-color-strong);
    background: transparent;
  }
}
.topbar #topbarAdminToggle.topbar-header-icon-btn:is(:hover, :focus-visible) {
  color: var(--ui-symbol-hammer-sickle);
}
.topbar :is(.topbar-icon-btn, .topbar-account-toggle.topbar-account-toggle--icon) svg {
  width: 20px;
  height: 20px;
  display: block;
}
.topbar .topbar-slot-search {
  min-width: 0;
}
.topbar .topbar-search-trigger {
  position: relative;
  z-index: 72;
}
.topbar #topbarSearchToggle .topbar-search-trigger-icon--close {
  display: none;
}
.topbar #topbarSearchToggle[aria-expanded="true"] .topbar-search-trigger-icon--search {
  display: none;
}
.topbar #topbarSearchToggle[aria-expanded="true"] .topbar-search-trigger-icon--close {
  display: block;
}
.topbar .topbar-slot-search.is-open .topbar-search-trigger {
  color: var(--ui-text-strong);
  background: transparent;
  box-shadow: none;
}
.topbar .topbar-search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  border-bottom: 1px solid var(--ui-border-subtle);
  background: var(--topbar-surface);
  box-shadow: none;
  backdrop-filter: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease),
    visibility 0s linear var(--topbar-flyout-fade-duration);
  z-index: 70;
}
.topbar .topbar-slot-search.is-open .topbar-search-dropdown {
  max-height: var(--topbar-flyout-max-height);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
  transition-delay: 0s, 0s;
}
.topbar .topbar-search-panel {
  position: static;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: auto;
}
.topbar .topbar-search-panel-inner {
  width: min(var(--shared-header-content-max-width), calc(100vw - (var(--topbar-inline-gutter) * 2)));
  margin: 0 auto;
  padding: 14px 0 18px;
  transform: translateY(calc(var(--topbar-flyout-offset) * -1));
  opacity: 0;
  transition:
    transform var(--topbar-flyout-duration) var(--topbar-flyout-ease),
    opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease);
}
.topbar .topbar-slot-search.is-open .topbar-search-panel-inner {
  transform: translateY(0);
  opacity: 1;
}
.topbar .topbar-search-panel-content {
  display: grid;
  gap: 8px;
}
.topbar .topbar-search-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--ui-border-soft);
  border-radius: 0;
  background: transparent;
  transition: border-color 160ms var(--topbar-flyout-ease), color 160ms var(--topbar-flyout-ease);
}
.topbar .topbar-search-form:has(.topbar-search-input:focus-visible) {
  border-color: var(--ui-border-soft);
  background: transparent;
  box-shadow: none;
}
.topbar .topbar-search-leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-muted);
}
.topbar .topbar-search-inline-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.topbar .topbar-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.topbar .topbar-search-input::placeholder {
  color: var(--ui-text-soft);
}
.topbar .topbar-search-input::-webkit-search-cancel-button,
.topbar .topbar-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.topbar .topbar-search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.topbar .topbar-search-submit {
  display: none;
}
.topbar .topbar-search-meta,
.topbar .topbar-panel-title {
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
}
.topbar .topbar-search-meta {
  position: static;
  min-height: 0;
  padding: 0;
}
.topbar .topbar-search-shortcuts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: start;
  gap: 6px;
  padding-top: 2px;
}
.topbar .topbar-search-shortcuts-label {
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar .topbar-search-shortcuts-nav {
  min-width: 0;
  width: 100%;
}
.topbar .topbar-search-shortcuts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar .topbar-search-shortcuts-item {
  min-width: 0;
}
.topbar .topbar-search-shortcuts-link {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 0 2px;
  border-bottom: 1px solid transparent;
  color: var(--ui-text);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.008em;
  line-height: 1.4;
  transition: color 160ms var(--topbar-flyout-ease), border-color 160ms var(--topbar-flyout-ease);
}
.topbar .topbar-search-shortcuts-link:hover,
.topbar .topbar-search-shortcuts-link:focus-visible {
  color: var(--ui-text);
  border-bottom-color: var(--ui-divider-strong);
}
.topbar .topbar-search-meta:empty {
  display: none;
}
.topbar .topbar-account-toggle.topbar-account-toggle--icon {
  width: var(--shared-header-account-size);
  height: var(--shared-header-account-size);
  min-width: var(--shared-header-account-size);
  min-height: var(--shared-header-account-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.topbar .topbar-account-toggle.topbar-account-toggle--icon .name,
.topbar .topbar-account-toggle.topbar-account-toggle--icon .caret {
  display: none;
}
.topbar.reader-topbar {
  row-gap: 0;
}
.topbar.reader-topbar .reader-topbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}
.topbar.reader-topbar .reader-topbar-actions > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.topbar.reader-topbar .reader-close-btn,
.topbar.reader-topbar .topbar-save-btn,
.topbar.reader-topbar .viewer-switch-btn {
  width: auto;
  min-width: max-content;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ui-link);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}
.topbar.reader-topbar .topbar-save-btn {
  min-width: 7.5ch;
  text-align: center;
}
.topbar.reader-topbar .reader-close-btn:hover,
.topbar.reader-topbar .topbar-save-btn:hover,
.topbar.reader-topbar .viewer-switch-btn:hover {
  background: transparent;
  color: var(--ui-link);
  box-shadow: none;
  transform: none;
}
.topbar.reader-topbar .topbar-save-btn.saving {
  opacity: 0.82;
  cursor: wait;
}
.topbar.reader-topbar .topbar-save-btn.saved {
  background: transparent;
  color: var(--ui-accent-muted);
}
.container {
  padding: var(--layout-padding);
}
.container:not(.reader-shell) {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}
.layout-shell {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--layout-padding);
}
.layout-grid,
.layout-grid-12 {
  display: grid;
  grid-template-columns: var(--layout-grid-columns);
  gap: var(--layout-grid-gap);
  align-items: start;
}
.layout-stack-8 { display: grid; gap: var(--space-1); }
.layout-stack-16 { display: grid; gap: var(--space-2); }
.layout-stack-24 { display: grid; gap: var(--space-3); }
.layout-stack-32 { display: grid; gap: var(--space-4); }
.layout-span-12 { grid-column: 1 / -1; }
.layout-span-9 { grid-column: span 9; }
.layout-span-8 { grid-column: span 8; }
.layout-span-7 { grid-column: span 7; }
.layout-span-6 { grid-column: span 6; }
.layout-span-5 { grid-column: span 5; }
.layout-span-4 { grid-column: span 4; }
.layout-span-3 { grid-column: span 3; }
.layout-span-2 { grid-column: span 2; }
.book-list-page-shell.container,
.book-list-page-shell {
  max-width: var(--book-list-page-max-width);
  margin: 0 auto;
  padding-left: var(--book-list-page-inline-padding);
  padding-right: var(--book-list-page-inline-padding);
}
body[data-page-kind="home"],
body[data-page-kind="category"],
body[data-page-kind="detail"],
body[data-page-kind="library-search"] {
  --layout-content-max-width: var(--public-layout-content-max-width);
}
body[data-page-kind="home"] .book-list-page-shell.container,
body[data-page-kind="home"] .book-list-page-shell,
body[data-page-kind="category"] .book-list-page-shell.container,
body[data-page-kind="category"] .book-list-page-shell,
body[data-page-kind="detail"] .book-list-page-shell.container,
body[data-page-kind="detail"] .book-list-page-shell,
body[data-page-kind="library-search"] .book-list-page-shell.container,
body[data-page-kind="library-search"] .book-list-page-shell,
body[data-page-kind="detail"] .layout-shell.container,
body[data-page-kind="detail"] .layout-shell {
  max-width: var(--public-layout-max-width);
  padding-left: var(--public-layout-padding);
  padding-right: var(--public-layout-padding);
}
body.page-public-content-start-lock .book-list-page-shell.container,
body.page-public-content-start-lock .book-list-page-shell {
  padding-left: var(--surface-shell-inline-padding);
  padding-right: var(--surface-shell-inline-padding);
}
body.st-non-reader-shell {
  --public-layout-max-width: var(--app-shell-max-width);
  --public-layout-padding: var(--app-shell-gutter);
  --public-layout-content-max-width: var(--app-shell-max-width);
  --public-layout-header-max-width: var(--app-shell-max-width);
  --layout-max-width: var(--app-shell-max-width);
  --layout-padding: var(--app-shell-gutter);
  --layout-content-max-width: var(--app-shell-max-width);
  --book-list-page-max-width: var(--app-shell-max-width);
  --book-list-page-inline-padding: 0px;
  --shared-header-content-max-width: var(--app-shell-max-width);
  --topbar-inline-gutter: var(--app-shell-gutter);
}
body.st-non-reader-shell .topbar {
  padding-left: var(--app-shell-rail-inset);
  padding-right: var(--app-shell-rail-inset);
}
body.st-non-reader-shell .topbar .topbar-categories-panel-inner,
body.st-non-reader-shell .topbar .topbar-search-panel-inner,
body.st-non-reader-shell .container:not(.reader-shell),
body.st-non-reader-shell .layout-shell,
body.st-non-reader-shell .book-list-page-shell,
body.st-non-reader-shell .admin-ui-shell,
body.st-non-reader-shell .editorial-article-shell,
body.st-non-reader-shell .public-site-footer__inner,
body.st-non-reader-shell .st-public-banner-band--full-bleed .st-public-banner__inner,
body.st-non-reader-shell .st-public-banner-slider__controls {
  width: var(--app-shell-rail-width);
  max-width: none;
  margin-inline: auto;
}
body.st-non-reader-shell .container:not(.reader-shell),
body.st-non-reader-shell .layout-shell,
body.st-non-reader-shell .book-list-page-shell,
body.st-non-reader-shell .admin-ui-shell,
body.st-non-reader-shell .editorial-article-shell {
  padding-left: 0;
  padding-right: 0;
}
body.st-non-reader-shell .public-site-footer__inner,
body.st-non-reader-shell .st-public-banner-band--full-bleed .st-public-banner__inner,
body.st-non-reader-shell .st-public-banner-slider__controls {
  padding-left: 0;
  padding-right: 0;
}
body:is(.flip-page, .epub-v2-reader-page) {
  --shared-header-content-max-width: var(--app-shell-max-width);
  --topbar-inline-gutter: var(--app-shell-gutter);
}
body:is(.flip-page, .epub-v2-reader-page) > .shared-header-shell .topbar {
  padding-left: var(--app-shell-rail-inset);
  padding-right: var(--app-shell-rail-inset);
}
body:is(.flip-page, .epub-v2-reader-page) > .shared-header-shell .topbar .topbar-categories-panel-inner,
body:is(.flip-page, .epub-v2-reader-page) > .shared-header-shell .topbar .topbar-search-panel-inner {
  width: var(--app-shell-rail-width);
  max-width: none;
  margin-inline: auto;
}
body.st-non-reader-shell .public-content-start-shell {
  max-width: 100%;
}
.book-list-page {
  display: grid;
  gap: var(--listing-page-stack-gap, 40px);
  padding: 16px 0 var(--listing-page-bottom-padding, 80px);
}
.st-public-banner-band {
  position: relative;
  display: block;
  width: 100%;
}
body[data-page-kind="home"] .st-public-banner-band--full-bleed {
  margin-bottom: 0;
}
body[data-page-kind="home"] .book-list-page-shell.container,
body[data-page-kind="home"] .book-list-page-shell,
body[data-page-kind="library-search"] .book-list-page-shell.container,
body[data-page-kind="library-search"] .book-list-page-shell {
  padding-top: 0;
}
body[data-page-kind="home"] #app .home-content-stack {
  padding-top: var(--home-banner-section-gap, 0px);
}
.st-public-banner-slider {
  position: relative;
  width: 100%;
  display: grid;
  align-items: stretch;
  min-height: 0;
  gap: 18px;
}
.st-public-banner-slider__viewport {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  min-height: 0;
}
.st-public-banner-slider__track {
  display: flex;
  width: 100%;
  transition: transform 320ms cubic-bezier(0.28, 0.11, 0.32, 1);
  will-change: transform;
}
.st-public-banner {
  position: relative;
  display: block;
  width: 100%;
  flex: 0 0 100%;
  min-width: 0;
}
.st-public-banner__surface {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 27 / 10;
  padding: clamp(24px, 2.4vw, 36px) 0;
  background: var(--st-public-banner-surface-bg, var(--st-public-banner-config-bg, var(--ui-banner-default-bg)));
  color: var(--st-public-banner-text-color, var(--ui-text-strong));
  overflow: hidden;
}
/* Approved banner exception (DESIGN_SYSTEM.md, D-058): one trống-đồng image between the flat
   colour and the banner content, centred and scaled so the drum covers the whole surface. */
.st-public-banner__surface--layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--st-public-banner-layer-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--st-public-banner-drum-size) auto;
  opacity: var(--st-public-banner-layer-opacity, 0.1);
}
.st-public-banner__surface--layer > .st-public-banner__inner {
  position: relative;
  z-index: 1;
}
body.theme-quoc-tang .st-public-banner__surface--layer::before {
  content: none;
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .st-public-banner__surface--layer::before {
    content: none;
  }
}
body:not(.theme-quoc-tang):not(.theme-quoc-tang) .st-public-banner__surface--layer.st-public-banner__surface--tone-light {
  --st-public-banner-muted-color: var(--ui-text);
}
body:not(.theme-quoc-tang):not(.theme-quoc-tang) .st-public-banner__surface--layer.st-public-banner__surface--tone-dark {
  --st-public-banner-text-color: var(--st-public-banner-on-dark-text);
  --st-public-banner-title-color: var(--st-public-banner-on-dark-text);
  --st-public-banner-muted-color: var(--st-public-banner-on-dark-muted);
  --st-public-banner-action-color: var(--st-public-banner-on-dark-text);
  --st-public-banner-action-border-color: var(--st-public-banner-on-dark-border);
  --st-public-banner-action-hover-color: var(--st-public-banner-on-dark-dot-active);
  --st-public-banner-action-border-hover-color: var(--st-public-banner-on-dark-text);
}
body:not(.theme-quoc-tang):not(.theme-quoc-tang) .st-public-banner-slider:has(.st-public-banner-slide.is-active .st-public-banner__surface--tone-dark) {
  --st-public-banner-dot-color: var(--st-public-banner-on-dark-dot);
  --st-public-banner-dot-active-color: var(--st-public-banner-on-dark-dot-active);
  --st-public-banner-dot-hover-color: var(--st-public-banner-on-dark-text);
}
/* Approved banner exception (DESIGN_SYSTEM.md, D-059 P1): the auto colour is a tiny cover-derived
   field image stretched over the flat colour; the browser's smooth upscaling makes the glow. */
.st-public-banner__surface--field {
  background-image: var(--st-public-banner-field-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.st-public-banner__surface--field > .st-public-banner__inner {
  position: relative;
  z-index: 1;
}
body.theme-quoc-tang .st-public-banner-band .st-public-banner__surface--field {
  background-image: none;
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .st-public-banner-band .st-public-banner__surface--field {
    background-image: none;
  }
}
.st-public-banner__inner {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: stretch;
}
.st-public-banner-band--full-bleed .st-public-banner__inner,
.st-public-banner-slider__controls {
  max-width: var(--public-layout-max-width);
  margin: 0 auto;
  padding-left: var(--shared-header-inline-padding);
  padding-right: var(--shared-header-inline-padding);
}
.st-public-banner__content,
.st-public-banner__media {
  min-width: 0;
  min-height: 0;
}
.st-public-banner__media {
  position: relative;
  width: 100%;
  align-self: stretch;
  min-height: min(100%, var(--banner-min-height, 420px));
  height: auto;
}
.st-public-banner__content {
  grid-column: 1 / span 5;
  display: grid;
  align-content: center;
  gap: 18px;
  padding-right: clamp(8px, 1vw, 16px);
}
.st-public-banner__eyebrow {
  margin: 0;
  color: var(--st-public-banner-muted-color, var(--ui-text-soft));
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.st-public-banner__copy-stack {
  display: grid;
  gap: 12px;
  max-width: 38rem;
}
.st-public-banner__title {
  margin: 0;
  color: var(--st-public-banner-title-color, var(--ui-text-strong));
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.st-public-banner__description {
  margin: 0;
  max-width: 46ch;
  color: var(--st-public-banner-muted-color, var(--ui-text-muted));
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}
.st-public-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
/* Banner CTA owner: keep the public banner action self-contained across banner variants. */
.st-public-banner__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--st-public-banner-action-border-color, var(--ui-border-overlay));
  color: var(--st-public-banner-action-color, var(--ui-text-strong));
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: opacity 0.16s ease, border-color 0.16s ease;
}
.st-public-banner__action:hover,
.st-public-banner__action:focus-visible {
  opacity: 0.92;
  border-color: var(--st-public-banner-action-border-hover-color, var(--ui-border-overlay));
  color: var(--st-public-banner-action-hover-color, var(--st-public-banner-action-color, var(--ui-text-strong)));
}
.st-public-banner__media--desktop {
  grid-column: 6 / -1;
  display: grid;
  height: 100%;
  min-height: 0;
  align-items: end;
  justify-items: center;
}
.st-public-banner--editorial-3-covers .st-public-banner__surface {
  padding-block: clamp(18px, 1.6vw, 26px);
}
.st-public-banner--editorial-3-covers .st-public-banner__inner {
  grid-template-columns: 1fr;
}
.st-public-banner-band--full-bleed .st-public-banner--editorial-3-covers .st-public-banner__inner {
  max-width: none;
  padding-left: clamp(22px, 2vw, 30px);
  padding-right: clamp(22px, 2vw, 30px);
}
.st-public-banner--editorial-3-covers .st-public-banner__media--desktop,
.st-public-banner--editorial-3-covers .st-public-banner__media--mobile {
  grid-column: 1 / -1;
  align-items: center;
  justify-items: center;
}
.st-public-banner__editorial-cover-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.st-public-banner--editorial-3-covers .st-public-banner__media--desktop .st-public-banner__editorial-cover-row {
  --st-editorial-cover-fallback-height: clamp(260px, 27vw, 390px);
  width: min(100%, var(--st-editorial-composition-width, 960px));
  max-width: 100%;
  height: var(--st-editorial-composition-height, var(--st-editorial-cover-fallback-height));
  max-height: 100%;
  gap: var(--st-editorial-cover-gap, 28px);
}
/* Editorial cover-link owner: keep banner cover links self-contained across desktop/mobile variants. */
.st-public-banner__editorial-cover-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.16s ease;
  flex: 0 0 auto;
}
.st-public-banner--editorial-3-covers .st-public-banner__media--desktop .st-public-banner__editorial-cover-link {
  height: var(--st-editorial-cover-slot-height, var(--st-editorial-cover-height, var(--st-editorial-cover-fallback-height, 360px)));
  align-items: flex-end;
}
.st-public-banner__editorial-cover-link:hover,
.st-public-banner__editorial-cover-link:focus-visible {
  opacity: 0.94;
}
.st-public-banner__editorial-cover {
  margin: 0;
  width: auto;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.st-public-banner--editorial-3-covers .st-public-banner__media--desktop .st-public-banner__editorial-cover {
  height: 100%;
}
.st-public-banner__editorial-cover img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.st-public-banner__editorial-cover-row--mobile {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.st-public-banner__editorial-cover--mobile {
  width: min(100%, var(--st-editorial-mobile-cover-width, var(--st-public-banner-mobile-media-width)));
  height: min(100%, var(--st-editorial-mobile-cover-height, 360px));
}
.st-public-banner__media--mobile {
  display: none;
}
.st-public-banner__hero-image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}
.st-public-banner__hero-image-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.st-public-banner__desktop-stack {
  width: min(100%, 580px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.78fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: end;
}
.st-public-banner__tile {
  margin: 0;
  min-width: 0;
  align-self: end;
}
.st-public-banner__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.st-public-banner__tile--desktop {
  aspect-ratio: var(--st-banner-cover-ratio, 2 / 3);
}
.st-public-banner__tile--desktop.st-public-banner__tile--slot-1 {
  align-self: stretch;
}
.st-public-banner__tile--desktop.st-public-banner__tile--slot-2,
.st-public-banner__tile--desktop.st-public-banner__tile--slot-3,
.st-public-banner__tile--desktop.st-public-banner__tile--slot-4 {
  max-height: 72%;
}
.st-public-banner__mobile-stack {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: end;
  gap: 12px;
}
.st-public-banner__tile--mobile {
  aspect-ratio: var(--st-banner-cover-ratio, 2 / 3);
  max-width: 100%;
}
.st-public-banner__tile--mobile.st-public-banner__tile--slot-1 {
  grid-column: 1 / -1;
  width: min(100%, 170px);
  justify-self: center;
}
.st-public-banner__tile--mobile.st-public-banner__tile--slot-2,
.st-public-banner__tile--mobile.st-public-banner__tile--slot-3 {
  width: min(100%, 126px);
  justify-self: center;
}
.st-public-banner-slider__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.st-banner-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: auto;
}
.st-banner-dots .st-public-banner-slider__dot {
  pointer-events: auto;
}
.st-public-banner-slider__dot {
  display: block;
  width: 6px;
  height: 6px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--st-public-banner-dot-color, var(--ui-text-soft));
  cursor: pointer;
  transition: width 160ms ease, height 160ms ease, opacity 160ms ease, background-color 160ms ease;
}
.st-public-banner-slider__dot.is-active {
  width: 8px;
  height: 8px;
  background: var(--st-public-banner-dot-active-color, var(--ui-text-strong));
}
.st-public-banner-slider__dot:hover,
.st-public-banner-slider__dot:focus-visible {
  background: var(--st-public-banner-dot-hover-color, var(--ui-text-muted));
}
@media (prefers-reduced-motion: reduce) {
  .st-public-banner-slider__track {
    transition: none;
  }
}
/* Designed-image banner (DESIGN_SYSTEM.md, D-093): the uploaded image fills the banner band;
   title, description and a thin outline button sit over the image's empty side. */
.st-public-banner__designed {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: var(--st-designed-banner-ratio, 2.35);
  min-height: var(--st-designed-banner-min-height);
  max-height: var(--st-designed-banner-max-height);
  overflow: hidden;
  background: var(--st-public-banner-config-bg, var(--ui-banner-default-bg));
  color: var(--st-designed-banner-text);
}
.st-public-banner__designed--tone-light {
  --st-designed-banner-text: var(--st-designed-banner-light-text);
  --st-designed-banner-kicker: var(--st-designed-banner-paper);
  --st-designed-banner-action-bg: var(--st-designed-banner-paper);
  --st-designed-banner-action-text: var(--st-designed-banner-accent);
}
.st-public-banner__designed--tone-dark {
  --st-designed-banner-text: var(--st-designed-banner-dark-text);
  --st-designed-banner-kicker: var(--st-designed-banner-accent);
  --st-designed-banner-action-bg: var(--st-designed-banner-accent);
  --st-designed-banner-action-text: #ffffff;
}
.st-public-banner__designed-link,
.st-public-banner__designed-picture {
  position: absolute;
  inset: 0;
  display: block;
}
.st-public-banner__designed-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
/* Mourning fallback when the page shell class is missing (the shared rule greys every image). */
body.theme-quoc-tang .st-public-banner__designed-image {
  filter: grayscale(1);
}
/* Mourning drops the brand colour: the solid button and kicker use the ink tone instead. */
body.theme-quoc-tang .st-public-banner__designed {
  --st-designed-banner-accent: var(--st-designed-banner-dark-text);
}
.st-public-banner__designed-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: var(--public-layout-max-width);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 56px);
  pointer-events: none;
}
.st-public-banner-band--full-bleed .st-public-banner__designed-copy {
  padding-inline: var(--shared-header-inline-padding);
}
body.st-non-reader-shell .st-public-banner-band--full-bleed .st-public-banner__designed-copy {
  width: var(--app-shell-rail-width);
  max-width: none;
  padding-inline: 0;
}
.st-public-banner__designed--text-right .st-public-banner__designed-copy {
  justify-content: flex-end;
}
.st-public-banner__designed-copy-inner {
  display: grid;
  justify-items: start;
  gap: 0;
  max-width: var(--st-designed-banner-copy-max-width);
  color: var(--st-designed-banner-text);
  pointer-events: auto;
}
/* D-110a kicker: the linked book's category above the title. */
.st-public-banner__designed-kicker {
  margin: 0 0 14px;
  color: var(--st-designed-banner-kicker);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.st-public-banner__designed-title {
  margin: 0;
  color: inherit;
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--st-designed-banner-title-font);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.st-public-banner__designed-description {
  display: -webkit-box;
  margin: 16px 0 0;
  overflow: hidden;
  color: inherit;
  font-family: var(--st-designed-banner-title-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  /* D-110: room for a linked book's short description (~160–220 characters). */
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.st-public-banner-band .st-public-banner__designed .st-public-banner__designed-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 28px;
  border: 1px solid var(--st-designed-banner-action-bg);
  border-radius: 0;
  background: var(--st-designed-banner-action-bg);
  color: var(--st-designed-banner-action-text);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.16s ease;
}
.st-public-banner-band .st-public-banner__designed .st-public-banner__designed-action:hover {
  opacity: 0.82;
}
.st-public-banner-band .st-public-banner__designed :is(.st-public-banner__designed-action, .st-public-banner__designed-link):focus-visible {
  outline: 2px solid var(--st-designed-banner-text);
  outline-offset: 3px;
}
.st-public-banner__designed-link:focus-visible {
  outline-offset: -6px;
}
/* D-110 M2: the phone link covers the image; desktop keeps the button as the one tab stop. */
.st-public-banner__designed-phone-link {
  display: none;
}
@media (max-width: 1023px) {
  .st-public-banner__designed-description,
  .st-public-banner__designed-kicker {
    display: none;
  }
}
/* Slider: a designed slide fills the slide height, so mixed slides never leave a gap. */
.st-public-banner-slider.is-slider .st-public-banner__designed {
  height: 100%;
}
.st-public-banner-slider.is-slider:has(.st-public-banner__surface) .st-public-banner__designed {
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
}
.st-public-banner-slider:has(.st-public-banner-slide.is-active .st-public-banner__designed--tone-light) {
  --st-public-banner-dot-color: rgba(255, 255, 255, 0.6);
  --st-public-banner-dot-active-color: #ffffff;
  --st-public-banner-dot-hover-color: rgba(255, 255, 255, 0.85);
}
.st-public-banner-slider:has(.st-public-banner-slide.is-active .st-public-banner__designed--tone-dark) {
  --st-public-banner-dot-color: rgba(17, 17, 17, 0.45);
  --st-public-banner-dot-active-color: #111111;
  --st-public-banner-dot-hover-color: rgba(17, 17, 17, 0.75);
}
@media (max-width: 768px) {
  .st-public-banner__designed {
    aspect-ratio: 4 / 5;
    min-height: 0;
    max-height: var(--st-designed-banner-mobile-max-height);
  }
  .st-public-banner__designed--has-mobile-image {
    aspect-ratio: var(--st-designed-banner-mobile-ratio, 4 / 5);
  }
  .st-public-banner__designed:not(.st-public-banner__designed--has-mobile-image) .st-public-banner__designed-image {
    object-position: var(--st-designed-banner-focal-x, 50%) center;
  }
  /* D-110 M2: phones show the image only — no visible copy and no button. The title stays for
     screen readers; a banner with a button is reached through the phone link over the image. */
  .st-public-banner__designed:not(.st-public-banner__designed--has-cta) .st-public-banner__designed-copy {
    display: none;
  }
  .st-public-banner__designed-copy {
    pointer-events: none;
  }
  .st-public-banner__designed-title,
  .st-public-banner__designed-description {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .st-public-banner-band .st-public-banner__designed .st-public-banner__designed-action {
    display: none;
  }
  .st-public-banner__designed-phone-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
  }
  .st-public-banner-band .st-public-banner__designed .st-public-banner__designed-phone-link:focus-visible {
    outline: 2px solid var(--st-designed-banner-text);
    outline-offset: -6px;
  }
}
.book-list-page__head {
  display: grid;
  gap: 18px;
  align-content: start;
}
.book-list-page__head--with-hero {
  gap: var(--listing-section-primary-head-gap);
}
.public-breadcrumb-flow {
  gap: var(--public-breadcrumb-flow-gap);
}
.public-content-start-shell {
  width: 100%;
  max-width: var(--surface-shell-content-max-width);
  margin: 0 auto;
  min-width: 0;
}
.site-breadcrumb {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 480;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.site-breadcrumb__list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
.site-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.site-breadcrumb__link,
.site-breadcrumb__text,
.site-breadcrumb__current {
  color: inherit;
  text-decoration: none;
  min-width: 0;
  max-width: 100%;
}
.site-breadcrumb__link {
  transition: color 0.16s ease;
}
.site-breadcrumb__link:hover,
.site-breadcrumb__link:focus-visible {
  color: var(--ui-text-soft);
}
.site-breadcrumb__item:first-child .site-breadcrumb__link,
.site-breadcrumb__item:first-child .site-breadcrumb__text {
  color: var(--ui-text-disabled);
}
.site-breadcrumb__separator {
  color: var(--ui-text-disabled);
  flex: 0 0 auto;
}
.site-breadcrumb__current {
  color: var(--ui-text-soft);
  font-weight: 540;
  max-width: min(42vw, 34ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-breadcrumb__text {
  color: var(--ui-text-soft);
}
.book-list-page__hero {
  display: grid;
  gap: 12px;
  max-width: var(--surface-hero-measure);
}
.book-list-page__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
  font-size: var(--listing-section-primary-title-size);
  line-height: var(--listing-section-primary-title-line-height);
  font-weight: var(--listing-section-primary-title-weight);
  letter-spacing: -0.025em;
}
.book-list-shell {
  width: 100%;
  max-width: var(--book-list-shell-max-width);
  margin: 0 auto;
}
.book-list-shell--home,
.book-list-shell--home-search {
  max-width: min(100%, 1088px);
}
.book-list-section {
  display: block;
  width: 100%;
}
.book-list-section + .book-list-section {
  padding-top: var(--book-list-section-divider-gap);
  border-top: 1px solid var(--ui-border-soft);
}
.book-list-section__head {
  display: block;
  margin-bottom: var(--book-list-section-gap);
}
.book-list-section__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.book-list-section__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease, opacity 0.16s ease;
}
.book-list-section__title a:hover,
.book-list-section__title a:focus-visible {
  border-color: var(--ui-border-overlay);
  opacity: 0.98;
}
.listing-section-head {
  display: grid;
  align-content: start;
  min-width: 0;
}
.listing-section-head--primary {
  gap: var(--listing-section-primary-head-gap);
}
.listing-section-head--secondary {
  gap: var(--listing-section-secondary-header-stack-gap);
}
.listing-section-title {
  margin: 0;
  min-width: 0;
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
}
.listing-section-title--primary {
  font-size: var(--listing-section-primary-title-size);
  line-height: var(--listing-section-primary-title-line-height);
  font-weight: var(--listing-section-primary-title-weight);
  letter-spacing: -0.025em;
}
.home-section__title.listing-section-title--secondary {
  width: min(100%, var(--listing-section-secondary-title-measure));
  font-size: var(--listing-section-secondary-title-size);
  line-height: var(--listing-section-secondary-title-line-height);
  font-weight: var(--listing-section-secondary-title-weight);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.listing-section-title--editorial,
.notification-item__title {
  font-size: var(--listing-section-editorial-title-size);
  line-height: var(--listing-section-editorial-title-line-height);
  font-weight: var(--listing-section-editorial-title-weight);
  letter-spacing: -0.025em;
}
.listing-section-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--listing-section-secondary-action-size);
  font-weight: 700;
  line-height: var(--listing-section-secondary-action-line-height);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.listing-section-action:hover,
.listing-section-action:focus-visible {
  border-bottom-color: var(--ui-divider-strong);
}
.book-grid[data-listing-card-tier] {
  --listing-card-column-gap-current: var(--listing-card-column-gap-mobile-relaxed);
  --listing-card-row-gap-current: var(--listing-card-row-gap-mobile-relaxed);
  --listing-card-title-size-current: var(--listing-card-title-size-mobile-catalog);
  --listing-card-title-line-height-current: var(--listing-card-title-line-height-mobile-catalog);
  --listing-card-meta-size-current: var(--listing-card-meta-size-mobile);
  --listing-card-meta-line-height-current: var(--listing-card-meta-line-height);
  --listing-card-cta-size-current: var(--listing-card-cta-size-mobile);
  --listing-card-body-gap-current: var(--listing-card-body-gap-mobile);
  --listing-card-body-margin-top-current: var(--listing-card-body-margin-top-mobile);
  --listing-card-body-min-height-current: var(--listing-card-body-min-height-mobile);
  --listing-card-column-span-current: var(--listing-card-column-span-mobile);
}
.book-grid[data-listing-card-tier="showcase"] {
  --listing-card-column-gap-current: var(--listing-card-column-gap-mobile-compact);
  --listing-card-row-gap-current: var(--listing-card-row-gap-mobile-compact);
  --listing-card-title-size-current: var(--listing-card-title-size-mobile-showcase);
  --listing-card-title-line-height-current: var(--listing-card-title-line-height-mobile-showcase);
}
@media (max-width: 1024px) {
  .st-public-banner__surface {
    padding: 24px 0;
  }
  .st-public-banner__content {
    grid-column: 1 / span 6;
  }
  .st-public-banner__media--desktop {
    grid-column: 7 / -1;
  }
  .st-public-banner__hero-image-frame {
    width: 100%;
  }
  .st-public-banner__desktop-stack {
    width: min(100%, 500px);
    gap: 14px;
  }
  .st-public-banner--editorial-3-covers .st-public-banner__surface {
    padding-block: 22px;
  }
}
@media (max-width: 960px) {
  .editorial-article {
    gap: 48px;
  }
  .editorial-article__title {
    font-size: clamp(40px, 6vw, 58px);
    max-width: 12ch;
  }
  .editorial-article__paragraph {
    font-size: 19px;
  }
  .editorial-article__paragraph--lead {
    font-size: 23px;
  }
  .editorial-related__item-title {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .st-public-banner-band:not(.st-public-banner-band--full-bleed) {
    width: calc(100% + ((var(--public-layout-padding) - var(--space-2)) * 2));
    margin-left: calc(var(--space-2) - var(--public-layout-padding));
    margin-right: calc(var(--space-2) - var(--public-layout-padding));
  }
  .st-public-banner__surface {
    aspect-ratio: 4 / 5;
    padding: 20px 0;
  }
  .st-public-banner__surface--layer::before {
    background-size: auto var(--st-public-banner-drum-size-mobile);
  }
  .st-public-banner__surface--field {
    background-image: var(--st-public-banner-field-image-mobile, var(--st-public-banner-field-image));
  }
  .st-public-banner__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    row-gap: 16px;
  }
  .st-public-banner-band--full-bleed .st-public-banner__inner,
  .st-public-banner-slider__controls {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .st-public-banner__content {
    grid-column: 1;
    justify-items: center;
    text-align: center;
    padding-right: 0;
  }
  .st-public-banner__copy-stack,
  .st-public-banner__description {
    max-width: min(100%, 30rem);
  }
  .st-public-banner__title {
    font-size: clamp(24px, 8vw, 34px);
  }
  .st-public-banner__media--desktop {
    display: none;
  }
  .st-public-banner__media--mobile {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }
  .st-public-banner--editorial-3-covers .st-public-banner__inner {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    row-gap: 0;
  }
  .st-public-banner--editorial-3-covers .st-public-banner__media--mobile {
    align-self: stretch;
  }
  .st-public-banner--editorial-3-covers .st-public-banner__surface {
    padding: 28px 0;
  }
  .st-public-banner__editorial-cover-row {
    gap: 0;
  }
  .st-public-banner__editorial-cover-link--mobile {
    width: min(100%, var(--st-editorial-mobile-cover-width, var(--st-public-banner-mobile-media-width)));
    height: min(100%, var(--st-editorial-mobile-cover-height, 360px));
  }
  .st-public-banner__editorial-cover--mobile {
    width: 100%;
    height: 100%;
  }
  .st-public-banner__editorial-cover--mobile img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  .st-banner-dots {
    bottom: 24px;
  }
}
.book-grid,
.books-row {
  display: grid;
  grid-template-columns: repeat(var(--book-list-grid-columns-desktop), minmax(0, 1fr));
  column-gap: var(--book-list-column-gap);
  row-gap: var(--book-list-row-gap);
  align-items: start;
}
.book-grid--home,
.book-grid--home-search {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(48px, 5.4vw, 72px);
  row-gap: clamp(72px, 7vw, 96px);
}
.book-card {
  --book-card-badge-min-height: 18px;
  --book-card-title-lines: 2;
  --book-card-title-line-height-current: var(--book-list-title-line-height);
  --book-card-badge-slot-height: calc(var(--book-card-badge-min-height) + var(--book-list-badge-stack-gap));
  --book-card-text-offset-top: max(0px, calc(var(--book-card-badge-slot-height) - (var(--book-card-title-line-height-current) * 1em)));
  width: min(100%, var(--book-list-card-max-width));
  max-width: var(--book-list-card-max-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--book-list-cover-title-gap);
  align-content: start;
  justify-self: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}
.book-card--with-badge {
  --book-card-title-lines: 1;
  --book-card-text-offset-top: 0px;
}
.book-grid--home .book-card,
.book-grid--home-search .book-card {
  width: 100%;
  max-width: min(100%, 360px);
  justify-self: center;
}
.book-card--home-editorial {
  --book-card-title-line-height-current: 1.34;
  gap: 22px;
  padding-inline: clamp(8px, 1vw, 16px);
}
.book-card--home-editorial .book-card__cover-link,
.book-card--home-editorial .book-card__body {
  justify-self: start;
}
.book-card--home-editorial .book-card__body {
  width: min(100%, 88%);
  gap: 16px;
}
.book-card--home-editorial .book-card__text {
  gap: 10px;
}
.book-card--home-editorial .book-card__title {
  min-height: calc(var(--book-card-title-lines) * 1.34em);
  font-size: 15px;
  line-height: 1.34;
  font-weight: 600;
}
.book-card--home-editorial .book-card__meta-lines {
  gap: 4px;
}
.book-card--home-editorial .book-card__meta-line {
  color: var(--ui-text-soft);
  font-size: 12px;
  line-height: 1.42;
}
.book-card--home-editorial .book-card__cta {
  font-size: 11px;
  letter-spacing: 0.08em;
}
.book-card__cover-link {
  display: block;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.book-card__cover-stack {
  display: contents;
}
.book-card__cover-visual {
  display: none;
}
.book-card__media.book-cover-frame,
.book-card__media {
  width: var(--book-cover-frame-width);
  height: var(--book-cover-frame-height);
  min-width: 0;
  aspect-ratio: var(--book-cover-frame-ratio);
  background: transparent;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  isolation: isolate;
}
.book-card__media::after {
  display: none;
  content: none;
}
.book-card__cover,
.book-card__video {
  width: var(--book-cover-image-width);
  height: var(--book-cover-image-height);
  object-fit: contain;
  object-position: center bottom;
  border-radius: var(--book-cover-radius);
  border: none;
  background: transparent;
  display: block;
  max-width: var(--book-cover-image-max-width);
  max-height: var(--book-cover-image-max-height);
  filter: none;
  transform-origin: center bottom;
}
.book-card__cover {
  position: relative;
  z-index: 1;
  transition: opacity 0.18s ease;
}
.book-card__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.22s ease;
}
.book-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--book-list-author-cta-gap);
}
.book-card__badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--book-card-badge-min-height);
  gap: var(--book-list-badge-gap);
  margin-bottom: calc(var(--book-list-badge-stack-gap) - var(--book-list-author-cta-gap));
}
.book-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 18px;
  padding: 0;
  color: var(--ui-text-muted);
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.book-card__text {
  display: grid;
  gap: var(--book-list-title-author-gap);
  padding-top: var(--book-card-text-offset-top);
}
.book-card__title {
  margin: 0;
  min-height: calc(var(--book-card-title-lines) * var(--book-list-title-line-height) * 1em);
  color: var(--book-list-title-color);
  font-family: var(--font-body);
  font-size: var(--book-list-title-size);
  font-weight: 700;
  line-height: var(--book-list-title-line-height);
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: var(--book-card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card__title-link {
  color: inherit;
  text-decoration: none;
}
.book-card__title-link:hover,
.book-card__title-link:focus-visible {
  color: var(--book-list-title-hover-color);
  text-decoration: none;
}
.book-card__meta-lines {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.book-card__meta-line {
  margin: 0;
  min-width: 0;
  color: var(--book-list-author-color);
  font-family: var(--font-ui);
  font-size: var(--book-list-author-size);
  line-height: var(--book-list-author-line-height);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-card__publisher-line {
  font-weight: 400;
}
.book-card__cta {
  /* CTA owner: keep the public card call-to-action text and underline animation self-contained. */
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  margin-top: auto;
  color: var(--book-list-cta-color);
  font-family: var(--font-ui);
  font-size: var(--book-list-cta-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-bottom: 4px;
  transition: color 0.18s ease;
}
.book-card__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: scaleX(0.36);
  transform-origin: left center;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.book-card__cover-link:hover .book-card__cover,
.book-card__cover-link:focus-visible .book-card__cover,
.book-card__cover-link:hover .book-card__video,
.book-card__cover-link:focus-visible .book-card__video {
  transform: none;
  filter: none;
}
.book-card--static .book-card__cover,
.book-card--static .book-card__video {
  transition: opacity 0.18s ease;
}
.book-card--static .book-card__cover-link:hover .book-card__cover,
.book-card--static .book-card__cover-link:focus-visible .book-card__cover,
.book-card--static .book-card__cover-link:hover .book-card__video,
.book-card--static .book-card__cover-link:focus-visible .book-card__video {
  transform: none;
  filter: none;
}
.book-card__cta:hover,
.book-card__cta:focus-visible {
  color: var(--book-list-cta-color-hover);
}
.book-card__cta:hover::after,
.book-card__cta:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}
.editorial-page {
  gap: 32px;
}
.editorial-kicker {
  margin: 0;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.notification-list,
.feedback-form {
  width: 100%;
  max-width: var(--surface-editorial-measure);
}
.notification-list {
  display: grid;
  gap: 24px;
}
.notification-item {
  display: grid;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ui-border-soft);
}
.notification-item:first-child {
  padding-top: 0;
  border-top: none;
}
.notification-item__meta,
.editorial-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.notification-item__body {
  display: grid;
  gap: 12px;
}
.notification-item__title,
.editorial-article__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
}
.notification-item__title {
  font-size: var(--listing-section-editorial-title-size);
  line-height: var(--listing-section-editorial-title-line-height);
}
.notification-item__content,
.editorial-article__excerpt {
  margin: 0;
  color: var(--ui-text);
  font-size: 16px;
  line-height: 1.84;
  max-width: 60ch;
}
.editorial-article__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.editorial-article__footer a {
  /* Editorial footer-link owner: keep the inline underline CTA styling self-contained. */
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--ui-text-strong);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.editorial-article__footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.38;
  transform: scaleX(0.36);
  transform-origin: left center;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.editorial-article__footer a:hover::after,
.editorial-article__footer a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}
.editorial-article-shell {
  max-width: var(--public-layout-max-width);
}
.editorial-article-page {
  display: grid;
  gap: 24px;
  padding: 16px 0 96px;
}
.editorial-article {
  width: 100%;
  display: grid;
  gap: 56px;
  max-width: min(100%, var(--editorial-article-frame-max));
  margin-left: auto;
  margin-right: auto;
}
.editorial-article__intro,
.editorial-article__header,
.editorial-article__opening,
.editorial-article__footer,
.editorial-related {
  width: min(100%, var(--editorial-article-measure));
  margin-left: auto;
  margin-right: auto;
}
.editorial-article__intro {
  display: grid;
  gap: 24px;
}
.editorial-article__header {
  display: grid;
  gap: 16px;
}
.editorial-article__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: clamp(42px, 5vw, 66px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 11ch;
}
.editorial-article__deck {
  margin: 0;
  color: var(--ui-text);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.6;
  max-width: 32ch;
}
.editorial-article__meta--header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-top: 8px;
}
.editorial-article__content {
  width: 100%;
}
.editorial-article__content > * {
  margin-top: 0;
}
.editorial-article__content > * + * {
  margin-top: var(--space-4);
}
.editorial-article__content > .editorial-article__paragraph + .editorial-article__paragraph {
  margin-top: var(--space-3);
}
.editorial-article__content > .editorial-article__subheading,
.editorial-article__content > .editorial-media,
.editorial-article__content > .editorial-pullquote,
.editorial-article__content > .editorial-callout {
  margin-top: var(--space-6);
}
.editorial-article__content > .editorial-divider {
  margin: 56px auto 8px;
}
.editorial-article__paragraph {
  width: min(100%, var(--editorial-article-measure));
  margin: 0 auto;
  color: var(--ui-text-strong);
  font-size: 20px;
  line-height: 1.88;
  max-width: 35.5em;
}
.editorial-article__paragraph--lead {
  color: var(--ui-text-strong);
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.66;
  max-width: 30ch;
}
.editorial-article__subheading {
  width: min(100%, var(--editorial-article-measure));
  margin: 0 auto;
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.editorial-article__subheading--minor {
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.16;
}
.editorial-media {
  margin: 0 auto;
  display: grid;
  gap: 8px;
}
.editorial-media--hero,
.editorial-media--full_width {
  width: 100%;
}
.editorial-media--content_width {
  width: min(100%, var(--editorial-article-measure));
}
.editorial-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.editorial-media__meta {
  display: grid;
  gap: 4px;
  max-width: min(100%, var(--editorial-caption-measure));
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.editorial-media__caption {
  color: var(--ui-text);
  font-weight: 600;
}
.editorial-media__credit {
  color: var(--ui-text-soft);
}
.editorial-pullquote {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 8px 0 0;
  display: grid;
  gap: 12px;
}
.editorial-pullquote p,
.editorial-pullquote footer {
  margin: 0;
}
.editorial-pullquote p {
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.editorial-pullquote footer {
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.editorial-callout {
  width: min(100%, var(--editorial-article-measure));
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border-soft);
}
.editorial-callout__eyebrow {
  margin: 0;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.editorial-callout__title {
  margin: 0;
  color: var(--ui-text-strong);
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.editorial-callout__title a {
  color: inherit;
  text-decoration: none;
}
.editorial-callout__description {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 16px;
  line-height: 1.76;
  max-width: 42ch;
}
.editorial-divider {
  width: min(100%, 96px);
  height: 1px;
  background: var(--ui-surface-wash);
}
.editorial-related {
  display: grid;
  gap: 32px;
  padding-top: 56px;
  border-top: 1px solid var(--ui-border-strong);
}
.editorial-related__head {
  display: grid;
  gap: 12px;
}
.editorial-related__title,
.editorial-related__item-title {
  margin: 0;
  color: var(--ui-text-strong);
}
.editorial-related__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.editorial-related__description,
.editorial-related__summary,
.editorial-related__meta {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 16px;
  line-height: 1.72;
}
.editorial-related__list {
  display: grid;
  gap: 0;
}
.editorial-related__item {
  display: grid;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--ui-border-soft);
}
.editorial-related__item:first-child {
  padding-top: 0;
  border-top: none;
}
.editorial-related__eyebrow {
  margin: 0;
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.editorial-related__item-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.editorial-related__item-title a {
  color: inherit;
  text-decoration: none;
}
.editorial-related__item-title a:hover,
.editorial-related__item-title a:focus-visible {
  opacity: 0.92;
}
.editorial-related__browse {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--ui-border-soft);
}
.editorial-related__browse a {
  width: fit-content;
  color: var(--ui-text-strong);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.editorial-related__browse span {
  color: var(--ui-text-muted);
  font-size: 15px;
  line-height: 1.72;
  max-width: 46ch;
}
.feedback-form {
  display: grid;
  gap: 24px;
}
.feedback-field {
  display: grid;
  gap: 8px;
}
.feedback-field__hint {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 14px;
  line-height: 1.65;
  max-width: 58ch;
}
.feedback-field__label {
  color: var(--ui-text-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.feedback-field input,
.feedback-field textarea {
  width: 100%;
  border: 1px solid var(--ui-border-soft);
  border-radius: 0;
  padding: 12px 14px;
  background: var(--ui-surface-glass);
  color: var(--ui-text);
  font-size: 16px;
  line-height: 1.65;
}
.feedback-field textarea {
  min-height: 192px;
  resize: vertical;
}
.feedback-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* Feedback CTA owner: this public button keeps its own chrome while still inheriting button layout baseline. */
.feedback-submit {
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ui-border-overlay);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-surface-wash-soft);
  color: var(--ui-text-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}
.feedback-submit:hover,
.feedback-submit:focus-visible {
  background: var(--ui-surface-wash);
}
.editorial-status {
  width: 100%;
  max-width: var(--surface-editorial-measure);
  padding: 12px 16px;
  border: 1px solid var(--ui-border-soft);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  display: grid;
  gap: 4px;
}
.editorial-status strong {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.editorial-status span {
  display: block;
}
.editorial-status--success {
  background: var(--ui-surface-glass-strong);
}
.editorial-status--error {
  background: var(--ui-surface-glass-strong);
}
.book-list-empty {
  padding: 24px 0;
  color: var(--ui-text-muted);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
}
.muted { color: var(--ui-text-muted); font-size: 14px; line-height: 1.45; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
input, textarea, select {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--ui-border-hover);
  border-radius: 8px;
  font: inherit;
  background: var(--ui-surface-solid);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ui-border-hover);
  box-shadow: none;
}
/*
 * Button groups - shared baseline
 *
 * Phase 1 intentionally leaves the baseline on native `button` to preserve
 * current UI behavior while the five groups are split incrementally.
 */
button {
  width: 100%;
  min-height: var(--btn-h);
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--accent);
  color: var(--ui-surface-solid);
  transition: background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
button.secondary {
  background: var(--ui-accent-muted);
}
button.secondary:hover:not(:disabled) {
  background: var(--ui-accent-muted);
}
button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px var(--ui-shadow-subtle);
}
.auth-wrap {
  max-width: 560px;
  margin: 28px auto;
}
.auth-wrap h2 {
  margin: 0 0 12px;
  line-height: 1.2;
}
.auth-form {
  display: grid;
  gap: 12px;
}
.auth-msg {
  min-height: 22px;
  margin-top: 8px;
  font-family: var(--font-ui);
  color: var(--ui-warning);
  line-height: 1.45;
}
/* Shared auth pill-link fallback: keep .auth-actions .auth-sub-link until all callers are verified. */
.auth-links .auth-sub-link,
.auth-actions .auth-sub-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-solid);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ui-link);
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
}
.auth-links .auth-sub-link:hover,
.auth-actions .auth-sub-link:hover {
  background: var(--ui-warning-surface);
  border-color: var(--ui-warning-border);
}
.is-hidden {
  display: none !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.inline-control-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.field-compact {
  width: 100px;
}
@media (max-width: 640px) {
  .topbar .topbar-auth {
    display: block !important;
  }
  .topbar .topbar-auth .topbar-auth-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface-solid);
    color: var(--ui-text-muted);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
  }
  .topbar .topbar-auth .topbar-auth-toggle::marker {
    content: "";
  }
  .topbar .topbar-auth .topbar-auth-toggle-icon {
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
  }
  .topbar .topbar-auth .topbar-auth-panel {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px);
    right: 0;
    min-width: min(280px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface-glass-strong);
    box-shadow: 0 12px 28px var(--ui-shadow-soft);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: 60;
  }
  .topbar .topbar-auth[open] .topbar-auth-panel {
    display: flex !important;
  }
  .topbar .topbar-auth .topbar-auth-panel .auth-btn,
  .topbar .topbar-auth .topbar-auth-panel .topbar-user,
  .topbar .topbar-auth .topbar-auth-panel .topbar-editor-menu,
  .topbar .topbar-auth .topbar-auth-panel > button {
    width: 100%;
  }
  .topbar .topbar-auth .topbar-auth-panel .topbar-account-toggle {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
  .topbar .topbar-user {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }
}

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

  .topbar .topbar-search-caret {
    animation: none;
    opacity: 0.45;
  }
}
@media (min-width: 1024px) {
  .topbar {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: var(--shared-header-inline-padding);
    padding-right: var(--shared-header-inline-padding);
    column-gap: 22px;
    row-gap: 12px;
  }
  .container {
    padding: var(--layout-padding);
  }
  .panel {
    border-radius: 12px;
    padding: 16px;
  }
}
@media (max-width: 1024px) {
  .book-grid,
  .books-row {
    grid-template-columns: repeat(var(--book-list-grid-columns-tablet), minmax(0, 1fr));
    column-gap: var(--book-list-column-gap-tablet);
    row-gap: var(--book-list-row-gap-tablet);
  }
  .book-card {
    width: min(100%, var(--book-list-card-max-width-tablet));
    max-width: var(--book-list-card-max-width-tablet);
  }
  .book-grid--home,
  .book-grid--home-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4.2vw, 44px);
    row-gap: clamp(60px, 6vw, 76px);
  }
  .book-grid--home .book-card,
  .book-grid--home-search .book-card {
    width: 100%;
    max-width: min(100%, 320px);
  }
  .book-card--home-editorial {
    gap: 20px;
    padding-inline: 10px;
  }
}
@media (max-width: 768px) {
  .home-section__title.listing-section-title--secondary {
    width: min(100%, 15.5ch);
    font-size: var(--listing-section-secondary-title-size);
  }
  .book-list-page-shell.container,
  .book-list-page-shell {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  body.page-public-content-start-lock .book-list-page-shell.container,
  body.page-public-content-start-lock .book-list-page-shell {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  body[data-page-kind="detail"] .layout-shell.container,
  body[data-page-kind="detail"] .layout-shell {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .book-list-page {
    gap: 32px;
    padding: 16px 0 48px;
  }
  .public-breadcrumb-flow {
    gap: var(--public-breadcrumb-flow-gap);
  }
  .editorial-page {
    gap: 24px;
  }
  .notification-item {
    padding-top: 20px;
  }
  .notification-item__title {
    font-size: 22px;
  }
  .editorial-article-page {
    padding: 16px 0 48px;
  }
  .editorial-article {
    gap: 40px;
  }
  .editorial-article__intro {
    gap: 20px;
  }
  .editorial-article__title {
    font-size: 38px;
  }
  .editorial-article__deck {
    font-size: 18px;
  }
  .editorial-article__paragraph,
  .notification-item__content,
  .editorial-article__excerpt {
    font-size: 17px;
  }
  .editorial-article__paragraph--lead {
    font-size: 21px;
  }
  .editorial-article__subheading {
    font-size: 24px;
  }
  .editorial-pullquote p {
    font-size: 24px;
  }
  .editorial-related__item {
    gap: 6px;
  }
  .editorial-related__item-title {
    font-size: 22px;
  }
  .editorial-related__description,
  .editorial-related__summary,
  .editorial-related__meta {
    font-size: 15px;
  }
  .feedback-field__hint {
    font-size: 13px;
  }
  .feedback-field textarea {
    min-height: 168px;
  }
  .book-list-section__head {
    margin-bottom: 24px;
  }
  .book-list-section + .book-list-section {
    padding-top: 64px;
  }
  .site-breadcrumb__current {
    max-width: min(68vw, 26ch);
  }
  .book-grid,
  .books-row {
    grid-template-columns: repeat(var(--book-list-grid-columns-mobile), minmax(0, 1fr));
    column-gap: var(--book-list-column-gap-mobile);
    row-gap: var(--book-list-row-gap-mobile);
  }
  .book-card {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  .book-list-shell--home,
  .book-list-shell--home-search {
    max-width: 100%;
  }
  .book-grid--home,
  .book-grid--home-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 32px;
  }
  .book-grid--home .book-card,
  .book-grid--home-search .book-card {
    width: auto;
    max-width: none;
    justify-self: stretch;
  }
  body[data-page-kind="category"] .book-grid--category {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 32px;
  }
  body[data-page-kind="category"] .book-grid--category .book-card {
    --book-card-title-line-height-current: 1.36;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  body[data-page-kind="category"] .book-grid--category .book-card__body {
    gap: 12px;
  }
  body[data-page-kind="category"] .book-grid--category .book-card__text {
    gap: 6px;
  }
  body[data-page-kind="category"] .book-grid--category .book-card__title {
    min-height: calc(var(--book-card-title-lines) * 1.36em);
    font-size: 14px;
    line-height: 1.36;
  }
  body[data-page-kind="category"] .book-grid--category .book-card__meta-line {
    font-size: 11px;
    line-height: 1.4;
  }
  body[data-page-kind="category"] .book-grid--category .book-card__cta {
    font-size: 10px;
  }
  .book-card--home-editorial {
    --book-card-title-line-height-current: 1.36;
    gap: 14px;
    padding-inline: 0;
  }
  .book-card--home-editorial .book-card__cover-link {
    width: 88%;
    justify-self: center;
  }
  .book-card--home-editorial .book-card__body {
    width: 100%;
    gap: 12px;
  }
  .book-card--home-editorial .book-card__text {
    gap: 6px;
  }
  .book-card--home-editorial .book-card__title {
    min-height: calc(var(--book-card-title-lines) * 1.36em);
    font-size: 14px;
    line-height: 1.36;
  }
  .book-card--home-editorial .book-card__meta-line {
    font-size: 11px;
  }
  .book-card--home-editorial .book-card__cta {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .book-grid,
  .books-row {
    grid-template-columns: repeat(var(--book-list-grid-columns-narrow), minmax(0, 1fr));
  }
  .book-grid--home,
  .book-grid--home-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 28px;
  }
}
@media (min-width: 769px) {
  .book-grid--home .book-card--home-editorial,
  .book-grid--home-search .book-card--home-editorial {
    max-width: min(100%, 336px);
  }
  .book-card--home-editorial .book-card__cover-link {
    width: min(72%, 236px);
  }
}
@media (min-width: 1025px) {
  .book-list-shell--home,
  .book-list-shell--home-search {
    max-width: min(100%, 1120px);
  }
  .book-grid--home,
  .book-grid--home-search {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 40px);
    row-gap: clamp(56px, 5vw, 72px);
  }
  .book-grid--home .book-card,
  .book-grid--home-search .book-card,
  .book-grid--home .book-card--home-editorial,
  .book-grid--home-search .book-card--home-editorial {
    width: auto;
    max-width: none;
    justify-self: stretch;
  }
  .book-card--home-editorial {
    gap: 24px;
    padding-inline: 12px 18px;
  }
  .book-card--home-editorial .book-card__cover-link {
    width: min(70%, 232px);
  }
  .book-card--home-editorial .book-card__body {
    width: min(100%, 84%);
    gap: 18px;
  }
}
@media (min-width: 1360px) {
  .book-list-shell--home,
  .book-list-shell--home-search {
    max-width: min(100%, 1200px);
  }
  .book-grid--home,
  .book-grid--home-search {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(24px, 2.4vw, 36px);
    row-gap: clamp(56px, 4.8vw, 72px);
  }
}
.book-list-shell[data-listing-card-tier],
.book-grid[data-listing-card-tier] {
  --listing-grid-columns-current: var(--listing-grid-columns-mobile);
  --listing-grid-gap-current: var(--listing-gap-mobile);
  --listing-grid-row-gap-current: var(--listing-grid-row-gap-mobile);
  --listing-card-shell-max-width-current: 100%;
  --listing-card-track-min-width-current: 0px;
  --listing-card-title-size-current: var(--listing-card-title-size-mobile-catalog);
  --listing-card-title-line-height-current: var(--listing-card-title-line-height-mobile-catalog);
  --listing-card-meta-size-current: var(--listing-card-meta-size-mobile);
  --listing-card-meta-line-height-current: var(--listing-card-meta-line-height);
  --listing-card-cta-size-current: var(--listing-card-cta-size-mobile);
  --listing-card-body-gap-current: var(--listing-card-body-gap-mobile);
  --listing-card-body-margin-top-current: var(--listing-card-body-margin-top-mobile);
  --listing-card-body-min-height-current: var(--listing-card-body-min-height-mobile);
  --listing-card-text-measure-current: var(--listing-card-text-measure-catalog);
  --listing-card-meta-stack-gap-current: var(--listing-card-meta-stack-gap);
  --listing-card-cover-min-width-current: var(--listing-card-cover-min-width-mobile);
}
.book-list-shell[data-listing-card-tier="catalog"],
.book-grid[data-listing-card-tier="catalog"] {
  --listing-card-shell-max-width-desktop-current: var(--listing-card-shell-max-width-catalog-desktop);
  --listing-card-shell-max-width-tablet-current: var(--listing-card-shell-max-width-catalog-tablet);
  --listing-card-track-min-width-desktop-current: var(--listing-card-min-width-desktop-catalog);
  --listing-grid-gap-desktop-current: var(--listing-gap-desktop-tight);
  --listing-card-text-measure-current: var(--listing-card-text-measure-catalog);
}
.book-list-shell[data-listing-card-tier="showcase"],
.book-grid[data-listing-card-tier="showcase"] {
  --listing-card-shell-max-width-desktop-current: var(--listing-card-shell-max-width-showcase-desktop);
  --listing-card-shell-max-width-tablet-current: var(--listing-card-shell-max-width-showcase-tablet);
  --listing-card-track-min-width-desktop-current: var(--listing-card-min-width-desktop-showcase);
  --listing-grid-gap-desktop-current: var(--listing-gap-desktop);
  --listing-card-title-size-current: var(--listing-card-title-size-mobile-showcase);
  --listing-card-title-line-height-current: var(--listing-card-title-line-height-mobile-showcase);
  --listing-card-text-measure-current: var(--listing-card-text-measure-showcase);
}
.book-list-page__head[data-section-level="primary"] {
  width: 100%;
  max-width: var(--public-layout-content-max-width);
}
.book-list-section[data-section-level="primary"] {
  --book-list-section-gap: var(--listing-section-space-primary);
  --book-list-section-divider-gap: var(--listing-section-divider-space-primary);
}
.book-list-section[data-section-level="secondary"] {
  --book-list-section-gap: var(--listing-section-space-secondary);
  --book-list-section-divider-gap: var(--listing-section-divider-space-secondary);
}
.book-list-section[data-section-level="editorial"] {
  --book-list-section-gap: var(--listing-section-space-editorial);
  --book-list-section-divider-gap: var(--listing-section-divider-space-editorial);
}
.book-list-shell[data-listing-card-tier][data-section-level="secondary"] {
  max-width: min(100%, var(--listing-card-shell-max-width-current));
}
.book-list-shell[data-listing-card-tier][data-section-level="editorial"] {
  max-width: min(100%, var(--surface-editorial-measure));
}
/* Guardrail: shared listing cards must stay governed by explicit tier tokens.
   `catalog` is the stable contract for `/sach`, `/the-loai/*`, and `/tu-sach/*`.
   `showcase` is the stable contract for homepage discovery modules.
   Desktop must remain 4-up with TASCHEN-like spacing and readable covers. */
body.page-home-card-presentation .book-list-shell--category,
body[data-page-kind="home"] .book-list-shell--home,
body[data-page-kind="home"] .book-list-shell--home-search {
  width: 100%;
  margin: 0 auto;
}
body.page-home-card-presentation .book-grid--category,
body[data-page-kind="home"] .book-grid--home.home-grid,
body[data-page-kind="home"] .book-grid--home-search.home-grid {
  display: grid;
  grid-template-columns: repeat(var(--listing-grid-columns-current), minmax(0, 1fr));
  column-gap: var(--listing-grid-gap-current);
  row-gap: var(--listing-grid-row-gap-current);
  align-items: start;
}
body.page-home-card-presentation .book-grid--category .book-card,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial,
body[data-page-kind="home"] .home-grid > .book-card,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial {
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
  margin: 0;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial {
  --book-card-title-line-height-current: var(--listing-card-title-line-height-current);
  display: grid;
  grid-template-rows: auto minmax(var(--listing-card-body-min-height-current), auto);
  row-gap: var(--listing-card-body-margin-top-current);
  height: 100%;
  align-content: start;
  padding-inline: 0;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link.book-cover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link.book-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  transition: none;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-stack,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-stack {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  align-items: end;
  justify-items: center;
  overflow: visible;
  isolation: isolate;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-stack > .book-card__cover,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-stack > .book-card__cover-visual,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-stack > .book-card__cover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-stack > .book-card__cover-visual {
  grid-area: 1 / 1;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-stack > .book-card__cover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-stack > .book-card__cover {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  align-self: stretch;
  justify-self: stretch;
  margin: 0;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-visual,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-visual {
  position: relative;
  display: block;
  max-width: var(--listing-card-cover-max-width);
  max-height: var(--listing-card-cover-max-height);
  aspect-ratio: var(--book-cover-painted-aspect);
  border-radius: 2px 3px 3px 2px;
  overflow: visible;
  pointer-events: none;
  box-shadow: var(--book-cover-depth-body-shadow);
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-visual--fit-width,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-visual--fit-width {
  width: var(--listing-card-cover-width);
  height: auto;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-visual--fit-height,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-visual--fit-height {
  width: auto;
  height: var(--listing-card-cover-height);
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-visual::after,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: 10%;
  bottom: -5px;
  height: 12px;
  border-radius: 50%;
  background: var(--book-cover-depth-floor-color);
  filter: blur(7px);
  pointer-events: none;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-visual::before,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 1px;
  inset-inline-start: 1px;
  width: clamp(4px, 4%, 13px);
  border-radius: 2px 0 0 2px;
  background: var(--book-cover-depth-spine-gradient);
  box-shadow: 1px 0 0 var(--book-cover-depth-spine-highlight);
  pointer-events: none;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__media,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__media {
  width: 100%;
  height: var(--book-cover-frame-height);
  aspect-ratio: var(--listing-card-cover-ratio);
  display: block;
  align-self: start;
  overflow: visible;
  background: transparent;
  position: relative;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__video,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__video {
  width: var(--listing-card-cover-width);
  height: var(--listing-card-cover-height);
  min-width: 0;
  max-width: var(--listing-card-cover-max-width);
  max-height: var(--listing-card-cover-max-height);
  align-self: end;
  justify-self: center;
  margin-inline: auto;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: none;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover {
  border-radius: 2px 3px 3px 2px;
  box-shadow: none;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__body,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__body {
  display: grid;
  grid-template-rows: minmax(0, auto) min-content;
  align-content: start;
  justify-items: center;
  gap: var(--listing-card-body-gap-current);
  width: 100%;
  min-height: var(--listing-card-body-min-height-current);
  margin-top: 0;
  text-align: center;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__text,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__text {
  display: grid;
  gap: var(--listing-card-text-gap);
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: var(--listing-card-text-measure-current);
  margin-inline: auto;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__title,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__title {
  min-height: calc(var(--book-card-title-lines) * var(--listing-card-title-line-height-current) * 1em);
  margin: 0;
  width: 100%;
  font-size: var(--listing-card-title-size-current);
  line-height: var(--listing-card-title-line-height-current);
  font-weight: 680;
  letter-spacing: -0.012em;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: var(--book-card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__title-link,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__title-link {
  text-align: center;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__meta-lines,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__meta-lines {
  gap: var(--listing-card-meta-stack-gap-current);
  min-width: 0;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__meta-line,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__meta-line {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  font-size: var(--listing-card-meta-size-current);
  line-height: var(--listing-card-meta-line-height-current);
  color: var(--ui-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cta,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cta {
  align-self: center;
  margin-top: auto;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  font-size: var(--listing-card-cta-size-current);
  letter-spacing: 0.08em;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link:hover .book-card__cover,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link:focus-visible .book-card__cover,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link:hover .book-card__video,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link:focus-visible .book-card__video,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link:hover,
body.page-home-card-presentation .book-grid--category .book-card--home-editorial .book-card__cover-link:focus-visible,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link:hover .book-card__cover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link:focus-visible .book-card__cover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link:hover .book-card__video,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link:focus-visible .book-card__video,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link:hover,
body[data-page-kind="home"] .home-grid > .book-card--home-editorial .book-card__cover-link:focus-visible {
  transform: none;
  filter: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .book-list-shell[data-listing-card-tier],
  .book-grid[data-listing-card-tier] {
    --listing-grid-columns-current: var(--listing-grid-columns-tablet);
    --listing-grid-gap-current: var(--listing-gap-tablet);
    --listing-grid-row-gap-current: var(--listing-grid-row-gap-tablet);
    --listing-card-shell-max-width-current: var(--listing-card-shell-max-width-tablet-current);
    --listing-card-track-min-width-current: var(--listing-card-min-width-tablet);
    --listing-card-title-size-current: var(--listing-card-title-size-tablet);
    --listing-card-title-line-height-current: var(--listing-card-title-line-height-tablet);
    --listing-card-meta-size-current: var(--listing-card-meta-size-tablet);
    --listing-card-meta-line-height-current: var(--listing-card-meta-line-height);
    --listing-card-cta-size-current: var(--listing-card-cta-size-tablet);
    --listing-card-body-gap-current: var(--listing-card-body-gap-desktop);
    --listing-card-body-margin-top-current: var(--listing-card-body-margin-top-desktop);
    --listing-card-body-min-height-current: var(--listing-card-body-min-height-tablet);
    --listing-card-cover-min-width-current: var(--listing-card-cover-min-width-tablet);
  }
  .book-list-shell[data-listing-card-tier="showcase"],
  .book-grid[data-listing-card-tier="showcase"] {
    --listing-card-meta-stack-gap-current: 4px;
  }
}
@media (min-width: 1200px) {
  .book-list-shell[data-listing-card-tier],
  .book-grid[data-listing-card-tier] {
    --listing-grid-columns-current: var(--listing-grid-columns-desktop);
    --listing-grid-gap-current: var(--listing-grid-gap-desktop-current);
    --listing-grid-row-gap-current: var(--listing-grid-row-gap-desktop);
    --listing-card-shell-max-width-current: var(--listing-card-shell-max-width-desktop-current);
    --listing-card-track-min-width-current: var(--listing-card-track-min-width-desktop-current);
    --listing-card-title-size-current: var(--listing-card-title-size-desktop);
    --listing-card-title-line-height-current: var(--listing-card-title-line-height-desktop);
    --listing-card-meta-size-current: var(--listing-card-meta-size-desktop);
    --listing-card-meta-line-height-current: var(--listing-card-meta-line-height);
    --listing-card-cta-size-current: var(--listing-card-cta-size-desktop);
    --listing-card-body-gap-current: var(--listing-card-body-gap-desktop);
    --listing-card-body-margin-top-current: var(--listing-card-body-margin-top-desktop);
    --listing-card-body-min-height-current: var(--listing-card-body-min-height-desktop);
    --listing-card-cover-min-width-current: var(--listing-card-cover-min-width-desktop);
  }
  body.page-home-card-presentation .book-grid--category,
  body[data-page-kind="home"] .book-grid--home.home-grid,
  body[data-page-kind="home"] .book-grid--home-search.home-grid {
    grid-template-columns: repeat(var(--listing-grid-columns-current), minmax(var(--listing-card-track-min-width-current), 1fr));
  }
}
.reader-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 14px; }
.reader-page {
  background: var(--ui-surface-solid);
  border: 1px solid var(--ui-border-strong);
  width: min(980px, 100%);
}
.page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  line-height: 0;
}
.page-grid img { width: 100%; display: block; }
@media (max-width: 900px) {
  .reader-wrap { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .layout-grid-12 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .layout-span-9,
  .layout-span-8,
  .layout-span-7,
  .layout-span-6,
  .layout-span-5,
  .layout-span-4,
  .layout-span-3,
  .layout-span-2 {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      ". logo auth"
      "nav nav nav";
    justify-items: stretch;
    padding: 8px 0;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    column-gap: var(--shared-header-inline-gap-mobile);
    row-gap: 6px;
    min-height: 0;
  }
  .topbar a {
    font-size: 13px;
  }
  .topbar .topbar-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  .topbar .topbar-mobile-menu {
    display: block;
    min-width: 0;
  }
  .topbar .topbar-mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--shared-header-control-size-mobile);
    min-width: var(--shared-header-control-size-mobile);
    min-height: var(--shared-header-control-size-mobile);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ui-text-strong);
    position: relative;
    z-index: 321;
  }
  .topbar .topbar-mobile-menu-icon {
    width: 20px;
    height: 20px;
    display: block;
  }
  .topbar .topbar-mobile-menu-icon--close {
    display: none;
  }
  .topbar .topbar-mobile-menu-toggle[aria-expanded="true"] .topbar-mobile-menu-icon--hamburger {
    display: none;
  }
  .topbar .topbar-mobile-menu-toggle[aria-expanded="true"] .topbar-mobile-menu-icon--close {
    display: block;
  }
  .topbar-mobile-menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100vw;
    min-width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
    z-index: 320;
    background: var(--ui-surface-muted);
  }
  .topbar-mobile-menu-panel.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    padding: 0;
    background: var(--ui-surface-hover);
    border-top: 1px solid var(--ui-border-soft);
    box-shadow: none;
    transform: none;
    opacity: 1;
    transition: none;
    overflow: hidden;
    pointer-events: auto;
  }
  .topbar-mobile-menu-panel.show .topbar-mobile-menu-sheet {
    transform: none;
    opacity: 1;
  }
  .topbar-mobile-menu-panel button,
  .topbar-mobile-menu-panel input {
    margin: 0;
    font: inherit;
  }
  .topbar-mobile-menu-panel button {
    width: auto;
    min-width: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
  }
  .topbar-mobile-menu-panel button:hover:not(:disabled) {
    transform: none;
  }
  .topbar-mobile-menu-panel input {
    width: 100%;
    padding: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-header {
    display: grid;
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 0;
    border-bottom: 1px solid var(--ui-border-soft);
    background: var(--ui-surface-hover);
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-header-bar {
    display: grid;
    grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
    align-items: center;
    gap: 12px;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    justify-self: center;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ui-text-strong);
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-close {
    justify-self: start;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-header-spacer {
    display: block;
    width: 36px;
    height: 36px;
    justify-self: end;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-close svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .topbar-mobile-menu-panel .topbar-mobile-search-panel {
    display: block;
    min-width: 0;
    padding: 10px 0 10px;
  }
  .topbar-mobile-menu-panel .topbar-mobile-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    min-height: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--ui-border-soft);
    background: transparent;
  }
  .topbar-mobile-menu-panel .topbar-mobile-search-form:has(.topbar-mobile-search-input:focus-visible) {
    border-bottom-color: var(--ui-border-soft);
  }
  .topbar-mobile-menu-panel .topbar-mobile-search-input {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
  }
  .topbar-mobile-menu-panel .topbar-mobile-search-input::placeholder {
    color: var(--ui-text-soft);
  }
  .topbar-mobile-menu-panel .topbar-mobile-search-input:focus {
    box-shadow: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-body {
    display: grid;
    align-content: start;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 20px 20px;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-footer {
    display: grid;
    gap: 18px;
    padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ui-border-soft);
    background: var(--ui-surface-hover);
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-section {
    display: grid;
    gap: 12px;
    min-width: 0;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-section--primary[hidden] {
    display: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-section--categories {
    gap: 0;
  }
  .topbar-mobile-menu-panel .topbar-mobile-menu-section--account,
  .topbar-mobile-menu-panel .topbar-mobile-menu-section--admin {
    padding-top: 0;
    border-top: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-section-label {
    color: var(--ui-text-soft);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .topbar-mobile-menu-panel .topbar-mobile-nav {
    display: grid;
    gap: 0;
  }
  .topbar-mobile-menu-panel .topbar-mobile-categories-toggle,
  .topbar-mobile-menu-panel .topbar-mobile-nav-link,
  .topbar-mobile-menu-panel .topbar-mobile-nav-extra a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid var(--ui-border-subtle);
    background: transparent;
    color: var(--ui-text-strong);
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
  }
  .topbar-mobile-menu-panel .topbar-mobile-categories-toggle {
    gap: 12px;
    padding: 0;
  }
  .topbar-mobile-menu-panel .topbar-mobile-categories-toggle-mark {
    flex: 0 0 auto;
    color: var(--ui-text-muted);
    font-family: var(--font-ui);
    font-size: 20px;
    line-height: 1;
    transition: transform 160ms ease;
  }
  .topbar-mobile-menu-panel [data-topbar-mobile-accordion][data-open="true"] .topbar-mobile-categories-toggle-mark {
    transform: rotate(45deg);
  }
  .topbar-mobile-menu-panel .topbar-mobile-nav-link:hover,
  .topbar-mobile-menu-panel .topbar-mobile-nav-link:focus-visible,
  .topbar-mobile-menu-panel .topbar-mobile-nav-extra a:hover,
  .topbar-mobile-menu-panel .topbar-mobile-nav-extra a:focus-visible,
  .topbar-mobile-menu-panel .topbar-mobile-action-link:hover,
  .topbar-mobile-menu-panel .topbar-mobile-action-link:focus-visible,
  .topbar-mobile-menu-panel .topbar-mobile-categories-toggle:hover,
  .topbar-mobile-menu-panel .topbar-mobile-categories-toggle:focus-visible,
  .topbar-mobile-menu-panel .topbar-mobile-category-parent:hover,
  .topbar-mobile-menu-panel .topbar-mobile-category-parent:focus-visible,
  .topbar-mobile-menu-panel .topbar-mobile-category-link:hover,
  .topbar-mobile-menu-panel .topbar-mobile-category-link:focus-visible {
    color: var(--ui-text-strong);
  }
  .topbar-mobile-menu-panel .topbar-mobile-nav-extra {
    display: grid;
  }
  .topbar-mobile-menu-panel .topbar-mobile-categories-panel {
    display: block;
    min-width: 0;
    overflow: hidden;
  }
  .topbar-mobile-menu-panel .topbar-mobile-categories-panel[hidden] {
    display: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-category-list {
    display: grid;
    gap: 8px;
    min-width: 0;
  }
  .topbar-mobile-menu-panel .topbar-mobile-category-list {
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-categories-sheet {
    display: grid;
    gap: 0;
    padding: 12px 0 0;
    background: transparent;
  }
  .topbar-mobile-menu-panel .topbar-mobile-account-name {
    margin: 0;
  }
  .topbar-mobile-menu-panel .topbar-mobile-category-parent {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    color: var(--ui-text);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .topbar-mobile-menu-panel .topbar-mobile-category-item {
    display: block;
  }
  .topbar-mobile-menu-panel .topbar-mobile-category-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 4px 0;
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    border-bottom: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-account-block,
  .topbar-mobile-menu-panel .topbar-mobile-action-list {
    display: grid;
    gap: 0;
  }
  .topbar-mobile-menu-panel .topbar-mobile-account-name {
    color: var(--ui-text);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .topbar-mobile-menu-panel .topbar-mobile-action-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ui-border-subtle);
    color: var(--ui-text-strong);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
  }
  .topbar-mobile-menu-panel .topbar-mobile-action-list > :last-child {
    border-bottom: none;
  }
  .topbar-mobile-menu-panel .topbar-mobile-action-link--primary {
    color: var(--ui-link-hover);
  }
  .topbar-mobile-menu-panel .topbar-mobile-action-link--strong {
    color: var(--ui-warning);
  }
  .topbar-mobile-menu-panel .topbar-mobile-categories-empty {
    padding: 6px 0 4px;
    color: var(--ui-text-soft);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.6;
  }
  .topbar .topbar-nav-primary {
    display: none;
  }
  .topbar .topbar-auth {
    width: auto;
    justify-self: end;
    display: inline-flex;
    align-items: center;
  }
  .topbar .topbar-auth .topbar-auth-panel {
    display: inline-flex;
    position: static;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .topbar .topbar-auth .topbar-auth-panel .auth-btn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
  .topbar .topbar-user {
    width: auto;
    max-width: min(46vw, 22ch);
    font-size: 12px;
    padding: 4px 8px;
  }
  .topbar .topbar-logo-link {
    justify-self: center;
    width: var(--shared-header-logo-size-mobile);
    height: var(--shared-header-logo-size-mobile);
    border-radius: 0;
  }
  .topbar .topbar-logo {
    border-radius: 0;
  }
  .topbar.topbar-layout-12 {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "nav logo actions";
    row-gap: 0;
  }
  .topbar.topbar-layout-12 > * {
    grid-row: auto;
  }
  .topbar.topbar-layout-12 .topbar-nav {
    grid-area: nav;
    grid-column: auto;
  }
  .topbar.topbar-layout-12 .topbar-logo-link {
    grid-area: logo;
    grid-column: auto;
  }
  .topbar.topbar-layout-12 .topbar-slot-actions {
    grid-area: actions;
    grid-column: auto;
    display: flex;
    justify-self: stretch;
    justify-content: flex-end;
    align-items: center;
    gap: var(--shared-header-action-gap);
    width: 100%;
    min-width: 0;
  }
  .topbar.topbar-layout-12 .topbar-extra-actions {
    justify-self: auto;
  }
  .topbar.topbar-layout-12 .topbar-slot-search {
    grid-column: auto;
    justify-self: auto;
    justify-content: center;
  }
  body.topbar-mobile-menu-open .topbar.topbar-layout-12 .topbar-slot-search {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .topbar.topbar-layout-12 .topbar-slot-actions .topbar-slot-user {
    display: none;
  }
  .topbar.topbar-layout-12 .topbar-slot-search .topbar-icon-btn {
    width: var(--shared-header-control-size-mobile);
    min-height: var(--shared-header-control-size-mobile);
  }
  .topbar.topbar-layout-12 .topbar-slot-search .topbar-icon-btn--search::after {
    content: none;
  }
  .topbar .topbar-search-panel-inner {
    width: min(calc(100vw - 32px), var(--shared-header-content-max-width));
    padding: 14px 0 18px;
  }
  .topbar .topbar-search-panel-content {
    gap: 8px;
  }
  .topbar .topbar-search-form {
    min-height: 48px;
    gap: 10px;
  }
  .topbar .topbar-search-input {
    min-height: 48px;
    font-size: 17px;
  }
  .topbar .topbar-search-shortcuts {
    gap: 5px;
  }
  .topbar .topbar-search-shortcuts-list {
    gap: 8px 12px;
  }
  .topbar .topbar-search-shortcuts-link {
    font-size: 12px;
  }
  .topbar.reader-topbar .reader-topbar-actions {
    justify-content: flex-end;
  }
  .topbar.reader-topbar .reader-topbar-actions > * {
    flex: 0 0 auto;
    width: auto;
  }
  .topbar.reader-topbar .reader-close-btn,
  .topbar.reader-topbar .topbar-save-btn,
  .topbar.reader-topbar .viewer-switch-btn {
    min-height: 30px;
    font-size: 11px;
    padding: 0 9px;
  }
  .container,
  .layout-shell {
    padding: var(--space-2);
  }
  .layout-grid-12 {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: 10px;
    border-radius: 10px;
  }
  input, textarea, select {
    padding: 9px 10px;
    font-size: 14px;
  }
  button {
    min-height: var(--btn-h-mobile);
    padding: 0 12px;
    font-size: 14px;
  }
  .auth-wrap {
    margin: 18px auto;
  }
  .auth-links .auth-sub-link,
  .auth-actions .auth-sub-link {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  body.topbar-mobile-nav-open .topbar,
  body.topbar-mobile-nav-open .topbar.topbar-menu-open {
    --topbar-surface: var(--ui-surface-glass-strong);
    background: var(--topbar-surface);
    border-bottom-color: var(--ui-border-soft);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--ui-shadow-subtle);
  }
  body.topbar-mobile-nav-open .topbar .topbar-nav-item-library > .topbar-categories > .topbar-categories-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 0s, 0s, var(--topbar-flyout-fade-duration);
  }
  body.topbar-mobile-nav-open .topbar .topbar-nav-item-library[data-mobile-menu-state="closing"] > .topbar-categories > .topbar-categories-toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s, 0s;
  }
  .topbar .topbar-mobile-menu {
    display: none !important;
  }
  .topbar .topbar-nav {
    width: auto;
  }
  .topbar .topbar-nav-primary {
    display: flex !important;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
  }
  .topbar .topbar-nav-primary > :not(.topbar-nav-item-library) {
    display: none !important;
  }
  .topbar .topbar-nav-item-library,
  .topbar .topbar-categories {
    display: block;
  }
  .topbar .topbar-nav-item-library {
    position: relative;
  }
  .topbar .topbar-nav-item-library > .topbar-categories > .topbar-categories-dropdown {
    display: none;
  }
  .topbar .topbar-desktop-auth-block {
    display: none !important;
  }
  .topbar .topbar-mobile-auth-block {
    display: grid;
  }
  .topbar .topbar-categories-toggle {
    gap: 0;
    transition:
      opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease),
      visibility 0s linear 0s;
  }
  .topbar .topbar-categories-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .topbar .topbar-categories-toggle-mark {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    font-size: 0;
    opacity: 1;
    color: var(--shared-header-action-color-strong);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 1.5px;
    transform: none;
  }
  .topbar .topbar-categories-toggle-mark::before,
  .topbar .topbar-categories-toggle-mark::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    height: 1.5px;
    background: currentColor;
    transform-origin: center;
    transition: transform var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease), top var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease), opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease), background-size var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease);
  }
  .topbar .topbar-categories-toggle-mark::before {
    top: 4px;
  }
  .topbar .topbar-categories-toggle-mark::after {
    top: 12px;
  }
  .topbar .topbar-nav-item-library.is-open .topbar-categories-toggle-mark {
    background-size: 0 0;
    opacity: 1;
  }
  .topbar .topbar-nav-item-library.is-open .topbar-categories-toggle-mark::before {
    top: 8px;
    transform: rotate(45deg);
  }
  .topbar .topbar-nav-item-library.is-open .topbar-categories-toggle-mark::after {
    top: 8px;
    transform: rotate(-45deg);
  }
  .topbar-mobile-domains {
    display: block;
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin-top: 0;
    padding-top: 0;
    border: none;
    background: var(--shared-header-surface-solid);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition:
      opacity var(--topbar-mobile-sheet-fade-duration) var(--topbar-mobile-sheet-ease),
      visibility 0s linear var(--topbar-mobile-sheet-duration);
    z-index: 420;
  }
  .topbar-mobile-domains[hidden] {
    display: none;
  }
  .topbar .topbar-categories-toggle {
    z-index: 1;
  }
  .topbar-mobile-domains[data-mobile-menu-state="opening"],
  .topbar-mobile-domains[data-mobile-menu-state="open"],
  .topbar-mobile-domains[data-mobile-menu-state="closing"] {
    visibility: visible;
    transition-delay: 0s;
  }
  .topbar-mobile-domains[data-mobile-menu-state="open"] {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 110ms;
  }
  .topbar-mobile-domains[data-mobile-menu-state="opening"] {
    opacity: 0;
    pointer-events: auto;
  }
  .topbar-mobile-domains[data-mobile-menu-state="closing"] {
    opacity: 0;
  }
  .topbar-mobile-domains .topbar-mobile-domains-panel {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    pointer-events: none;
  }
  .topbar-mobile-domains .topbar-mobile-domains-panel {
    pointer-events: none;
  }
  .topbar-mobile-domains .topbar-mobile-domains-panel > * {
    pointer-events: auto;
  }
  .topbar-mobile-domains .topbar-mobile-domains-panel {
    width: 100%;
  }
  .topbar-mobile-domains .topbar-mobile-domains-panel {
    display: flex;
    flex-direction: column;
  }
  .topbar-mobile-domains .topbar-mobile-domains-content,
  .topbar-mobile-domains .topbar-mobile-shell-header {
    width: 100%;
  }
  .topbar-mobile-domains .topbar-mobile-domains-panel {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px 0;
    background: var(--shared-header-surface-solid);
    clip-path: inset(0 0 100% 0);
    opacity: 0.001;
    transition:
      clip-path var(--topbar-mobile-sheet-duration) var(--topbar-mobile-sheet-ease),
      opacity var(--topbar-mobile-sheet-fade-duration) var(--topbar-mobile-sheet-ease);
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .topbar-mobile-domains[data-mobile-menu-state="open"] .topbar-mobile-domains-panel {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  .topbar-mobile-domains[data-mobile-menu-state="closing"] .topbar-mobile-domains-panel {
    clip-path: inset(0 0 100% 0);
    opacity: 0.001;
  }
  .topbar-mobile-domains .topbar-mobile-shell-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 40px;
    margin: 0 0 14px;
    padding: 3px 0;
    background: var(--ui-surface-hover);
    opacity: 1;
    transform: none;
  }
  .topbar-mobile-domains .topbar-mobile-shell-close {
    position: fixed;
    top: var(--topbar-mobile-close-top, 0px);
    left: var(--topbar-mobile-close-left, 0px);
    z-index: 421;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--shared-header-action-color-strong);
    font-family: var(--font-ui);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.01;
    transform: none;
    transition: opacity var(--topbar-flyout-fade-duration) var(--topbar-flyout-ease);
  }
  .topbar .topbar-categories-desktop-content {
    display: none;
  }
  .topbar-mobile-domains .topbar-mobile-domains-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0.01;
    transform: translate3d(0, -12px, 0);
    transition:
      transform var(--topbar-mobile-sheet-content-duration) var(--topbar-mobile-sheet-ease),
      opacity var(--topbar-mobile-sheet-content-duration) var(--topbar-mobile-sheet-ease);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  }
  .topbar-mobile-domains .topbar-categories-mobile-nav {
    display: block;
  }
  .topbar-mobile-domains .topbar-mobile-group {
    margin: 0;
    padding: 0;
    border: none;
  }
  .topbar-mobile-domains .topbar-mobile-group + .topbar-mobile-group {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ui-border-subtle);
  }
  .topbar-mobile-domains .topbar-mobile-group-label {
    display: block;
    margin: 0 0 10px;
    color: var(--ui-text-soft);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .topbar-mobile-domains .topbar-mobile-primary-list,
  .topbar-mobile-domains .topbar-categories-mobile-primary-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .topbar-mobile-domains .topbar-mobile-primary-item {
    display: grid;
    gap: 0;
    border: none;
    box-shadow: none;
  }
  /*
   * Mobile sheet owns primary trigger spacing, mark rendering, and +/- state.
   * Do not dedupe these selectors against the base topbar block without visual verification.
   */
  .topbar-mobile-domains .topbar-mobile-primary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 4px 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--ui-text);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
  }
  .topbar-mobile-domains .topbar-mobile-primary-mark {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    color: transparent;
    position: relative;
    font-family: var(--font-ui);
    font-size: 18px;
    line-height: 1;
  }
  .topbar-mobile-domains .topbar-mobile-primary-mark::before {
    color: var(--ui-text-muted);
  }
  .topbar-mobile-domains .topbar-mobile-primary-item[data-open="true"] .topbar-mobile-primary-mark::before {
    content: "-";
  }
  .topbar-mobile-domains .topbar-mobile-primary-item[data-open="false"] .topbar-mobile-primary-mark::before {
    content: "+";
  }
  .topbar-mobile-domains .topbar-mobile-primary-panel {
    display: block;
    overflow: hidden;
    padding-top: 4px;
    border: none;
    box-shadow: none;
    background-image: none;
  }
  .topbar-mobile-domains .topbar-mobile-primary-panel[hidden],
  .topbar-mobile-domains .topbar-mobile-primary-item[data-open="false"] .topbar-mobile-primary-panel {
    display: none;
  }
  .topbar-mobile-domains .topbar-mobile-primary-item[data-open="true"] .topbar-mobile-primary-panel {
    display: block;
  }
  /*
   * Mobile categories list keeps its own list reset and spacing contract.
   * Do not dedupe this block against the base mobile-category list without UI verification.
   */
  .topbar-mobile-domains .topbar-categories-mobile-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 0 0 0 12px;
    list-style: none;
  }
  .topbar-mobile-domains .topbar-mobile-category-item {
  }
  .topbar-mobile-domains .topbar-mobile-category-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 5px 0;
    color: var(--ui-text);
    font-family: var(--font-heading);
  }
  .topbar-mobile-domains .topbar-mobile-secondary-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
  }
  .topbar-mobile-domains .topbar-mobile-secondary-link,
  .topbar-mobile-domains .topbar-mobile-primary-item {
    opacity: 0.01;
    transform: translate3d(0, -14px, 0);
    transition:
      transform var(--topbar-mobile-sheet-content-duration) var(--topbar-mobile-sheet-ease),
      opacity var(--topbar-mobile-sheet-content-duration) var(--topbar-mobile-sheet-ease);
  }
  .topbar-mobile-domains .topbar-mobile-secondary-link {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 2px 0;
    border: none;
    background: transparent;
    color: var(--ui-text);
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    box-shadow: none;
  }
  .topbar-mobile-domains .topbar-mobile-primary-list > .topbar-mobile-primary-item:nth-child(1) {
    --topbar-mobile-item-delay: var(--topbar-mobile-sheet-content-delay);
    --topbar-mobile-item-close-delay: 0ms;
  }
  .topbar-mobile-domains .topbar-mobile-primary-list > .topbar-mobile-primary-item:nth-child(2) {
    --topbar-mobile-item-delay: var(--topbar-mobile-sheet-content-delay);
    --topbar-mobile-item-close-delay: 0ms;
  }
  .topbar-mobile-domains .topbar-mobile-primary-list > .topbar-mobile-primary-item:nth-child(3) {
    --topbar-mobile-item-delay: var(--topbar-mobile-sheet-content-delay);
    --topbar-mobile-item-close-delay: 0ms;
  }
  .topbar-mobile-domains .topbar-mobile-secondary-links .topbar-mobile-secondary-link:nth-child(1) {
    --topbar-mobile-item-delay: calc(var(--topbar-mobile-sheet-content-delay) + 130ms);
    --topbar-mobile-item-close-delay: 10ms;
  }
  .topbar-mobile-domains .topbar-mobile-secondary-links .topbar-mobile-secondary-link:nth-child(2) {
    --topbar-mobile-item-delay: calc(var(--topbar-mobile-sheet-content-delay) + 170ms);
    --topbar-mobile-item-close-delay: 0ms;
  }
  .topbar-mobile-domains[data-mobile-menu-state="open"] .topbar-mobile-domains-content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: var(--topbar-mobile-sheet-content-delay), var(--topbar-mobile-sheet-content-delay);
  }
  .topbar-mobile-domains[data-mobile-menu-state="opening"] .topbar-mobile-shell-close,
  .topbar-mobile-domains[data-mobile-menu-state="open"] .topbar-mobile-shell-close {
    opacity: 1;
    transition-delay: 0s;
  }
  .topbar-mobile-domains[data-mobile-menu-state="open"] .topbar-mobile-primary-item,
  .topbar-mobile-domains[data-mobile-menu-state="open"] .topbar-mobile-secondary-link {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: var(--topbar-mobile-item-delay, var(--topbar-mobile-sheet-content-delay));
  }
  .topbar-mobile-domains[data-mobile-menu-state="closing"] .topbar-mobile-domains-content {
    opacity: 0.01;
    transform: translate3d(0, -12px, 0);
    transition-delay: 0s;
    transition-duration: calc(var(--topbar-mobile-sheet-content-duration) + var(--topbar-mobile-sheet-content-delay));
  }
  .topbar-mobile-domains[data-mobile-menu-state="closing"] .topbar-mobile-shell-close {
    opacity: 0.01;
    transition-delay: 0s;
  }
  .topbar-mobile-domains[data-mobile-menu-state="closing"] .topbar-mobile-primary-item,
  .topbar-mobile-domains[data-mobile-menu-state="closing"] .topbar-mobile-secondary-link {
    opacity: 0.01;
    transform: translate3d(0, -14px, 0);
    transition-delay: var(--topbar-mobile-item-close-delay, 0ms);
    transition-duration: calc(var(--topbar-mobile-sheet-content-duration) + var(--topbar-mobile-sheet-content-delay));
  }
  .topbar-mobile-domains .topbar-categories-mobile-list .topbar-mobile-category-link {
    font-size: 15px;
    line-height: 1.55;
  }
  .topbar-mobile-domains .topbar-library-groups {
    display: grid;
    gap: 12px;
  }
  .topbar-mobile-domains .topbar-library-group--categories {
    padding-top: 12px;
    border-top: 1px solid var(--shared-header-library-divider-color);
  }
  .topbar-mobile-domains .topbar-library-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 28px;
  }
}

.topbar :where(.topbar-icon-btn, .topbar-editor-toggle, .topbar-account-toggle.topbar-account-toggle--icon) {
  --compact-action-hit-size-current: var(--shared-header-control-size);
  --compact-action-hover-surface-current: var(--shared-header-hover-surface, var(--compact-action-hover-surface-base));
  --compact-action-hover-color-current: var(--shared-header-action-color-strong, var(--compact-action-hover-color-base));
}

.topbar-mobile-domains .topbar-mobile-shell-close {
  --compact-action-hit-size-current: var(--topbar-mobile-close-width, var(--compact-action-hit-size-base));
  --compact-action-hover-surface-current: var(--shared-header-hover-surface, var(--compact-action-hover-surface-base));
  --compact-action-hover-color-current: var(--shared-header-action-color-strong, var(--compact-action-hover-color-base));
}

.book-qa-popup__icon-btn {
  --compact-action-hit-size-current: 36px;
  --compact-action-hover-surface-current: var(--ui-surface-wash);
  --compact-action-hover-color-current: var(--ui-text-strong);
}

.topbar .topbar-icon-btn,
.topbar .topbar-editor-toggle,
.topbar .topbar-account-toggle.topbar-account-toggle--icon,
.topbar-mobile-domains .topbar-mobile-shell-close,
.book-qa-popup__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
  min-width: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
  max-width: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
  height: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
  min-height: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
  max-height: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
  border-radius: var(--compact-action-radius);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.topbar .topbar-icon-btn:not(:disabled):is(:hover, :focus-visible),
.topbar #topbarAdminToggle.topbar-header-icon-btn:not(:disabled):is(:hover, :focus-visible),
.topbar .topbar-editor-toggle:not(:disabled):is(:hover, :focus-visible),
.topbar .topbar-account-toggle.topbar-account-toggle--icon:not(:disabled):is(:hover, :focus-visible),
.topbar-mobile-domains .topbar-mobile-shell-close:not(:disabled):is(:hover, :focus-visible),
.book-qa-popup__icon-btn:not(:disabled):is(:hover, :focus-visible) {
  background: var(--compact-action-hover-surface-current, var(--compact-action-hover-surface-base));
  color: var(--compact-action-hover-color-current, var(--compact-action-hover-color-base));
}

@media (max-width: 768px) {
  .topbar :where(.topbar-icon-btn, .topbar-editor-toggle, .topbar-account-toggle.topbar-account-toggle--icon) {
    --compact-action-hit-size-current: var(--shared-header-control-size-mobile);
  }
  .topbar-mobile-domains .topbar-library-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  .topbar .topbar-categories-toggle {
    --compact-action-hit-size-current: var(--shared-header-control-size-mobile);
    --compact-action-hover-surface-current: var(--shared-header-hover-surface, var(--compact-action-hover-surface-base));
    --compact-action-hover-color-current: var(--shared-header-action-color-strong, var(--compact-action-hover-color-base));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
    min-width: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
    max-width: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
    height: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
    min-height: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
    max-height: var(--compact-action-hit-size-current, var(--compact-action-hit-size-base));
    border-radius: var(--compact-action-radius);
    aspect-ratio: 1 / 1;
  }

  .topbar .topbar-categories-toggle:not(:disabled):is(:hover, :focus-visible) {
    background: var(--compact-action-hover-surface-current, var(--compact-action-hover-surface-base));
    color: var(--compact-action-hover-color-current, var(--compact-action-hover-color-base));
  }
}

/* === Migrated Non-Reader Template Styles === */

/* Migrated from app/templates/about.html style block 1. */
    .about-page {
      display: grid;
      gap: 48px;
      padding: 24px 0 64px;
    }
    .about-hero,
    .about-section {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-grid-gap);
      row-gap: 24px;
      align-items: start;
    }
    .about-hero__copy,
    .about-section__copy {
      grid-column: 1 / span 7;
      display: grid;
      gap: 18px;
      min-width: 0;
    }
    .about-hero__stats {
      grid-column: 9 / span 4;
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .about-kicker {
      margin: 0;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .about-title,
    .about-section__title {
      margin: 0;
      color: var(--ui-text-strong);
      font-size: clamp(30px, 3vw, 42px);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }
    .about-section__title {
      font-size: 28px;
    }
    .about-copy,
    .about-list {
      margin: 0;
      color: var(--ui-text);
      font-size: 16px;
      line-height: 1.85;
    }
    .about-list {
      padding-left: 18px;
    }
    .about-stats {
      display: grid;
      gap: 12px;
    }
    .about-stat {
      display: grid;
      gap: 6px;
      padding: 16px 0;
      border-top: 1px solid var(--ui-border-soft);
    }
    .about-stat strong {
      color: var(--ui-text-strong);
      font-family: var(--font-heading);
      font-size: 26px;
      line-height: 1;
    }
    .about-stat span {
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    @media (max-width: 900px) {
      .about-hero__copy,
      .about-hero__stats,
      .about-section__copy {
        grid-column: 1 / -1;
      }
    }


/* Migrated from app/templates/account.html style block 1. */
    body.page-account-workspace {
      --account-text-strong: var(--ui-text-strong);
      --account-text: var(--ui-text);
      --account-text-mid: var(--ui-text-strong);
      --account-text-muted: var(--ui-text-muted);
      --account-text-soft: var(--ui-text-soft);
      --account-link: var(--ui-link);
      --account-line: var(--ui-border);
      --account-line-soft: var(--ui-border-soft);
      --account-line-strong: var(--ui-border-strong);
      --account-line-hover: var(--ui-border-hover);
      --account-surface: var(--ui-surface);
      --account-surface-solid: var(--ui-surface-solid);
      --account-surface-hover: var(--ui-surface-hover);
      --account-surface-accent: var(--ui-warning-surface);
      --account-cover-surface: var(--ui-surface-muted);
      --account-primary: var(--ui-accent);
      --account-primary-hover: var(--ui-accent-hover);
      --account-primary-border: var(--ui-border-hover);
      --account-primary-border-hover: var(--ui-border-hover);
      --account-primary-text: var(--ui-on-accent);
      --account-danger-surface: var(--ui-danger-surface);
      --account-danger-hover: var(--ui-danger-surface);
      --account-danger-text: var(--account-primary);
      --account-danger-border: var(--ui-danger-border);
      --account-danger-border-hover: var(--ui-danger-border);
      --account-banner-border: var(--ui-warning-border);
      --account-banner-surface: var(--ui-warning-surface);
      --account-banner-text: var(--ui-warning);
      --account-success-border: var(--ui-success-border);
      --account-success-surface: var(--ui-success-surface);
      --account-success-text: var(--ui-success);
      --account-toggle-thumb: var(--ui-text-soft);
      --account-focus-ring: var(--account-primary);
    }
    body.page-account-workspace .admin-ui-page {
      --account-text-strong: var(--admin-text-strong, var(--admin-text));
      --account-text: var(--admin-text);
      --account-text-mid: var(--admin-text);
      --account-text-muted: var(--admin-text-muted, var(--admin-text-dim));
      --account-text-soft: var(--admin-text-soft, var(--admin-text-dim));
      --account-link: var(--admin-accent, var(--ui-link));
      --account-line: var(--admin-panel-border, var(--admin-line));
      --account-line-soft: var(--admin-panel-border-soft, var(--admin-line-table));
      --account-line-strong: var(--admin-line-strong);
      --account-line-hover: var(--admin-line-hover);
      --account-surface: var(--admin-panel-surface, var(--admin-surface));
      --account-surface-solid: var(--admin-control-surface, var(--admin-surface));
      --account-surface-hover: var(--admin-control-surface-hover, var(--admin-surface-hover));
      --account-surface-accent: var(--admin-badge-accent-surface, var(--ui-warning-surface));
      --account-cover-surface: var(--admin-panel-surface-muted, var(--admin-surface-muted));
      --account-primary: var(--admin-accent, var(--ui-accent));
      --account-primary-hover: var(--admin-control-surface-hover, var(--ui-accent-hover));
      --account-primary-border: var(--admin-line-strong);
      --account-primary-border-hover: var(--admin-line-hover);
      --account-primary-text: var(--admin-file-button-text, var(--ui-on-accent));
      --account-danger-surface: var(--admin-danger-soft, var(--ui-danger-surface));
      --account-danger-hover: var(--admin-danger-soft, var(--ui-danger-surface));
      --account-danger-text: var(--admin-danger, var(--ui-danger));
      --account-danger-border: var(--admin-danger-border, var(--ui-danger-border));
      --account-danger-border-hover: var(--admin-danger-border-hover, var(--ui-danger-border-hover));
      --account-banner-border: var(--ui-warning-border);
      --account-banner-surface: var(--ui-warning-surface);
      --account-banner-text: var(--ui-warning);
      --account-success-border: var(--ui-success-border);
      --account-success-surface: var(--ui-success-surface);
      --account-success-text: var(--ui-success);
      --account-toggle-thumb: var(--admin-text-soft, var(--admin-text-dim));
      --account-focus-ring: var(--admin-accent, var(--ui-accent));
    }
    .account-page h1,
    .account-page h2,
    .account-page h3,
    .account-page p {
      margin: 0;
    }
    .account-shell,
    .account-header,
    .account-detail-stack,
    .account-list-nav {
      display: grid;
      gap: 16px;
    }
    .account-shell {
      border-color: var(--account-line);
      background: var(--account-surface);
      color: var(--account-text);
    }
    .account-header {
      gap: 8px;
    }
    .account-page-title {
      color: var(--account-text-strong);
      font-size: clamp(28px, 4vw, 36px);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }
    .account-page-copy {
      max-width: 60ch;
      color: var(--account-text-muted);
      line-height: 1.7;
    }
    .account-banner {
      display: grid;
      gap: 8px;
      padding: 16px 18px;
      border: 1px solid var(--account-banner-border);
      background: var(--account-banner-surface);
      color: var(--account-banner-text);
    }
    .account-banner[hidden] {
      display: none;
    }
    .account-banner.is-success {
      border-color: var(--account-success-border);
      background: var(--account-success-surface);
      color: var(--account-success-text);
    }
    /*
     * Nav-card owner:
     * .account-nav-link keeps account section links self-contained as full-row cards.
     */
    .account-nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 56px;
      padding: 16px;
      border: 1px solid var(--account-line);
      background: var(--account-surface);
      color: var(--account-text);
      text-decoration: none;
      transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
    }
    .account-nav-link:hover,
    .account-nav-link:focus-visible {
      border-color: var(--account-line-hover);
      background: var(--account-surface-hover);
    }
    .account-nav-label {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }
    .account-nav-arrow {
      color: var(--account-text-soft);
      font-size: 16px;
      line-height: 1;
    }
    body.theme-quoc-tang.page-account-workspace .account-page :where(
      .account-shell,
      .account-nav-link,
      .account-section-card,
      .account-library-card,
      .account-session-row,
      .account-identity-row,
      .account-plan-row,
      .account-feature-row,
      .account-event-row,
      .account-state-card,
      .account-meta-row,
      .account-setting-row
    ) {
      border-color: var(--account-line);
      background: var(--account-surface);
      color: var(--account-text);
    }
    body.theme-quoc-tang.page-account-workspace .account-page :where(.account-nav-link:hover, .account-nav-link:focus-visible) {
      border-color: var(--account-line-hover);
      background: var(--account-surface-hover);
      color: var(--account-text-strong);
    }
    body.theme-quoc-tang.page-account-workspace .account-page :where(.account-page-title, .account-section-heading h3, .account-nav-label, .account-value) {
      color: var(--account-text-strong);
    }
    body.theme-quoc-tang.page-account-workspace .account-page :where(
      .account-page-copy,
      .account-summary-meta,
      .account-inline-meta,
      .account-note,
      .account-empty,
      .account-label,
      .account-nav-arrow,
      .account-library-author,
      .account-library-meta,
      .account-loading
    ) {
      color: var(--account-text-muted);
    }
    .account-detail-header {
      display: grid;
      gap: 8px;
    }
    .account-section-card,
    .account-library-card,
    .account-session-row,
    .account-identity-row,
    .account-plan-row,
    .account-feature-row,
    .account-event-row,
    .account-state-card {
      border: 1px solid var(--account-line);
      background: var(--account-surface);
    }
    .account-section-card,
    .account-state-card {
      display: grid;
      gap: 16px;
      padding: 16px;
    }
    .account-meta,
    .account-summary-list,
    .account-summary-item,
    .account-inline-list,
    .account-inline-meta,
    .account-actions,
    .account-form,
    .account-field,
    .account-list-block,
    .account-list-head,
    .account-empty {
      display: grid;
      gap: 8px;
    }
    .account-summary-meta,
    .account-inline-meta,
    .account-note,
    .account-empty {
      color: var(--account-text-muted);
      font-size: 14px;
      line-height: 1.65;
    }
    .account-section-heading {
      display: block;
    }
    .account-section-heading h3 {
      color: var(--account-text-strong);
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .account-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .account-meta-row {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border: 1px solid var(--account-line-soft);
      background: var(--account-surface-solid);
    }
    .account-label {
      color: var(--account-toggle-thumb);
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.4;
      text-transform: uppercase;
    }
    .account-value {
      color: var(--account-text);
      overflow-wrap: anywhere;
      line-height: 1.55;
    }
    .account-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    /*
     * Info-chip owner:
     * .account-chip keeps account metadata chips compact across account sections.
     */
    .account-chip {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid var(--account-line-strong);
      background: var(--account-surface-solid);
      color: var(--account-text-mid);
      font-family: var(--font-ui);
      font-size: 13px;
      line-height: 1.3;
    }
    .account-chip.is-accent {
      border-color: var(--account-primary-border-hover);
      background: var(--account-surface-accent);
      color: var(--account-banner-text);
    }
    .account-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .account-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid var(--account-line-strong);
      background: var(--account-surface-solid);
      color: var(--account-text);
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    }
    .account-btn:hover:not(:disabled),
    .account-btn:focus-visible:not(:disabled) {
      background: var(--account-surface-accent);
      border-color: var(--account-line-hover);
    }
    .account-btn:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }
    .account-btn--primary {
      border-color: var(--account-primary-border);
      background: var(--account-primary);
      color: var(--account-primary-text);
    }
    .account-btn--primary:hover:not(:disabled),
    .account-btn--primary:focus-visible:not(:disabled) {
      background: var(--account-primary-hover);
      border-color: var(--account-primary-border-hover);
    }
    .account-btn--danger {
      border-color: var(--account-danger-border);
      color: var(--account-danger-text);
      background: var(--account-danger-surface);
    }
    .account-btn--danger:hover:not(:disabled),
    .account-btn--danger:focus-visible:not(:disabled) {
      background: var(--account-danger-hover);
      border-color: var(--account-danger-border-hover);
    }
    .account-link-inline {
      color: var(--account-link);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
    }
    .account-form {
      gap: 16px;
    }
    .account-field input {
      width: 100%;
    }
    .account-setting-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 14px 0;
      border-top: 1px solid var(--account-line-soft);
    }
    .account-setting-row:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .account-setting-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .account-toggle {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 30px;
      flex: 0 0 auto;
    }
    .account-toggle input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    .account-toggle__track {
      width: 100%;
      height: 100%;
      border: 1px solid var(--account-line-strong);
      border-radius: 999px;
      background: var(--account-surface-solid);
      transition: background-color 140ms ease, border-color 140ms ease;
    }
    .account-toggle__track::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--account-toggle-thumb);
      transition: transform 140ms ease, background-color 140ms ease;
    }
    .account-toggle input:checked + .account-toggle__track {
      border-color: var(--account-primary-border);
      background: var(--account-primary);
    }
    .account-toggle input:checked + .account-toggle__track::after {
      transform: translateX(24px);
      background: var(--account-primary-text);
    }
    .account-toggle input:focus-visible + .account-toggle__track {
      outline: 2px solid var(--account-primary);
      outline-offset: 2px;
    }
    .account-status {
      min-height: 20px;
      color: var(--account-banner-text);
      font-family: var(--font-ui);
      font-size: 13px;
      line-height: 1.5;
    }
    .account-status.is-success {
      color: var(--account-success-text);
    }
    .account-list-block {
      gap: 12px;
    }
    .account-list-head {
      gap: 4px;
    }
    .account-library-card {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr) auto;
      grid-template-areas: "cover main actions";
      gap: 16px;
      align-items: start;
      padding: 16px;
    }
    .account-library-cover-link {
      grid-area: cover;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      width: 88px;
      aspect-ratio: 2 / 3;
      background: transparent;
    }
    .account-library-cover {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center bottom;
      display: block;
      border: 1px solid var(--mz-rule);
      border-radius: 0;
      background: transparent;
    }
    .account-library-cover-link:has(> img[src*="/static/cover-placeholder.png"]) {
      background: var(--mz-cover-placeholder, #e9dfcc);
    }
    .account-library-cover[src*="/static/cover-placeholder.png"] {
      border: none;
    }
    .account-library-main {
      grid-area: main;
      display: grid;
      gap: 8px;
      align-content: start;
      min-width: 0;
    }
    .account-library-title {
      margin: 0;
      color: var(--account-text);
      font-family: var(--font-heading);
      font-size: 20px;
      line-height: 1.25;
      font-weight: 700;
    }
    .account-library-title a {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: inherit;
      text-decoration: none;
    }
    .account-library-actions {
      grid-area: actions;
      display: grid;
      gap: 8px;
      align-content: start;
      justify-self: end;
    }
    .account-library-actions--single {
      grid-template-columns: minmax(96px, max-content);
    }
    .account-library-actions--dual {
      grid-template-columns: repeat(2, minmax(96px, max-content));
    }
    .account-library-actions .account-btn {
      width: 100%;
      min-width: 96px;
      white-space: nowrap;
      border-radius: 10px;
    }
    .account-library-author {
      color: var(--account-text-muted);
      line-height: 1.6;
    }
    .account-library-meta {
      display: grid;
      gap: 4px;
      color: var(--account-text-mid);
      font-size: 14px;
      line-height: 1.6;
    }
    .account-session-row,
    .account-identity-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px 16px;
      align-items: start;
      padding: 16px;
    }
    .account-session-main,
    .account-identity-main {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .account-session-note,
    .account-identity-note {
      color: var(--account-primary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .account-plan-row,
    .account-feature-row,
    .account-event-row {
      display: grid;
      gap: 8px;
      padding: 16px;
    }
    .account-plan-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
      flex-wrap: wrap;
    }
    .account-plan-price {
      color: var(--account-text-mid);
      font-family: var(--font-ui);
      font-size: 13px;
    }
    .account-loading {
      color: var(--account-text-muted);
      font-size: 14px;
      line-height: 1.7;
    }
    @media (max-width: 980px) {
      .account-meta-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 720px) {
      .account-section-card,
      .account-state-card,
      .account-library-card,
      .account-session-row,
      .account-identity-row,
      .account-plan-row,
      .account-feature-row,
      .account-event-row {
        padding: 16px;
      }
      .account-library-card {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
          "cover main"
          "actions actions";
      }
      .account-library-cover-link {
        width: 72px;
      }
      .account-actions {
        align-items: stretch;
      }
      .account-actions .account-btn,
      .account-actions .account-link-inline {
        width: 100%;
      }
      .account-library-actions {
        justify-self: stretch;
      }
      .account-library-actions--single,
      .account-library-actions--dual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .account-library-actions--single {
        grid-template-columns: minmax(0, 1fr);
      }
      .account-session-row,
      .account-identity-row {
        grid-template-columns: 1fr;
      }
      .account-setting-row {
        grid-template-columns: 1fr;
      }
    }


/* Migrated from app/templates/admin_author_edit.html style block 1. */
    .author-editor-shell {
      gap: var(--admin-gap-section);
    }
    .author-editor-main {
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    }
    .author-editor-fields,
    .author-editor-side,
    .author-linked-books {
      display: grid;
      gap: 12px;
    }
    .author-editor-side p,
    .author-editor-meta,
    .author-linked-book-meta {
      margin: 0;
      color: var(--admin-text-dim);
      line-height: 1.55;
    }
    .author-editor-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 12px;
      border: 1px solid var(--admin-line);
      border-radius: 12px;
      background: var(--ui-surface-solid);
      color: var(--admin-text);
    }
    .author-editor-toggle input {
      width: 16px;
      height: 16px;
      margin: 0;
    }
    .author-linked-book {
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid var(--admin-line);
      border-radius: 12px;
      text-decoration: none;
      color: inherit;
      background: var(--ui-surface-solid);
    }
    .author-linked-book:hover,
    .author-linked-book:focus-visible {
      border-color: var(--admin-line-hover, var(--ui-border-hover));
      background: var(--ui-surface-hover);
    }
    .author-linked-book-title {
      margin: 0;
      color: var(--ui-text-strong);
      font-size: 14px;
      line-height: 1.4;
    }
    .author-editor-danger {
      border-color: var(--ui-danger-border);
      color: var(--ui-danger);
    }
    .author-editor-danger:hover,
    .author-editor-danger:focus-visible {
      border-color: var(--ui-danger-border-hover);
      background: var(--ui-danger-surface);
    }
    @media (max-width: 960px) {
      .author-editor-main {
        grid-template-columns: 1fr;
      }
    }


/* Migrated from app/templates/admin_authors.html style block 1. */
    .author-admin-shell,
    .author-admin-head,
    .author-row-main,
    .author-row-actions {
      display: grid;
      gap: 12px;
    }
    .author-admin-table .admin-ui-table {
      min-width: 1080px;
    }
    .author-row-name {
      margin: 0;
      color: var(--ui-text-strong);
      font-size: 15px;
      line-height: 1.4;
    }
    .author-row-slug,
    .author-row-meta,
    .author-row-bio {
      margin: 0;
      color: var(--ui-text-muted);
      line-height: 1.55;
    }
    .author-row-slug,
    .author-row-meta {
      font-size: 12px;
    }
    .author-row-bio {
      font-size: 13px;
      max-width: 520px;
    }
    .author-row-actions {
      grid-auto-flow: column;
      justify-content: start;
      gap: 8px;
    }
    .author-row-actions a,
    .author-row-actions button,
    .author-create-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 12px;
      border: 1px solid var(--ui-border-strong);
      border-radius: 10px;
      background: var(--ui-surface-solid);
      color: var(--ui-text-strong);
      font: inherit;
      text-decoration: none;
      cursor: pointer;
      box-sizing: border-box;
    }
    .author-row-actions a:hover,
    .author-row-actions a:focus-visible,
    .author-row-actions button:hover,
    .author-row-actions button:focus-visible,
    .author-create-link:hover,
    .author-create-link:focus-visible {
      background: var(--ui-surface-hover);
      border-color: var(--ui-border-hover);
    }
    .author-row-actions .is-danger:hover,
    .author-row-actions .is-danger:focus-visible {
      color: var(--ui-danger);
      border-color: var(--ui-danger-border-hover);
      background: var(--ui-danger-surface);
    }


/* Migrated from app/templates/admin_bookshelf_edit.html style block 1. */
    :root {
      --line: var(--ui-border);
      --line-2: var(--ui-border-soft);
      --text-dim: var(--ui-text-muted);
      --text-main: var(--ui-text-strong);
      --danger: var(--ui-danger);
      --danger-soft: var(--ui-danger-surface);
    }
    .bookshelf-admin-shell {
      display: grid;
      gap: var(--admin-gap-section);
    }
    .bookshelf-page-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }
    .bookshelf-page-head p,
    .bookshelf-panel-head p {
      margin: 0;
      color: var(--text-dim);
      line-height: 1.55;
    }
    .bookshelf-back-link,
    .bookshelf-form-actions a,
    .bookshelf-book-actions a,
    .bookshelf-search-result button,
    .bookshelf-book-actions button,
    .bookshelf-form-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid var(--ui-border-strong);
      background: var(--ui-surface-solid);
      color: var(--text-main);
      font: inherit;
      text-decoration: none;
      cursor: pointer;
      box-sizing: border-box;
      width: auto;
      min-width: 0;
      border-radius: 10px;
      transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
    }
    .bookshelf-back-link {
      min-height: 30px;
      padding: 0 10px;
      font-size: 13px;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .bookshelf-back-link:hover,
    .bookshelf-back-link:focus-visible,
    .bookshelf-form-actions a:hover,
    .bookshelf-form-actions a:focus-visible,
    .bookshelf-search-result button:hover,
    .bookshelf-search-result button:focus-visible,
    .bookshelf-book-actions button:hover,
    .bookshelf-book-actions button:focus-visible,
    .bookshelf-form-actions button:hover,
    .bookshelf-form-actions button:focus-visible {
      border-color: var(--ui-border-hover);
      background: var(--ui-surface-hover);
    }
    .bookshelf-panel {
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--line);
      background: var(--ui-surface);
      border-radius: 16px;
    }
    .bookshelf-panel-head {
      display: grid;
      gap: 4px;
    }
    .bookshelf-panel-head h2,
    .bookshelf-panel-head h3,
    .bookshelf-page-head h1 {
      margin: 0;
      line-height: 1.2;
    }
    .bookshelf-page-head h1 {
      color: var(--text-main);
      flex: 1 1 auto;
      min-width: 0;
    }
    .bookshelf-page-head p {
      grid-column: 1 / -1;
    }
    .bookshelf-form {
      display: grid;
      gap: 12px;
    }
    .bookshelf-form-main,
    .bookshelf-search-shell,
    .bookshelf-books-shell {
      display: grid;
      gap: 12px;
      padding: 0;
      border: 0;
      background: transparent;
      border-radius: 0;
    }
    .bookshelf-form-main {
      grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.95fr);
      gap: 14px 24px;
      align-items: start;
    }
    .bookshelf-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .bookshelf-identity-row {
      grid-column: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .bookshelf-identity-field {
      display: grid;
      grid-template-rows: 20px minmax(36px, auto);
      gap: 6px;
      min-width: 0;
      align-content: start;
    }
    .bookshelf-identity-label {
      display: flex;
      align-items: flex-end;
      color: var(--text-main);
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
    }
    .bookshelf-identity-input {
      width: 100%;
      box-sizing: border-box;
      min-height: 36px;
      padding: 7px 10px;
      border: 1px solid var(--ui-border-strong);
      border-radius: 10px;
      background: var(--ui-surface-solid);
      color: var(--text-main);
      font: inherit;
    }
    .bookshelf-form-grid label,
    .bookshelf-form-main > label,
    .bookshelf-search-shell label {
      display: grid;
      gap: 5px;
      color: var(--text-main);
      font-size: 13px;
      font-weight: 600;
    }
    .bookshelf-form-main > label {
      grid-column: 1;
      align-self: start;
    }
    .bookshelf-form input[type="text"],
    .bookshelf-form input[type="number"],
    .bookshelf-form textarea,
    .bookshelf-search-shell input[type="search"] {
      width: 100%;
      box-sizing: border-box;
      min-height: 36px;
      padding: 7px 10px;
      border: 1px solid var(--ui-border-strong);
      background: var(--ui-surface-solid);
      color: var(--text-main);
      font: inherit;
      border-radius: 10px;
    }
    .bookshelf-form textarea {
      min-height: 72px;
      resize: vertical;
    }
    .bookshelf-input-title {
      font-size: 13px;
    }
    .bookshelf-main-meta-row {
      grid-column: 2;
      grid-row: 1 / span 2;
      display: grid;
      gap: 12px;
      align-content: start;
      justify-items: start;
      min-width: 0;
      padding: 2px 0 0;
    }
    .bookshelf-main-meta-row > * {
      min-width: 0;
      width: auto;
      max-width: 100%;
      align-self: start;
    }
    .bookshelf-toggle-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      align-items: center;
      justify-content: flex-start;
      width: auto;
      max-width: 100%;
    }
    .bookshelf-toggle-row label {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      min-height: 30px;
      padding: 3px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--ui-surface);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      width: auto;
      box-sizing: border-box;
      flex: 0 0 auto;
    }
    .bookshelf-toggle-row label span {
      color: var(--text-main);
      min-width: 0;
    }
    .bookshelf-toggle-row input[type="checkbox"] {
      width: 14px;
      height: 14px;
      margin: 0;
      accent-color: var(--ui-danger);
      flex: 0 0 auto;
    }
    .bookshelf-form-grid.is-orders {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      gap: 12px;
      align-items: end;
      justify-content: flex-start;
      width: auto;
      max-width: 100%;
    }
    .bookshelf-form-grid.is-orders label {
      display: grid;
      gap: 5px;
      white-space: nowrap;
      width: max-content;
      align-content: start;
    }
    .bookshelf-form-actions {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-start;
      min-height: 34px;
      width: auto;
      max-width: 100%;
      min-width: 0;
    }
    .bookshelf-form-actions > * {
      width: auto;
      flex: 0 0 auto;
      min-width: 0;
      white-space: nowrap;
    }
    .bookshelf-form-actions button,
    .bookshelf-form-actions a {
      min-height: 34px;
      padding: 0 12px;
    }
    .bookshelf-form-grid.is-orders input[type="number"] {
      width: 64px;
      min-width: 64px;
      min-height: 34px;
      padding: 6px 8px;
      text-align: left;
    }
    .bookshelf-delete-btn {
      border-color: var(--ui-danger-border);
      color: var(--danger);
      background: var(--ui-surface-solid);
    }
    .bookshelf-delete-btn:hover,
    .bookshelf-delete-btn:focus-visible {
      border-color: var(--ui-danger-border-hover);
      background: var(--danger-soft);
      color: var(--danger);
    }
    .bookshelf-preview-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--ui-border-strong);
      border-radius: 10px;
      background: var(--ui-surface-solid);
      color: var(--text-main);
      text-decoration: none;
      box-sizing: border-box;
      width: auto;
    }
    .bookshelf-status {
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.6;
      min-height: 20px;
    }
    .bookshelf-workspace-shell {
      display: grid;
      gap: 18px;
      padding: 14px 0 0;
      border: 0;
      border-top: 1px solid var(--line);
      background: transparent;
      border-radius: 0;
    }
    .bookshelf-search-shell,
    .bookshelf-books-shell {
      gap: 10px;
      padding: 0;
      border: 0;
      background: transparent;
      border-radius: 0;
    }
    .bookshelf-search-results,
    .bookshelf-book-list {
      display: grid;
      gap: 0;
      align-content: start;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--ui-surface-solid);
      overflow: hidden;
    }
    .bookshelf-search-results {
      max-height: 420px;
      overflow: auto;
    }
    .bookshelf-book-list {
      max-height: 68vh;
      overflow: auto;
    }
    .bookshelf-search-result,
    .bookshelf-book-row {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 9px 11px;
      border-bottom: 1px solid var(--line-2);
      background: var(--ui-surface-solid);
    }
    .bookshelf-search-results > :last-child,
    .bookshelf-book-list > :last-child {
      border-bottom: 0;
    }
    .bookshelf-row-index {
      color: var(--admin-text-dim);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .bookshelf-search-result-title,
    .bookshelf-book-title {
      margin: 0;
      font-size: 15px;
      line-height: 1.4;
    }
    .bookshelf-search-result-meta,
    .bookshelf-book-meta {
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.5;
    }
    .bookshelf-book-cover {
      width: 52px;
      height: 72px;
      object-fit: cover;
      background: var(--admin-surface-muted, var(--ui-surface-muted));
      border: 1px solid var(--line);
      flex: 0 0 auto;
    }
    .bookshelf-book-main {
      display: flex;
      align-items: start;
      gap: 10px;
      min-width: 0;
    }
    .bookshelf-book-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .bookshelf-book-order {
      font-size: 12px;
      font-weight: 700;
      color: var(--admin-text-dim);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .bookshelf-book-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .bookshelf-empty {
      padding: 16px;
      border: 1px dashed var(--line);
      color: var(--text-dim);
      background: var(--ui-surface);
    }
    @media (min-width: 1180px) {
      .bookshelf-workspace-shell {
        grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
        align-items: start;
      }
      .bookshelf-search-shell {
        align-self: start;
        position: sticky;
        top: 88px;
      }
    }
    @media (max-width: 1100px) {
      .bookshelf-panel,
      .bookshelf-form-main,
      .bookshelf-workspace-shell {
        padding: 14px;
      }
      .bookshelf-workspace-shell {
        padding-right: 0;
        padding-left: 0;
      }
      .bookshelf-form-main {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .bookshelf-main-meta-row {
        grid-column: auto;
        grid-row: auto;
        gap: 10px;
        padding-top: 0;
      }
      .bookshelf-main-meta-row > * {
        width: 100%;
      }
      .bookshelf-toggle-row {
        flex-wrap: wrap;
      }
      .bookshelf-form-actions {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
      }
      .bookshelf-book-list,
      .bookshelf-search-results {
        max-height: none;
      }
    }
    @media (max-width: 900px) {
      .bookshelf-page-head {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .bookshelf-back-link {
        justify-self: start;
      }
      .bookshelf-main-meta-row {
        gap: 10px;
      }
      .bookshelf-toggle-row {
        flex-wrap: wrap;
      }
      .bookshelf-form-grid.is-orders {
        justify-content: flex-start;
      }
      .bookshelf-form-actions {
        justify-content: flex-start;
      }
    }
    @media (max-width: 720px) {
      .bookshelf-panel {
        padding: 12px;
      }
      .bookshelf-form-main,
      .bookshelf-workspace-shell {
        padding: 12px;
      }
      .bookshelf-form-grid {
        grid-template-columns: 1fr;
      }
      .bookshelf-identity-row {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .bookshelf-toggle-row {
        align-items: flex-start;
      }
      .bookshelf-form-grid.is-orders {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .bookshelf-form-grid.is-orders label {
        display: grid;
        gap: 5px;
        white-space: normal;
      }
      .bookshelf-form-grid.is-orders input[type="number"] {
        width: 96px;
        min-width: 96px;
      }
      .bookshelf-book-main {
        align-items: start;
      }
      .bookshelf-book-actions {
        justify-content: flex-start;
      }
      .bookshelf-search-result,
      .bookshelf-book-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
      }
    }
    @media (max-width: 560px) {
      .bookshelf-admin-shell,
      .bookshelf-form,
      .bookshelf-form-main,
      .bookshelf-search-shell,
      .bookshelf-books-shell,
      .bookshelf-workspace-shell {
        gap: 10px;
      }
      .bookshelf-page-head {
        gap: 6px;
      }
      .bookshelf-panel {
        padding: 10px;
      }
      .bookshelf-form-main,
      .bookshelf-workspace-shell {
        padding: 10px;
      }
      .bookshelf-back-link,
      .bookshelf-form-actions a,
      .bookshelf-book-actions a,
      .bookshelf-search-result button,
      .bookshelf-book-actions button,
      .bookshelf-form-actions button {
        min-height: 36px;
      }
      .bookshelf-form-actions {
        gap: 6px;
      }
      .bookshelf-form-actions a,
      .bookshelf-form-actions button {
        padding: 0 10px;
        font-size: 13px;
      }
    }


/* Migrated from app/templates/admin_bookshelves.html style block 1. */
    :root {
      --line: var(--ui-border);
      --line-2: var(--ui-border-soft);
      --bg-soft: var(--ui-surface-muted);
      --text-dim: var(--ui-text-muted);
      --accent: var(--ui-danger);
      --text-main: var(--ui-text-strong);
      --danger: var(--ui-danger);
      --danger-soft: var(--ui-danger-surface);
    }
    .bookshelf-admin-shell {
      display: grid;
      gap: var(--admin-gap-section);
    }
    .bookshelf-page-head {
      display: grid;
      gap: 8px;
    }
    .bookshelf-page-head p {
      margin: 0;
      color: var(--text-dim);
      line-height: 1.6;
      max-width: 880px;
    }
    .bookshelf-create-link,
    .bookshelf-row-actions a,
    .bookshelf-row-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid var(--ui-border-strong);
      background: var(--ui-surface-solid);
      color: var(--text-main);
      font: inherit;
      text-decoration: none;
      cursor: pointer;
      box-sizing: border-box;
      border-radius: 10px;
      transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
    }
    .bookshelf-create-link:hover,
    .bookshelf-create-link:focus-visible,
    .bookshelf-row-actions a:hover,
    .bookshelf-row-actions a:focus-visible,
    .bookshelf-row-actions button:hover,
    .bookshelf-row-actions button:focus-visible {
      border-color: var(--ui-border-hover);
      background: var(--ui-surface-hover);
    }
    .bookshelf-row-actions .bookshelf-delete-btn:hover,
    .bookshelf-row-actions .bookshelf-delete-btn:focus-visible {
      border-color: var(--ui-danger-border-hover);
      background: var(--danger-soft);
      color: var(--danger);
    }
    .bookshelf-table-shell .admin-ui-table {
      min-width: var(--admin-table-min-width-roomy);
    }
    .bookshelf-row-slug,
    .bookshelf-row-description,
    .bookshelf-status,
    .bookshelf-order-meta {
      color: var(--text-dim);
    }
    .bookshelf-row-slug,
    .bookshelf-row-description,
    .bookshelf-order-meta {
      font-size: 12px;
      line-height: 1.45;
    }
    .bookshelf-row-description {
      margin-top: 4px;
    }
    .bookshelf-row-facts,
    .bookshelf-row-toggles {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    /*
     * Count-chip owner:
     * .bookshelf-chip keeps bookshelf status/count chips compact across admin table rows.
     */
    .bookshelf-chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid var(--admin-line, var(--line));
      background: var(--admin-surface-chip, var(--ui-surface));
      color: var(--admin-text-chip, var(--ui-text-muted));
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .bookshelf-chip.is-on {
      border-color: var(--admin-badge-accent-surface, var(--ui-accent-focus));
      color: var(--admin-badge-accent-text, var(--accent));
      background: var(--admin-badge-accent-surface, var(--ui-warning-surface));
    }
    .bookshelf-chip.is-count {
      background: var(--admin-surface-chip, var(--ui-surface-muted));
      color: var(--admin-text-chip, var(--ui-text-muted));
    }
    .bookshelf-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 0 8px 0 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--ui-surface);
      color: var(--text-main);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .bookshelf-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .bookshelf-toggle-switch {
      position: relative;
      width: 32px;
      height: 18px;
      border-radius: 999px;
      background: var(--ui-border-strong);
      flex: 0 0 auto;
      transition: background-color 120ms ease;
    }
    .bookshelf-toggle-switch::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--ui-surface-solid);
      transition: transform 120ms ease;
    }
    .bookshelf-toggle input:checked + .bookshelf-toggle-switch {
      background: var(--ui-accent);
    }
    .bookshelf-toggle input:checked + .bookshelf-toggle-switch::after {
      transform: translateX(14px);
    }
    .bookshelf-toggle input:focus-visible + .bookshelf-toggle-switch {
      outline: 2px solid var(--ui-accent-focus);
      outline-offset: 2px;
    }
    .bookshelf-toggle.is-pending {
      opacity: 0.65;
    }
    .bookshelf-row-actions a,
    .bookshelf-row-actions button {
      min-width: 68px;
      min-height: 34px;
      padding: 0 12px;
    }
    .bookshelf-delete-btn {
      border-color: var(--ui-danger-border);
      color: var(--danger);
      background: var(--ui-surface-solid);
    }
    .bookshelf-empty {
      padding: 16px;
      border: 1px dashed var(--line);
      color: var(--text-dim);
      background: var(--ui-surface);
    }
    .bookshelf-status {
      font-size: 13px;
      line-height: 1.6;
      min-height: 22px;
    }
    @media (max-width: 1180px) {
      .bookshelf-table-shell .admin-ui-table {
        min-width: var(--admin-table-min-width-base);
      }
    }


/* Migrated from app/templates/admin_categories.html style block 1. */
    :root {
      --text-dim: var(--admin-text-dim);
    }
    .category-admin-table-shell .admin-ui-table {
      min-width: var(--admin-table-min-width-wide);
      table-layout: fixed;
    }
    .category-name {
      font-weight: 700;
      color: var(--admin-text);
      min-width: 180px;
      white-space: normal;
    }
    .category-slug {
      color: var(--text-dim);
      font-size: 12px;
      line-height: 1.4;
      min-width: 220px;
      white-space: nowrap;
    }
    .category-preview-link {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      color: var(--admin-text);
      text-decoration: none;
      border-bottom: 1px solid var(--admin-line);
    }
    .category-preview-link:hover {
      border-color: var(--admin-line-hover);
    }
    .category-form {
      display: grid;
      gap: 10px;
    }
    .category-form .form-control {
      box-sizing: border-box;
    }
    .category-form textarea.form-control {
      min-height: 72px;
      height: auto;
      max-height: none;
      resize: vertical;
      line-height: 1.45;
    }
    .field-hint {
      color: var(--text-dim);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
    }
    .field-error {
      color: var(--admin-danger);
      font-size: 12px;
      line-height: 1.4;
      min-height: 16px;
    }
    .category-form-heading {
      display: grid;
      gap: 6px;
    }
    .category-form-heading h2 {
      margin: 0;
      line-height: 1.2;
    }
    .category-edit-target {
      color: var(--admin-text-dim);
      font-size: 13px;
      line-height: 1.45;
      min-height: 16px;
    }
    .category-books-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .category-books-count {
      color: var(--text-dim);
      font-size: 12px;
      line-height: 1.4;
    }
    .category-form-grid--meta {
      align-items: end;
    }
    .category-form-actions .admin-ui-action {
      min-width: 92px;
    }
    .category-books-list {
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }
    .category-delete-action[hidden] {
      display: none;
    }
    .category-related-section[hidden] {
      display: none;
    }
    /*
     * Link-chip owner:
     * .category-book-chip keeps admin category book links self-contained as stacked chips.
     */
    .category-book-chip {
      display: grid;
      gap: 2px;
      padding: 10px 12px;
      border: 1px solid var(--admin-line);
      border-radius: 10px;
      background: var(--admin-surface);
      text-decoration: none;
      color: inherit;
    }
    .category-book-chip:hover {
      border-color: var(--admin-line-hover);
    }
    .category-book-title {
      font-weight: 600;
      color: var(--admin-text);
    }
    .category-book-meta {
      color: var(--text-dim);
      font-size: 12px;
      line-height: 1.4;
    }
    .admin-empty {
      color: var(--text-dim);
      font-size: 14px;
      line-height: 1.5;
    }
    .category-status-message {
      color: var(--admin-text-dim);
    }
    .category-status-message.is-error {
      color: var(--admin-danger);
    }
    .category-status-message.is-success {
      color: var(--ui-success);
    }
    @media (max-width: 780px) {
      .category-admin-table-shell .admin-ui-table {
        min-width: var(--admin-table-min-width-base);
      }
    }


/* Migrated from app/templates/admin_email_settings.html style block 1. */
    .email-settings-grid {
      display: grid;
      gap: 16px;
    }
    .email-settings-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .email-settings-panel {
      display: grid;
      gap: 12px;
      padding: 16px 18px;
      border: 1px solid var(--admin-panel-border, var(--admin-line));
      border-radius: 14px;
      background: var(--admin-panel-surface, var(--ui-surface-solid));
    }
    .email-settings-meta {
      display: grid;
      gap: 8px;
    }
    .email-settings-row {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      font-size: 14px;
    }
    .email-settings-label {
      color: var(--admin-text-dim);
    }
    .email-settings-value {
      color: var(--admin-text);
      word-break: break-word;
    }
    .email-settings-errors {
      display: grid;
      gap: 8px;
    }
    .email-settings-error {
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--admin-danger-border, var(--ui-danger-border));
      background: var(--admin-danger-soft, var(--ui-danger-surface));
      color: var(--admin-danger, var(--ui-danger));
      font-size: 14px;
      line-height: 1.5;
    }
    .email-settings-form {
      display: grid;
      gap: 12px;
    }
    .email-settings-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .email-settings-note {
      color: var(--admin-text-dim);
      font-size: 13px;
      line-height: 1.5;
    }
    @media (max-width: 900px) {
      .email-settings-summary {
        grid-template-columns: 1fr;
      }
      .email-settings-row {
        grid-template-columns: 1fr;
      }
    }


/* Migrated from app/templates/admin_footer.html style block 1. */
    .footer-editor-shell {
      gap: 10px;
    }
    .footer-editor-main {
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
    }
    .footer-editor-fields,
    .footer-editor-groups,
    .footer-link-group,
    .footer-link-item {
      display: grid;
      gap: 12px;
    }
    .footer-link-group {
      padding: 14px;
      border: 1px solid var(--admin-line);
      border-radius: 14px;
      background: var(--admin-surface-soft);
    }
    .footer-link-group p,
    .footer-editor-side p {
      margin: 0;
      color: var(--admin-text-dim);
      line-height: 1.55;
    }
    .footer-link-item {
      padding-top: 12px;
      border-top: 1px solid var(--admin-line);
    }
    .footer-link-item:first-of-type {
      padding-top: 0;
      border-top: 0;
    }
    .footer-link-item .admin-ui-field-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-link-item__full {
      grid-column: 1 / -1;
    }
    @media (max-width: 960px) {
      .footer-editor-main {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 640px) {
      .footer-link-item .admin-ui-field-grid {
        grid-template-columns: 1fr;
      }
    }


/* Migrated from app/templates/admin_homepage.html style block 1. */
    .homepage-admin-toolbar {
      align-items: flex-start;
    }
    .homepage-admin-toolbar__meta {
      flex: 1 1 260px;
      min-width: 0;
    }
    .homepage-admin-toolbar .admin-ui-inline-fields {
      flex: 0 1 auto;
      min-width: 220px;
    }
    .homepage-admin-toolbar .admin-ui-inline-fields label {
      min-width: 180px;
    }
    .homepage-admin-contract {
      color: var(--admin-text-dim);
      font-size: 12px;
      line-height: 1.4;
    }
    .homepage-admin-table-shell .admin-ui-table {
      min-width: var(--admin-table-min-width-base);
    }
    .homepage-admin-table-shell .admin-ui-table th,
    .homepage-admin-table-shell .admin-ui-table td {
      padding-top: var(--admin-table-cell-padding-y-compact);
      padding-bottom: var(--admin-table-cell-padding-y-compact);
      vertical-align: middle;
    }
    .homepage-admin-table-shell .admin-ui-table td {
      white-space: nowrap;
    }
    .homepage-admin-main {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .homepage-admin-main .admin-ui-table-title,
    .homepage-admin-main .admin-ui-table-subtitle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .homepage-admin-main .admin-ui-table-subtitle::before {
      content: "•";
      margin-right: 8px;
      color: var(--admin-text-dim);
    }
    .homepage-admin-source {
      min-width: 0;
    }
    .homepage-admin-source .admin-ui-table-title {
      font-weight: 600;
    }
    .homepage-admin-table-shell .admin-ui-table td:nth-child(4),
    .homepage-admin-table-shell .admin-ui-table td:nth-child(5),
    .homepage-admin-table-shell .admin-ui-table td:nth-child(6) {
      vertical-align: middle;
    }
    .homepage-admin-table-shell .admin-ui-table td:nth-child(6) {
      text-align: center;
    }
    .homepage-admin-config {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .homepage-admin-actions {
      min-width: 220px;
      justify-content: center;
    }
    .homepage-admin-empty {
      text-align: left;
    }
    @media (max-width: 900px) {
      .homepage-admin-toolbar__actions {
        width: 100%;
        justify-content: flex-start;
      }
      .homepage-admin-toolbar .admin-ui-inline-fields {
        width: 100%;
      }
    }
    @media (max-width: 720px) {
      .homepage-admin-table-shell .admin-ui-table {
        min-width: var(--admin-table-min-width-compact);
      }
    }


/* Migrated from app/templates/admin_homepage_section_edit.html style block 1. */
    .homepage-section-shell {
      gap: var(--admin-gap-section);
    }
    .homepage-section-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .homepage-section-form-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      padding: var(--admin-workspace-padding);
    }
    .homepage-section-form {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    .homepage-section-note,
    .homepage-section-help {
      margin: 0;
      color: var(--admin-text-dim);
      font-size: 12px;
      line-height: 1.45;
    }
    .homepage-section-source-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .homepage-section-order {
      display: grid;
      gap: 5px;
      justify-items: start;
    }
    .homepage-section-order > span {
      color: var(--admin-text);
      font-size: 13px;
      font-weight: 600;
    }
    .homepage-section-order-value {
      display: inline-flex;
      align-items: center;
      min-height: var(--admin-control-height-compact);
      padding: 0 12px;
      border: 1px solid var(--admin-line-strong);
      border-radius: var(--admin-radius-control);
      background: var(--admin-surface);
      font-weight: 600;
      box-sizing: border-box;
    }
    .homepage-section-routing {
      display: grid;
      gap: 12px;
      align-items: end;
      grid-template-columns: auto auto auto auto;
      justify-content: flex-start;
    }
    .homepage-section-routing .admin-ui-inline-fields {
      grid-auto-columns: max-content;
      gap: 10px;
      align-items: end;
    }
    .homepage-section-routing .admin-ui-inline-fields label {
      width: auto;
    }
    .homepage-section-actions .admin-ui-action {
      min-height: var(--admin-control-height-compact);
      padding: 0 12px;
    }
    @media (max-width: 900px) {
      .homepage-section-routing {
        grid-template-columns: minmax(0, 1fr);
      }
      .homepage-section-routing .admin-ui-inline-fields {
        width: 100%;
      }
      .homepage-section-routing .admin-ui-inline-fields label {
        width: 100%;
      }
    }


/* Migrated from app/templates/admin_notification_edit.html style block 1. */
    .notification-editor-shell {
      gap: var(--admin-gap-section);
    }
    .notification-editor-main {
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.78fr);
    }
    .notification-editor-fields,
    .notification-editor-side {
      display: grid;
      gap: 12px;
    }
    .notification-editor-side p,
    .notification-editor-meta {
      margin: 0;
      color: var(--admin-text-dim);
      line-height: 1.55;
    }
    .notification-editor-meta {
      font-size: 13px;
    }
    .notification-editor-side {
      align-content: start;
    }
    .notification-editor-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 12px;
      border: 1px solid var(--admin-line);
      border-radius: 12px;
      background: var(--ui-surface-solid);
      color: var(--admin-text);
    }
    .notification-editor-toggle input {
      width: 16px;
      height: 16px;
      margin: 0;
    }
    .notification-editor-danger {
      border-color: var(--ui-danger-border);
      color: var(--ui-danger);
    }
    .notification-editor-danger:hover,
    .notification-editor-danger:focus-visible {
      border-color: var(--ui-danger-border-hover);
      background: var(--ui-danger-surface);
    }
    @media (max-width: 960px) {
      .notification-editor-main {
        grid-template-columns: 1fr;
      }
    }


/* Migrated from app/templates/admin_notifications.html style block 1. */
    .notification-admin-shell {
      display: grid;
      gap: var(--admin-gap-section);
    }
    .notification-admin-head p,
    .notification-row-summary,
    .notification-row-slug,
    .notification-row-meta {
      margin: 0;
      color: var(--ui-text-muted);
      line-height: 1.55;
    }
    .notification-admin-table .admin-ui-table {
      min-width: 1120px;
    }
    .notification-row-title {
      margin: 0;
      color: var(--ui-text-strong);
      font-size: 15px;
      line-height: 1.45;
    }
    .notification-row-slug,
    .notification-row-meta {
      font-size: 12px;
    }
    .notification-row-summary {
      margin-top: 6px;
      max-width: 520px;
      font-size: 13px;
    }
    .notification-row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .notification-row-actions a,
    .notification-row-actions button,
    .notification-create-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 12px;
      border: 1px solid var(--ui-border-strong);
      border-radius: 10px;
      background: var(--ui-surface-solid);
      color: var(--ui-text-strong);
      font: inherit;
      text-decoration: none;
      cursor: pointer;
      box-sizing: border-box;
    }
    .notification-row-actions a:hover,
    .notification-row-actions a:focus-visible,
    .notification-row-actions button:hover,
    .notification-row-actions button:focus-visible,
    .notification-create-link:hover,
    .notification-create-link:focus-visible {
      background: var(--ui-surface-hover);
      border-color: var(--ui-border-hover);
    }
    .notification-row-actions .notification-danger:hover,
    .notification-row-actions .notification-danger:focus-visible {
      color: var(--ui-danger);
      border-color: var(--ui-danger-border-hover);
      background: var(--ui-danger-surface);
    }
    .notification-admin-status {
      min-height: 22px;
    }
    @media (max-width: 1180px) {
      .notification-admin-table .admin-ui-table {
        min-width: 980px;
      }
    }


/* Migrated from app/templates/admin_permissions.html style block 1. */
    .admin-permissions-grid {
      display: grid;
      gap: 18px;
    }
    .admin-permissions-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .admin-role-switcher {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    /*
     * Role-chip owner:
     * .admin-role-chip keeps permission role toggles compact and pill-shaped.
     */
    .admin-role-chip {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--admin-line-strong);
      border-radius: 999px;
      background: var(--ui-surface-solid);
      color: var(--admin-text);
      font: inherit;
      cursor: pointer;
    }
    .admin-role-chip[aria-pressed="true"] {
      border-color: var(--ui-danger);
      color: var(--ui-danger);
    }
    .admin-matrix-wrap .admin-ui-table {
      min-width: 1120px;
    }
    .admin-matrix-role {
      min-width: 140px;
    }
    .admin-matrix-cell {
      text-align: center;
      font-size: 13px;
    }
    .admin-matrix-cell.is-fixed {
      color: var(--ui-danger);
      font-weight: 700;
    }
    .admin-matrix-cell.is-on {
      color: var(--admin-badge-success-text);
      font-weight: 700;
    }
    .admin-matrix-cell.is-off {
      color: var(--admin-text-soft);
    }
    .admin-permission-editor {
      display: grid;
      gap: 14px;
    }
    .admin-permission-list {
      display: grid;
      gap: 10px;
    }
    .admin-permission-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px 12px;
      align-items: start;
      padding: 12px 14px;
      border: 1px solid var(--admin-line);
      border-radius: 12px;
      background: var(--ui-surface-solid);
    }
    .admin-permission-item input {
      margin-top: 3px;
    }
    .admin-permission-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .admin-permission-key {
      font-weight: 700;
      color: var(--admin-text);
      overflow-wrap: anywhere;
    }
    .admin-permission-description {
      color: var(--admin-text-dim);
      font-size: 13px;
      line-height: 1.5;
    }
    .admin-permission-users .admin-ui-table {
      min-width: 760px;
    }
    .admin-inline-note {
      color: var(--admin-text-dim);
      font-size: 13px;
      line-height: 1.5;
    }
    .admin-empty-note {
      color: var(--admin-text-dim);
      font-size: 14px;
      line-height: 1.5;
    }
    @media (max-width: 900px) {
      .admin-permission-item {
        grid-template-columns: auto minmax(0, 1fr);
      }
      .admin-permission-item .admin-ui-badge {
        grid-column: 2;
      }
    }


/* Migrated from app/templates/admin_reports.html style block 1. */
    :root {
      --report-text-dim: var(--ui-text-muted);
      --report-line-soft: var(--ui-border-soft);
      --report-surface: var(--ui-surface);
    }
    .report-toolbar {
      display: grid;
      gap: 12px;
    }
    .report-anchor-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .report-anchor-nav a {
      display: inline-flex;
      align-items: center;
      min-height: var(--admin-control-height-compact);
      padding: 0 12px;
      border: 1px solid var(--admin-line);
      border-radius: 999px;
      color: var(--admin-text);
      text-decoration: none;
      background: var(--ui-surface-solid);
      white-space: nowrap;
    }
    .report-filter-form {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, auto));
      gap: 10px;
      align-items: end;
    }
    .report-filter-field {
      display: grid;
      gap: 6px;
    }
    .report-filter-field label {
      color: var(--report-text-dim);
      font-size: 13px;
    }
    /*
     * Filter input owner:
     * report date inputs keep their own admin control sizing and field chrome.
     */
    .report-filter-field input {
      min-height: var(--admin-control-height-compact);
      padding: 6px 10px;
      border: 1px solid var(--admin-line-strong);
      border-radius: var(--admin-radius-control);
      font: inherit;
      color: var(--admin-text);
      background: var(--ui-surface-solid);
    }
    .report-filter-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .report-filter-actions a,
    .report-filter-actions button {
      width: auto;
    }
    .report-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .report-grid > * {
      min-width: 0;
    }
    .report-card {
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .report-card-head {
      display: grid;
      gap: 6px;
    }
    .report-card-head h2,
    .report-card-head h3 {
      margin: 0;
      line-height: 1.25;
    }
    .report-card-head p {
      margin: 0;
      color: var(--report-text-dim);
      line-height: 1.5;
    }
    .report-metric-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .report-metric {
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid var(--report-line-soft);
      border-radius: 12px;
      background: var(--report-surface);
    }
    .report-metric-label {
      color: var(--report-text-dim);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .report-metric-value {
      font-size: 28px;
      line-height: 1;
      font-weight: 700;
      color: var(--ui-text-strong);
    }
    .report-inline-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .report-inline-stat {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--report-line-soft);
      border-radius: 999px;
      background: var(--ui-surface-solid);
      color: var(--admin-text);
      font-size: 13px;
    }
    .report-inline-stat strong {
      font-size: 14px;
      color: var(--ui-text-strong);
    }
    .report-section-stack {
      display: grid;
      gap: 16px;
    }
    .report-section-head {
      display: grid;
      gap: 6px;
    }
    .report-section-head h2 {
      margin: 0;
      line-height: 1.25;
    }
    .report-section-head p {
      margin: 0;
      color: var(--report-text-dim);
      line-height: 1.5;
    }
    .report-split {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .report-panel {
      display: grid;
      gap: 12px;
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--report-line-soft);
      border-radius: 14px;
      background: var(--ui-surface-solid);
    }
    .report-panel h3 {
      margin: 0;
      line-height: 1.25;
    }
    .report-panel p {
      margin: 0;
      color: var(--report-text-dim);
      line-height: 1.5;
    }
    .report-table-shell .admin-ui-table {
      min-width: 640px;
    }
    .report-empty {
      color: var(--report-text-dim);
      line-height: 1.5;
    }
    .report-small {
      color: var(--report-text-dim);
      font-size: 13px;
    }
    @media (max-width: 980px) {
      .report-grid,
      .report-split {
        grid-template-columns: minmax(0, 1fr);
      }
      .report-filter-form {
        grid-template-columns: minmax(0, 1fr);
      }
      .report-metric-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .report-table-shell .admin-ui-table {
        min-width: 560px;
      }
    }


/* Migrated from app/templates/admin_system_auth.html style block 1. */
    .system-auth-grid {
      display: grid;
      gap: 16px;
    }
    .system-auth-list {
      display: grid;
      gap: 12px;
    }
    .system-auth-row {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
      gap: 14px;
      align-items: start;
      padding: 16px 18px;
      border: 1px solid var(--admin-line);
      border-radius: 14px;
      background: var(--ui-surface-solid);
    }
    .system-auth-copy {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .system-auth-title {
      font-weight: 700;
      color: var(--admin-text);
    }
    .system-auth-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .system-auth-note {
      color: var(--admin-text-dim);
      font-size: 13px;
      line-height: 1.5;
    }
    .system-auth-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      align-items: center;
    }
    .system-auth-empty {
      color: var(--admin-text-dim);
      font-size: 14px;
      line-height: 1.5;
    }
    @media (max-width: 900px) {
      .system-auth-row {
        grid-template-columns: 1fr;
      }
      .system-auth-actions {
        justify-content: flex-start;
      }
    }


/* Migrated from app/templates/admin_users.html style block 1. */
    :root {
      --text-dim: var(--admin-text-dim);
    }
    .admin-user-table-shell .admin-ui-table {
      min-width: 1240px;
    }
    .admin-user-main {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .admin-user-name {
      font-weight: 700;
      color: var(--admin-text);
    }
    .admin-user-email {
      color: var(--admin-text-dim);
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .admin-user-note {
      color: var(--admin-accent);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .admin-name-input,
    .admin-status-select {
      width: 100%;
      box-sizing: border-box;
      min-height: var(--admin-control-height-compact);
      padding: 6px 10px;
      border: 1px solid var(--admin-line-strong);
      border-radius: var(--admin-radius-control);
      background: var(--admin-surface);
      color: var(--admin-text);
      font: inherit;
    }
    .admin-role-badges,
    .admin-role-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }
    .admin-role-option {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--admin-line);
      border-radius: 999px;
      background: var(--admin-surface);
      color: var(--admin-text);
      font-size: 13px;
      line-height: 1.2;
      white-space: nowrap;
    }
    .admin-role-option input {
      margin: 0;
    }
    .admin-empty {
      color: var(--admin-text-dim);
      font-size: 14px;
      line-height: 1.5;
    }
    @media (max-width: 900px) {
      .admin-user-table-shell .admin-ui-table {
        min-width: 1080px;
      }
    }


/* Migrated from app/templates/all_books.html style block 1. */
    .all-books-page {
      display: grid;
      gap: 28px;
    }
    .all-books-head {
      display: grid;
      gap: 20px;
    }
    .all-books-page .book-list-page__hero {
      display: grid;
      gap: 14px;
      max-width: none;
      min-width: 0;
    }
    .book-list-page__eyebrow {
      margin: 0;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.4;
      text-transform: uppercase;
    }
    .book-list-page__hero-copy {
      display: grid;
      gap: 12px;
      max-width: 62ch;
    }
    .all-books-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    /*
     * Tab / filter buttons owner:
     * .all-books-tab keeps its own sizing, typography, and active-state visuals.
     * Do not dedupe this block against the global button baseline without UI verification.
     */
    .all-books-tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid var(--ui-border);
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .all-books-tab.is-active {
      border-color: var(--ui-accent);
      color: var(--ui-link-hover);
      background: var(--ui-warning-surface);
    }
    .public-pager {
      display: grid;
      grid-template-columns: 48px 48px minmax(130px, auto) 48px 48px;
      align-items: center;
      justify-content: center;
      column-gap: clamp(18px, 4vw, 48px);
      width: 100%;
      margin-top: clamp(28px, 5vw, 56px);
      font-family: var(--font-ui);
    }
    .public-pager:empty {
      display: none;
    }
    .public-pager__status {
      color: var(--ui-text-strong);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .public-pager__control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      color: var(--ui-text-strong);
      font-size: 34px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0;
      opacity: 1;
    }
    /* Pager glyph owner: keep the inner span offset aligned across pager symbols. */
    .public-pager__control span {
      display: block;
      transform: translateY(-0.04em);
    }
    .public-pager__control:hover,
    .public-pager__control:focus-visible {
      opacity: 0.62;
    }
    .public-pager__control.is-disabled {
      pointer-events: none;
      opacity: 0.18;
    }
    @media (max-width: 720px) {
      .all-books-page {
        gap: 24px;
      }
      .all-books-head {
        gap: 18px;
      }
      .book-list-page__hero {
        gap: 12px;
      }
      .book-list-page__hero-copy {
        gap: 10px;
      }
      .all-books-tabs {
        gap: 8px;
      }
      .all-books-tab {
        min-height: 36px;
        padding: 0 12px;
        font-size: 11px;
      }
      .public-pager {
        grid-template-columns: 36px 36px minmax(96px, auto) 36px 36px;
        column-gap: clamp(8px, 3vw, 18px);
        margin-top: 32px;
      }
      .public-pager__status {
        font-size: 12px;
      }
      .public-pager__control {
        width: 36px;
        height: 36px;
        font-size: 27px;
      }
    }


/* Migrated from app/templates/bookshelf.html style block 1. */
    .book-list-page__eyebrow {
      margin: 0;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.4;
      text-transform: uppercase;
    }
    .book-list-page__hero-copy {
      display: grid;
      gap: 12px;
      max-width: 62ch;
    }
    .book-list-page__context {
      margin: 0;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 14px;
      line-height: 1.6;
    }
    @media (max-width: 720px) {
      .book-list-page__hero-copy {
        gap: 10px;
      }
      .book-list-page__context {
        font-size: 13px;
      }
    }


/* Migrated from app/templates/category.html style block 1. */
    .book-list-page__eyebrow {
      margin: 0;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.4;
      text-transform: uppercase;
    }
    .book-list-page__hero-copy {
      display: grid;
      gap: 12px;
      max-width: 62ch;
    }
    @media (max-width: 720px) {
      .book-list-page__hero-copy {
        gap: 10px;
      }
    }


/* Migrated from app/templates/detail.html style block 1. */
    body[data-page-kind="detail"] {
      --detail-space-8: 8px;
      --detail-space-16: 16px;
      --detail-space-24: 24px;
      --detail-space-32: 32px;
      --detail-space-40: 40px;
      --detail-space-48: 48px;
      --detail-space-64: 64px;
      --detail-space-80: 80px;
      --detail-rule-color: var(--ui-border-soft);
      --detail-copy-max-width: 54ch;
    }
    body[data-page-kind="detail"] .layout-shell {
      padding-top: var(--public-breadcrumb-block-start-gap);
    }
    .book-detail-page {
      display: grid;
      gap: var(--public-breadcrumb-flow-gap);
      padding: 0 0 var(--detail-space-80);
    }
    .book-detail-layout {
      --detail-cover-max-height: min(78vh, calc(100vh - 176px));
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-grid-gap);
      align-items: start;
    }
    .book-detail-cover {
      grid-column: span 5;
      min-width: 0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    .detail-cover-shell {
      width: 100%;
      max-width: min(100%, 492px);
      max-height: var(--detail-cover-max-height);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin: 0;
      overflow: visible;
      position: relative;
    }
    .book-detail-content {
      grid-column: span 7;
      min-width: 0;
      display: grid;
      gap: var(--detail-space-48);
      align-content: start;
      justify-self: start;
      max-width: min(100%, 560px);
    }
    .detail-meta-header {
      display: grid;
      gap: var(--detail-space-32);
      align-content: start;
    }
    .detail-cover {
      width: min(100%, 460px);
      height: auto;
      object-fit: contain;
      object-position: center center;
      border-radius: 0;
      border: none;
      box-shadow: none;
      background: transparent;
      display: block;
      position: relative;
      z-index: 0;
      max-width: 100%;
      max-height: var(--detail-cover-max-height);
      transition: opacity 0.18s ease;
    }
    .book-detail-title,
    .detail-title {
      margin: 0;
      max-width: min(100%, 11.5ch);
      color: var(--ui-text-strong);
      font-family: var(--font-heading);
      font-size: clamp(30px, 3.2vw, 42px);
      line-height: 1.02;
      font-weight: 720;
      letter-spacing: -0.03em;
      text-wrap: balance;
    }
    .detail-title-desktop {
      display: inline;
    }
    .detail-title-link {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      transition: opacity 0.16s ease;
    }
    .detail-title-link:hover,
    .detail-title-link:focus-visible {
      opacity: 0.92;
      text-decoration: none;
    }
    .detail-title-link:focus-visible {
      outline: 2px solid var(--ui-accent-focus);
      outline-offset: 4px;
    }
    .detail-title-link--mobile {
      display: none;
    }
    .detail-primary-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--detail-space-24) var(--detail-space-32);
      max-width: 100%;
    }
    .detail-primary-meta .detail-meta-item {
      gap: var(--detail-space-8);
      padding-top: var(--detail-space-16);
      border-top: 1px solid var(--detail-rule-color);
    }
    .detail-primary-meta .detail-meta-item dd {
      font-size: 18px;
      line-height: 1.48;
    }
    .detail-meta-section {
      display: grid;
      gap: 20px;
      align-content: start;
    }
    .detail-meta-section + .detail-meta-section {
      padding-top: var(--detail-space-8);
    }
    .detail-section-title {
      margin: 0;
      color: var(--ui-text-strong);
      font-family: var(--font-heading);
      font-size: clamp(22px, 1.8vw, 26px);
      line-height: 1.06;
      letter-spacing: -0.02em;
      font-weight: 700;
      text-wrap: balance;
    }
    .detail-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 32px;
      margin: 0;
    }
    .detail-meta-item {
      margin: 0;
      display: grid;
      gap: 8px;
      word-break: break-word;
    }
    .detail-meta-item dt {
      margin: 0;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 0.09em;
      line-height: 1.36;
      text-transform: uppercase;
    }
    .detail-meta-item dd {
      margin: 0;
      color: var(--ui-text);
      font-family: var(--font-body);
      font-size: 17px;
      line-height: 1.6;
    }
    .detail-description {
      display: grid;
      gap: 20px;
      max-width: var(--detail-copy-max-width);
      line-height: 1.82;
      word-break: break-word;
    }
    .detail-description p {
      margin: 0;
      color: var(--ui-text);
      font-size: 17px;
      line-height: 1.82;
      text-wrap: pretty;
    }
    .detail-description .description-align-left {
      text-align: left;
    }
    .detail-description .description-align-center {
      text-align: center;
    }
    .detail-description .description-align-right {
      text-align: right;
    }
    .detail-description .description-align-justify {
      text-align: justify;
    }
    .detail-description .description-line-relaxed {
      line-height: 2.05;
    }
    .detail-description .description-text-accent {
      color: var(--ui-accent);
    }
    .detail-description .description-highlight {
      background: var(--ui-warning-surface);
      color: var(--ui-text);
    }
    .detail-description ul,
    .detail-description ol {
      margin: 0;
      padding-left: 1.35em;
      color: var(--ui-text);
      font-size: 17px;
      line-height: 1.82;
    }
    .detail-description li {
      margin: 0;
    }
    body.theme-quoc-tang[data-page-kind="detail"] .book-detail-page {
      color: var(--quoc-tang-text);
    }
    body.theme-quoc-tang[data-page-kind="detail"] :where(.book-detail-title, .detail-title, .detail-section-title, .detail-similar-heading) {
      color: var(--quoc-tang-text-strong);
    }
    body.theme-quoc-tang[data-page-kind="detail"] :where(.detail-description, .detail-description p, .detail-description ul, .detail-description ol, .detail-description li, .detail-meta-item dd, .detail-similar .muted) {
      color: var(--quoc-tang-text);
    }
    body.theme-quoc-tang[data-page-kind="detail"] :where(.detail-meta-item dt, .detail-like-cluster, .detail-like-count, .detail-similar .book-card__meta-line) {
      color: var(--quoc-tang-text-muted);
    }
    body.theme-quoc-tang[data-page-kind="detail"] .detail-description :where(b, strong) {
      color: var(--quoc-tang-text-strong);
    }
    body.theme-quoc-tang[data-page-kind="detail"] .detail-description .description-text-accent {
      color: var(--quoc-tang-text-strong);
    }
    body.theme-quoc-tang[data-page-kind="detail"] .detail-description .description-highlight {
      background: var(--quoc-tang-danger-surface);
      color: var(--quoc-tang-text-strong);
    }
    body.theme-quoc-tang[data-page-kind="detail"] :where(.detail-primary-meta .detail-meta-item, .detail-tech-grid .detail-meta-item, .detail-similar) {
      border-color: var(--quoc-tang-border);
    }
    body.theme-quoc-tang[data-page-kind="detail"] .detail-similar .book-card__title-link {
      color: var(--quoc-tang-text-strong);
    }
    body.theme-quoc-tang[data-page-kind="detail"] .detail-similar .book-card__cta {
      color: var(--quoc-tang-link);
    }
    .detail-actions {
      --detail-cta-width: 148px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: var(--detail-space-8);
      margin-top: 0;
      max-width: none;
    }
    .detail-action-btn {
      --detail-action-bg: var(--ui-surface-wash-soft);
      --detail-action-bg-hover: var(--ui-surface-wash-soft);
      --detail-action-border: var(--ui-border-overlay);
      --detail-action-border-hover: var(--ui-border-overlay);
      --detail-action-text: var(--ui-text-strong);
      --detail-action-active-bg: var(--ui-warning-surface);
      --detail-action-active-border: var(--ui-accent-focus);
      --detail-action-active-text: var(--ui-link);
      flex: 0 0 var(--detail-cta-width);
      width: var(--detail-cta-width);
      min-width: 0;
      max-width: 100%;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 0;
      border: 1px solid var(--detail-action-border);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--detail-action-bg);
      color: var(--detail-action-text);
      font-weight: 650;
      font-family: var(--font-ui);
      font-size: 11px;
      letter-spacing: 0.08em;
      line-height: 1.15;
      text-transform: uppercase;
      white-space: nowrap;
      appearance: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
    }
    .detail-action-btn:hover,
    .detail-action-btn:focus-visible {
      opacity: 0.98;
    }
    .detail-action-btn:focus {
      outline: none;
    }
    .detail-action-btn:focus-visible {
      box-shadow: var(--focus-ring) !important;
    }
    .detail-action-btn:hover:not(:disabled),
    .detail-action-btn:focus-visible {
      background: var(--detail-action-bg-hover);
      border-color: var(--detail-action-border-hover);
      color: var(--detail-action-text);
    }
    .detail-action-btn:active:not(:disabled) {
      background: var(--detail-action-bg-hover);
      border-color: var(--detail-action-border-hover);
      color: var(--detail-action-text);
    }
    .detail-action-btn--neutral {
      --detail-action-bg: var(--ui-surface-wash-soft);
      --detail-action-bg-hover: var(--ui-surface-wash-soft);
      --detail-action-border: var(--ui-border-overlay);
      --detail-action-border-hover: var(--ui-border-overlay);
      --detail-action-text: var(--ui-text-strong);
    }
    .detail-action-btn--primary {
      --detail-action-bg: var(--ui-warning-surface);
      --detail-action-bg-hover: var(--ui-warning-surface);
      --detail-action-border: var(--ui-accent-focus);
      --detail-action-border-hover: var(--ui-danger-border-hover);
      --detail-action-text: var(--ui-link);
    }
    .detail-action-btn.is-active,
    .detail-action-btn[aria-pressed="true"] {
      background: var(--detail-action-active-bg);
      border-color: var(--detail-action-active-border);
      color: var(--detail-action-active-text);
    }
    .detail-action-btn.is-active:hover:not(:disabled),
    .detail-action-btn[aria-pressed="true"]:hover:not(:disabled) {
      background: var(--detail-action-active-bg);
      border-color: var(--detail-action-active-border);
      color: var(--detail-action-active-text);
    }
    .detail-action-btn:disabled {
      background: var(--detail-action-bg);
      border-color: var(--detail-action-border);
      color: var(--detail-action-text);
      opacity: 0.65;
    }
    .detail-action-btn[aria-pressed="true"]:disabled {
      background: var(--detail-action-active-bg);
      border-color: var(--detail-action-active-border);
      color: var(--detail-action-active-text);
      opacity: 0.72;
    }
    body.theme-quoc-tang .detail-action-btn {
      --detail-action-bg: var(--quoc-tang-action-surface);
      --detail-action-bg-hover: var(--quoc-tang-action-surface-hover);
      --detail-action-border: var(--quoc-tang-action-border);
      --detail-action-border-hover: var(--quoc-tang-action-border-strong);
      --detail-action-text: var(--quoc-tang-action-text);
      --detail-action-active-bg: var(--quoc-tang-action-surface);
      --detail-action-active-border: var(--quoc-tang-action-border-strong);
      --detail-action-active-text: var(--quoc-tang-text-strong);
      box-shadow: none;
    }
    @media (hover: none), (pointer: coarse) {
      .detail-action-btn:hover:not(:disabled) {
        opacity: 1;
        background: var(--detail-action-bg);
        border-color: var(--detail-action-border);
        color: var(--detail-action-text);
      }
      .detail-action-btn.is-active:hover:not(:disabled),
      .detail-action-btn[aria-pressed="true"]:hover:not(:disabled) {
        background: var(--detail-action-active-bg);
        border-color: var(--detail-action-active-border);
        color: var(--detail-action-active-text);
      }
    }
    .detail-like-cluster {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 44px;
      max-width: 100%;
      color: var(--ui-text-muted);
    }
    .detail-like-toggle {
      --detail-like-focus-color: var(--ui-accent-focus);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: none;
      background: transparent;
      color: inherit;
      text-decoration: none;
      transition: opacity 0.16s ease, color 0.16s ease;
    }
    .detail-like-toggle:hover,
    .detail-like-toggle:focus-visible {
      opacity: 0.98;
      color: var(--ui-link);
    }
    .detail-like-toggle:focus-visible {
      outline: 2px solid var(--detail-like-focus-color);
      outline-offset: 4px;
    }
    .detail-like-toggle.is-active,
    .detail-like-toggle[aria-pressed="true"] {
      color: var(--ui-danger);
    }
    body.theme-quoc-tang .detail-like-toggle {
      --detail-like-focus-color: var(--quoc-tang-action-border-strong);
      border-color: transparent;
      background: transparent;
      color: var(--quoc-tang-text-muted);
      box-shadow: none;
    }
    body.theme-quoc-tang .detail-like-toggle:hover,
    body.theme-quoc-tang .detail-like-toggle:focus-visible {
      border-color: transparent;
      background: transparent;
      color: var(--quoc-tang-text-strong);
    }
    body.theme-quoc-tang .detail-like-toggle.is-active,
    body.theme-quoc-tang .detail-like-toggle[aria-pressed="true"] {
      color: var(--quoc-tang-danger);
    }
    .detail-like-count {
      font-family: var(--font-ui);
      font-size: 12px;
      line-height: 1.4;
      white-space: nowrap;
    }
    .detail-like-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }
    .detail-like-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      stroke: currentColor;
    }
    .detail-tech-grid {
      gap: 20px 32px;
    }
    .detail-tech-grid .detail-meta-item {
      display: grid;
      grid-template-columns: minmax(116px, auto) minmax(0, 1fr);
      align-items: start;
      gap: 8px 24px;
      padding-top: var(--detail-space-16);
      border-top: 1px solid var(--ui-border-soft);
    }
    .detail-tech-grid .detail-meta-item dt,
    .detail-tech-grid .detail-meta-item dd {
      margin: 0;
    }
    .detail-tech-grid .detail-meta-item dt {
      padding-top: 2px;
      font-size: 11px;
      line-height: 1.42;
    }
    .detail-tech-grid .detail-meta-item dd {
      font-size: 16px;
      line-height: 1.54;
    }
    .detail-status {
      margin-top: 8px;
    }
    .detail-similar {
      display: grid;
      gap: var(--detail-space-32);
      align-content: start;
      padding-top: var(--detail-space-64);
      border-top: 1px solid var(--ui-border-soft);
    }
    .detail-similar-heading {
      margin: 0;
      color: var(--ui-text-strong);
      font-family: var(--font-heading);
      font-size: clamp(22px, 1.9vw, 28px);
      line-height: 1.06;
      font-weight: 700;
      letter-spacing: -0.02em;
      max-width: 12ch;
    }
    .detail-similar {
      --home-grid-columns: repeat(12, minmax(0, 1fr));
      --home-books-column-gap: 16px;
      --home-books-row-gap: 32px;
      --home-books-text-gap: 8px;
      --home-books-body-gap: 16px;
      --home-books-body-margin-top: 16px;
      --home-books-title-size: 15px;
      --home-books-title-line-height: 1.24;
      --home-books-meta-size: 12px;
      --home-books-meta-line-height: 1.45;
      --home-books-cta-size: 11px;
      --home-card-body-min-height: 112px;
      --home-card-media-ratio: var(--book-cover-frame-ratio);
      --home-card-cover-width: var(--book-cover-image-width);
      --home-card-cover-height: var(--book-cover-image-height);
      --home-card-cover-max-width: var(--book-cover-image-max-width);
      --home-card-cover-max-height: var(--book-cover-image-max-height);
    }
    .detail-similar .muted {
      margin: 0;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 14px;
      line-height: 1.6;
    }
    body[data-page-kind="detail"] .detail-similar .book-list-shell--home {
      max-width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      column-gap: 24px;
      row-gap: 0;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      column-gap: var(--home-books-column-gap);
      row-gap: var(--home-books-row-gap);
      align-items: start;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial {
      grid-column: span 6;
      width: auto;
      max-width: none;
      min-width: 0;
      justify-self: stretch;
      margin: 0;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial {
      display: grid;
      grid-template-rows: auto minmax(var(--home-card-body-min-height), auto);
      row-gap: var(--home-books-body-margin-top);
      height: 100%;
      align-content: start;
      padding-inline: 0;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link.book-cover {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      line-height: 0;
      padding: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
      box-shadow: none;
      transition: none;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__media {
      width: 100%;
      height: var(--book-cover-frame-height);
      aspect-ratio: var(--home-card-media-ratio);
      display: block;
      align-self: start;
      overflow: visible;
      background: transparent;
      position: relative;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__video {
      width: var(--home-card-cover-width);
      height: var(--home-card-cover-height);
      min-width: 0;
      max-width: var(--home-card-cover-max-width);
      max-height: var(--home-card-cover-max-height);
      align-self: end;
      justify-self: center;
      margin-inline: auto;
      object-fit: contain;
      object-position: center bottom;
      filter: none;
      transform: none;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__body {
      display: grid;
      grid-template-rows: minmax(0, auto) min-content;
      align-content: start;
      justify-items: center;
      gap: var(--home-books-body-gap);
      width: 100%;
      min-height: var(--home-card-body-min-height);
      margin-top: 0;
      text-align: center;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__text {
      display: grid;
      gap: var(--home-books-text-gap);
      align-content: start;
      justify-items: center;
      width: 100%;
      max-width: min(100%, 21.5ch);
      margin-inline: auto;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__title {
      min-height: calc(var(--book-card-title-lines) * var(--home-books-title-line-height) * 1em);
      margin: 0;
      width: 100%;
      font-size: var(--home-books-title-size);
      line-height: var(--home-books-title-line-height);
      font-weight: 680;
      letter-spacing: -0.012em;
      text-align: center;
      display: -webkit-box;
      -webkit-line-clamp: var(--book-card-title-lines);
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__title-link {
      text-align: center;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__meta-lines {
      gap: 2px;
      min-width: 0;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__meta-line {
      margin: 0;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      text-align: center;
      font-size: var(--home-books-meta-size);
      line-height: var(--home-books-meta-line-height);
      color: var(--ui-text-muted);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cta {
      align-self: center;
      margin-top: auto;
      width: fit-content;
      max-width: 100%;
      text-align: center;
      font-size: var(--home-books-cta-size);
      letter-spacing: 0.08em;
      line-height: 1.2;
      font-weight: 700;
      text-transform: uppercase;
      white-space: nowrap;
    }
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link:hover .book-card__cover,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link:focus-visible .book-card__cover,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link:hover .book-card__video,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link:focus-visible .book-card__video,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link:hover,
    body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial .book-card__cover-link:focus-visible {
      transform: none;
      filter: none;
      box-shadow: none;
    }
    @media (max-width: 1024px) {
      .book-detail-layout {
        --detail-cover-max-height: min(72vh, calc(100vh - 184px));
      }
      .book-detail-cover {
        grid-column: span 5;
      }
      .book-detail-content {
        grid-column: span 7;
        gap: var(--detail-space-40);
        max-width: min(100%, 520px);
      }
      .detail-primary-meta,
      .detail-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .detail-tech-grid .detail-meta-item {
        grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
        gap: 10px 24px;
      }
    }
    @media (max-width: 768px) {
      .book-detail-page {
        gap: var(--detail-space-24);
        padding: 8px 0 40px;
      }
      .book-detail-layout {
        --detail-cover-max-height: min(58vh, 420px);
        grid-template-columns: 1fr;
        row-gap: var(--detail-space-24);
        column-gap: 0;
      }
      .book-detail-cover,
      .book-detail-content {
        grid-column: auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        justify-self: stretch;
        align-self: start;
      }
      .book-detail-cover {
        display: block;
      }
      .detail-cover-shell {
        max-width: min(100%, 316px);
        max-height: var(--detail-cover-max-height);
        width: 100%;
        margin-inline: auto;
      }
      .detail-cover {
        max-height: var(--detail-cover-max-height);
      }
      .book-detail-title,
      .detail-title {
        max-width: none;
        font-size: clamp(24px, 6.1vw, 30px);
        line-height: 1.06;
        letter-spacing: -0.02em;
      }
      .detail-title-desktop {
        display: none;
      }
      .detail-title-link--mobile {
        display: block;
      }
      .detail-primary-meta,
      .detail-meta-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .detail-primary-meta .detail-meta-item dd {
        font-size: 18px;
        line-height: 1.5;
      }
      .detail-primary-meta {
        padding-top: 0;
      }
      .detail-tech-grid .detail-meta-item {
        grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
      }
      .detail-description {
        max-width: none;
      }
      .detail-meta-header,
      .detail-description,
      .detail-meta-section,
      .detail-similar {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
      }
    }
    @media (max-width: 480px) {
      .detail-tech-grid .detail-meta-item {
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }
    @media (max-width: 768px) {
      .book-detail-page {
        gap: var(--detail-space-24);
        padding-top: 0;
      }
      .book-detail-layout {
        --detail-cover-max-height: min(68vh, 560px);
        row-gap: var(--detail-space-24);
      }
      .book-detail-cover {
        display: flex;
        justify-content: center;
      }
      .detail-cover-shell {
        width: min(88vw, 388px);
        max-width: 100%;
      }
      .detail-cover {
        width: 100%;
        max-width: min(88vw, 388px);
      }
      .detail-meta-header {
        justify-items: center;
        gap: 0;
      }
      .book-detail-title,
      .detail-title {
        width: min(100%, 560px);
        max-width: 100%;
        margin-inline: auto;
        font-size: clamp(20px, 4.1vw, 24px);
        line-height: 1.08;
        text-align: center;
      }
      .detail-title + .detail-actions {
        margin-top: var(--detail-space-16);
      }
      .detail-primary-meta {
        width: 100%;
        max-width: 34ch;
      }
      .detail-actions + .detail-primary-meta {
        margin-top: 14px;
      }
      .detail-primary-meta .detail-meta-item {
        justify-items: center;
        text-align: center;
      }
      .detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, var(--detail-cta-width)));
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        row-gap: 8px;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
      }
      .detail-action-btn {
        width: 100%;
        min-height: 46px;
        padding-inline: 18px;
      }
      .detail-like-cluster {
        grid-column: 1 / -1;
        justify-self: center;
      }
      .detail-description p,
      .detail-tech-grid .detail-meta-item dd {
        font-size: 16px;
      }
      .detail-similar {
        gap: var(--detail-space-24);
        padding-top: var(--detail-space-48);
      }
    }
    @media (min-width: 769px) {
      .detail-similar {
        --home-books-column-gap: 40px;
        --home-books-row-gap: 44px;
        --home-books-title-size: 15px;
        --home-books-title-line-height: 1.24;
        --home-books-meta-size: 12px;
        --home-books-meta-line-height: 1.45;
        --home-books-cta-size: 12px;
        --home-card-body-min-height: 120px;
      }
      body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card,
      body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial {
        grid-column: span 4;
      }
    }
    @media (min-width: 1024px) {
      .book-detail-content {
        max-width: min(100%, 720px);
        gap: var(--detail-space-40);
      }
      .detail-meta-header {
        gap: 0;
      }
      .book-detail-title,
      .detail-title {
        max-width: min(100%, 16ch);
        font-size: clamp(23px, 2.12vw, 30px);
        line-height: 1.06;
        letter-spacing: -0.024em;
      }
      .detail-title + .detail-primary-meta {
        margin-top: var(--detail-space-32);
      }
      .detail-primary-meta {
        gap: 20px var(--detail-space-40);
      }
      .detail-primary-meta + .detail-actions {
        margin-top: var(--detail-space-24);
      }
      .detail-action-btn {
        min-height: 42px;
        padding-inline: 17px;
      }
    }
    @media (min-width: 1025px) {
      .detail-similar {
        --home-books-column-gap: var(--listing-gap-desktop);
        --home-books-row-gap: 56px;
        --home-books-title-size: 17px;
        --home-books-title-line-height: 1.22;
        --home-books-meta-size: 13px;
        --home-books-meta-line-height: 1.45;
        --home-books-cta-size: 13px;
        --home-card-body-min-height: 128px;
      }
      body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card,
      body[data-page-kind="detail"] .detail-similar .book-grid--home.home-grid > .book-card--home-editorial {
        grid-column: span 3;
      }
    }
    @media (min-width: 1200px) {
      .detail-similar {
        --home-books-column-gap: var(--listing-gap-desktop);
      }
    }


/* Migrated from app/templates/editor.html style block 1. */
    #uploadStatus {
      margin-top: 8px;
    }
    .epub-cover-candidate {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 10px 0 12px;
    }
    .epub-cover-candidate img {
      width: 64px;
      max-height: 92px;
      object-fit: contain;
    }
    .epub-cover-candidate-title {
      margin: 0 0 4px;
      color: var(--ui-text-strong);
      font-size: 13px;
      font-weight: 600;
    }
    .epub-cover-candidate-meta {
      color: var(--ui-text-soft);
      font-size: 12px;
      overflow-wrap: anywhere;
    }
    .epub-cover-candidate-actions {
      margin-top: 8px;
    }
    .epub-v2-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .epub-v2-row button {
      width: auto;
      min-width: 0;
      flex: 0 0 auto;
    }
    .epub-v2-row input[type="file"] {
      flex: 1 1 320px;
      min-width: 240px;
    }
    .epub-v2-status {
      min-height: 18px;
      margin-top: 6px;
      color: var(--ui-text-muted);
      transition: color 160ms ease;
    }
    .epub-v2-status:empty {
      display: none;
    }
    .epub-v2-status.is-busy {
      color: var(--ui-warning);
    }
    .epub-v2-status.is-success {
      color: var(--ui-success);
    }
    .epub-v2-status.is-error {
      color: var(--ui-danger);
    }
    .description-rich-icon {
      width: 20px;
      height: 20px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .interactive-page-control {
      display: grid;
      grid-template-columns: 42px 96px 42px;
      gap: 10px;
      align-items: center;
    }
    .interactive-page-nav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      min-width: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 999px;
      font-size: 20px;
      line-height: 1;
    }
    .interactive-view-toggle {
      grid-column: 2;
      display: inline-grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(86px, auto);
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--admin-line-strong, var(--ui-border-strong));
      border-radius: 999px;
      background: var(--admin-control-surface, var(--ui-surface-hover));
      width: fit-content;
      min-width: 0;
    }
    .interactive-view-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 16px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ui-text-muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
    }
    .interactive-view-btn.is-active {
      background: var(--ui-text-soft);
      color: var(--ui-on-accent);
    }
    .interactive-source-toggle {
      display: inline-grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(128px, auto);
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--admin-line-strong, var(--ui-border-strong));
      border-radius: 999px;
      background: var(--admin-control-surface, var(--ui-surface));
      box-shadow: none;
      width: fit-content;
      min-width: 0;
    }
    .interactive-source-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      min-width: 128px;
      padding: 0 20px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ui-text-muted);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    }
    .interactive-source-btn.is-active {
      background: var(--ui-accent);
      color: var(--ui-on-accent);
      box-shadow: 0 8px 18px var(--ui-selection-ring-strong);
    }
    .interactive-page-stage {
      position: relative;
      min-height: clamp(460px, 72vh, 980px);
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 12px;
      overflow: hidden;
      background: var(--admin-panel-surface-muted, var(--ui-surface-muted));
      box-shadow: none;
      user-select: none;
      padding: 12px;
    }
    .interactive-page-stage.is-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      color: var(--ui-text-soft);
      text-align: center;
      font-size: 13px;
      line-height: 1.45;
    }
    .interactive-page-spread {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
      min-height: 100%;
    }
    .interactive-page-spread.is-single-page {
      grid-template-columns: minmax(0, 1fr);
    }
    .interactive-page-slot {
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .interactive-page-slot.is-hidden {
      display: none;
    }
    .interactive-page-slot.is-active .interactive-page-canvas {
      border-color: var(--ui-accent-border);
      box-shadow: 0 0 0 3px var(--ui-accent-border-soft);
    }
    .interactive-page-slot.is-active .interactive-page-slot-badge {
      background: var(--ui-accent);
      color: var(--ui-surface-hover);
    }
    .interactive-page-slot:not(.is-active) .interactive-page-canvas {
      cursor: pointer;
    }
    .interactive-page-slot-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 26px;
      color: var(--ui-text-muted);
      font-size: 12px;
    }
    .interactive-page-slot-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--admin-surface-chip, var(--ui-surface));
      border: 1px solid var(--admin-line-strong, var(--ui-border-strong));
      font-weight: 700;
      white-space: nowrap;
    }
    .interactive-page-slot-hint {
      text-align: right;
      color: var(--ui-text-soft);
    }
    .interactive-page-canvas {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 12px;
      background: var(--admin-panel-surface, var(--ui-surface));
      box-shadow: none;
      touch-action: none;
    }
    .interactive-page-canvas.is-workspace-draw-mode {
      cursor: crosshair;
    }
    .interactive-page-canvas.is-empty {
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      color: var(--ui-text-soft);
      text-align: center;
    }
    .interactive-page-empty {
      position: relative;
      z-index: 1;
      font-size: 12px;
      line-height: 1.45;
    }
    .interactive-page-image {
      display: block;
      width: 100%;
      height: auto;
      user-select: none;
      pointer-events: none;
    }
    .interactive-word-layer,
    .interactive-workspace-layer,
    .interactive-selection-layer,
    .interactive-hotspot-layer {
      position: absolute;
      inset: 0;
    }
    .interactive-workspace-layer {
      z-index: 2;
      pointer-events: none;
    }
    .interactive-word-layer {
      z-index: 3;
    }
    .interactive-hotspot-layer {
      z-index: 4;
    }
    .interactive-selection-layer {
      z-index: 5;
    }
    .interactive-word-box,
    .interactive-object-box,
    .interactive-selected-box,
    .interactive-hotspot-box,
    .interactive-drag-box,
    .interactive-workspace-layer-box {
      position: absolute;
      box-sizing: border-box;
      border-radius: 4px;
    }
    .interactive-workspace-layer-box {
      display: grid;
      align-content: start;
      gap: 4px;
      min-width: 36px;
      min-height: 28px;
      padding: 6px;
      border: 1.5px solid var(--ui-accent-border);
      background: transparent;
      color: var(--ui-text);
      pointer-events: auto;
      cursor: pointer;
    }
    .interactive-workspace-layer-box.is-dragging {
      cursor: grabbing;
    }
    .interactive-workspace-layer-box--crop_image {
      border-style: dashed;
      border-color: var(--ui-success-border);
      background: transparent;
    }
    .interactive-workspace-layer-box--generated_video {
      border-color: var(--ui-warning-border);
      background: transparent;
    }
    .interactive-workspace-layer-box.is-selected {
      border-color: var(--ui-accent);
      outline: 2px solid var(--ui-accent-border-soft);
      outline-offset: 2px;
    }
    .interactive-workspace-layer-box.is-locked {
      border-style: dashed;
      cursor: not-allowed;
    }
    .interactive-workspace-layer-box.has-generated-media {
      overflow: hidden;
      background: var(--admin-control-surface, var(--ui-surface));
    }
    .interactive-workspace-layer-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: var(--admin-panel-surface, var(--ui-surface-solid));
      object-fit: cover;
    }
    .interactive-workspace-layer-play {
      position: absolute;
      right: 6px;
      bottom: 6px;
      z-index: 3;
      width: auto;
      min-width: 0;
      min-height: 28px;
      padding: 0 9px;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 6px;
      background: var(--admin-control-surface, var(--ui-surface));
      color: var(--ui-text);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }
    .interactive-workspace-layer-label,
    .interactive-workspace-layer-media {
      position: relative;
      z-index: 2;
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      min-height: 20px;
      align-items: center;
      padding: 0 6px;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 6px;
      background: var(--admin-control-surface, var(--ui-surface));
      color: var(--ui-text);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .interactive-workspace-layer-media {
      color: var(--ui-text-muted);
      font-weight: 600;
    }
    .interactive-workspace-layer-handle {
      position: absolute;
      width: 8px;
      height: 8px;
      border: 1px solid var(--ui-accent);
      background: var(--admin-control-surface, var(--ui-surface));
      pointer-events: none;
      display: none;
    }
    .interactive-workspace-layer-box.is-selected .interactive-workspace-layer-handle {
      display: block;
      pointer-events: auto;
    }
    .interactive-workspace-layer-box.is-locked .interactive-workspace-layer-handle {
      display: none;
    }
    .interactive-workspace-layer-handle--nw {
      top: -5px;
      left: -5px;
      cursor: nwse-resize;
    }
    .interactive-workspace-layer-handle--ne {
      top: -5px;
      right: -5px;
      cursor: nesw-resize;
    }
    .interactive-workspace-layer-handle--sw {
      bottom: -5px;
      left: -5px;
      cursor: nesw-resize;
    }
    .interactive-workspace-layer-handle--se {
      right: -5px;
      bottom: -5px;
      cursor: nwse-resize;
    }
    .interactive-workspace-layer-draft {
      position: absolute;
      box-sizing: border-box;
      border: 1.5px dashed var(--ui-accent);
      border-radius: 4px;
      background: transparent;
      pointer-events: none;
    }
    .interactive-word-box {
      background: var(--ui-preview-transparent-hit);
      border: 1px solid transparent;
      pointer-events: none;
    }
    .interactive-object-box {
      background: var(--ui-preview-object-surface);
      border: 1.5px dashed var(--ui-preview-object-border);
      pointer-events: none;
    }
    .interactive-object-box.is-clipped {
      border-color: var(--ui-accent);
      outline: 2px solid var(--ui-accent);
      outline-offset: -4px;
    }
    .interactive-selected-box {
      background: var(--ui-preview-selection-surface);
      border: 1px solid var(--ui-preview-selection-border);
      box-shadow: 0 0 0 1px var(--ui-swatch-inset) inset;
      pointer-events: none;
    }
    .interactive-selected-box.is-clipped {
      border-color: var(--ui-accent);
      outline: 2px solid var(--ui-accent);
      outline-offset: -4px;
    }
    .interactive-hotspot-box {
      background: var(--ui-preview-hotspot-surface);
      border: 1px solid var(--ui-preview-hotspot-border);
      pointer-events: none;
    }
    .interactive-drag-box {
      border: 1px dashed var(--ui-accent);
      background: var(--ui-accent-border-soft);
      pointer-events: none;
    }
    .interactive-inline-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }
    .interactive-inline-row > * {
      min-width: 0;
    }
    .interactive-payload-row,
    .interactive-text-payload,
    .interactive-color-row,
    .interactive-text-meta {
      grid-column: 1 / -1;
    }
    .interactive-payload-row > select {
      width: min(100%, 260px);
      min-height: 44px;
      font-size: 16px;
      font-weight: 700;
    }
    .interactive-payload-row.is-text-mode {
      grid-template-columns: minmax(0, 1fr);
    }
    .interactive-payload-row.is-text-mode > select {
      width: min(100%, 260px);
    }
    .interactive-payload-row.is-go-page-mode {
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
    }
    .interactive-payload-row.is-go-page-mode > select {
      width: min(100%, 260px);
    }
    .interactive-payload-row.is-go-page-mode > .interactive-payload-input {
      grid-column: 1 / -1;
    }
    .interactive-inline-row select {
      min-width: 0;
    }
    .interactive-inline-row.is-hidden {
      display: none;
    }
    .interactive-text-effect-row {
      grid-column: 1 / -1;
    }
    .interactive-text-speed-row {
      grid-column: 1 / -1;
      max-width: 360px;
    }
    .interactive-object-effect-row {
      grid-column: 1 / -1;
    }
    .interactive-object-effect-row select,
    .interactive-object-speed-row select,
    .interactive-text-effect-row select,
    .interactive-text-speed-row select {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 44px;
      font-size: 16px;
      font-weight: 700;
    }
    .interactive-object-speed-row {
      grid-column: 1 / -1;
      max-width: 360px;
    }
    .interactive-text-meta.is-hidden {
      display: none;
    }
    .interactive-payload-input.is-hidden {
      display: none;
    }
    .interactive-text-payload.is-hidden {
      display: none;
    }
    .interactive-label-field {
      min-height: 42px;
    }
    .interactive-description-field {
      min-height: 112px;
    }
    .interactive-file-row {
      display: grid;
      gap: 8px;
      grid-column: 1 / -1;
    }
    .interactive-file-row.is-hidden {
      display: none;
    }
    .interactive-file-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      gap: 8px;
      align-items: center;
    }
    .interactive-file-row input[type="file"] {
      width: 100%;
      min-width: 0;
      padding: 8px 10px;
      border: 1px dashed var(--admin-line-strong, var(--ui-border-strong));
      border-radius: 10px;
      background: var(--admin-control-surface, var(--ui-surface));
      color: var(--admin-text-dim, var(--ui-text-muted));
    }
    .interactive-preview-btn {
      flex: 0 0 44px;
      inline-size: 44px;
      block-size: 44px;
      min-width: 44px;
      max-width: 44px;
      min-height: 44px;
      max-height: 44px;
      padding: 0;
      border-radius: 10px;
      white-space: nowrap;
      font-size: 0;
      line-height: 1;
      align-self: center;
      overflow: hidden;
    }
    .interactive-preview-btn::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left: 3px;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      border-left: 14px solid currentColor;
    }
    .interactive-generate-restyle-btn,
    .interactive-generate-motion-btn {
      min-width: 0;
      min-height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      white-space: nowrap;
      justify-self: start;
    }
    .interactive-generate-restyle-btn:not(.is-hidden),
    .interactive-generate-motion-btn:not(.is-hidden) {
      grid-column: 1 / -1;
    }
    .interactive-preview-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .interactive-file-hint {
      font-size: 12px;
      line-height: 1.4;
      color: var(--ui-text-soft);
    }
    .interactive-color-row {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      gap: 10px 14px;
      align-items: start;
    }
    .interactive-color-label {
      grid-column: auto;
      padding-top: 5px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ui-text-muted);
      white-space: nowrap;
    }
    .interactive-color-palette {
      grid-column: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, 28px);
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .interactive-color-swatch {
      flex: 0 0 28px;
      inline-size: 28px;
      block-size: 28px;
      width: 28px;
      height: 28px;
      min-width: 28px;
      max-width: 28px;
      min-height: 28px;
      max-height: 28px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--ui-swatch-border-strong);
      box-sizing: border-box;
      box-shadow: inset 0 0 0 1px var(--ui-swatch-inset-strong);
      background: var(--swatch, var(--ui-warning-surface));
      cursor: pointer;
      overflow: hidden;
    }
    .interactive-color-swatch.is-active {
      border-color: var(--ui-warning-border);
      box-shadow:
        0 0 0 3px var(--ui-accent-border-soft),
        inset 0 0 0 1px var(--ui-swatch-inset-strong);
    }
    .interactive-selected-preview,
    .interactive-items-list,
    .interactive-workspace-layer-list {
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 10px;
      background: var(--admin-panel-surface, var(--ui-surface));
      padding: 10px;
    }
    .interactive-preview-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      grid-column: span 6;
      padding: 10px 12px;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 10px;
      background: var(--admin-panel-surface, var(--ui-surface));
      color: var(--admin-text-muted, var(--ui-text-muted));
      font-size: 13px;
      line-height: 1.4;
    }
    .interactive-preview-toggle input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--ui-accent);
    }
    .interactive-selected-preview {
      grid-column: 1 / -1;
      min-height: 88px;
      white-space: pre-wrap;
      line-height: 1.45;
      color: var(--ui-text);
    }
    .interactive-items-list {
      display: grid;
      gap: 8px;
      max-height: 360px;
      overflow: auto;
    }
    .interactive-workspace-layer-panel {
      display: grid;
      gap: 8px;
      min-width: 0;
      grid-column: 1 / -1;
      padding: 14px;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 14px;
      background: var(--admin-panel-surface, var(--ui-surface));
      box-shadow: none;
    }
    .interactive-workspace-layer-tools {
      grid-column: span 9;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .interactive-workspace-refresh-btn,
    .interactive-workspace-create-btn {
      width: auto;
      min-width: 0;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12px;
    }
    .interactive-workspace-create-btn[aria-pressed="true"] {
      border-color: var(--ui-accent-border);
      color: var(--ui-accent);
      background: var(--ui-accent-border-soft);
    }
    .interactive-workspace-layer-tools .interactive-helper.is-busy {
      color: var(--ui-text-muted);
    }
    .interactive-workspace-layer-tools .interactive-helper.is-success {
      color: var(--ui-success);
    }
    .interactive-workspace-layer-tools .interactive-helper.is-error {
      color: var(--ui-danger);
    }
    .interactive-workspace-layer-list {
      display: grid;
      gap: 8px;
      max-height: 280px;
      overflow: auto;
    }
    .interactive-workspace-layer-selected {
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 10px;
      background: var(--admin-panel-surface, var(--ui-surface));
    }
    .interactive-workspace-layer-selected-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }
    .interactive-workspace-layer-selected-title {
      min-width: 0;
      color: var(--ui-text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .interactive-workspace-layer-selected-meta {
      color: var(--ui-text-soft);
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .interactive-workspace-layer-selected-actions {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      flex-wrap: wrap;
    }
    .interactive-workspace-layer-selected-actions .secondary {
      width: auto;
      min-width: 0;
      min-height: 28px;
      padding: 0 9px;
      border-radius: 8px;
      font-size: 11px;
      line-height: 1;
    }
    .interactive-workspace-layer-empty {
      color: var(--ui-text-soft);
      font-size: 13px;
      line-height: 1.45;
    }
    .interactive-workspace-layer-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 10px;
      background: var(--admin-panel-surface, var(--ui-surface-solid));
    }
    .interactive-workspace-layer-row.is-selected {
      border-color: var(--ui-accent-border);
      background: var(--ui-accent-border-soft);
    }
    .interactive-workspace-layer-row.is-locked {
      border-style: dashed;
    }
    .interactive-workspace-layer-select {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }
    .interactive-workspace-layer-row-title {
      color: var(--ui-text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .interactive-workspace-layer-row-meta {
      color: var(--ui-text-soft);
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .interactive-workspace-layer-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }
    .interactive-workspace-layer-actions .secondary {
      width: auto;
      min-width: 0;
      min-height: 28px;
      padding: 0 9px;
      border-radius: 8px;
      font-size: 11px;
      line-height: 1;
    }
    .interactive-items-panel {
      display: grid;
      gap: 8px;
      min-width: 0;
      grid-column: 1 / -1;
      padding: 14px;
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 14px;
      background: var(--admin-panel-surface, var(--ui-surface));
      box-shadow: none;
    }
    .interactive-items-tools {
      grid-column: span 9;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    /*
     * Filter owner:
     * .interactive-items-filter keeps its compact width and input sizing contract.
     * Do not dedupe this block without UI verification in the editor workflow.
     */
    .interactive-items-filter {
      width: 88px;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      text-align: left;
      background: var(--admin-control-surface, var(--ui-surface-solid));
    }
    .interactive-item-row {
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      border-radius: 10px;
      background: var(--admin-panel-surface, var(--ui-surface-solid));
      padding: 10px 12px;
      display: grid;
      gap: 6px;
    }
    .interactive-item-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .interactive-item-main {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .interactive-item-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
    }
    .interactive-item-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .interactive-item-actions .secondary {
      width: auto;
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0 10px;
      font-size: 11px;
      border-radius: 8px;
    }
    .interactive-item-type {
      font-size: 11px;
      font-weight: 700;
      color: var(--ui-link);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .interactive-item-kind {
      font-size: 11px;
      color: var(--ui-text-soft);
      line-height: 1.35;
    }
    .interactive-item-flag {
      font-size: 11px;
      color: var(--ui-text-soft);
      line-height: 1.35;
    }
    .interactive-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ui-text-strong);
      line-height: 1.35;
    }
    .interactive-item-snippet {
      font-size: 12px;
      color: var(--ui-text-muted);
      line-height: 1.45;
      white-space: pre-wrap;
    }
    .interactive-item-empty,
    .interactive-helper {
      font-size: 12px;
      line-height: 1.4;
      color: var(--ui-text-soft);
    }
    .upload-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 10px;
      border: 1px solid var(--ui-border-strong);
      border-radius: 10px;
      background: var(--ui-surface-solid);
      color: var(--ui-text);
      white-space: nowrap;
      font-size: 14px;
    }
    .upload-check input {
      margin: 0;
      width: 16px;
      height: 16px;
      accent-color: var(--ui-accent);
    }
    @media (max-width: 768px) {
      .interactive-workspace-layer-panel,
      .interactive-items-panel {
        grid-column: 1 / -1;
        padding: 12px;
      }
      .interactive-page-spread {
        grid-template-columns: 1fr;
      }
      .interactive-workspace-layer-tools,
      .interactive-items-tools {
        grid-column: 1 / -1;
      }
      .interactive-items-tools {
        justify-content: flex-start;
      }
      .interactive-workspace-layer-tools {
        justify-content: flex-start;
      }
      .interactive-workspace-layer-row {
        grid-template-columns: 1fr;
      }
      .interactive-workspace-layer-actions {
        justify-content: flex-start;
      }
      .interactive-view-toggle {
        grid-column: 1 / -1;
      }
      .interactive-page-control {
        grid-template-columns: 42px minmax(88px, 120px) 42px;
        justify-content: start;
      }
      .interactive-inline-row,
      .interactive-color-row {
        grid-template-columns: 1fr;
      }
      .interactive-payload-row > select,
      .interactive-payload-row > .interactive-payload-input,
      .interactive-payload-row.is-text-mode > select,
      .interactive-payload-row.is-go-page-mode > select,
      .interactive-payload-row.is-go-page-mode > .interactive-payload-input,
      .interactive-text-effect-row,
      .interactive-text-speed-row,
      .interactive-object-effect-row,
      .interactive-object-speed-row,
      .interactive-color-label,
      .interactive-color-palette,
      .interactive-preview-toggle {
        grid-column: 1 / -1;
      }
      .interactive-file-controls {
        grid-template-columns: 1fr;
      }
      .interactive-file-row {
        grid-column: 1 / -1;
      }
    }


/* Migrated from app/templates/editor.html style block 2. */
    h2 { margin: 0 0 12px; font-size: 18px; }
    img { width: 100%; height: auto; display: block; border-radius: 10px; }


    .home-module-form {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
    }
    #homeBasicBookField,
    #homeBasicCategoryField,
    #homeBasicTitleField,
    #homeBasicSubtitleField,
    #homeBasicButtonTextField,
    #homeBasicButtonLinkField,
    #homeBasicImageField,
    #homeBasicButtonRow {
      min-width: 0;
    }
    #homeBasicBookField[hidden],
    #homeBasicCategoryField[hidden],
    #homeBasicImageField[hidden],
    #homeBasicButtonRow[hidden] {
      display: none !important;
    }
    #homeBasicBookField {
      grid-column: 1 / -1;
    }
    @media (max-width: 980px) {
      .home-module-form {
        grid-column: 1 / -1;
      }
    }


/* Migrated from app/templates/editor_books.html style block 1. */
    .books-admin-table .admin-ui-table {
      min-width: var(--admin-table-min-width-roomy);
    }
    .books-admin-table .admin-ui-table th,
    .books-admin-table .admin-ui-table td {
      padding: var(--admin-table-cell-padding-y-compact) var(--admin-table-cell-padding-x-compact);
    }
    .book-main {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 7px;
      align-items: start;
      min-width: 0;
    }
    .book-main .book-cover-shell {
      width: 54px;
      height: 74px;
      border-radius: 0;
      border: none;
      background: transparent;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: visible;
    }
    .book-main .book-cover {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      border-radius: 6px;
      object-fit: contain;
      object-position: center bottom;
      background: var(--admin-panel-surface-muted, var(--ui-surface-solid));
      border: 1px solid var(--admin-panel-border, var(--ui-border));
      display: block;
    }
    .book-title {
      font-weight: 600;
      color: var(--ui-text-strong);
      line-height: 1.35;
      word-break: break-word;
    }
    .book-main .admin-ui-table-main {
      gap: 2px;
    }
    .book-sub {
      margin-top: 3px;
      color: var(--text-dim);
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }
    .books-actions {
      gap: 4px;
    }
    .books-actions .admin-ui-icon-action {
      width: var(--admin-icon-action-size);
      min-width: var(--admin-icon-action-size);
      max-width: var(--admin-icon-action-size);
      height: var(--admin-icon-action-size);
      min-height: var(--admin-icon-action-size);
      max-height: var(--admin-icon-action-size);
      flex-basis: var(--admin-icon-action-size);
    }
    .books-col-actions {
      width: 188px;
    }
    .books-admin-table td:last-child,
    .books-admin-table th:last-child {
      padding-left: 6px;
      padding-right: 6px;
    }
    .book-meta-cell {
      min-width: 108px;
      color: var(--ui-text-muted);
      font-size: 13px;
      line-height: 1.4;
    }
    .book-main .admin-ui-table-subtitle {
      line-height: 1.3;
    }
    .book-meta-cell.is-empty {
      color: var(--admin-text-soft);
    }
    .books-empty {
      text-align: left;
    }
    .book-action-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    @media (max-width: 900px) {
      .books-admin-table .admin-ui-table {
        min-width: var(--admin-table-min-width-compact);
      }
      .books-actions {
        flex-wrap: wrap;
      }
      .books-actions .admin-ui-icon-action {
        width: var(--admin-icon-action-size);
        min-width: var(--admin-icon-action-size);
        max-width: var(--admin-icon-action-size);
        height: var(--admin-icon-action-size);
        min-height: var(--admin-icon-action-size);
        max-height: var(--admin-icon-action-size);
      }
    }


/* Migrated from app/templates/editor_dashboard.html style block 1 (đã dọn: template đã xoá, chỉ giữ luật còn dùng ở nơi khác). */
:root {
      --line: var(--ui-border);
      --line-2: var(--ui-border-soft);
      --bg-soft: var(--ui-surface-muted);
      --text-dim: var(--ui-text-muted);
    }
.upload-check input {
      margin: 0;
      width: 14px;
      height: 14px;
      accent-color: var(--ui-accent);
    }
.upload-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: var(--admin-control-height-compact);
      padding: 0 9px;
      border: 1px solid var(--ui-border-strong);
      border-radius: 10px;
      background: var(--ui-surface-solid);
      color: var(--ui-text);
      white-space: nowrap;
      font-size: 13px;
    }
.home-module-form {
      display: grid;
      gap: 14px;
    }
.book-title {
      font-weight: 600;
      color: var(--ui-text-strong);
      line-height: 1.35;
      word-break: break-word;
    }


/* Migrated from app/templates/editor_feedback.html style block 1. */
    .feedback-admin-table .admin-ui-table {
      min-width: 980px;
    }
    .feedback-admin-content {
      max-width: 520px;
      color: var(--ui-text-strong);
      line-height: 1.6;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .feedback-admin-contact {
      color: var(--ui-text-muted);
      overflow-wrap: anywhere;
    }
    .feedback-admin-contact.is-empty {
      color: var(--ui-text-soft);
      font-style: italic;
    }
    .feedback-admin-time {
      color: var(--ui-text-muted);
      white-space: nowrap;
    }
    .feedback-admin-status-form {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
    }
    .feedback-admin-status-form select {
      min-width: 130px;
      min-height: var(--admin-control-height-compact);
      padding: 6px 10px;
      border: 1px solid var(--admin-line-strong);
      border-radius: var(--admin-radius-control);
      background: var(--ui-surface-solid);
      color: var(--admin-text);
      font: inherit;
    }
    .feedback-admin-status-form button {
      min-height: var(--admin-control-height-compact);
      padding: 0 12px;
    }
    @media (max-width: 900px) {
      .feedback-admin-table .admin-ui-table {
        min-width: 860px;
      }
    }


/* Migrated from app/templates/editor_forensics.html style block 1. */
    :root {
      --line: var(--ui-border);
      --line-2: var(--ui-border-soft);
      --bg-soft: var(--ui-surface-muted);
      --text-dim: var(--ui-text-muted);
      --danger-soft: var(--ui-danger-surface);
      --danger-line: var(--ui-danger-border);
    }
    .forensics-shell {
      display: grid;
      gap: 18px;
    }
    .forensics-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--ui-surface-solid);
      padding: 18px;
    }
    .forensics-card h2 {
      margin: 0 0 10px;
    }
    .forensics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .forensics-field {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .forensics-field--full {
      grid-column: 1 / -1;
    }
    .forensics-field label {
      font-size: 13px;
      font-weight: 600;
      color: var(--admin-text-dim);
    }
    .forensics-field textarea {
      min-height: 180px;
      resize: vertical;
    }
    .forensics-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }
    .forensics-actions button {
      width: auto;
      min-width: 0;
    }
    .forensics-error {
      border: 1px solid var(--danger-line);
      background: var(--danger-soft);
      color: var(--admin-danger);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 14px;
    }
    .forensics-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 14px;
      margin-top: 12px;
    }
    .forensics-meta-item {
      border: 1px solid var(--line-2);
      border-radius: 12px;
      background: var(--bg-soft);
      padding: 10px 12px;
    }
    .forensics-meta-item strong {
      display: block;
      margin-bottom: 4px;
      color: var(--admin-text);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .forensics-meta-item span {
      color: var(--admin-text);
      word-break: break-word;
    }
    .forensics-table-wrap {
      overflow-x: auto;
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--ui-surface-solid);
    }
    .forensics-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 880px;
    }
    .forensics-table th,
    .forensics-table td {
      padding: 10px 8px;
      border-bottom: 1px solid var(--line-2);
      text-align: left;
      vertical-align: top;
      font-size: 14px;
    }
    .forensics-table th {
      background: var(--bg-soft);
      color: var(--ui-text);
      font-size: 13px;
    }
    .forensics-table tbody tr:last-child td {
      border-bottom: none;
    }
    .forensics-report-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }
    .forensics-report-grid textarea {
      min-height: 220px;
      resize: vertical;
    }
    .forensics-top {
      display: grid;
      gap: 6px;
      margin-top: 12px;
      color: var(--text-dim);
    }
    .forensics-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border: 1px solid var(--line);
      background: var(--bg-soft);
      color: var(--admin-text);
    }
    .forensics-badge--medium {
      border-color: var(--ui-warning-border);
      background: var(--ui-warning-surface);
      color: var(--ui-warning);
    }
    .forensics-badge--high {
      border-color: var(--ui-danger-border);
      background: var(--ui-danger-surface);
      color: var(--ui-danger);
    }
    .forensics-row--ack td {
      opacity: 0.62;
    }
    .forensics-inline-form {
      margin: 0;
    }
    @media (max-width: 860px) {
      .forensics-grid,
      .forensics-meta,
      .forensics-report-grid {
        grid-template-columns: 1fr;
      }
      .forensics-table {
        min-width: 0;
      }
    }


/* Migrated from app/templates/editor_review.html style block 1. */
    .review-table-shell .admin-ui-table {
      min-width: 980px;
    }
    .review-book-main {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 12px;
      align-items: start;
      min-width: 0;
    }
    .review-empty {
      text-align: left;
    }
    .review-toolbar-main {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      width: 100%;
    }
    .review-toolbar-main input,
    .review-toolbar-main select {
      min-height: 40px;
    }
    /*
     * Filter input owner:
     * .review-toolbar-search keeps the search field wide enough for book queries.
     */
    .review-toolbar-search {
      flex: 1 1 260px;
      min-width: 220px;
    }
    /*
     * Filter select owner:
     * .review-toolbar-status keeps the review status dropdown compact without overflowing.
     */
    .review-toolbar-status {
      width: 180px;
      max-width: 100%;
    }
    .review-status-cell {
      display: grid;
      gap: 6px;
      min-width: 120px;
    }
    .review-status-meta {
      color: var(--ui-text-muted);
      font-size: 12px;
      line-height: 1.45;
    }
    /*
     * Action owner:
     * .review-actions keeps inline action buttons out of the global full-width button flow.
     */
    .review-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .review-actions button,
    .review-actions a {
      width: auto;
    }
    @media (max-width: 900px) {
      .review-table-shell .admin-ui-table {
        min-width: 920px;
      }
    }


/* Migrated from app/templates/forgot_password.html style block 1. */
    .auth-wrap {
      max-width: 560px;
      margin: 24px auto;
    }
    .auth-form {
      display: grid;
      gap: 10px;
    }
    .auth-actions {
      display: grid;
      gap: 8px;
    }
    .auth-actions button {
      width: 100%;
    }
    .reset-link-box {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--ui-border);
      border-radius: 12px;
      background: linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface-hover) 100%);
      display: none;
    }
    .reset-link-head {
      margin: 0 0 8px;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 13px;
    }
    .reset-link-field {
      width: 100%;
      border: 1px solid var(--ui-border-strong);
      border-radius: 8px;
      background: var(--ui-surface-solid);
      color: var(--ui-text);
      font-family: var(--font-ui);
      font-size: 13px;
      padding: 8px 10px;
    }
    .reset-link-actions {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .reset-link-open {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--ui-accent-muted);
      background: var(--ui-accent-muted);
      color: var(--ui-surface-solid);
      text-decoration: none;
      font-family: var(--font-ui);
      font-size: 13px;
      white-space: nowrap;
    }
    .reset-link-open:hover {
      background: var(--ui-text-muted);
      border-color: var(--ui-text-muted);
    }
    .reset-link-actions button {
      width: auto;
      min-height: 34px;
      padding: 0 10px;
    }
    @media (max-width: 768px) {
      .reset-link-actions {
        display: grid;
        grid-template-columns: 1fr;
      }
      .reset-link-open,
      .reset-link-actions button {
        width: 100%;
      }
    }


/* Migrated from app/templates/home.html style block 1. */
    :root {
      --home-grid-columns: repeat(12, minmax(0, 1fr));
      --home-grid-gap: 24px;
      --home-grid-gap-tight: 16px;
      --home-rhythm-unit: 8px;
      --home-space-8: 8px;
      --home-space-12: 12px;
      --home-space-16: 16px;
      --home-space-24: 24px;
      --home-space-32: 32px;
      --home-space-48: 48px;
      --home-space-64: 64px;
      --home-space-80: 80px;
    }
    body[data-page-kind="home"] {
      --home-section-gap: 64px;
      --home-section-row-gap: 24px;
      --home-section-header-gap: 12px;
      --home-section-footer-gap: 16px;
      --home-banner-section-gap: 32px;
    }
    .book-list-page__eyebrow {
      margin: 0;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.4;
      text-transform: uppercase;
    }
    .book-list-page__hero-copy {
      display: grid;
      gap: 12px;
      max-width: 62ch;
    }
    .book-list-page__context {
      margin: 0;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 14px;
      line-height: 1.6;
    }
    .search-results-page {
      gap: 32px;
      padding-bottom: 64px;
    }
    .search-results-page .book-list-page__head {
      gap: 24px;
    }
    .search-results-page__hero {
      gap: 14px;
      max-width: 820px;
    }
    .home-search-shell {
      grid-column: 1 / -1;
      display: grid;
      gap: var(--home-space-32);
    }
    .home-search-results-column {
      display: grid;
      align-content: start;
      gap: var(--home-space-24);
      --book-list-shell-max-width: 100%;
    }
    .home-search-results-column .book-list-shell {
      margin: 0 auto;
    }
    .home-search-status {
      margin: 0;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 14px;
      line-height: 1.6;
    }
    .search-results-page__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 16px;
      align-items: center;
    }
    .search-mode-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      align-items: center;
      max-width: 100%;
      font-family: var(--font-ui);
      font-size: 13px;
      line-height: 1.4;
    }
    .search-mode-tabs__item {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      color: var(--ui-text-muted);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      white-space: nowrap;
      transition: border-color 0.16s ease, color 0.16s ease;
    }
    .search-mode-tabs__item:hover,
    .search-mode-tabs__item:focus-visible {
      color: var(--ui-link-hover);
      border-color: var(--ui-link-decoration-hover);
    }
    .search-mode-tabs__item.is-active {
      color: var(--ui-text-strong);
      border-color: currentColor;
    }
    /*
     * Result-link owner:
     * .search-results-page__action keeps lightweight continuation links self-contained on home search results.
     */
    .search-results-page__action {
      color: var(--ui-link);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid var(--ui-link-decoration);
      transition: border-color 0.16s ease, color 0.16s ease;
    }
    .search-results-page__action:hover,
    .search-results-page__action:focus-visible {
      color: var(--ui-link-hover);
      border-color: var(--ui-link-decoration-hover);
    }
    .home-search-results-empty {
      grid-column: 1 / -1;
      display: grid;
      gap: 16px;
      border: 1px dashed var(--ui-border);
      border-radius: 20px;
      padding: var(--home-space-32) var(--home-space-24);
      background: var(--ui-surface-glass);
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      text-align: left;
      line-height: 1.6;
      text-wrap: balance;
    }
    .home-search-results-empty strong {
      color: var(--ui-text-strong);
      font-family: var(--font-body);
      font-size: 20px;
      line-height: 1.25;
      font-weight: 600;
    }
    .home-search-results-empty p {
      margin: 0;
    }
    .home-module-stack {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      gap: var(--home-space-64) var(--home-grid-gap);
      grid-column: 1 / -1;
    }
    .layout-grid,
    .home-content-stack {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      column-gap: var(--home-grid-gap);
      align-items: start;
    }
    .home-content-stack {
      row-gap: var(--home-space-64);
      padding: var(--home-space-16) 0 var(--home-space-64);
    }
    .home-banner-slot {
      grid-column: 1 / -1;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      padding-top: var(--banner-offset-y, 0px);
      padding-left: var(--banner-offset-x, 0px);
      margin: 0 auto;
    }
    .home-banner-slot.is-wide {
      width: 100%;
      max-width: min(100%, var(--banner-slot-width, 1200px));
      left: auto;
      transform: none;
    }
    .home-banner-module {
      grid-column: 1 / -1;
      width: 100%;
      max-width: min(100%, var(--banner-width, 1200px));
      min-height: var(--banner-height, 240px);
      padding: 0;
      border-radius: 0;
      background: var(--banner-surface-bg, var(--banner-config-bg, var(--ui-surface-solid)));
      color: var(--banner-text-color, var(--banner-config-text, var(--ui-banner-default-text)));
      border: 1px solid var(--ui-banner-border);
      box-shadow: none;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .home-banner-module.is-rich {
      display: block;
      padding: 0;
    }
    .home-banner-module::before {
      content: "";
      position: absolute;
      inset: 0;
      background: none;
      pointer-events: none;
    }
    .home-banner-module.is-rich::before {
      display: none;
    }
    .home-banner-inner {
      position: relative;
      z-index: 1;
      max-width: min(100%, 860px);
      display: grid;
      gap: var(--home-space-16);
      padding: var(--home-space-48);
    }
    .home-banner-canvas {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: var(--banner-height, 240px);
      box-sizing: border-box;
    }
    .home-banner-preset {
      position: relative;
      min-height: var(--banner-height, 240px);
      width: 100%;
      overflow: hidden;
      border-radius: inherit;
      background: var(--banner-surface-bg, var(--banner-config-bg, var(--ui-surface-solid)));
      color: var(--banner-text-color, var(--banner-config-text, var(--ui-banner-default-text)));
    }
    .home-banner-preset-bg,
    .home-banner-preset-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .home-banner-preset-bg {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .home-banner-preset-content {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      min-height: var(--banner-height, 240px);
      box-sizing: border-box;
    }
    .home-banner-preset-content--hero {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      align-items: center;
      padding: clamp(32px, 4vw, var(--home-space-48));
      text-align: center;
    }
    .home-banner-preset-content--hero-split {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      column-gap: clamp(24px, 3vw, 40px);
      row-gap: var(--home-space-24);
      align-items: start;
      padding: clamp(32px, 4vw, var(--home-space-48));
    }
    .home-banner-preset-content--hero-split.home-banner-preset-content--taschen {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: 32px;
      row-gap: 24px;
      align-items: start;
      padding: 40px;
    }
    .home-banner-preset-content--split,
    .home-banner-preset-content--book {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      column-gap: var(--home-grid-gap);
      row-gap: var(--home-space-24);
      align-items: center;
      padding: var(--home-space-48);
    }
    .home-banner-preset-content--full-image {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      align-items: end;
      padding: var(--home-space-48);
    }
    .home-banner-preset-content--promo {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      align-items: center;
      column-gap: var(--home-grid-gap);
      padding: var(--home-space-24);
    }
    .home-banner-preset-content--category {
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      align-items: end;
      padding: 32px;
    }
    .home-banner-preset-copy-block {
      display: grid;
      gap: var(--home-space-16);
      min-width: 0;
    }
    .home-banner-preset-copy-block--hero {
      grid-column: 3 / span 8;
      justify-items: center;
      max-width: min(100%, 50rem);
      margin: 0 auto;
    }
    .home-banner-preset-copy-block--hero-split {
      grid-column: 1 / span 8;
      gap: var(--home-space-16);
      min-width: 0;
      max-width: 52ch;
      align-content: start;
    }
    .home-banner-preset-copy-block--hero-split.is-right {
      grid-column: 5 / span 8;
    }
    .home-banner-preset-copy-block--taschen {
      grid-column: 1 / span 5;
      max-width: 24rem;
      gap: 20px;
    }
    .home-banner-preset-copy-block--split {
      grid-column: span 6;
      gap: var(--home-space-24);
    }
    .home-banner-preset-copy-block--book {
      grid-column: span 7;
      gap: 18px;
    }
    .home-banner-preset-copy-block--full-image {
      grid-column: 1 / span 6;
      gap: var(--home-space-16);
    }
    .home-banner-preset-copy-block--promo {
      grid-column: 1 / span 9;
      min-width: 0;
    }
    .home-banner-preset-copy-block--category {
      grid-column: 1 / span 5;
      gap: 12px;
    }
    .home-banner-preset-media-block {
      grid-column: 8 / span 5;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .home-banner-preset-media-block--hero {
      grid-column: 1 / span 4;
      min-width: 0;
      display: flex;
      align-items: stretch;
      justify-content: center;
      align-self: start;
    }
    .home-banner-preset-media-block--hero.is-right {
      grid-column: 9 / span 4;
    }
    .home-banner-preset-media-block--taschen {
      grid-column: 7 / span 6;
      align-self: start;
    }
    .home-banner-preset-media-block.is-first {
      grid-column: 1 / span 5;
    }
    .home-banner-preset-book-cover-wrap {
      grid-column: 1 / span 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .home-banner-preset-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--home-space-12);
      align-items: center;
      margin-top: 8px;
    }
    .home-banner-preset-promo-action {
      grid-column: 10 / span 3;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .home-banner-preset-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 18px;
      border-radius: 0;
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: opacity 0.16s ease;
      max-width: 100%;
      box-sizing: border-box;
    }
    .home-banner-preset-button.is-secondary {
      background: transparent !important;
      border: 1px solid currentColor;
      box-shadow: none !important;
    }
    .home-banner-preset-button:hover {
      opacity: 0.96;
    }
    .home-banner-preset-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      width: fit-content;
      min-height: 0;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .home-banner-preset-meta {
      font-family: var(--font-ui);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 600;
      color: inherit;
      opacity: 0.82;
    }
    .home-banner-preset-title {
      margin: 0;
      max-width: 12ch;
      color: inherit;
      font-family: var(--font-heading);
      line-height: 0.98;
      font-weight: 700;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }
    .home-banner-preset-subtitle {
      margin: 0;
      max-width: 42ch;
      color: inherit;
      line-height: 1.7;
      text-wrap: pretty;
    }
    .home-banner-preset-cover {
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0 18px 36px var(--ui-banner-border);
      background: var(--ui-selection-surface-soft);
    }
    .home-banner-preset-cover img,
    .home-banner-preset-figure img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .home-banner-preset-figure {
      overflow: hidden;
      border-radius: 0;
      background: var(--ui-surface-wash-soft);
      min-width: 0;
      width: 100%;
      border: 1px solid var(--ui-banner-border);
    }
    .home-banner-preset-figure--hero {
      min-height: clamp(320px, 34vw, 460px);
      height: 100%;
    }
    .home-banner-textbox {
      position: absolute;
      box-sizing: border-box;
      max-width: calc(100% - 8px);
      overflow-wrap: anywhere;
      white-space: normal;
    }
    .home-banner-image {
      position: absolute;
      box-sizing: border-box;
      max-width: 100%;
      overflow: hidden;
    }
    .home-banner-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      user-select: none;
      pointer-events: none;
    }
    .home-banner-textbox > :first-child {
      margin-top: 0;
    }
    .home-banner-textbox > :last-child {
      margin-bottom: 0;
    }
    .home-banner-title {
      margin: 0;
      color: var(--banner-title-color, var(--banner-text-color, var(--banner-config-text, var(--ui-banner-default-text))));
      font-family: var(--font-heading);
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .home-module-stack > *,
    .home-content-stack > * {
      min-width: 0;
    }
    .home-empty-state {
      grid-column: 1 / -1;
      width: min(100%, 720px);
      margin: 0 auto;
      padding: var(--home-space-24) var(--home-space-32);
      text-align: center;
      color: var(--ui-text-muted);
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.6;
      text-wrap: balance;
    }
    .book-list-section--home,
    .home-section {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: var(--home-grid-columns);
      row-gap: var(--home-section-row-gap);
      align-items: start;
    }
    .book-list-section--home + .book-list-section--home,
    .home-section + .home-section {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    .home-section--hero,
    .home-section--search {
      row-gap: 0;
    }
    .book-list-section__head--home,
    .home-section__header,
    .home-section__grid-wrap,
    .home-section__footer {
      grid-column: 1 / -1;
      min-width: 0;
    }
    .book-list-section__head--home,
    .home-section__header {
      display: grid;
      gap: var(--home-section-header-gap);
      margin-bottom: 0;
    }
    .bookshelf-home-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      min-width: 0;
    }
    .bookshelf-home-head--compact {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      column-gap: 20px;
      row-gap: 8px;
    }
    .bookshelf-home-head--title-only {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      align-items: center;
      row-gap: var(--home-space-8);
    }
    .bookshelf-home-copy {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .bookshelf-home-copy--compact {
      display: block;
    }
    .bookshelf-home-copy--centered {
      width: 100%;
      justify-items: center;
      text-align: center;
      max-width: min(100%, 40ch);
      margin-inline: auto;
    }
    .bookshelf-home-description {
      margin: 0;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 14px;
      line-height: 1.58;
      max-width: 36ch;
      margin-inline: auto;
      text-wrap: balance;
    }
    .bookshelf-home-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ui-text);
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      text-decoration: none;
      white-space: nowrap;
      border-bottom: 1px solid transparent;
    }
    .bookshelf-home-link:hover,
    .bookshelf-home-link:focus-visible {
      border-bottom-color: var(--ui-divider-strong);
    }
    .home-section__footer {
      display: flex;
      justify-content: center;
      margin-top: var(--home-section-footer-gap);
    }
    .home-section__footer-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      text-align: center;
      text-decoration: none;
      border-bottom: 1px solid transparent;
    }
    .home-section[data-home-preview-state] .home-grid > .book-card:nth-child(n+5),
    .home-section[data-home-preview-state="collapsed"] .home-grid > .book-card:nth-child(n+3) {
      display: none;
    }
    .public-content-action {
      appearance: none;
      color: var(--ui-text);
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }
    button.home-section__footer-link {
      appearance: none;
      width: auto;
      color: var(--ui-text);
      padding: 0;
      border: 0;
      border-bottom: 1px solid transparent;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
    }
    .public-content-action:hover,
    .public-content-action:focus-visible,
    .home-section__footer-link:hover,
    .home-section__footer-link:focus-visible {
      color: var(--ui-text);
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }
    .home-section__title {
      margin: 0;
    }
    @media (min-width: 768px) {
      .home-section[data-home-preview-state="collapsed"] .home-grid > .book-card:nth-child(n+3),
      .home-section[data-home-preview-state] .home-grid > .book-card:nth-child(n+5) {
        display: grid;
      }
      .home-section[data-home-preview-state] .home-grid > .book-card:nth-child(n+7),
      .home-section[data-home-preview-state="collapsed"] .home-grid > .book-card:nth-child(n+4) {
        display: none;
      }
    }
    @media (min-width: 1200px) {
      .home-section[data-home-preview-state="collapsed"] .home-grid > .book-card:nth-child(n+3),
      .home-section[data-home-preview-state] .home-grid > .book-card:nth-child(n+7) {
        display: grid;
      }
      .home-section[data-home-preview-state="collapsed"] .home-grid > .book-card:nth-child(n+5) {
        display: none;
      }
    }
    .home-section__title-line {
      display: block;
      white-space: nowrap;
    }
    .home-section__grid-wrap,
    .home-grid {
      width: 100%;
    }
    .home-banner-body {
      margin: 0;
      max-width: 60ch;
      color: color-mix(in srgb, var(--banner-muted-color, var(--banner-text-color, var(--banner-config-text, var(--ui-banner-default-text)))) 86%, var(--ui-surface-solid) 14%);
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.65;
    }
    @media (max-width: 768px) {
      .bookshelf-home-head {
        flex-direction: column;
        align-items: flex-start;
      }
      .bookshelf-home-head--compact {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
      }
      .bookshelf-home-head--title-only {
        grid-template-columns: minmax(0, 1fr);
      }
      .home-module-stack,
      .home-banner-preset-content--hero,
      .home-banner-preset-content--hero-split,
      .home-banner-preset-content--split,
      .home-banner-preset-content--book,
      .home-banner-preset-content--full-image,
      .home-banner-preset-content--promo,
      .home-banner-preset-content--category {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 24px;
      }
      .home-content-stack,
      .home-module-stack {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--home-grid-gap);
      }
      .home-content-stack {
        padding: var(--home-space-16) 0 var(--home-space-48);
      }
      .home-empty-state {
        width: min(100%, 640px);
        padding: var(--home-space-24);
        font-size: 14px;
      }
      .home-banner-module {
        min-height: 0;
        border-radius: 0;
      }
      .home-banner-slot.is-wide {
        width: 100%;
        max-width: min(100%, var(--banner-slot-width, 1200px));
      }
      .home-banner-inner {
        max-width: 100%;
        padding: 24px 20px;
      }
      .home-banner-preset-content--hero,
      .home-banner-preset-content--hero-split,
      .home-banner-preset-content--split,
      .home-banner-preset-content--book,
      .home-banner-preset-content--full-image,
      .home-banner-preset-content--promo,
      .home-banner-preset-content--category {
        padding: 24px 20px;
      }
      .home-banner-preset-copy-block--hero,
      .home-banner-preset-copy-block--hero-split,
      .home-banner-preset-copy-block--hero-split.is-right,
      .home-banner-preset-copy-block--split,
      .home-banner-preset-copy-block--book,
      .home-banner-preset-copy-block--full-image,
      .home-banner-preset-copy-block--promo,
      .home-banner-preset-copy-block--category,
      .home-banner-preset-media-block--hero,
      .home-banner-preset-media-block--hero.is-right,
      .home-banner-preset-media-block,
      .home-banner-preset-media-block.is-first,
      .home-banner-preset-book-cover-wrap,
      .home-banner-preset-promo-action {
        grid-column: 1 / -1;
      }
      .home-banner-preset-copy-block--hero,
      .home-banner-preset-copy-block--hero-split {
        max-width: none;
      }
      .home-banner-preset-copy-block--taschen,
      .home-banner-preset-media-block--taschen {
        grid-column: 1 / -1;
        max-width: none;
      }
      .home-banner-preset-promo-action {
        justify-content: flex-start;
      }
      body[data-page-kind="home"] {
        --home-section-gap: 48px;
        --home-section-row-gap: 20px;
        --home-section-footer-gap: 12px;
        --home-banner-section-gap: 24px;
      }
      .bookshelf-home-description {
        max-width: 32ch;
      }
      .search-results-page {
        gap: 28px;
        padding-bottom: 56px;
      }
    }
    @media (max-width: 1024px) and (min-width: 769px) {
      .home-banner-preset-copy-block--hero {
        grid-column: 2 / span 10;
        max-width: 44rem;
      }
      .home-banner-preset-copy-block--hero-split {
        grid-column: 1 / span 7;
      }
      .home-banner-preset-copy-block--hero-split.is-right {
        grid-column: 6 / span 7;
      }
      .home-banner-preset-media-block--hero {
        grid-column: 1 / span 5;
      }
      .home-banner-preset-media-block--hero.is-right {
        grid-column: 8 / span 5;
      }
      .home-banner-preset-copy-block--taschen {
        grid-column: 1 / span 5;
      }
      .home-banner-preset-media-block--taschen {
        grid-column: 7 / span 6;
      }
      .home-banner-preset-copy-block--split,
      .home-banner-preset-copy-block--book {
        grid-column: span 7;
      }
      .home-banner-preset-media-block,
      .home-banner-preset-media-block.is-first {
        grid-column: span 5;
      }
      .home-banner-preset-book-cover-wrap {
        grid-column: span 4;
      }
      .home-banner-preset-copy-block--book {
        grid-column: span 8;
      }
      .home-banner-preset-content--hero-split.home-banner-preset-content--taschen {
        padding: 32px;
      }
    }
    @media (max-width: 640px) {
      .home-search-shell {
        gap: 16px;
      }
      .book-list-page__hero-copy {
        gap: 10px;
      }
      .book-list-page__context {
        font-size: 13px;
      }
      .search-results-page__actions {
        gap: 10px 14px;
      }
      .search-mode-tabs {
        gap: 8px 14px;
      }
      .home-search-results-empty {
        padding: 24px 20px;
        text-align: left;
      }
      .home-banner-preset-content--hero-split.home-banner-preset-content--taschen {
        padding: 24px 20px;
      }
    }


/* Migrated from app/templates/login.html style block 1. */
    .auth-wrap {
      max-width: 520px;
      margin: 24px auto;
    }
    .auth-form {
      display: grid;
      gap: 10px;
    }
    .auth-social {
      display: grid;
      gap: 10px;
    }
    .auth-divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: center;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .auth-divider::before,
    .auth-divider::after {
      content: "";
      height: 1px;
      background: var(--ui-border);
    }
    .auth-social-list {
      display: grid;
      gap: 8px;
    }
    .auth-social-btn {
      width: 100%;
    }
    .auth-social-note {
      color: var(--ui-text-muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .auth-links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      min-width: 0;
    }
    .auth-msg {
      min-height: 22px;
      font-family: var(--font-ui);
      color: var(--ui-warning);
    }
    .auth-recovery {
      display: none;
      margin-top: 10px;
    }
    .auth-recovery.is-visible {
      display: block;
    }
    .auth-recovery button {
      width: 100%;
    }
    @media (max-width: 768px) {
      .auth-links {
        grid-template-columns: 1fr;
      }
    }


/* Migrated from app/templates/notifications.html style block 1. */
    .notification-page__summary {
      margin: 0;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .notification-item__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .notification-item__state {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .notification-item__state::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--ui-notification-dot);
      flex: 0 0 auto;
    }

    .notification-item--read .notification-item__state::before {
      background: var(--ui-notification-dot-muted);
    }

    .notification-item--read .notification-item__state,
    .notification-item--read .notification-item__meta {
      color: var(--ui-text-soft);
    }

    .notification-item--read .notification-item__title {
      color: var(--ui-text-strong);
    }

    .notification-item--read .notification-item__content {
      color: var(--ui-text-muted);
    }

    .notification-item--unread .notification-item__title {
      color: var(--ui-text-strong);
    }

    .notification-item--unread .notification-item__content {
      color: var(--ui-text);
    }

    @media (max-width: 640px) {
      .notification-page__summary {
        font-size: 11px;
      }
    }


/* Migrated from app/templates/register.html style block 1. */
    .auth-wrap {
      max-width: 560px;
      margin: 24px auto;
    }
    .auth-form {
      display: grid;
      gap: 10px;
    }
    .password-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }
    .password-row button {
      width: auto;
      min-width: 40px;
      min-height: 40px;
      padding: 0;
    }
    .password-toggle-btn svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .password-toggle-btn .icon-eye-off {
      display: none;
    }
    .password-toggle-btn.is-visible .icon-eye {
      display: none;
    }
    .password-toggle-btn.is-visible .icon-eye-off {
      display: block;
    }
    .auth-social {
      display: grid;
      gap: 10px;
    }
    .auth-divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: center;
      color: var(--ui-text-soft);
      font-family: var(--font-ui);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .auth-divider::before,
    .auth-divider::after {
      content: "";
      height: 1px;
      background: var(--ui-border);
    }
    .auth-social-list {
      display: grid;
      gap: 8px;
    }
    .auth-social-btn {
      width: 100%;
      gap: 10px;
    }
    .auth-social-icon {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .auth-social-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .auth-social-note {
      color: var(--ui-text-muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .auth-links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      min-width: 0;
    }
    .auth-msg {
      min-height: 22px;
      font-family: var(--font-ui);
      color: var(--ui-warning);
    }
    .auth-link-box {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--ui-border);
      border-radius: 12px;
      background: var(--ui-surface-hover);
      display: none;
    }
    .auth-link-box p {
      margin: 0 0 8px;
      color: var(--ui-text-muted);
      font-family: var(--font-ui);
      font-size: 13px;
    }
    .auth-link-box input {
      width: 100%;
      border: 1px solid var(--ui-border-strong);
      border-radius: 8px;
      background: var(--ui-surface-solid);
      color: var(--ui-text);
      font-family: var(--font-ui);
      font-size: 13px;
      padding: 8px 10px;
    }
    .auth-link-box a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      margin-top: 8px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--ui-accent-muted);
      background: var(--ui-accent-muted);
      color: var(--ui-surface-solid);
      text-decoration: none;
      font-family: var(--font-ui);
      font-size: 13px;
    }
    @media (max-width: 768px) {
      .auth-links {
        grid-template-columns: 1fr;
      }
    }


/* Migrated from app/templates/reset_password.html style block 1. */
    .auth-wrap {
      max-width: 560px;
      margin: 24px auto;
    }
    .auth-form {
      display: grid;
      gap: 10px;
    }
/* === End Migrated Non-Reader Template Styles === */

/* Quốc tang image contract: non-reader chrome images are monochrome; source viewers stay faithful. */
body.st-non-reader-shell.theme-quoc-tang img:not(.metadata-capture-page-image) {
  color: transparent;
  filter: grayscale(1) !important;
  transition: filter 0.18s ease;
}
body.st-non-reader-shell.theme-quoc-tang :is(a, button, [role="button"], figure, [data-book-cover-card]):is(:hover, :focus-visible, :focus-within) img,
body.st-non-reader-shell.theme-quoc-tang img:not(.metadata-capture-page-image):is(:hover, :focus-visible) {
  filter: none !important;
}

/* News v2 editorial surface. Scoped to news-v2-* so it can be removed cleanly. */
.news-v2-shell {
  --news-v2-serif: Georgia, "Times New Roman", serif;
  --news-v2-sans: var(--font-ui), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --news-v2-text: #111111;
  --news-v2-muted: #5f5f5f;
  --news-v2-soft: #858585;
  --news-v2-divider: #d7d2c8;
  --news-v2-paper: #fbfbfa;
  --news-v2-page-width: 1180px;
  --news-v2-reading-width: 720px;
  --news-v2-hero-width: 1080px;
  background: var(--news-v2-paper);
  color: var(--news-v2-text);
}

.news-v2-shell .book-qa-messenger {
  display: none;
}

.news-v2-page {
  width: min(100% - 48px, var(--news-v2-page-width));
  margin: 0 auto;
  padding: 48px 0 104px;
}

body.news-v2-shell[data-page-kind="news-v2-list"] .news-v2-page {
  padding-top: 0;
}

.news-v2-page--detail {
  display: grid;
  gap: 26px;
  width: min(100% - 48px, var(--news-v2-hero-width));
}

.news-v2-kicker,
.news-v2-meta,
.news-v2-blog-kicker,
.news-v2-section-kicker,
.news-v2-section-nav,
.news-v2-front-meta,
.news-v2-latest-label,
.news-v2-latest-meta,
.news-v2-section-rail,
.news-v2-article-hero figcaption,
.news-v2-inline-figure figcaption {
  font-family: var(--news-v2-sans);
}

.news-v2-kicker {
  margin: 0;
  color: var(--news-v2-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
}

.news-v2-section-title,
.news-v2-front-title,
.news-v2-blog-masthead h1,
.news-v2-latest-header h2,
.news-v2-latest-title,
.news-v2-article-title,
.news-v2-story-title,
.news-v2-related h2,
.news-v2-related h3 {
  margin: 0;
  color: var(--news-v2-text);
  font-family: var(--news-v2-serif);
  font-weight: 700;
  letter-spacing: 0;
}

.news-v2-section-kicker {
  margin: 0;
  color: var(--news-v2-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
}

.news-v2-section-title {
  font-size: 96px;
  line-height: 0.92;
}

.news-v2-section-dek,
.news-v2-article-dek {
  margin: 0;
  max-width: 780px;
  color: #333333;
  font-family: var(--news-v2-serif);
  font-size: 26px;
  line-height: 1.45;
}

.news-v2-section-nav {
  border-top: 1px solid var(--news-v2-divider);
  border-bottom: 1px solid var(--news-v2-divider);
}

.news-v2-section-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.news-v2-section-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-right: 1px solid var(--news-v2-divider);
  color: var(--news-v2-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.news-v2-section-nav-link:first-child {
  padding-left: 0;
}

.news-v2-section-nav-link:last-child {
  border-right: 0;
}

.news-v2-section-nav-link:hover,
.news-v2-section-nav-link:focus-visible,
.news-v2-front-title a:hover,
.news-v2-front-title a:focus-visible,
.news-v2-latest-title a:hover,
.news-v2-latest-title a:focus-visible,
.news-v2-related a:hover,
.news-v2-related a:focus-visible,
.news-v2-text-link:hover,
.news-v2-text-link:focus-visible {
  opacity: 0.72;
}

.news-v2-front-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.4fr) minmax(0, 3.2fr) minmax(220px, 2.4fr);
  gap: 0;
  padding: 42px 0 40px;
  border-bottom: 1px solid var(--news-v2-divider);
}

body.news-v2-shell[data-page-kind="news-v2-list"] .news-v2-front-grid {
  padding-top: 24px;
}

.news-v2-front-story {
  display: grid;
  align-content: start;
  gap: 14px;
}

.news-v2-front-lead {
  padding-right: 28px;
}

.news-v2-front-secondary {
  padding: 0 24px;
  border-left: 1px solid var(--news-v2-divider);
}

.news-v2-front-stack {
  display: grid;
  align-content: start;
  border-left: 1px solid var(--news-v2-divider);
  padding-left: 24px;
}

.news-v2-front-stack-item {
  gap: 10px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--news-v2-divider);
}

.news-v2-front-stack-item + .news-v2-front-stack-item {
  padding-top: 20px;
}

.news-v2-front-image {
  display: block;
  aspect-ratio: 1.58 / 1;
  background: #f1f1f1;
  overflow: hidden;
}

.news-v2-front-image--secondary {
  aspect-ratio: 1 / 1;
}

.news-v2-front-image img,
.news-v2-latest-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-v2-front-copy {
  display: grid;
  align-items: start;
  gap: 12px;
}

.news-v2-front-title {
  font-size: 29px;
  line-height: 1.07;
  text-wrap: pretty;
}

.news-v2-front-title--lead {
  max-width: 680px;
  font-size: 45px;
  line-height: 1.02;
}

.news-v2-front-title--stack {
  font-size: 23px;
  line-height: 1.12;
}

.news-v2-front-title a,
.news-v2-latest-title a,
.news-v2-related a,
.news-v2-text-link {
  color: inherit;
  text-decoration: none;
}

.news-v2-story-title {
  font-size: 34px;
  line-height: 1.05;
}

.news-v2-story-title--lead {
  max-width: 660px;
  font-size: 44px;
  font-style: italic;
  line-height: 1.08;
}

.news-v2-text-link {
  justify-self: start;
  border-bottom: 1px solid currentColor;
  color: var(--news-v2-text);
  font-family: var(--news-v2-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: uppercase;
}

.news-v2-front-dek,
.news-v2-story-summary {
  margin: 0;
  color: #333333;
  font-family: var(--news-v2-serif);
  font-size: 19px;
  line-height: 1.55;
}

.news-v2-meta,
.news-v2-front-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin: 0;
  color: var(--news-v2-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
}

.news-v2-below-front {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 56px;
  padding-top: 44px;
}

.news-v2-latest {
  min-width: 0;
}

.news-v2-blog-list {
  width: min(100%, 920px);
  margin: 0 auto;
  padding-top: clamp(42px, 5vw, 72px);
}

.news-v2-blog-masthead {
  display: grid;
  gap: 13px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--news-v2-divider);
}

.news-v2-blog-kicker {
  margin: 0;
  color: var(--news-v2-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
}

.news-v2-blog-masthead h1 {
  max-width: 760px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.02;
  text-wrap: pretty;
}

.news-v2-blog-masthead p {
  margin: 0;
  max-width: 680px;
  color: #333333;
  font-family: var(--news-v2-serif);
  font-size: 22px;
  line-height: 1.48;
}

.news-v2-latest-header {
  padding: 24px 0 2px;
}

.news-v2-latest-header h2 {
  margin: 0;
  color: var(--news-v2-muted);
  font-family: var(--news-v2-sans);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.news-v2-latest-list {
  display: grid;
}

.news-v2-latest-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 34px;
  padding: 32px 0 30px;
  border-bottom: 1px solid var(--news-v2-divider);
}

.news-v2-latest-item--text-only {
  grid-template-columns: minmax(0, 1fr);
}

.news-v2-latest-content {
  display: grid;
  align-content: start;
  gap: 10px;
  max-width: 660px;
}

.news-v2-latest-label {
  margin: 0 0 2px;
  color: var(--news-v2-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.news-v2-latest-title {
  margin: 0;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.13;
  text-wrap: pretty;
}

.news-v2-latest-dek {
  margin: 0;
  color: #333333;
  font-family: var(--news-v2-serif);
  font-size: 17px;
  line-height: 1.55;
}

.news-v2-latest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 0;
  color: #777777;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: uppercase;
}

.news-v2-latest-thumb {
  display: block;
  align-self: start;
  aspect-ratio: 4 / 3;
  background: transparent;
  overflow: hidden;
}

.news-v2-latest-thumb img {
  object-fit: contain;
}

.news-v2-section-rail {
  display: grid;
  align-content: start;
  gap: 28px;
  padding-top: 45px;
}

.news-v2-rail-block {
  display: grid;
  gap: 0;
}

.news-v2-rail-block h2 {
  margin: 0;
  padding: 12px 0;
  color: var(--news-v2-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.news-v2-rail-link {
  padding: 10px 0;
  color: #2f2f2f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.news-v2-rail-link:hover,
.news-v2-rail-link:focus-visible {
  opacity: 0.72;
}

.news-v2-article {
  display: grid;
  gap: 36px;
}

.news-v2-article-header {
  display: grid;
  gap: 17px;
  width: min(100%, 640px);
  margin: 0 auto;
  padding-top: 34px;
}

.news-v2-article--text-only .news-v2-article-header {
  padding-top: 58px;
  padding-bottom: 18px;
}

.news-v2-article-title {
  max-width: 620px;
  font-size: 42px;
  font-style: italic;
  line-height: 1.15;
  text-wrap: pretty;
}

.news-v2-meta--article {
  padding-top: 4px;
}

.news-v2-article-action {
  margin: 0;
}

.news-v2-topic-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  width: min(100%, var(--news-v2-reading-width));
  margin: 0 auto;
  padding: 12px 0;
  border-top: 1px solid var(--news-v2-divider);
  border-bottom: 1px solid var(--news-v2-divider);
  color: var(--news-v2-muted);
  font-family: var(--news-v2-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.news-v2-article-hero {
  display: grid;
  gap: 9px;
  width: 100%;
  margin: 8px auto 0;
}

.news-v2-article-hero--full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.news-v2-article-hero__media,
.news-v2-article-hero img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.news-v2-article-hero--full-bleed .news-v2-article-hero__media {
  aspect-ratio: 16 / 7;
  height: auto;
  max-height: 680px;
}

.news-v2-article-hero__caption,
.news-v2-article-hero figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: min(100%, var(--news-v2-reading-width));
  max-width: var(--news-v2-reading-width);
  margin: 0 auto;
  color: var(--news-v2-soft);
  font-size: 12px;
  line-height: 1.45;
}

.news-v2-book-context {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  gap: 22px;
  width: min(100%, var(--news-v2-reading-width));
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid var(--news-v2-divider);
  border-bottom: 1px solid var(--news-v2-divider);
}

.news-v2-book-cover {
  margin: 0;
}

.news-v2-book-cover img {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  object-position: top left;
}

.news-v2-book-context__copy {
  display: grid;
  align-content: start;
  gap: 9px;
}

.news-v2-book-context h2,
.news-v2-book-item h2 {
  margin: 0;
  color: var(--news-v2-text);
  font-family: var(--news-v2-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}

.news-v2-book-author,
.news-v2-book-item h3 {
  margin: 0;
  color: #333333;
  font-family: var(--news-v2-serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}

.news-v2-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 0;
  color: var(--news-v2-muted);
  font-family: var(--news-v2-sans);
  font-size: 12px;
  line-height: 1.4;
}

.news-v2-book-meta strong {
  font-weight: 700;
}

.news-v2-article-body {
  width: min(100%, var(--news-v2-reading-width));
  margin: 0 auto;
  color: var(--news-v2-text);
  font-family: var(--news-v2-serif);
  font-size: 21px;
  line-height: 1.76;
}

.news-v2-article-body p {
  margin: 0;
}

.news-v2-article-body p + p {
  margin-top: 25px;
}

.news-v2-interview-question strong {
  font-weight: 700;
}

.news-v2-article-body .news-v2-interview-answer {
  margin-top: 8px;
}

.news-v2-editor-note {
  color: #333333;
}

.news-v2-body-heading,
.news-v2-body-subheading {
  margin: 40px 0 12px;
  color: var(--news-v2-text);
  font-family: var(--news-v2-sans);
  line-height: 1.18;
}

.news-v2-body-heading {
  font-size: 28px;
}

.news-v2-body-subheading {
  font-size: 21px;
}

.news-v2-quote {
  margin: 34px 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--news-v2-text);
}

.news-v2-quote p {
  font-size: 24px;
  line-height: 1.45;
}

.news-v2-quote cite {
  display: block;
  margin-top: 10px;
  color: var(--news-v2-muted);
  font-family: var(--news-v2-sans);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.news-v2-quote--pull {
  padding-left: 0;
  border-left: 0;
}

.news-v2-quote--pull p {
  font-size: 31px;
  line-height: 1.28;
}

.news-v2-callout {
  margin: 34px 0;
  padding: 18px 0;
  border-top: 1px solid var(--news-v2-divider);
  border-bottom: 1px solid var(--news-v2-divider);
}

.news-v2-callout h3 {
  margin: 0 0 8px;
  font-family: var(--news-v2-sans);
  font-size: 16px;
  line-height: 1.3;
}

.news-v2-section-break {
  width: 72px;
  margin: 40px auto;
  border: 0;
  border-top: 1px solid var(--news-v2-divider);
}

.news-v2-inline-figure {
  display: grid;
  gap: 8px;
  margin: 34px 0;
}

.news-v2-inline-figure img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: cover;
}

.news-v2-inline-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--news-v2-soft);
  font-size: 12px;
  line-height: 1.45;
}

.news-v2-book-roundup {
  display: grid;
  gap: 0;
  margin-top: 36px;
}

.news-v2-book-item {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--news-v2-divider);
}

.news-v2-book-item--no-cover {
  grid-template-columns: minmax(0, 1fr);
}

.news-v2-book-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.news-v2-book-item__copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.news-v2-book-item__copy p {
  font-size: 20px;
  line-height: 1.68;
}

.news-v2-book-item__copy p + p {
  margin-top: 4px;
}

.news-v2-book-item__copy .news-v2-book-meta + p {
  margin-top: 8px;
}

.news-v2-related {
  width: min(100%, var(--news-v2-page-width));
  margin: 64px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--news-v2-divider);
}

.news-v2-related h2 {
  font-size: 26px;
  line-height: 1.1;
}

.news-v2-related__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 18px;
}

.news-v2-related__item {
  padding-top: 18px;
  border-top: 1px solid var(--news-v2-divider);
}

.news-v2-related h3 {
  font-size: 28px;
  line-height: 1.08;
}

.news-v2-related p {
  margin: 0;
  color: #333333;
  font-family: var(--news-v2-serif);
  font-size: 17px;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .news-v2-front-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    row-gap: 28px;
  }

  .news-v2-front-lead {
    padding-right: 24px;
  }

  .news-v2-front-secondary {
    padding-right: 0;
  }

  .news-v2-front-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    border-left: 0;
    border-top: 1px solid var(--news-v2-divider);
    padding: 24px 0 0;
  }

  .news-v2-front-stack-item,
  .news-v2-front-stack-item + .news-v2-front-stack-item {
    padding: 0;
    border-bottom: 0;
  }

  .news-v2-below-front {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .news-v2-section-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-top: 0;
  }
}

@media (max-width: 820px) {
  .news-v2-page,
  .news-v2-page--detail {
    width: calc(100% - 40px);
    padding: 32px 0 72px;
  }

  body.news-v2-shell[data-page-kind="news-v2-list"] .news-v2-page {
    padding-top: 0;
  }

  .news-v2-section-title {
    font-size: 58px;
    line-height: 0.98;
  }

  .news-v2-section-dek,
  .news-v2-article-dek {
    font-size: 21px;
  }

  .news-v2-blog-list {
    padding-top: 36px;
  }

  .news-v2-blog-masthead {
    gap: 11px;
    padding-bottom: 24px;
  }

  .news-v2-blog-masthead h1 {
    font-size: 42px;
    line-height: 1.06;
  }

  .news-v2-blog-masthead p {
    font-size: 19px;
    line-height: 1.5;
  }

  .news-v2-section-nav-list {
    padding: 7px 0;
  }

  .news-v2-section-nav-link,
  .news-v2-section-nav-link:first-child {
    min-height: 30px;
    padding: 0 13px 0 0;
    border-right: 0;
  }

  .news-v2-front-grid,
  .news-v2-front-stack,
  .news-v2-below-front,
  .news-v2-section-rail,
  .news-v2-related__list {
    grid-template-columns: 1fr;
  }

  .news-v2-front-grid {
    gap: 28px;
    padding: 22px 0 28px;
  }

  .news-v2-front-lead,
  .news-v2-front-secondary,
  .news-v2-front-stack {
    border-left: 0;
    padding: 0;
  }

  .news-v2-front-secondary,
  .news-v2-front-stack {
    border-top: 1px solid var(--news-v2-divider);
    padding-top: 24px;
  }

  .news-v2-front-stack {
    gap: 0;
  }

  .news-v2-front-stack-item,
  .news-v2-front-stack-item + .news-v2-front-stack-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--news-v2-divider);
  }

  .news-v2-front-stack-item:first-child {
    padding-top: 0;
  }

  .news-v2-front-title,
  .news-v2-related h3 {
    font-size: 30px;
  }

  .news-v2-latest-title {
    font-size: 24px;
    line-height: 1.18;
  }

  .news-v2-front-title--lead {
    font-size: 36px;
    line-height: 1.12;
  }

  .news-v2-front-title--stack {
    font-size: 24px;
  }

  .news-v2-text-link {
    font-size: 11px;
  }

  .news-v2-latest-item,
  .news-v2-latest-item--text-only {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 0 25px;
  }

  .news-v2-latest-thumb {
    width: min(100%, 190px);
  }

  .news-v2-article-header {
    padding-top: 14px;
  }

  .news-v2-article--text-only .news-v2-article-header {
    padding-top: 30px;
    padding-bottom: 0;
  }

  .news-v2-article-title {
    font-size: 36px;
    line-height: 1.12;
  }

  .news-v2-article-hero img {
    height: 300px;
    min-height: 240px;
  }

  .news-v2-topic-nav {
    gap: 7px 14px;
  }

  .news-v2-book-context,
  .news-v2-book-item {
    grid-template-columns: 1fr;
  }

  .news-v2-book-cover img,
  .news-v2-book-item__cover img {
    width: min(100%, 170px);
    max-height: 250px;
  }

  .news-v2-book-context h2,
  .news-v2-book-item h2 {
    font-size: 27px;
  }

  .news-v2-article-body {
    font-size: 19px;
    line-height: 1.72;
  }

  .news-v2-book-item__copy p {
    font-size: 19px;
  }
}

/* HOME-BLOCKS fallback until WEB-HOME-BLOCKS. */
.home-block-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }

.home-block-tiles__item { display: flex; flex-direction: column; gap: 8px; }