/* Bookdock Neue UI
   A clean command-library redesign that leaves all existing HTML and JS behavior intact. */

:root {
  --neue-bg: #f5f6f1;
  --neue-surface: #fffefa;
  --neue-surface-2: #f0f3ec;
  --neue-ink: #141916;
  --neue-muted: #65706b;
  --neue-soft: #8c9891;
  --neue-line: rgba(20, 25, 22, 0.13);
  --neue-line-strong: rgba(20, 25, 22, 0.22);
  --neue-green: #18a079;
  --neue-blue: #2f6fcb;
  --neue-coral: #f06d4f;
  --neue-amber: #d99a28;
  --neue-action-bg: #141916;
  --neue-action-text: #fffefa;
  --neue-action-hover: #18a079;
  --neue-action-hover-text: #071511;
  --neue-shadow: 0 16px 42px rgba(27, 35, 30, 0.08);
  --neue-shadow-soft: 0 8px 24px rgba(27, 35, 30, 0.06);
  --neue-radius: 18px;
  --neue-max: 1720px;
  --neue-gutter: clamp(18px, 3vw, 52px);
  color-scheme: light;
}

:root.dark {
  --neue-bg: #101513;
  --neue-surface: #181f1c;
  --neue-surface-2: #202922;
  --neue-ink: #f3f0e8;
  --neue-muted: #a7b4ac;
  --neue-soft: #819089;
  --neue-line: rgba(243, 240, 232, 0.13);
  --neue-line-strong: rgba(243, 240, 232, 0.22);
  --neue-action-bg: #28b88c;
  --neue-action-text: #071511;
  --neue-action-hover: #47cda2;
  --neue-action-hover-text: #071511;
  --neue-shadow: 0 18px 52px rgba(0, 0, 0, 0.26);
  --neue-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.22);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-padding-top: 118px;
}

body.bd-page {
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--neue-ink) !important;
  font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "PingFang SC", sans-serif !important;
  letter-spacing: 0 !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--neue-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, color-mix(in srgb, var(--neue-ink) 4%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 26% -10%, color-mix(in srgb, var(--neue-green) 12%, transparent), transparent 34%),
    linear-gradient(180deg, var(--neue-bg), color-mix(in srgb, var(--neue-bg) 86%, #ffffff)) !important;
}

body.bd-page a {
  color: inherit;
}

body.bd-page .app-frame {
  display: block !important;
  min-height: 100vh;
}

body.bd-page .app-sidebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 10px var(--neue-gutter) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--neue-line) !important;
  border-radius: 0 !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-bg) 90%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
}

body.bd-page .brand {
  justify-self: start !important;
  display: inline-grid !important;
  grid-template-columns: 42px auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: var(--neue-ink) !important;
  text-decoration: none !important;
}

body.bd-page .brand-mark {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  border-radius: 14px !important;
  color: #fffefa !important;
  font-weight: 900 !important;
  background: var(--neue-green) !important;
  box-shadow: none !important;
}

body.bd-page .brand strong {
  display: block !important;
  color: var(--neue-ink) !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

body.bd-page .brand small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--neue-muted) !important;
  font-size: 12px !important;
}

body.bd-page .side-nav.grouped {
  justify-self: center !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  width: auto !important;
  padding: 5px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--neue-surface) 86%, transparent) !important;
  box-shadow: var(--neue-shadow-soft) !important;
}

body.bd-page .side-nav.grouped a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--neue-muted) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body.bd-page .side-nav.grouped a span {
  display: grid !important;
  width: 20px !important;
  height: 20px !important;
  place-items: center !important;
  border-radius: 8px !important;
  color: var(--neue-green) !important;
  background: color-mix(in srgb, var(--neue-green) 12%, transparent) !important;
}

body.bd-page .side-nav.grouped a.is-active,
body.bd-page .side-nav.grouped a:hover {
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

body.bd-page .side-nav.grouped a.is-active span,
body.bd-page .side-nav.grouped a:hover span {
  color: var(--neue-action-text) !important;
  background: color-mix(in srgb, var(--neue-action-text) 14%, transparent) !important;
}

body.bd-page .app-main {
  min-width: 0 !important;
}

body.bd-page .app-topbar {
  position: sticky !important;
  top: 65px !important;
  z-index: 22 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(calc(100% - var(--neue-gutter) * 2), var(--neue-max)) !important;
  min-height: 54px !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  border: 1px solid var(--neue-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 22px 22px !important;
  background: color-mix(in srgb, var(--neue-surface) 90%, transparent) !important;
  box-shadow: var(--neue-shadow-soft) !important;
  backdrop-filter: blur(18px) !important;
}

body.bd-page .top-search,
body.bd-page .hero-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  color: var(--neue-muted) !important;
  background: var(--neue-surface-2) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 26%, transparent) !important;
}

body.bd-page .top-search {
  flex: 1 1 520px !important;
  max-width: 760px !important;
}

body.bd-page .top-search input,
body.bd-page .hero-search-box input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  color: var(--neue-ink) !important;
  background: transparent !important;
  font-size: 14px !important;
}

body.bd-page .top-actions,
body.bd-page .admin-actions,
body.bd-page .form-actions,
body.bd-page .backup-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body.bd-page .primary-action,
body.bd-page .ghost-action,
body.bd-page .icon-button,
body.bd-page .text-button,
body.bd-admin .admin-mode-tabs button,
body.bd-page .status-filter-chip,
body.bd-page .segment-button,
body.bd-page .tag-button,
body.bd-page .archive-button,
body.bd-admin .option-chip,
body.bd-directory .hao-category,
body.bd-directory .quick-command-grid button,
body.bd-directory .quick-command-grid a {
  min-height: 38px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
  box-shadow: none !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

body.bd-page .primary-action,
body.bd-page .side-nav.grouped a.is-active,
body.bd-page .status-filter-chip.is-active,
body.bd-page .segment-button.is-active,
body.bd-page .tag-button.is-active,
body.bd-page .archive-button.is-active,
body.bd-admin .admin-mode-tabs button.is-active,
body.bd-admin .option-chip.is-active,
body.bd-directory .hao-category.is-active {
  border-color: var(--neue-action-bg) !important;
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

body.bd-page .primary-action:hover,
body.bd-page .primary-action:focus-visible,
body.bd-page .status-filter-chip.is-active:hover,
body.bd-page .segment-button.is-active:hover,
body.bd-page .tag-button.is-active:hover,
body.bd-page .archive-button.is-active:hover,
body.bd-admin .admin-mode-tabs button.is-active:hover,
body.bd-admin .option-chip.is-active:hover,
body.bd-directory .hao-category.is-active:hover {
  border-color: var(--neue-action-hover) !important;
  color: var(--neue-action-hover-text) !important;
  background: var(--neue-action-hover) !important;
}

body.bd-page .primary-action:hover,
body.bd-page .ghost-action:hover,
body.bd-page .text-button:hover,
body.bd-page .icon-button:hover {
  transform: translateY(-1px);
}

body.bd-page .top-actions .ghost-action:hover {
  border-color: color-mix(in srgb, var(--neue-green) 32%, var(--neue-line)) !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 9%, var(--neue-surface)) !important;
}

body.bd-page .danger-action,
body.bd-page .ghost-action.danger-action {
  color: var(--neue-coral) !important;
}

body.bd-page .page-content {
  display: grid !important;
  gap: clamp(14px, 1.5vw, 22px) !important;
  width: min(calc(100% - var(--neue-gutter) * 2), var(--neue-max)) !important;
  margin: 0 auto !important;
  padding: clamp(18px, 2vw, 30px) 0 72px !important;
}

body.bd-page .workspace-hero,
body.bd-page .directory-hero,
body.bd-page .admin-hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  padding: clamp(26px, 4vw, 54px) !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 28px !important;
  color: var(--neue-ink) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--neue-surface) 96%, transparent), color-mix(in srgb, var(--neue-green) 8%, var(--neue-surface))),
    var(--neue-surface) !important;
  box-shadow: var(--neue-shadow) !important;
}

body.bd-page .workspace-hero::before,
body.bd-page .directory-hero::before,
body.bd-page .admin-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px 18px auto auto !important;
  width: min(28vw, 360px) !important;
  height: min(28vw, 360px) !important;
  border-radius: 42% !important;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--neue-green) 14%, transparent) 0 2px, transparent 2px 12px) !important;
  opacity: 0.75 !important;
  pointer-events: none !important;
}

body.bd-home .workspace-hero,
body.bd-page .admin-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 28px !important;
}

body.bd-page .eyebrow {
  margin: 0 0 8px !important;
  color: var(--neue-amber) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.bd-page .workspace-hero h1,
body.bd-page .directory-hero h1,
body.bd-page .admin-hero h1 {
  position: relative !important;
  max-width: 860px !important;
  margin: 0 !important;
  color: var(--neue-ink) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif !important;
  font-size: clamp(42px, 5.6vw, 92px) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

body.bd-page .workspace-hero p:not(.eyebrow),
body.bd-page .directory-hero p:not(.eyebrow),
body.bd-page .admin-hero p:not(.eyebrow) {
  position: relative !important;
  max-width: 760px !important;
  margin: 16px 0 0 !important;
  color: var(--neue-muted) !important;
  font-size: clamp(15px, 1.5vw, 20px) !important;
  line-height: 1.7 !important;
}

body.bd-page .hero-kpis,
body.bd-directory .directory-insight-strip,
body.bd-admin .metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}

body.bd-page .hero-kpis div,
body.bd-directory .directory-insight-strip div,
body.bd-admin .metric-card {
  min-height: 72px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 18px !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-surface) 84%, transparent) !important;
  box-shadow: none !important;
}

body.bd-page .hero-kpis strong,
body.bd-directory .directory-insight-strip strong,
body.bd-admin .metric-card strong {
  display: block !important;
  color: var(--neue-green) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

body.bd-page .hero-kpis span,
body.bd-directory .directory-insight-strip span,
body.bd-admin .metric-card span {
  color: var(--neue-muted) !important;
  font-size: 13px !important;
}

body.bd-home .quick-panel,
body.bd-home .inspiration-board,
body.bd-home .insight-card,
body.bd-home .filter-panel,
body.bd-home .content-board,
body.bd-directory .hao-section,
body.bd-directory .hao-group,
body.bd-directory .hao-rail,
body.bd-directory .side-widget,
body.bd-admin .panel-card,
body.bd-admin .admin-list-tools,
body.bd-admin .site-icon-tools,
body.bd-page .empty-state,
body.bd-page .panel-card {
  border: 1px solid var(--neue-line) !important;
  border-radius: 24px !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-surface) 92%, transparent) !important;
  box-shadow: var(--neue-shadow-soft) !important;
}

body.bd-home .quick-panel,
body.bd-home .inspiration-board,
body.bd-home .content-board,
body.bd-directory .hao-section,
body.bd-directory .hao-group,
body.bd-admin .panel-card {
  padding: clamp(18px, 2vw, 28px) !important;
}

body.bd-page .panel-heading,
body.bd-page .board-heading,
body.bd-directory .hao-section-head,
body.bd-directory .side-widget-head,
body.bd-page .section-title {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 16px !important;
}

body.bd-page .section-title {
  display: block !important;
}

body.bd-page .panel-heading h2,
body.bd-page .board-heading h2,
body.bd-directory .hao-section-head h1,
body.bd-directory .hao-section-head h2,
body.bd-directory .side-widget h2,
body.bd-page .section-title h2 {
  margin: 0 !important;
  color: var(--neue-ink) !important;
  font-size: clamp(20px, 1.8vw, 30px) !important;
  line-height: 1.1 !important;
}

body.bd-page .quick-categories,
body.bd-home .inspiration-grid,
body.bd-home .cards-grid,
body.bd-directory .hao-card-grid {
  display: grid !important;
  gap: 12px !important;
}

body.bd-page .quick-categories {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}

body.bd-home .inspiration-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

body.bd-home .cards-grid,
body.bd-directory .hao-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

body.bd-home .bookmark-card,
body.bd-directory .hao-card,
body.bd-page .admin-item,
body.bd-page .mini-link,
body.bd-page .rank-link,
body.bd-home .inspiration-card,
body.bd-home .feature-list .mini-link,
body.bd-home .random-result {
  overflow: hidden !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 18px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
  box-shadow: none !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

body.bd-home .bookmark-card:hover,
body.bd-directory .hao-card:hover,
body.bd-home .inspiration-card:hover,
body.bd-page .mini-link:hover,
body.bd-page .rank-link:hover {
  transform: translateY(-2px) !important;
  border-color: var(--neue-line-strong) !important;
  background: color-mix(in srgb, var(--neue-surface) 86%, var(--neue-green) 5%) !important;
}

body.bd-home .card-image {
  aspect-ratio: 16 / 8.2 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--neue-blue) 12%, transparent), color-mix(in srgb, var(--neue-green) 12%, transparent)),
    var(--neue-surface-2) !important;
}

body.bd-home .card-body,
body.bd-directory .hao-card {
  padding: 18px !important;
}

body.bd-home .bookmark-card h3,
body.bd-home .bookmark-card h3 a,
body.bd-directory .hao-card strong,
body.bd-page .mini-link strong,
body.bd-page .rank-link strong,
body.bd-page .admin-item strong {
  color: var(--neue-ink) !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

body.bd-home .bookmark-card p,
body.bd-directory .hao-card p,
body.bd-page .mini-link small,
body.bd-page .rank-link small,
body.bd-page .admin-item small,
body.bd-home .active-filter-line,
body.bd-page .form-hint,
body.bd-page .site-list-summary {
  color: var(--neue-muted) !important;
  line-height: 1.65 !important;
}

body.bd-page .tag,
body.bd-page .status-chip,
body.bd-page .category-chip,
body.bd-directory .hao-card-tags em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  color: var(--neue-muted) !important;
  background: var(--neue-surface-2) !important;
  font-style: normal !important;
  font-size: 12px !important;
}

/* Directory card footers stay compact even when several labels are present. */
body.bd-directory .hao-card-footer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.bd-directory .hao-card-tags {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.bd-directory .hao-card-tags em {
  display: inline-flex !important;
  margin-right: 4px !important;
  white-space: nowrap !important;
}

body.bd-directory .hao-card-actions {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

body.bd-directory .hao-copy {
  border-color: var(--neue-action-bg) !important;
  background: var(--neue-action-bg) !important;
  color: var(--neue-action-text) !important;
}

body.bd-directory .hao-copy:hover,
body.bd-directory .hao-copy:focus-visible {
  border-color: var(--neue-action-hover) !important;
  background: var(--neue-action-hover) !important;
  color: var(--neue-action-hover-text) !important;
}

body.bd-directory .hao-note-link {
  display: inline-grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border: 1px solid color-mix(in srgb, var(--neue-green) 42%, var(--neue-line)) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--neue-green) 10%, var(--neue-surface)) !important;
  color: var(--neue-green) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body.bd-directory .hao-note-link:hover,
body.bd-directory .hao-note-link:focus-visible {
  border-color: var(--neue-green) !important;
  background: var(--neue-green) !important;
  color: var(--neue-surface) !important;
  transform: translateY(-1px) !important;
}

body.bd-admin .site-linkage-row {
  align-items: start !important;
}

body.bd-admin .linked-note-field .form-hint {
  display: block !important;
  margin-top: 6px !important;
}

body.bd-home .directory-grid {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 18px !important;
}

body.bd-home .insights-grid {
  display: grid !important;
  grid-template-columns: minmax(240px, 0.85fr) minmax(280px, 1fr) minmax(240px, 0.85fr) !important;
  gap: 16px !important;
}

body.bd-home .filter-panel,
body.bd-directory .hao-rail,
body.bd-directory .iowen-rightbar {
  position: sticky !important;
  top: 132px !important;
  align-self: start !important;
  max-height: calc(100vh - 150px) !important;
  overflow: auto !important;
}

body.bd-directory .directory-hero {
  min-height: 0 !important;
  padding-block: clamp(24px, 3.4vw, 46px) !important;
}

body.bd-directory .iowen-hero > div {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) minmax(390px, 0.7fr) !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 80px) !important;
  width: 100% !important;
}

body.bd-directory .iowen-hero .eyebrow,
body.bd-directory .iowen-hero h1,
body.bd-directory .iowen-hero > div > p:not(.eyebrow) {
  grid-column: 1 !important;
  text-align: left !important;
}

body.bd-directory .iowen-hero .hero-search-panel {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--neue-surface) 84%, transparent) !important;
  box-shadow: var(--neue-shadow-soft) !important;
}

body.bd-directory .directory-insight-strip {
  width: min(760px, 100%) !important;
  margin: 4px auto 0 !important;
}

body.bd-directory .directory-insight-strip div {
  min-height: 54px !important;
  padding: 10px 14px !important;
}

body.bd-directory .directory-status-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: min(800px, 100%) !important;
  margin: 0 auto !important;
  padding: 9px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--neue-surface) 90%, transparent) !important;
  box-shadow: var(--neue-shadow-soft) !important;
}

body.bd-directory .hao-shell.embedded,
body.bd-directory .iowen-shell {
  display: grid !important;
  grid-template-columns: clamp(174px, 11vw, 220px) minmax(0, 1fr) clamp(250px, 17vw, 320px) !important;
  align-items: start !important;
  gap: 18px !important;
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bd-directory .hao-rail {
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
}

body.bd-directory .hao-category {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 0 13px !important;
}

body.bd-directory .hao-main,
body.bd-directory .hao-site-groups {
  display: grid !important;
  gap: 18px !important;
}

body.bd-directory .hao-card {
  min-height: 138px !important;
}

body.bd-directory .hao-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.bd-directory .hao-card-icon,
body.bd-directory .rank-icon,
body.bd-admin #directoryIconPreview {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid var(--neue-line) !important;
  background: var(--neue-surface-2) !important;
}

body.bd-directory .hao-card p {
  min-height: 42px !important;
  margin: 12px 0 !important;
}

body.bd-directory .iowen-rightbar {
  display: grid !important;
  gap: 12px !important;
}

body.bd-directory .profile-banner {
  border-radius: 18px !important;
  color: #fffefa !important;
  background: color-mix(in srgb, var(--neue-green) 84%, var(--neue-ink)) !important;
}

body.bd-directory .right-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

body.bd-directory .right-tag-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.bd-directory .float-actions button {
  border: 1px solid var(--neue-line) !important;
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

body.bd-directory .float-actions button:hover,
body.bd-directory .float-actions button:focus-visible {
  border-color: var(--neue-action-hover) !important;
  color: var(--neue-action-hover-text) !important;
  background: var(--neue-action-hover) !important;
}

body.bd-admin .admin-mode-tabs {
  width: max-content !important;
  max-width: 100% !important;
  padding: 5px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  background: var(--neue-surface) !important;
}

body.bd-admin .login-view {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  align-items: center !important;
  gap: clamp(24px, 5vw, 80px) !important;
  min-height: 260px !important;
  padding: clamp(28px, 4vw, 56px) !important;
  color: var(--neue-ink) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--neue-surface) 96%, transparent), color-mix(in srgb, var(--neue-green) 7%, var(--neue-surface))),
    var(--neue-surface) !important;
}

body.bd-admin .login-view h1 {
  margin: 0 !important;
  color: var(--neue-ink) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1 !important;
}

body.bd-admin .login-view p:not(.eyebrow) {
  max-width: 560px !important;
  color: var(--neue-muted) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

body.bd-admin .login-form {
  display: grid !important;
  gap: 12px !important;
  padding: 18px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 20px !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-surface) 90%, transparent) !important;
  box-shadow: var(--neue-shadow-soft) !important;
}

body.bd-admin .login-form label {
  display: grid !important;
  gap: 6px !important;
  color: var(--neue-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.bd-admin .login-form input {
  color: var(--neue-ink) !important;
  background: var(--neue-surface-2) !important;
}

/* Password-only admin gateway: quiet, centered and consistent with Bookdock. */
body.bd-admin .login-view {
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  min-height: calc(100vh - 190px) !important;
  padding: clamp(28px, 7vh, 72px) 20px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bd-admin .login-card {
  position: relative !important;
  display: grid !important;
  gap: 24px !important;
  width: min(420px, 100%) !important;
  padding: clamp(28px, 4vw, 38px) !important;
  overflow: hidden !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 22px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
  box-shadow: var(--neue-shadow) !important;
}

body.bd-admin .login-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--neue-green), color-mix(in srgb, var(--neue-green) 45%, var(--neue-amber))) !important;
}

body.bd-admin .login-card-heading {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

body.bd-admin .login-brand-mark {
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 16px !important;
  place-items: center !important;
  border-radius: 15px !important;
  color: #fffefa !important;
  background: var(--neue-green) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

body.bd-admin .login-card .eyebrow {
  margin-bottom: 9px !important;
}

body.bd-admin .login-view .login-card h1 {
  margin: 0 0 12px !important;
  font-size: clamp(30px, 4vw, 40px) !important;
  line-height: 1.08 !important;
}

body.bd-admin .login-view .login-card-heading > p:last-child {
  max-width: 300px !important;
  margin: 0 !important;
  color: var(--neue-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

body.bd-admin .login-card .login-form {
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bd-admin .login-card .login-form input {
  min-height: 52px !important;
  border-color: var(--neue-line) !important;
  border-radius: 13px !important;
  background: var(--neue-surface-2) !important;
}

body.bd-admin .login-card .login-form input:focus {
  border-color: var(--neue-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neue-green) 14%, transparent) !important;
}

body.bd-admin .login-card .login-form .primary-action {
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 4px !important;
  border-radius: 13px !important;
}

body.bd-admin .login-error {
  margin: 0 !important;
  color: var(--neue-coral) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

body.bd-admin .login-session-note {
  margin: -8px 0 0 !important;
  color: var(--neue-soft) !important;
  font-size: 12px !important;
  text-align: center !important;
}

body.bd-admin .login-form.has-error {
  animation: login-nudge 220ms ease both !important;
}

@keyframes login-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}

body.bd-admin .admin-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 410px) !important;
  gap: 18px !important;
}

body.bd-page input,
body.bd-page textarea,
body.bd-page select,
body.bd-admin .quill-editor.ql-container,
body.bd-admin .quill-toolbar.ql-toolbar,
body.bd-admin .article-editor-shell {
  border: 1px solid var(--neue-line) !important;
  border-radius: 14px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface-2) !important;
  box-shadow: none !important;
}

body.bd-admin .article-editor-shell {
  overflow: hidden !important;
  padding: 0 !important;
}

body.bd-page input,
body.bd-page select {
  min-height: 44px !important;
  padding: 0 14px !important;
}

body.bd-page textarea {
  padding: 13px 14px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar {
  position: sticky !important;
  top: 126px !important;
  z-index: 5 !important;
  display: flex !important;
  gap: 8px !important;
  padding: 9px !important;
  border-width: 0 0 1px !important;
  border-radius: 14px 14px 0 0 !important;
  background: color-mix(in srgb, var(--neue-surface) 92%, transparent) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button,
body.bd-admin .quill-toolbar.ql-toolbar button.ql-text-control {
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button.ql-text-control.is-active {
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

body.bd-admin .quill-editor.ql-container {
  min-height: clamp(420px, 48vh, 680px) !important;
  border: 0 !important;
  border-radius: 0 0 14px 14px !important;
  background: var(--neue-surface-2) !important;
}

body.bd-admin .quill-editor .ql-editor {
  color: var(--neue-ink) !important;
  background: transparent !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
}

body.bd-note .note-reader {
  width: min(100%, 1040px) !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

body.bd-note .note-reader-cover {
  min-height: clamp(180px, 26vw, 340px) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--neue-green) 18%, transparent), color-mix(in srgb, var(--neue-coral) 10%, transparent)),
    var(--neue-surface-2) !important;
}

body.bd-note .note-reader-inner {
  padding: clamp(24px, 4vw, 58px) !important;
}

body.bd-note .note-reader h1 {
  color: var(--neue-ink) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif !important;
  font-size: clamp(34px, 5vw, 62px) !important;
  line-height: 1.1 !important;
}

body.bd-note .note-content {
  color: var(--neue-ink) !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}

body.bd-note .note-related {
  width: min(100%, 1040px) !important;
  margin: 22px auto 0 !important;
  padding: clamp(20px, 3vw, 34px) !important;
}

body.bd-note .note-related .section-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

body.bd-note .note-related .section-heading h2 {
  margin: 0 !important;
  color: var(--neue-ink) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  letter-spacing: 0 !important;
}

body.bd-note .note-related .section-heading > span {
  color: var(--neue-muted) !important;
  font-size: 14px !important;
}

body.bd-note .related-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.bd-note .related-columns h3 {
  margin: 0 0 10px !important;
  color: var(--neue-ink) !important;
  font-size: 16px !important;
}

body.bd-note .related-list {
  display: grid !important;
  gap: 10px !important;
}

body.bd-note .related-link {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  min-height: 68px !important;
  padding: 12px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 18px !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-surface) 88%, transparent) !important;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

body.bd-note .related-link:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--neue-green) 42%, var(--neue-line)) !important;
  background: var(--neue-surface) !important;
}

body.bd-note .related-icon {
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  color: var(--neue-green) !important;
  background: color-mix(in srgb, var(--neue-green) 12%, transparent) !important;
  font-weight: 900 !important;
}

body.bd-note .related-icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

body.bd-note .related-link strong,
body.bd-note .related-link small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.bd-note .related-link small,
body.bd-note .related-empty {
  color: var(--neue-muted) !important;
  font-size: 13px !important;
}

body.bd-admin .backup-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.bd-admin .file-button input {
  display: none !important;
}

body.bd-admin .backup-actions .text-button,
body.bd-admin .backup-actions .file-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding-block: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

@media (min-width: 1720px) {
  body.bd-home .cards-grid,
  body.bd-directory .hao-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  }
}

@media (max-width: 1380px) {
  :root {
    --neue-gutter: clamp(14px, 2vw, 28px);
  }

  body.bd-directory .hao-shell.embedded,
  body.bd-directory .iowen-shell {
    grid-template-columns: 178px minmax(0, 1fr) !important;
  }

  body.bd-directory .iowen-rightbar {
    display: none !important;
  }
}

@media (max-width: 1060px) {
  body.bd-page .app-sidebar {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  body.bd-page .brand {
    justify-self: center !important;
  }

  body.bd-page .app-topbar {
    position: static !important;
    flex-wrap: wrap !important;
    border-radius: 22px !important;
    border-top: 1px solid var(--neue-line) !important;
    margin-top: 10px !important;
  }

  body.bd-page .top-search {
    flex-basis: 100% !important;
    max-width: none !important;
    order: 2 !important;
  }

  body.bd-home .workspace-hero,
  body.bd-page .admin-hero,
  body.bd-home .directory-grid,
  body.bd-home .insights-grid,
  body.bd-admin .admin-grid,
  body.bd-directory .iowen-hero > div,
  body.bd-directory .hao-shell.embedded,
  body.bd-directory .iowen-shell {
    grid-template-columns: 1fr !important;
  }

  body.bd-directory .iowen-hero .eyebrow,
  body.bd-directory .iowen-hero h1,
  body.bd-directory .iowen-hero > div > p:not(.eyebrow) {
    grid-column: auto !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  body.bd-directory .iowen-hero .hero-search-panel {
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 18px !important;
  }

  body.bd-home .filter-panel,
  body.bd-directory .hao-rail {
    position: static !important;
    max-height: none !important;
  }

  body.bd-directory .hao-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  body.bd-directory .hao-category {
    min-width: max-content !important;
  }
}

@media (max-width: 720px) {
  :root {
    --neue-gutter: 12px;
  }

  body.bd-page .side-nav.grouped {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body.bd-page .side-nav.grouped a {
    padding-inline: 11px !important;
  }

  body.bd-page .workspace-hero,
  body.bd-page .directory-hero,
  body.bd-page .admin-hero {
    padding: 24px 18px !important;
    border-radius: 22px !important;
  }

  body.bd-page .workspace-hero h1,
  body.bd-page .directory-hero h1,
  body.bd-page .admin-hero h1 {
    font-size: clamp(38px, 13vw, 56px) !important;
  }

  body.bd-directory .hero-search-panel {
    display: none !important;
  }

  body.bd-directory .directory-insight-strip,
  body.bd-directory .directory-status-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  body.bd-directory .directory-insight-strip div,
  body.bd-directory .status-filter-chip {
    flex: 0 0 auto !important;
  }

  body.bd-home .quick-categories,
  body.bd-home .cards-grid,
  body.bd-directory .hao-card-grid {
    grid-template-columns: 1fr !important;
  }

  body.bd-admin .form-row.two {
    grid-template-columns: 1fr !important;
  }

  body.bd-admin .login-view {
    grid-template-columns: 1fr !important;
  }

  body.bd-note .note-related .section-heading,
  body.bd-note .related-columns {
    grid-template-columns: 1fr !important;
  }

  body.bd-note .note-related .section-heading {
    display: grid !important;
    align-items: start !important;
  }
}

/* Preserve site marks when a bookmark has an unusually long title. */
body.bd-directory .hao-card-title {
  min-width: 0 !important;
}

body.bd-directory .hao-card-title .hao-card-icon {
  flex: 0 0 36px !important;
  inline-size: 36px !important;
  block-size: 36px !important;
  min-inline-size: 36px !important;
  min-block-size: 36px !important;
  max-inline-size: 36px !important;
  max-block-size: 36px !important;
}

body.bd-directory .hao-card-title .hao-card-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.bd-directory .hao-card-title > strong {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keep site categories and tags visually distinct without adding more page height. */
body.bd-admin #sitesPanel .site-taxonomy-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

body.bd-admin #sitesPanel .taxonomy-panel {
  display: grid !important;
  gap: 11px !important;
  min-width: 0 !important;
  padding: 15px !important;
  border: 1px solid var(--neue-line) !important;
  border-top-width: 3px !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--neue-surface-2) 84%, var(--neue-surface)) !important;
}

body.bd-admin #sitesPanel .category-taxonomy {
  border-top-color: var(--neue-green) !important;
}

body.bd-admin #sitesPanel .tag-taxonomy {
  border-top-color: var(--neue-amber) !important;
}

body.bd-admin #sitesPanel .taxonomy-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.bd-admin #sitesPanel .taxonomy-heading h3 {
  margin: 0 !important;
  color: var(--neue-ink) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

body.bd-admin #sitesPanel .taxonomy-heading output {
  flex: 0 0 auto !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: var(--neue-muted) !important;
  background: var(--neue-surface) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body.bd-admin #sitesPanel .taxonomy-panel input {
  min-height: 42px !important;
  background: var(--neue-surface) !important;
}

body.bd-admin #sitesPanel .taxonomy-options {
  align-content: start !important;
  max-height: 174px !important;
  margin: 0 !important;
  padding: 2px 6px 2px 0 !important;
  overflow-y: auto !important;
  gap: 7px !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--neue-green) 48%, white) transparent !important;
}

body.bd-admin #sitesPanel .taxonomy-options::-webkit-scrollbar {
  width: 7px !important;
}

body.bd-admin #sitesPanel .taxonomy-options::-webkit-scrollbar-track {
  background: transparent !important;
}

body.bd-admin #sitesPanel .taxonomy-options::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--neue-green) 48%, white) !important;
}

body.bd-admin #sitesPanel .taxonomy-options .option-chip {
  min-height: 31px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

body.bd-admin #sitesPanel .category-taxonomy .option-chip.is-active {
  border-color: var(--neue-action-bg) !important;
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

body.bd-admin #sitesPanel .tag-taxonomy .option-chip.is-active {
  border-color: color-mix(in srgb, var(--neue-amber) 55%, var(--neue-line)) !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-amber) 22%, var(--neue-surface)) !important;
}

body.bd-admin #sitesPanel .taxonomy-options .option-chip.option-action {
  border-style: solid !important;
  color: var(--neue-green) !important;
  background: color-mix(in srgb, var(--neue-green) 7%, var(--neue-surface)) !important;
}

body.bd-admin #sitesPanel .taxonomy-options .option-chip.option-action.danger {
  color: var(--neue-coral) !important;
  background: color-mix(in srgb, var(--neue-coral) 7%, var(--neue-surface)) !important;
}

@media (max-width: 760px) {
  body.bd-admin #sitesPanel .site-taxonomy-grid {
    grid-template-columns: 1fr !important;
  }

  body.bd-admin #sitesPanel .taxonomy-options {
    max-height: 150px !important;
  }
}

/* Cohesive native selects for sorting and editorial status controls. */
body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background) {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 44px !important;
  padding: 0 46px 0 14px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 13px !important;
  color: var(--neue-ink) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  background-color: var(--neue-surface-2) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--neue-muted) 50%),
    linear-gradient(135deg, var(--neue-muted) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 55%, transparent) !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background):hover {
  border-color: color-mix(in srgb, var(--neue-green) 42%, var(--neue-line)) !important;
  background-color: color-mix(in srgb, var(--neue-green) 5%, var(--neue-surface-2)) !important;
}

body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background):focus,
body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background):focus-visible {
  outline: none !important;
  border-color: var(--neue-green) !important;
  background-color: var(--neue-surface) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neue-green) 14%, transparent) !important;
}

body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background):disabled {
  color: var(--neue-soft) !important;
  background-color: color-mix(in srgb, var(--neue-surface-2) 78%, transparent) !important;
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background) option {
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
  font-weight: 650 !important;
}

body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background) option:checked {
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

:root.dark body.bd-page select:not(.ql-size):not(.ql-color):not(.ql-background) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent) !important;
}

/* Searchable multi-selects used by site categories and tags. */
body.bd-admin #sitesPanel .taxonomy-panel {
  position: relative !important;
  overflow: visible !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox {
  position: relative !important;
  z-index: 1 !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox.is-open {
  z-index: 60 !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox > input[type="search"] {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 46px 0 14px !important;
  border-color: var(--neue-line) !important;
  border-radius: 12px !important;
  background: var(--neue-surface) !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox > input[type="search"]::-webkit-search-cancel-button {
  display: none !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox.is-open > input[type="search"] {
  border-color: var(--neue-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neue-green) 14%, transparent) !important;
}

body.bd-admin #sitesPanel .taxonomy-toggle {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  z-index: 2 !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--neue-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.bd-admin #sitesPanel .taxonomy-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

body.bd-admin #sitesPanel .taxonomy-combobox.is-open .taxonomy-toggle::before {
  transform: translateY(2px) rotate(225deg);
}

body.bd-admin #sitesPanel .taxonomy-combobox .taxonomy-options {
  position: absolute !important;
  top: calc(100% + 7px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 80 !important;
  display: none !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  max-height: 286px !important;
  padding: 7px !important;
  overflow-y: auto !important;
  border: 1px solid var(--neue-line-strong) !important;
  border-radius: 13px !important;
  background: var(--neue-surface) !important;
  box-shadow: 0 18px 38px rgba(20, 25, 22, 0.14) !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox.is-open .taxonomy-options {
  display: grid !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox .taxonomy-options .option-chip {
  display: flex !important;
  width: 100% !important;
  min-height: 40px !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--neue-ink) !important;
  background: transparent !important;
  font-size: 13px !important;
  text-align: left !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox .taxonomy-options .option-chip:hover,
body.bd-admin #sitesPanel .taxonomy-combobox .taxonomy-options .option-chip:focus-visible {
  outline: none !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 9%, var(--neue-surface-2)) !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox .taxonomy-options .option-chip.is-active {
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 14%, var(--neue-surface)) !important;
}

body.bd-admin #sitesPanel .tag-taxonomy .taxonomy-combobox .taxonomy-options .option-chip.is-active {
  background: color-mix(in srgb, var(--neue-amber) 16%, var(--neue-surface)) !important;
}

body.bd-admin #sitesPanel .taxonomy-option-check {
  color: var(--neue-green) !important;
  font-weight: 950 !important;
  opacity: 0 !important;
}

body.bd-admin #sitesPanel .option-chip.is-active .taxonomy-option-check {
  opacity: 1 !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox .taxonomy-options .option-action {
  margin-top: 4px !important;
  border-top: 1px solid var(--neue-line) !important;
  border-radius: 0 0 9px 9px !important;
  color: var(--neue-green) !important;
}

body.bd-admin #sitesPanel .taxonomy-combobox .taxonomy-options .option-action.danger {
  margin-top: 0 !important;
  border-top: 0 !important;
  color: var(--neue-coral) !important;
}

body.bd-admin #sitesPanel .linked-note-field {
  position: relative !important;
  z-index: 8 !important;
}

body.bd-admin #sitesPanel .linked-note-field:has(.is-open) {
  z-index: 70 !important;
}

body.bd-admin #sitesPanel .linked-note-options {
  max-height: 270px !important;
  padding: 6px !important;
  overflow-y: auto !important;
}

body.bd-admin #sitesPanel .linked-note-options .linked-note-option {
  min-height: 54px !important;
  padding: 8px 10px !important;
}

body.bd-admin #sitesPanel .linked-note-option > span:first-child {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

body.bd-admin #sitesPanel .linked-note-option strong,
body.bd-admin #sitesPanel .linked-note-option small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.bd-admin #sitesPanel .linked-note-option strong {
  color: var(--neue-ink) !important;
  font-size: 13px !important;
}

body.bd-admin #sitesPanel .linked-note-option small {
  color: var(--neue-muted) !important;
  font-size: 11px !important;
}

body.bd-admin #sitesPanel .linked-note-empty {
  margin: 0 !important;
  padding: 14px 10px !important;
  color: var(--neue-muted) !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* Category artwork and note attachments. */
.category-art-icon {
  display: block;
  width: 76px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 16px;
  background-image: url("/assets/category-icons.png");
  background-size: 700% 400%;
  background-position: var(--category-art-x, 100%) var(--category-art-y, 100%);
  background-repeat: no-repeat;
  box-shadow: 0 8px 22px rgba(20, 25, 22, 0.12);
}

body.bd-home .card-image.generated-cover .category-art-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(34%, 92px);
  transform: translate(-50%, -54%);
}

body.bd-note .note-category-art {
  position: absolute;
  top: 50%;
  right: clamp(34px, 7vw, 92px);
  width: clamp(104px, 14vw, 168px);
  transform: translateY(-50%);
  border-radius: 24px;
}

body.bd-admin .attachment-settings {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--neue-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--neue-green) 4%, var(--neue-surface));
}

body.bd-admin .attachment-settings-heading,
body.bd-admin .attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.bd-admin .attachment-settings-heading > div,
body.bd-admin .attachment-item > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.bd-admin .attachment-settings-heading small,
body.bd-admin .attachment-item small,
body.bd-admin .attachment-storage-hint {
  color: var(--neue-muted);
  font-size: 12px;
}

body.bd-admin .attachment-upload-button,
body.bd-admin .attachment-remove {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--neue-line);
  border-radius: 999px;
  color: var(--neue-ink);
  background: var(--neue-surface);
  font-weight: 800;
  cursor: pointer;
}

body.bd-admin .attachment-list {
  display: grid;
  gap: 8px;
}

body.bd-admin .attachment-list > p {
  margin: 0;
  padding: 16px;
  color: var(--neue-muted);
  text-align: center;
}

body.bd-admin .attachment-item {
  padding: 11px 12px;
  border: 1px solid var(--neue-line);
  border-radius: 8px;
  background: var(--neue-surface);
}

body.bd-note .note-attachments {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--neue-line);
}

body.bd-note .note-attachments-heading h2 {
  margin: 2px 0 16px;
  font-size: 22px;
}

body.bd-note .note-attachment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.bd-note .note-attachment-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--neue-line);
  border-radius: 8px;
  color: var(--neue-ink);
  background: var(--neue-surface-2);
  text-decoration: none;
}

body.bd-note .note-attachment-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

body.bd-note .note-attachment-item strong,
body.bd-note .note-attachment-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bd-note .attachment-type {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: var(--neue-green);
  font-size: 10px;
  font-weight: 900;
}

body.bd-note .attachment-download {
  color: var(--neue-green);
  font-weight: 850;
}

body.bd-note .note-content img { cursor: zoom-in; }

.note-image-lightbox {
  width: min(94vw, 1500px);
  height: min(92vh, 1000px);
  padding: 44px 24px 24px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: rgba(10, 14, 12, 0.94);
}

.note-image-lightbox::backdrop { background: rgba(5, 8, 7, 0.78); backdrop-filter: blur(8px); }
.note-image-lightbox img { width: 100%; height: calc(100% - 24px); object-fit: contain; }
.note-image-lightbox button { position: absolute; top: 10px; right: 14px; border: 0; color: white; background: transparent; font-size: 30px; cursor: pointer; }
.note-image-lightbox small { display: block; text-align: center; opacity: .7; }

@media (max-width: 720px) {
  body.bd-note .note-attachment-list { grid-template-columns: 1fr; }
  body.bd-note .note-category-art { width: 88px; right: 22px; }
  body.bd-admin .attachment-settings-heading { align-items: flex-start; }
}

body.bd-admin #sitesPanel .taxonomy-selected-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 1px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

body.bd-admin #sitesPanel .taxonomy-selected-list::-webkit-scrollbar {
  display: none !important;
}

body.bd-admin #sitesPanel .taxonomy-selected-chip {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 29px !important;
  padding: 0 9px !important;
  border: 1px solid color-mix(in srgb, var(--neue-green) 28%, var(--neue-line)) !important;
  border-radius: 999px !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 8%, var(--neue-surface)) !important;
  font-size: 12px !important;
}

body.bd-admin #sitesPanel .tag-taxonomy .taxonomy-selected-chip {
  border-color: color-mix(in srgb, var(--neue-amber) 34%, var(--neue-line)) !important;
  background: color-mix(in srgb, var(--neue-amber) 9%, var(--neue-surface)) !important;
}

body.bd-admin #sitesPanel .taxonomy-selection-empty {
  align-self: center !important;
  color: var(--neue-soft) !important;
  font-size: 12px !important;
}

/* Custom single-select dropdowns used across the site. */
body.bd-page .bookdock-select {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.bd-page select.bookdock-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.bd-page .bookdock-select-trigger {
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 14px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 13px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface-2) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 55%, transparent) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  text-align: left !important;
}

body.bd-page .bookdock-select-trigger:hover {
  border-color: color-mix(in srgb, var(--neue-green) 42%, var(--neue-line)) !important;
  background: color-mix(in srgb, var(--neue-green) 5%, var(--neue-surface-2)) !important;
}

body.bd-page .bookdock-select.is-open .bookdock-select-trigger,
body.bd-page .bookdock-select-trigger:focus-visible {
  outline: none !important;
  border-color: var(--neue-green) !important;
  background: var(--neue-surface) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neue-green) 14%, transparent) !important;
}

body.bd-page .bookdock-select-arrow {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 auto !important;
  border-right: 2px solid var(--neue-muted) !important;
  border-bottom: 2px solid var(--neue-muted) !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform 160ms ease !important;
}

body.bd-page .bookdock-select.is-open .bookdock-select-arrow {
  transform: translateY(2px) rotate(225deg) !important;
}

body.bd-page .bookdock-select-menu {
  position: absolute !important;
  top: calc(100% + 7px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
  max-height: 280px !important;
  padding: 7px !important;
  overflow-y: auto !important;
  border: 1px solid var(--neue-line-strong) !important;
  border-radius: 13px !important;
  background: var(--neue-surface) !important;
  box-shadow: 0 18px 38px rgba(20, 25, 22, 0.14) !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--neue-green) 48%, white) transparent !important;
}

body.bd-page .bookdock-select-menu[hidden] {
  display: none !important;
}

body.bd-page .bookdock-select-option {
  display: flex !important;
  width: 100% !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--neue-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  text-align: left !important;
}

body.bd-page .bookdock-select-option:hover,
body.bd-page .bookdock-select-option:focus-visible {
  outline: none !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 9%, var(--neue-surface-2)) !important;
}

body.bd-page .bookdock-select-option.is-selected {
  background: color-mix(in srgb, var(--neue-green) 14%, var(--neue-surface)) !important;
}

body.bd-page .bookdock-select-check {
  color: var(--neue-green) !important;
  font-weight: 950 !important;
  opacity: 0 !important;
}

body.bd-page .bookdock-select-option.is-selected .bookdock-select-check {
  opacity: 1 !important;
}

:root.dark body.bd-page .bookdock-select-trigger {
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent) !important;
}

/* Logged-in category ordering on the directory rail. */
body.bd-directory .hao-rail.is-sortable .hao-category.is-sortable {
  position: relative !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  cursor: grab !important;
  user-select: none !important;
}

body.bd-directory .hao-rail.is-sortable .hao-category.is-sortable:active {
  cursor: grabbing !important;
}

body.bd-directory .category-drag-handle {
  color: var(--neue-soft) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -3px !important;
}

body.bd-directory .hao-category.is-sortable:hover .category-drag-handle,
body.bd-directory .hao-category.is-sortable:focus-visible .category-drag-handle {
  color: var(--neue-green) !important;
}

body.bd-directory .hao-category.is-dragging {
  opacity: 0.42 !important;
}

body.bd-directory .hao-category.drop-before::before,
body.bd-directory .hao-category.drop-after::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  right: 7px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--neue-green) !important;
  pointer-events: none !important;
}

body.bd-directory .hao-category.drop-before::before {
  top: -4px !important;
}

body.bd-directory .hao-category.drop-after::after {
  bottom: -4px !important;
}

body.bd-directory .category-sort-hint {
  margin: 6px 5px 0 !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--neue-line) !important;
  color: var(--neue-soft) !important;
  font-size: 11px !important;
  text-align: center !important;
}

/* Account settings share the same quiet editor surface as the content tools. */
body.bd-admin .account-settings-panel {
  max-width: 920px !important;
}

body.bd-admin .account-settings-card {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: clamp(28px, 5vw, 72px) !important;
  align-items: start !important;
  padding: clamp(26px, 4vw, 48px) !important;
}

body.bd-admin .account-settings-card .section-title {
  position: sticky !important;
  top: 132px !important;
}

body.bd-admin .account-settings-card .section-title h2 {
  margin-bottom: 12px !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.08 !important;
}

body.bd-admin .account-settings-card .section-title p:last-child,
body.bd-admin .account-security-hint {
  color: var(--neue-muted) !important;
  line-height: 1.7 !important;
}

/* Site editor controls use the same paper, ink and mint palette as Bookdock. */
body.bd-admin #sitesPanel .check-row {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 58px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 14px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface-2) !important;
}

body.bd-admin #sitesPanel .check-row:hover {
  border-color: color-mix(in srgb, var(--neue-green) 38%, var(--neue-line)) !important;
  background: color-mix(in srgb, var(--neue-green) 5%, var(--neue-surface-2)) !important;
}

body.bd-admin #sitesPanel .check-row input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 19px !important;
  min-height: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--neue-green) !important;
}

body.bd-admin #sitesPanel .check-row span {
  color: var(--neue-ink) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body.bd-admin #siteAdminList {
  overflow-y: auto !important;
  padding-right: 8px !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--neue-green) 72%, var(--neue-ink)) color-mix(in srgb, var(--neue-green) 7%, var(--neue-surface-2)) !important;
  scrollbar-gutter: stable !important;
}

body.bd-admin #siteAdminList::-webkit-scrollbar {
  width: 9px !important;
}

body.bd-admin #siteAdminList::-webkit-scrollbar-track {
  margin: 5px 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--neue-green) 7%, var(--neue-surface-2)) !important;
}

body.bd-admin #siteAdminList::-webkit-scrollbar-thumb {
  min-height: 48px !important;
  border: 2px solid color-mix(in srgb, var(--neue-green) 7%, var(--neue-surface-2)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--neue-green) 72%, var(--neue-ink)) !important;
}

body.bd-admin #siteAdminList::-webkit-scrollbar-thumb:hover {
  background: var(--neue-green) !important;
}

body.bd-admin #directoryIconBgOptions {
  gap: 6px !important;
}

body.bd-admin #directoryIconBgOptions .icon-bg-option {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 999px !important;
  color: var(--neue-muted) !important;
  background: var(--neue-surface) !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease !important;
}

body.bd-admin #directoryIconBgOptions .icon-bg-option:hover,
body.bd-admin #directoryIconBgOptions .icon-bg-option.is-active {
  border-color: color-mix(in srgb, var(--neue-green) 42%, var(--neue-line)) !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 8%, var(--neue-surface)) !important;
}

body.bd-admin #directoryIconBgOptions .icon-bg-option span {
  border-color: color-mix(in srgb, var(--neue-ink) 18%, transparent) !important;
}

body.bd-page :is(.site-icon, .hao-card-icon, .site-icon-preview)[data-icon-bg="transparent"],
body.bd-admin #directoryIconBgOptions .icon-bg-option[data-icon-bg="transparent"] span {
  color: var(--neue-green) !important;
  background: transparent !important;
}

body.bd-page :is(.site-icon, .hao-card-icon, .site-icon-preview)[data-icon-bg="white"],
body.bd-admin #directoryIconBgOptions .icon-bg-option[data-icon-bg="white"] span {
  color: #141916 !important;
  background: #fffefa !important;
}

body.bd-page :is(.site-icon, .hao-card-icon, .site-icon-preview)[data-icon-bg="soft"],
body.bd-admin #directoryIconBgOptions .icon-bg-option[data-icon-bg="soft"] span {
  color: #11624e !important;
  background: #dff3ea !important;
}

body.bd-page :is(.site-icon, .hao-card-icon, .site-icon-preview)[data-icon-bg="dark"],
body.bd-admin #directoryIconBgOptions .icon-bg-option[data-icon-bg="dark"] span {
  color: #fffefa !important;
  background: #141916 !important;
}

body.bd-page :is(.site-icon, .hao-card-icon, .site-icon-preview)[data-icon-bg="brand"],
body.bd-admin #directoryIconBgOptions .icon-bg-option[data-icon-bg="brand"] span {
  color: #fffefa !important;
  background: #e36b52 !important;
}

body.bd-admin #directoryIconBgOptions .icon-bg-option.is-active {
  box-shadow: inset 0 0 0 1px var(--neue-green) !important;
}

body.has-open-dialog { overflow: hidden !important; }

body.bd-admin .bookdock-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  transition: opacity 160ms ease !important;
}

body.bd-admin .bookdock-dialog[hidden] { display: none !important; }
body.bd-admin .bookdock-dialog.is-open { opacity: 1 !important; }

body.bd-admin .bookdock-dialog-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--neue-ink) 54%, transparent) !important;
  backdrop-filter: blur(5px) !important;
}

body.bd-admin .bookdock-dialog-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(460px, 100%) !important;
  padding: 28px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 8px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
  box-shadow: 0 28px 80px color-mix(in srgb, var(--neue-ink) 24%, transparent) !important;
  transform: translateY(10px) scale(.985) !important;
  transition: transform 160ms ease !important;
}

body.bd-admin .bookdock-dialog.is-open .bookdock-dialog-card { transform: translateY(0) scale(1) !important; }
body.bd-admin .bookdock-dialog-card .eyebrow { margin: 0 0 8px !important; color: var(--neue-green) !important; }

body.bd-admin .bookdock-dialog-card h2 {
  margin: 0 !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
}

body.bd-admin .bookdock-dialog-card > p:last-of-type {
  margin: 14px 0 0 !important;
  color: var(--neue-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

body.bd-admin .bookdock-dialog-actions {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

body.bd-admin .bookdock-dialog-actions button { min-width: 96px !important; }

body.bd-admin #bookdockDialogConfirm.is-danger {
  color: #fffefa !important;
  background: var(--neue-coral) !important;
}

body.bd-admin #bookdockDialogSecondary { color: var(--neue-muted) !important; }

body.bd-admin .account-settings-form {
  display: grid !important;
  gap: 16px !important;
}

body.bd-admin .account-settings-form > label,
body.bd-admin .account-settings-form .form-row label {
  display: grid !important;
  gap: 7px !important;
  color: var(--neue-ink) !important;
  font-weight: 800 !important;
}

body.bd-admin .account-settings-form input[readonly] {
  color: var(--neue-muted) !important;
  background: color-mix(in srgb, var(--neue-surface-2) 80%, var(--neue-line)) !important;
}

body.bd-admin .account-security-hint {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-left: 3px solid var(--neue-green) !important;
  background: color-mix(in srgb, var(--neue-green) 6%, transparent) !important;
}

@media (max-width: 760px) {
  body.bd-admin .account-settings-card {
    grid-template-columns: 1fr !important;
  }

  body.bd-admin .account-settings-card .section-title {
    position: static !important;
  }
}

body.bd-admin .quill-toolbar.ql-toolbar .custom-color-reset {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 82px !important;
  padding: 0 10px !important;
}

/* Full editor palette with native custom color picking and reset actions. */
body.bd-admin .quill-toolbar.ql-toolbar .ql-color-picker .ql-picker-options {
  width: 246px !important;
  padding: 10px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-color-picker.ql-expanded .ql-picker-options {
  display: grid !important;
  grid-template-columns: repeat(7, 24px) !important;
  gap: 6px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-color-picker .ql-picker-item {
  float: none !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--neue-ink) 10%, var(--neue-line)) !important;
  border-radius: 5px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-color-picker .ql-picker-item:hover,
body.bd-admin .quill-toolbar.ql-toolbar .ql-color-picker .ql-picker-item.ql-selected {
  outline: 2px solid var(--neue-ink) !important;
  outline-offset: 2px !important;
}

body.bd-admin .custom-color-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 4px !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--neue-line) !important;
}

body.bd-admin .custom-color-picker,
body.bd-admin .custom-color-reset {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 8px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.bd-admin .custom-color-picker:hover,
body.bd-admin .custom-color-reset:hover {
  color: var(--neue-green) !important;
  border-color: color-mix(in srgb, var(--neue-green) 48%, var(--neue-line)) !important;
}

body.bd-admin .custom-color-picker input[type="color"] {
  flex: 0 0 22px !important;
  width: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  cursor: pointer !important;
}

body.bd-admin .custom-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}

body.bd-admin .custom-color-picker input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--neue-line) !important;
  border-radius: 5px !important;
}

/* Pixel-sized images may intentionally extend beyond the article column. */
body.bd-admin .quill-editor .ql-editor img[data-width],
body.bd-note .note-content img[data-width] {
  max-width: none !important;
  object-fit: contain !important;
}

/* Neue compact pass: make the product feel like a daily-use workspace, not a landing page. */
@media (min-width: 1061px) {
  body.bd-home .workspace-hero,
  body.bd-directory .directory-hero {
    min-height: 218px !important;
  }

  body.bd-page .page-content {
    gap: 16px !important;
    padding-top: 18px !important;
  }

  body.bd-page .workspace-hero,
  body.bd-page .directory-hero,
  body.bd-page .admin-hero {
    min-height: 0 !important;
    padding: 30px 36px !important;
    border-radius: 24px !important;
  }

  body.bd-home .workspace-hero,
  body.bd-page .admin-hero {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.58fr) !important;
    align-items: center !important;
  }

  body.bd-page .workspace-hero h1,
  body.bd-page .directory-hero h1,
  body.bd-page .admin-hero h1 {
    max-width: 760px !important;
    font-size: clamp(42px, 4.4vw, 68px) !important;
    line-height: 1.02 !important;
  }

  body.bd-page .workspace-hero p:not(.eyebrow),
  body.bd-page .directory-hero p:not(.eyebrow),
  body.bd-page .admin-hero p:not(.eyebrow) {
    max-width: 620px !important;
    margin-top: 12px !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  body.bd-home .hero-kpis {
    grid-template-columns: repeat(4, minmax(92px, 1fr)) !important;
    align-self: stretch !important;
  }

  body.bd-page .hero-kpis div,
  body.bd-directory .directory-insight-strip div,
  body.bd-admin .metric-card {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  body.bd-page .hero-kpis strong,
  body.bd-directory .directory-insight-strip strong,
  body.bd-admin .metric-card strong {
    font-size: 24px !important;
  }

  body.bd-home .quick-panel,
  body.bd-home .inspiration-board,
  body.bd-home .insight-card,
  body.bd-home .filter-panel,
  body.bd-home .content-board,
  body.bd-directory .hao-section,
  body.bd-directory .hao-group,
  body.bd-directory .hao-rail,
  body.bd-directory .side-widget,
  body.bd-admin .panel-card {
    border-radius: 20px !important;
  }

  body.bd-home .quick-panel,
  body.bd-home .inspiration-board,
  body.bd-home .content-board,
  body.bd-directory .hao-section,
  body.bd-directory .hao-group,
  body.bd-admin .panel-card {
    padding: 20px !important;
  }

  body.bd-home .quick-panel .panel-heading {
    display: grid !important;
    grid-template-columns: 112px minmax(280px, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
  }

  body.bd-home .quick-panel .panel-heading h2 {
    font-size: 24px !important;
  }

  body.bd-home .quick-categories {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }

  body.bd-home .quick-categories .segment-button {
    min-height: 54px !important;
    padding: 10px 13px !important;
  }

  body.bd-directory .directory-hero {
    padding: 28px 36px !important;
  }

  body.bd-directory .iowen-hero > div {
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 0.62fr) !important;
  }

  body.bd-directory .hero-search-panel {
    padding: 10px !important;
  }

  body.bd-directory .directory-insight-strip {
    margin-top: 0 !important;
  }

  body.bd-directory .directory-status-filter {
    padding: 7px !important;
  }

  body.bd-directory .hao-shell.embedded,
  body.bd-directory .iowen-shell {
    margin-top: 4px !important;
  }
}

body.bd-home .quick-categories .segment-button:not(.is-active),
body.bd-home .quick-categories .segment-button:not(.is-active) *,
body.bd-page .segment-button:not(.is-active),
body.bd-page .segment-button:not(.is-active) * {
  color: var(--neue-ink) !important;
  opacity: 1 !important;
}

body.bd-home .quick-categories .segment-button.is-active,
body.bd-home .quick-categories .segment-button.is-active * {
  color: var(--neue-action-text) !important;
}

@media (max-width: 720px) {
  body.bd-page .page-content {
    gap: 12px !important;
  }

  body.bd-page .workspace-hero,
  body.bd-page .directory-hero,
  body.bd-page .admin-hero {
    padding: 22px 18px !important;
  }

  body.bd-page .workspace-hero h1,
  body.bd-page .directory-hero h1,
  body.bd-page .admin-hero h1 {
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  body.bd-page .workspace-hero p:not(.eyebrow),
  body.bd-page .directory-hero p:not(.eyebrow),
  body.bd-page .admin-hero p:not(.eyebrow) {
    font-size: 15px !important;
  }
}

body.bd-page [hidden],
body.bd-admin [hidden],
[hidden] {
  display: none !important;
}

/* Shared workflow layer: command search, recent activity and reader utilities. */
body.command-open {
  overflow: hidden !important;
}

body.bd-page .command-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.bd-page .command-trigger kbd,
.command-palette kbd {
  padding: 3px 7px;
  border: 1px solid var(--neue-line);
  border-radius: 7px;
  color: var(--neue-soft);
  background: var(--neue-surface-2);
  font: 700 11px/1.2 "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  padding: min(12vh, 110px) 18px 18px;
}

.command-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--neue-ink) 38%, transparent);
  backdrop-filter: blur(10px);
}

.command-dialog {
  position: relative;
  width: min(680px, 100%);
  overflow: hidden;
  border: 1px solid var(--neue-line-strong);
  border-radius: 22px;
  color: var(--neue-ink);
  background: var(--neue-surface);
  box-shadow: 0 30px 90px rgba(8, 18, 13, 0.24);
  animation: command-arrive 180ms ease-out both;
}

@keyframes command-arrive {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
}

.command-search-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid var(--neue-line);
}

.command-search-row > span {
  color: var(--neue-green);
  font-size: 24px;
}

.command-search-row input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--neue-ink);
  background: transparent;
  font-size: 17px;
}

.command-meta,
.command-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  color: var(--neue-muted);
  font-size: 12px;
}

.command-meta strong {
  color: var(--neue-ink);
  font-size: 13px;
}

.command-results {
  display: grid;
  gap: 4px;
  max-height: min(58vh, 520px);
  padding: 6px 10px 12px;
  overflow: auto;
}

.command-section-label {
  margin: 0;
  padding: 7px 9px 5px;
  color: var(--neue-soft);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.command-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--neue-ink);
  text-align: left;
  background: transparent;
}

.command-result:hover,
.command-result.is-active {
  border-color: var(--neue-line);
  background: var(--neue-surface-2);
}

.command-result-icon,
.recent-type {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--neue-action-text);
  background: var(--neue-action-bg);
  font-size: 13px;
  font-weight: 900;
}

.command-result-icon.note,
.recent-type.note { background: var(--neue-green); }
.command-result-icon.site,
.recent-type.site { background: var(--neue-blue); }

.command-result > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.command-result strong,
.command-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-result strong { font-size: 14px; }
.command-result small { color: var(--neue-muted); font-size: 12px; }
.command-result em { color: var(--neue-soft); font-size: 11px; font-style: normal; }

.command-footer {
  justify-content: flex-start;
  border-top: 1px solid var(--neue-line);
}

.command-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.command-footer span:last-child { margin-left: auto; }
.command-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neue-green); }
.command-dot.site { background: var(--neue-blue); }

.command-empty {
  display: grid;
  gap: 6px;
  place-items: center;
  min-height: 170px;
  color: var(--neue-muted);
  text-align: center;
}

.command-empty strong { color: var(--neue-ink); }

body.bd-home .recent-workspace {
  padding: 18px 20px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--neue-surface) 92%, transparent) !important;
  box-shadow: var(--neue-shadow-soft) !important;
}

body.bd-home .recent-workspace-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}

body.bd-home .recent-workspace-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--neue-line);
  border-radius: 14px;
  color: var(--neue-ink);
  background: var(--neue-surface);
  text-decoration: none;
}

body.bd-home .recent-workspace-link:hover { border-color: var(--neue-line-strong); }
body.bd-home .recent-workspace-link .recent-type { grid-row: 1 / span 2; }
body.bd-home .recent-workspace-link strong,
body.bd-home .recent-workspace-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.bd-home .recent-workspace-link strong { font-size: 14px; }
body.bd-home .recent-workspace-link small { color: var(--neue-muted); font-size: 12px; }
body.bd-home .recent-workspace-link em { grid-column: 3; grid-row: 1 / span 2; color: var(--neue-green); font-size: 11px; font-style: normal; font-weight: 800; }

.reading-progress-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}

.reading-progress-bar span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--neue-green);
}

body.bd-note .note-reader {
  width: min(100%, 1180px) !important;
}

body.bd-note .note-reader-inner {
  max-width: 1060px !important;
}

body.bd-note .reader-utility-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--neue-line);
  color: var(--neue-muted);
  font-size: 12px;
}

body.bd-note .reader-utility-bar strong { color: var(--neue-ink); }

body.bd-note .reader-utility-bar button {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--neue-line);
  border-radius: 9px;
  color: var(--neue-green);
  background: var(--neue-surface-2);
  font-weight: 800;
}

body.bd-note .note-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: start;
  gap: clamp(26px, 4vw, 54px);
}

body.bd-note .reader-outline {
  position: sticky;
  top: 142px;
  display: grid;
  gap: 8px;
  padding: 16px;
  border-left: 1px solid var(--neue-line);
}

body.bd-note .reader-outline > strong { font-size: 15px; }
body.bd-note .reader-outline nav { display: grid; gap: 3px; }

body.bd-note .reader-outline button {
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  color: var(--neue-muted);
  text-align: left;
  background: transparent;
  font-size: 12px;
  line-height: 1.45;
}

body.bd-note .reader-outline button.level-h3 { padding-left: 18px; }
body.bd-note .reader-outline button:hover,
body.bd-note .reader-outline button.is-active { color: var(--neue-ink); background: var(--neue-surface-2); }

@media (max-width: 900px) {
  body.bd-note .note-content-layout { grid-template-columns: 1fr; }
  body.bd-note .reader-outline { position: static; order: -1; border: 1px solid var(--neue-line); border-radius: 14px; }
  body.bd-note .reader-outline nav { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 720px) {
  body.bd-page .command-trigger span { display: none; }
  body.bd-page .command-trigger kbd { padding: 3px 5px; font-size: 10px; }
  .command-palette { padding: 10px; place-items: start center; }
  .command-dialog { margin-top: 56px; border-radius: 18px; }
  .command-footer span:last-child { display: none; }
  .command-result { grid-template-columns: 38px minmax(0, 1fr); }
  .command-result em { display: none; }
  body.bd-home .recent-workspace-list { grid-template-columns: 1fr; }
  body.bd-note .reader-utility-bar button { width: 100%; margin-left: 0; }
}

/* Directory layout refinement: compact hero metrics and persistent navigation. */
body.bd-directory .app-frame {
  overflow: visible !important;
}

/* Keep both reader navigation rows attached to the viewport while reading. */
body.bd-note .app-frame {
  overflow: visible !important;
}

@media (min-width: 1061px) {
  body.bd-note .app-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 55 !important;
  }

  body.bd-note .app-topbar {
    position: sticky !important;
    top: 64px !important;
    z-index: 50 !important;
  }
}

@media (min-width: 1061px) {
  body.bd-directory .app-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 55 !important;
  }

  body.bd-directory .app-topbar {
    position: sticky !important;
    top: 64px !important;
    z-index: 50 !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel div {
    display: grid !important;
    align-content: center !important;
    min-height: 96px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel strong {
    font-size: 32px !important;
  }

  body.bd-directory .hao-rail {
    position: sticky !important;
    top: 132px !important;
    z-index: 12 !important;
    max-height: calc(100vh - 148px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 1060px) {
  body.bd-directory .iowen-hero .hero-metrics-panel {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 520px) {
  body.bd-directory .iowen-hero .hero-metrics-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel div {
    min-height: 72px !important;
    padding: 12px !important;
  }
}

/* Note-card cover: keep category artwork clear and show only the source domain. */
body.bd-home .card-image.generated-cover {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: 16px !important;
  background-position: center !important;
  background-size: cover !important;
}

body.bd-home .card-image.generated-cover .cover-domain {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 86% !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--neue-line) 76%, transparent) !important;
  border-radius: 8px !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-surface) 78%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Notes: full-bleed fallback covers with deterministic visual variety. */
body.bd-home .card-image.generated-cover {
  isolation: isolate !important;
  overflow: hidden !important;
  background: var(--cover-base, #dce9e2) !important;
}

body.bd-home .card-image.generated-cover::before,
body.bd-home .card-image.generated-cover::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

body.bd-home .card-image.generated-cover::before {
  z-index: 0 !important;
  top: -46% !important;
  left: -12% !important;
  width: 72% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: var(--cover-shape, #176b5a) !important;
  opacity: 0.18 !important;
}

body.bd-home .card-image.generated-cover::after {
  z-index: 0 !important;
  right: -10% !important;
  bottom: -45% !important;
  width: 76% !important;
  aspect-ratio: 1.4 !important;
  border-radius: 48% 52% 0 0 !important;
  background: var(--cover-accent, #e5b94f) !important;
  opacity: 0.22 !important;
  transform: rotate(-8deg) !important;
}

body.bd-home .card-image.generated-cover .category-art-icon {
  position: absolute !important;
  z-index: 1 !important;
  inset: -18% !important;
  width: 136% !important;
  max-width: none !important;
  height: 136% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background-size: 700% 400% !important;
  opacity: 0.72 !important;
  filter: saturate(0.82) contrast(0.94) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.bd-home .card-image.generated-cover .cover-domain {
  z-index: 3 !important;
}

body.bd-home .cover-variant-1 { --cover-base: #dce9e2; --cover-shape: #176b5a; --cover-accent: #e4b54a; }
body.bd-home .cover-variant-2 { --cover-base: #dbe6ea; --cover-shape: #244f67; --cover-accent: #d9785c; }
body.bd-home .cover-variant-3 { --cover-base: #efe7da; --cover-shape: #315f53; --cover-accent: #c96b55; }
body.bd-home .cover-variant-4 { --cover-base: #dfe5d2; --cover-shape: #687b3e; --cover-accent: #e0a743; }
body.bd-home .cover-variant-5 { --cover-base: #e8dfe5; --cover-shape: #5f4667; --cover-accent: #d87764; }
body.bd-home .cover-variant-6 { --cover-base: #d8e8e6; --cover-shape: #166473; --cover-accent: #d5a144; }

/* Notes: filters use the same mint, ink and paper palette in both themes. */
body.bd-home .quick-categories .segment-button::before {
  color: var(--neue-green) !important;
  background: color-mix(in srgb, var(--neue-green) 16%, var(--neue-surface)) !important;
  box-shadow: none !important;
}

body.bd-home .quick-categories .segment-button:not(.is-active),
body.bd-home #statusFilters .status-filter-chip:not(.is-active) {
  border-color: var(--neue-line) !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface-2) !important;
}

body.bd-home #statusFilters .status-filter-chip:not(.is-active) *,
body.bd-home .quick-categories .segment-button:not(.is-active) * {
  color: inherit !important;
  opacity: 1 !important;
}

body.bd-home #statusFilters .status-filter-chip.is-active strong,
body.bd-home #statusFilters .status-filter-chip.is-active span {
  color: var(--neue-action-text) !important;
}

body.bd-home #statusFilters .status-filter-chip strong {
  display: inline-grid !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 18%, var(--neue-surface)) !important;
  line-height: 1 !important;
}

body.bd-home #statusFilters .status-filter-chip.is-active strong {
  color: var(--neue-action-bg) !important;
  background: var(--neue-action-text) !important;
}

html.dark body.bd-home #statusFilters .status-filter-chip:not(.is-active) {
  border-color: #35453e !important;
  color: #f2f1e9 !important;
  background: #17231e !important;
}

html.dark body.bd-home #statusFilters .status-filter-chip:not(.is-active) strong {
  color: #d8f6eb !important;
  background: #263a32 !important;
}

/* Admin: keep the attachment command optically centered. */
body.bd-admin .attachment-upload-button {
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  min-width: 92px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.bd-admin .attachment-upload-button > span {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Directory compact workspace: short overview and a wider site library. */
@media (min-width: 1061px) {
  body.bd-directory .directory-hero {
    padding: 20px 28px !important;
  }

  body.bd-directory .iowen-hero > div {
    grid-template-columns: minmax(340px, 0.72fr) minmax(620px, 1.28fr) !important;
    gap: 28px !important;
  }

  body.bd-directory .directory-hero h1 {
    font-size: clamp(42px, 3.6vw, 58px) !important;
    line-height: 1 !important;
  }

  body.bd-directory .directory-hero p:not(.eyebrow) {
    max-width: 620px !important;
    margin-top: 9px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel div {
    min-height: 72px !important;
    padding: 11px 12px !important;
    border-radius: 15px !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel strong {
    font-size: 27px !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel span {
    font-size: 12px !important;
  }

  body.bd-directory .hao-shell.embedded,
  body.bd-directory .iowen-shell {
    grid-template-columns: clamp(174px, 11vw, 210px) minmax(0, 1fr) !important;
  }

  body.bd-directory .hao-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

@media (min-width: 1061px) and (max-width: 1280px) {
  body.bd-directory .iowen-hero > div {
    grid-template-columns: minmax(300px, 0.8fr) minmax(520px, 1.2fr) !important;
  }

  body.bd-directory .iowen-hero .hero-metrics-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Admin note editor: stable toolbar and a clear cover-settings workspace. */
body.bd-admin .article-editor-label {
  display: grid !important;
  gap: 8px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 54px !important;
  padding: 9px 10px !important;
  background: var(--neue-surface) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  border-radius: 9px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button.ql-text-control {
  flex-basis: auto !important;
  width: auto !important;
  min-width: 58px !important;
  padding: 0 11px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 32px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button svg {
  width: 18px !important;
  height: 18px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-stroke {
  stroke: currentColor !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-fill,
body.bd-admin .quill-toolbar.ql-toolbar .ql-stroke.ql-fill {
  fill: currentColor !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button:not(:disabled) {
  color: var(--neue-ink) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button:disabled {
  color: var(--neue-soft) !important;
  opacity: 0.48 !important;
}

body.bd-admin .article-editor-shell {
  overflow: visible !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .editor-format-group {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding-right: 5px !important;
  border-right: 1px solid var(--neue-line) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .editor-format-group:last-child {
  padding-right: 0 !important;
  border-right: 0 !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker {
  position: relative !important;
  flex: 0 0 auto !important;
  height: 32px !important;
  margin: 0 !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 9px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker-label {
  display: flex !important;
  align-items: center !important;
  height: 30px !important;
  padding: 0 25px 0 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--neue-ink) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker-label:hover,
body.bd-admin .quill-toolbar.ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
  color: var(--neue-green) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker.ql-size {
  width: 72px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker.ql-size .ql-picker-label::before {
  content: "字号" !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker.ql-size .ql-picker-item::before {
  content: attr(data-value) !important;
  font-size: 13px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-color-picker {
  width: 32px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-color-picker .ql-picker-label {
  padding: 7px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker-options {
  z-index: 20 !important;
  margin-top: 6px !important;
  padding: 8px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 12px !important;
  background: var(--neue-surface) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--neue-ink) 14%, transparent) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-size .ql-picker-options {
  min-width: 72px !important;
}

body.bd-admin .quill-toolbar.ql-toolbar .ql-picker-item {
  color: var(--neue-ink) !important;
}

body.bd-admin .quill-toolbar.ql-toolbar button:hover,
body.bd-admin .quill-toolbar.ql-toolbar button.ql-active {
  border-color: color-mix(in srgb, var(--neue-green) 44%, var(--neue-line)) !important;
  color: var(--neue-green) !important;
  background: color-mix(in srgb, var(--neue-green) 10%, var(--neue-surface)) !important;
}

body.bd-admin .quill-editor.ql-container {
  min-height: clamp(420px, 44vh, 620px) !important;
  height: auto !important;
  overflow: visible !important;
}

body.bd-admin .quill-editor .ql-editor {
  min-height: clamp(420px, 44vh, 620px) !important;
  height: auto !important;
  padding: 22px 24px !important;
  overflow-y: visible !important;
}

body.bd-admin .image-context-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--neue-line) !important;
  color: var(--neue-ink) !important;
  background: color-mix(in srgb, var(--neue-green) 9%, var(--neue-surface)) !important;
}

body.bd-admin .image-context-toolbar[hidden] {
  display: none !important;
}

body.bd-admin .image-context-toolbar > span {
  flex: 0 0 auto !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body.bd-admin .image-size-options {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 10px !important;
  background: var(--neue-surface) !important;
}

body.bd-admin .image-size-options button {
  min-width: 42px !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--neue-muted) !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.bd-admin .image-size-options button:hover,
body.bd-admin .image-size-options button.is-active {
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

body.bd-admin .image-context-toolbar small {
  margin-left: auto !important;
  color: var(--neue-muted) !important;
  font-size: 12px !important;
}

body.bd-admin .quill-editor .ql-editor img,
body.bd-note .note-content img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 20px auto !important;
}

body.bd-admin .quill-editor .ql-editor img {
  cursor: pointer !important;
  transition: width 180ms ease, outline-color 180ms ease !important;
}

body.bd-admin .quill-editor .ql-editor img.is-selected-image {
  outline: 2px solid var(--neue-green) !important;
  outline-offset: 4px !important;
}

body.bd-admin .quill-editor .ql-editor img[data-size="small"],
body.bd-note .note-content img[data-size="small"] {
  width: 40% !important;
}

body.bd-admin .quill-editor .ql-editor img[data-size="medium"],
body.bd-note .note-content img[data-size="medium"] {
  width: 62% !important;
}

body.bd-admin .quill-editor .ql-editor img[data-size="large"],
body.bd-note .note-content img[data-size="large"] {
  width: 82% !important;
}

body.bd-admin .quill-editor .ql-editor img[data-size="full"],
body.bd-note .note-content img[data-size="full"] {
  width: 100% !important;
}

body.bd-note .note-content li[data-list="bullet"] {
  list-style-type: disc !important;
}

body.bd-note .note-content li[data-list="ordered"] {
  list-style-type: decimal !important;
}

@media (max-width: 720px) {
  body.bd-admin .quill-toolbar.ql-toolbar {
    gap: 7px !important;
    padding: 8px !important;
  }

  body.bd-admin .quill-toolbar.ql-toolbar .editor-format-group {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  body.bd-admin .image-context-toolbar {
    flex-wrap: wrap !important;
  }

  body.bd-admin .image-context-toolbar small {
    flex-basis: 100% !important;
    margin-left: 0 !important;
  }
}

body.bd-admin .cover-settings {
  display: grid !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--neue-surface-2) 78%, var(--neue-surface)) !important;
}

body.bd-admin .cover-settings-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.bd-admin .cover-settings-heading > div {
  display: grid !important;
  gap: 3px !important;
}

body.bd-admin .cover-settings-heading span {
  color: var(--neue-ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

body.bd-admin .cover-settings-heading small,
body.bd-admin .cover-upload-field > small,
body.bd-admin .featured-toggle small {
  color: var(--neue-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

body.bd-admin .cover-settings-body {
  display: grid !important;
  grid-template-columns: minmax(240px, 0.72fr) minmax(360px, 1.28fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

body.bd-admin .cover-settings-controls {
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.bd-admin .cover-upload-field,
body.bd-admin .featured-toggle {
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  min-height: 88px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 14px !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface) !important;
}

body.bd-admin .cover-upload-field > span {
  color: var(--neue-ink) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-transform: none !important;
}

body.bd-admin .cover-upload-field input[type="file"] {
  width: 100% !important;
  min-height: 38px !important;
  padding: 5px 6px !important;
  color: var(--neue-muted) !important;
  background: var(--neue-surface-2) !important;
  font-size: 12px !important;
}

body.bd-admin .cover-upload-field input[type="file"]::file-selector-button {
  margin-right: 10px !important;
  padding: 7px 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
  font-weight: 800 !important;
}

body.bd-admin .featured-toggle {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
}

body.bd-admin .featured-toggle input {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  padding: 0 !important;
  accent-color: var(--neue-green) !important;
}

body.bd-admin .featured-toggle > span {
  display: grid !important;
  gap: 2px !important;
  color: var(--neue-ink) !important;
  text-transform: none !important;
}

body.bd-admin .featured-toggle strong {
  color: var(--neue-ink) !important;
  font-size: 14px !important;
}

body.bd-admin .cover-settings .image-preview {
  min-height: 0 !important;
  aspect-ratio: 16 / 8.2 !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 14px !important;
  color: var(--neue-muted) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--neue-green) 8%, transparent), color-mix(in srgb, var(--neue-blue) 7%, transparent)),
    var(--neue-surface) !important;
}

body.bd-admin .cover-settings .image-preview img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* R2 multipart uploads and image compression controls. */

body.bd-admin .r2-usage-panel { margin: 22px 0; padding: 22px; border: 1px solid var(--neue-line); border-radius: 8px; background: var(--neue-surface); }
body.bd-admin .r2-usage-heading, body.bd-admin .r2-detail-list p { display: flex; align-items: center; }
body.bd-admin .r2-usage-heading { justify-content: space-between; gap: 20px; }
body.bd-admin .r2-usage-heading h2 { margin: 2px 0 4px; }
body.bd-admin .r2-usage-heading p { margin: 0; color: var(--neue-muted); }
body.bd-admin .r2-usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
body.bd-admin .r2-usage-summary > div { min-width: 0; padding: 14px 16px; border: 1px solid var(--neue-line); border-radius: 8px; background: var(--neue-surface-2); }
body.bd-admin .r2-usage-summary span, body.bd-admin .r2-usage-summary small { display: block; color: var(--neue-muted); }
body.bd-admin .r2-usage-summary strong { display: block; margin: 5px 0 3px; color: var(--neue-green); font-size: 22px; }
body.bd-admin .r2-quota-track { height: 7px; margin: 14px 0 18px; overflow: hidden; border-radius: 4px; background: var(--neue-line); }
body.bd-admin .r2-quota-track span { display: block; width: 0; height: 100%; background: var(--neue-green); transition: width .35s ease; }
body.bd-admin .r2-quota-track span[data-level="warning"] { background: #d18a18; }
body.bd-admin .r2-quota-track span[data-level="danger"] { background: #d95848; }
body.bd-admin .r2-usage-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
body.bd-admin .r2-usage-details h3 { margin: 0 0 8px; font-size: 14px; }
body.bd-admin .r2-detail-list p { justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--neue-line); }
body.bd-admin .r2-detail-list p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--neue-muted); }
body.bd-admin .r2-detail-list p strong { flex: none; }
body.bd-admin .r2-type-list { display: flex; flex-wrap: wrap; gap: 7px; }
body.bd-admin .r2-type-list span { padding: 7px 9px; border: 1px solid var(--neue-line); border-radius: 6px; color: var(--neue-muted); background: var(--neue-surface-2); }
body.bd-admin .r2-usage-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--neue-line); font-size: 12px; color: var(--neue-muted); }
body.bd-admin .r2-usage-note[data-level="warning"] { color: #a96d0d; }
body.bd-admin .r2-usage-note[data-level="danger"] { color: #c84b3e; font-weight: 700; }

@media (max-width: 820px) {
  body.bd-admin .r2-usage-summary, body.bd-admin .r2-usage-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body.bd-admin .r2-usage-heading { align-items: flex-start; }
  body.bd-admin .r2-usage-summary, body.bd-admin .r2-usage-details { grid-template-columns: 1fr; }
}
body.bd-admin .image-compression-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(120px, .75fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%);
  border-radius: 8px;
}

body.bd-admin .image-compression-settings > label {
  display: grid;
  gap: 6px;
}

body.bd-admin .image-compression-settings .compact-check {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  color: var(--text);
}

body.bd-admin .image-compression-settings output {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

body.bd-admin .image-compress-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body.bd-admin .image-compress-tools select {
  width: auto;
  min-width: 84px;
  min-height: 30px;
  padding: 4px 24px 4px 8px;
}

body.bd-admin .image-compress-tools button {
  min-height: 30px;
}

@media (max-width: 760px) {
  body.bd-admin .image-compression-settings { grid-template-columns: 1fr; }
  body.bd-admin .image-compression-settings output { grid-column: auto; }
}

@media (max-width: 900px) {
  body.bd-admin .cover-settings-body {
    grid-template-columns: 1fr !important;
  }
}

/* One file-picker language across note imports, covers and website icons. */
body.bd-admin input[type="file"]:not([hidden]) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 5px 7px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 14px !important;
  color: var(--neue-muted) !important;
  background: var(--neue-surface-2) !important;
  font: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

body.bd-admin input[type="file"]:not([hidden])::file-selector-button {
  min-height: 34px !important;
  margin-right: 12px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  transition: background-color 160ms ease, color 160ms ease !important;
}

body.bd-admin input[type="file"]:not([hidden]):hover::file-selector-button,
body.bd-admin input[type="file"]:not([hidden]):focus-visible::file-selector-button {
  color: var(--neue-action-hover-text) !important;
  background: var(--neue-action-hover) !important;
}

body.bd-admin input[type="file"]:not([hidden]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--neue-green) 38%, transparent) !important;
  outline-offset: 2px !important;
}

/* Shared compact hero language for notes and website navigation. */
@media (min-width: 1061px) {
  body.bd-home .workspace-hero {
    grid-template-columns: minmax(400px, 0.76fr) minmax(620px, 1.24fr) !important;
    align-items: center !important;
    gap: 28px !important;
    padding: 20px 28px !important;
  }

  body.bd-home .workspace-hero h1,
  body.bd-directory .directory-hero h1 {
    max-width: 680px !important;
    font-size: clamp(42px, 3.6vw, 58px) !important;
    line-height: 1 !important;
  }

  body.bd-home .workspace-hero p:not(.eyebrow),
  body.bd-directory .directory-hero p:not(.eyebrow) {
    max-width: 620px !important;
    margin-top: 9px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.bd-home .hero-kpis,
  body.bd-directory .iowen-hero .hero-metrics-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-self: end !important;
    width: min(780px, 100%) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.bd-home .hero-kpis {
    align-self: center !important;
  }

  body.bd-home .hero-kpis div,
  body.bd-directory .iowen-hero .hero-metrics-panel div {
    display: grid !important;
    align-content: center !important;
    min-height: 72px !important;
    padding: 11px 12px !important;
    border-radius: 15px !important;
  }

  body.bd-home .hero-kpis strong,
  body.bd-directory .iowen-hero .hero-metrics-panel strong {
    font-size: 27px !important;
  }

  body.bd-home .hero-kpis span,
  body.bd-directory .iowen-hero .hero-metrics-panel span {
    font-size: 12px !important;
  }

  body.bd-home .workspace-hero {
    min-height: 218px !important;
  }
}

/* Keep the library and directory overview cards visually identical. */
body.bd-home .workspace-hero::before {
  z-index: 0 !important;
}

body.bd-home .workspace-hero > div,
body.bd-home .workspace-hero .hero-kpis {
  position: relative !important;
  z-index: 1 !important;
}

body.bd-home .hero-kpis div,
body.bd-directory .iowen-hero .hero-metrics-panel div {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  background: var(--neue-surface) !important;
}

body.bd-home .hero-kpis strong,
body.bd-directory .iowen-hero .hero-metrics-panel strong,
body.bd-home .hero-kpis span,
body.bd-directory .iowen-hero .hero-metrics-panel span {
  width: 100% !important;
  text-align: center !important;
}

/* Keep decoration quiet and controls crisp across every workspace hero. */
body.bd-page .workspace-hero::before,
body.bd-page .directory-hero::before,
body.bd-page .admin-hero::before {
  z-index: 0 !important;
  opacity: 0.38 !important;
}

body.bd-page .workspace-hero > *,
body.bd-page .directory-hero > *,
body.bd-page .admin-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

body.bd-home .hero-kpis div,
body.bd-directory .iowen-hero .hero-metrics-panel div,
body.bd-admin .metric-card {
  background: var(--neue-surface) !important;
  backdrop-filter: none !important;
}

/* Match the category rail scrollbar to the rest of the interface. */
body.bd-directory .hao-rail {
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--neue-green) 58%, white) transparent !important;
  scrollbar-gutter: stable !important;
}

body.bd-directory .hao-rail::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

body.bd-directory .hao-rail::-webkit-scrollbar-track {
  background: transparent !important;
}

body.bd-directory .hao-rail::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--neue-green) 58%, white) !important;
  background-clip: padding-box !important;
}

body.bd-directory .hao-rail::-webkit-scrollbar-thumb:hover {
  background: var(--neue-green) !important;
  background-clip: padding-box !important;
}

/* Contextual image controls follow the selected image inside long notes. */
body.bd-admin .article-editor-shell {
  position: relative !important;
  overflow: visible !important;
}

body.bd-admin .image-context-toolbar {
  position: absolute !important;
  z-index: 25 !important;
  width: max-content !important;
  max-width: calc(100% - 16px) !important;
  min-height: 46px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 12px !important;
  background: var(--neue-surface) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--neue-ink) 14%, transparent) !important;
}

body.bd-admin .image-pixel-size {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding-left: 8px !important;
  border-left: 1px solid var(--neue-line) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

body.bd-admin .image-pixel-size input {
  width: 76px !important;
  min-height: 30px !important;
  padding: 4px 7px !important;
  border-radius: 7px !important;
  text-align: right !important;
  background: var(--neue-surface-2) !important;
}

body.bd-admin .image-pixel-size button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
  font: inherit !important;
  cursor: pointer !important;
}

body.bd-admin .admin-item-actions a {
  color: var(--neue-green) !important;
  border-color: color-mix(in srgb, var(--neue-green) 24%, var(--neue-line)) !important;
  background: color-mix(in srgb, var(--neue-green) 9%, var(--neue-surface)) !important;
}

body.bd-admin .admin-item-actions button {
  border: 1px solid var(--neue-line) !important;
  color: var(--neue-ink) !important;
  background: var(--neue-surface-2) !important;
}

body.bd-admin .admin-item-actions button:hover,
body.bd-admin .admin-item-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--neue-green) 42%, var(--neue-line)) !important;
  color: var(--neue-green) !important;
  background: color-mix(in srgb, var(--neue-green) 10%, var(--neue-surface-2)) !important;
}

body.bd-admin .admin-item-actions button:last-child {
  color: var(--neue-coral) !important;
  background: color-mix(in srgb, var(--neue-coral) 7%, var(--neue-surface-2)) !important;
}

body.bd-admin .admin-item-actions button:last-child:hover,
body.bd-admin .admin-item-actions button:last-child:focus-visible {
  border-color: color-mix(in srgb, var(--neue-coral) 46%, var(--neue-line)) !important;
  color: var(--neue-coral) !important;
  background: color-mix(in srgb, var(--neue-coral) 13%, var(--neue-surface-2)) !important;
}

body.bd-admin .admin-item-actions a:hover,
body.bd-admin .admin-item-actions a:focus-visible {
  color: var(--neue-action-hover-text) !important;
  border-color: var(--neue-action-hover) !important;
  background: var(--neue-action-hover) !important;
}

@media (max-width: 720px) {
  body.bd-admin .image-context-toolbar {
    width: min(420px, calc(100% - 16px)) !important;
  }

  body.bd-admin .image-pixel-size {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* Multi-image rows and alignment controls. */
body.bd-admin .image-context-toolbar {
  flex-wrap: wrap !important;
  width: min(1040px, calc(100% - 16px)) !important;
}

body.bd-admin .image-selection-options,
body.bd-admin .image-layout-options,
body.bd-admin .image-align-options {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid var(--neue-line) !important;
  border-radius: 10px !important;
  background: var(--neue-surface-2) !important;
}

body.bd-admin .image-layout-options > span,
body.bd-admin .image-align-options > span {
  padding: 0 5px !important;
  color: var(--neue-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.bd-admin .image-selection-options button,
body.bd-admin .image-layout-options button,
body.bd-admin .image-align-options button {
  min-width: 38px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--neue-muted) !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.bd-admin .image-selection-options button:hover,
body.bd-admin .image-layout-options button:hover,
body.bd-admin .image-align-options button:hover,
body.bd-admin .image-selection-options button.is-active,
body.bd-admin .image-layout-options button.is-active,
body.bd-admin .image-align-options button.is-active {
  color: var(--neue-action-text) !important;
  background: var(--neue-action-bg) !important;
}

body.bd-admin .image-selection-options small {
  margin: 0 !important;
  padding: 0 6px !important;
  color: var(--neue-muted) !important;
  white-space: nowrap !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-align],
body.bd-note .note-content p[data-image-align] {
  justify-content: center !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-align="left"],
body.bd-note .note-content p[data-image-align="left"] {
  justify-content: flex-start !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-align="right"],
body.bd-note .note-content p[data-image-align="right"] {
  justify-content: flex-end !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-align]:not([data-image-columns]),
body.bd-note .note-content p[data-image-align]:not([data-image-columns]) {
  display: flex !important;
  width: 100% !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns],
body.bd-note .note-content p[data-image-columns] {
  display: inline-flex !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  min-height: 1px !important;
  vertical-align: top !important;
  margin: 0 4px 12px !important;
  padding: 0 !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns]:has(> img:nth-of-type(2)),
body.bd-note .note-content p[data-image-columns]:has(> img:nth-of-type(2)) {
  display: grid !important;
  width: 100% !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns="2"]:has(> img:nth-of-type(2)),
body.bd-note .note-content p[data-image-columns="2"]:has(> img:nth-of-type(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns="3"]:has(> img:nth-of-type(2)),
body.bd-note .note-content p[data-image-columns="3"]:has(> img:nth-of-type(2)) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns="4"]:has(> img:nth-of-type(2)),
body.bd-note .note-content p[data-image-columns="4"]:has(> img:nth-of-type(2)) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns="2"],
body.bd-note .note-content p[data-image-columns="2"] {
  width: calc(50% - 8px) !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns="3"],
body.bd-note .note-content p[data-image-columns="3"] {
  width: calc(33.333% - 8px) !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns="4"],
body.bd-note .note-content p[data-image-columns="4"] {
  width: calc(25% - 8px) !important;
}

body.bd-admin .quill-editor .ql-editor p[data-image-columns] img,
body.bd-note .note-content p[data-image-columns] img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 720px) {
  body.bd-admin .image-context-toolbar {
    width: min(520px, calc(100% - 16px)) !important;
  }

  body.bd-admin .quill-editor .ql-editor p[data-image-columns="3"],
  body.bd-admin .quill-editor .ql-editor p[data-image-columns="4"],
  body.bd-note .note-content p[data-image-columns="3"],
  body.bd-note .note-content p[data-image-columns="4"] {
    width: calc(50% - 8px) !important;
  }

  body.bd-admin .quill-editor .ql-editor p[data-image-columns="3"]:has(> img:nth-of-type(2)),
  body.bd-admin .quill-editor .ql-editor p[data-image-columns="4"]:has(> img:nth-of-type(2)),
  body.bd-note .note-content p[data-image-columns="3"]:has(> img:nth-of-type(2)),
  body.bd-note .note-content p[data-image-columns="4"]:has(> img:nth-of-type(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}