/* ============================================================================
   MeshScout identity — "engineering drawing"
   ----------------------------------------------------------------------------
   Built from the logo: a magnifier around an isometric cube. The language is a
   technical print: cold graphite ground, hairline rules, isometric grid,
   monospaced figures, and a single brand-purple accent for action. No
   purple-to-cyan neon gradient, no glassy floating pills — those read as
   generic SaaS. The mesh is the motif: geometry, measurement, precision.
   ============================================================================ */
/* Self-hosted identity fonts. Archivo is a technical grotesque with a real
   weight range; JetBrains Mono sets every figure, measurement and identifier. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/vendor/fonts/archivo-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/vendor/fonts/jetbrains-mono-400.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Ground: cool graphite, slightly blue-shifted so the warm accent pops. */
  --bg: #0a0d10;
  --panel: #12161a;
  --panel-2: #171c21;
  --line: #262e35;
  --text: #e8edf1;
  --muted: #8a97a1;

  /* Primary accent: the owner's MeshScout purple. Kept, not replaced - the
     identity work is about structure and cohesion, not recolouring the brand. */
  --accent: #a974c5;
  --accent-2: #c79be0;
  /* Mesh line colour for the isometric ground. */
  --mesh: #1a2128;
  --mesh-strong: #232c34;

  /* Type: a technical pairing. Grotesque for language, mono for every figure,
     measurement and identifier — the way a drawing labels its parts. */
  --font-display: "Archivo", "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* Edges are cut, not rounded. A drawing has corners. */
  --edge: 2px;
  --edge-lg: 3px;

  --green: var(--accent);
  --ok: #3ddc97;
  --warn: #ffc247;
  --danger: #ff5b5b;
  --dock-progress: 0;
  --hero-max-height: 560px;
  --summary-max-height: 120px;
  --dock-clearance: 0px;
  --dock-sidebar-top: 84px;
  --dock-results-top: 104px;
  --public-page-max: 2000px;
  --public-page-gutter: 24px;

  /* Revenue UI (materials vendor comparison, affiliate disclosure). Added with
     the redesign; the existing palette stays the source of truth. */
  --revenue-disclosure-bg: rgba(169, 116, 197, .07);
  --revenue-disclosure-border: rgba(169, 116, 197, .28);

  /* ---- Design tokens (redesign stage 1) ----------------------------------
     Additive aliases only: every value below already existed as a literal in
     this sheet. Nothing existing is redefined, so no rule can regress from
     these declarations alone; later passes can migrate literals to them. */

  /* Surfaces seen repeatedly outside :root */
  --surface-0: #0b0f13;
  --surface-1: #131a20;
  --surface-2: #171f27;
  --surface-3: #0d141a;
  --surface-4: #10171d;
  --surface-5: #111a22;

  /* Spacing scale (the values with the highest existing use counts) */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 16px 44px rgba(0, 0, 0, .32);
  --shadow-overlay: 0 24px 80px rgba(0, 0, 0, .45);
  --shadow-drawer: -28px 0 60px rgba(0, 0, 0, .42);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);

  /* Type scale kept in the existing family */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 19px;

  /* Shared primitives used by the redesign (composed from existing patterns) */
  --chip-bg: rgba(255, 255, 255, .04);
  --chip-border: var(--line);
  --chip-radius: var(--radius-pill);
}

/* Creator vanity controls and private commission inbox */
.author-vanity-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(5, 11, 16, 0.64);
}

.author-vanity-preview span,
.author-profile-editor [data-custom-vanity] small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.author-vanity-preview code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

.author-vanity-preview b {
  color: var(--accent);
}

.author-commission-boundary,
.commission-payment-policy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  color: var(--muted);
  border-left: 3px solid #38d39f;
  background: rgba(56, 211, 159, 0.07);
}

.author-commission-boundary {
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
}

.author-commission-boundary i,
.commission-payment-policy i {
  color: #38d39f;
  margin-top: 3px;
}

.author-commission-sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(189, 95, 255, 0.7);
  color: var(--accent);
  font-weight: 800;
}

.commissions-shell {
  width: min(var(--public-page-max), calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
}

.commissions-hero {
  padding: clamp(56px, 8vh, 110px) 0 36px;
  border-bottom: 1px solid var(--border);
}

.commissions-hero h1 {
  margin: 6px 0 12px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.96;
}

.commissions-hero > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.commissions-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  min-height: 660px;
  margin-top: 24px;
  border: 1px solid var(--border);
  background: rgba(7, 13, 18, 0.88);
}

.commission-thread-rail {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: rgba(9, 16, 22, 0.72);
}

.commission-thread-rail > header {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
}

.commission-thread-rail h2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  font-size: 18px;
}

.commission-thread-rail h2 i {
  color: var(--accent);
}

.commission-thread-list {
  display: grid;
  max-height: 720px;
  overflow: auto;
}

.commission-thread-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  width: 100%;
  min-height: 96px;
  padding: 14px 15px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.commission-thread-item:hover,
.commission-thread-item.active {
  background: rgba(189, 95, 255, 0.08);
}

.commission-thread-item.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.commission-thread-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(189, 95, 255, 0.35);
  background: rgba(189, 95, 255, 0.1);
  color: var(--accent);
}

.commission-thread-summary,
.commission-thread-summary > span,
.commission-thread-summary small {
  min-width: 0;
}

.commission-thread-summary {
  display: grid;
  gap: 5px;
}

.commission-thread-summary > span,
.commission-thread-summary small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.commission-thread-summary > span strong,
.commission-thread-summary b,
.commission-thread-summary small > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commission-thread-summary b {
  font-size: 13px;
}

.commission-thread-summary small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.commission-thread-summary time {
  flex: 0 0 auto;
}

.commission-thread-item mark {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #090d12;
  font-size: var(--text-xs);
  font-weight: 900;
}

.commission-status {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.commission-status.status-accepted {
  border-color: rgba(56, 211, 159, 0.45);
  color: #38d39f;
}

.commission-status.status-pending {
  border-color: rgba(248, 185, 75, 0.45);
  color: #f8b94b;
}

.commission-status.status-declined,
.commission-status.status-cancelled {
  border-color: rgba(255, 99, 120, 0.4);
  color: #ff6378;
}

.commission-conversation {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 660px;
}

.commission-conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 88px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.commission-conversation-header .eyebrow {
  margin: 0 0 4px;
}

.commission-conversation-header h2 {
  margin: 0 0 7px;
  font-size: clamp(20px, 2.4vw, 30px);
}

.commission-thread-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.commission-thread-actions button,
.commission-thread-actions a,
.commission-reply-form button,
.commission-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border);
  background: rgba(14, 23, 30, 0.92);
  color: var(--text);
  font-weight: 800;
}

.commission-thread-actions .primary,
.commission-reply-form button {
  border-color: rgba(189, 95, 255, 0.65);
  color: var(--accent);
}

.commission-thread-actions .danger {
  border-color: rgba(255, 99, 120, 0.45);
  color: #ff6378;
}

.commission-message-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
  max-height: 560px;
  padding: 22px;
  overflow: auto;
}

.commission-message {
  width: min(76%, 760px);
  padding: 13px 15px;
  border: 1px solid var(--border);
  background: rgba(14, 23, 30, 0.82);
}

.commission-message.mine {
  align-self: flex-end;
  border-color: rgba(189, 95, 255, 0.4);
  background: rgba(189, 95, 255, 0.08);
}

.commission-message header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.commission-message header strong {
  color: var(--text);
}

.commission-message p {
  margin: 8px 0 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.commission-message-status {
  display: flex;
  align-items: center;
  align-self: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
}

.commission-message-status i {
  color: var(--accent);
}

.commission-reply-form {
  display: grid;
  gap: var(--space-4);
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
}

.commission-reply-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 90px;
}

.commission-reply-form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.commission-reply-form output {
  color: var(--muted);
  font-size: var(--text-sm);
}

.commission-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  min-height: 300px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.commission-empty.compact {
  min-height: 190px;
}

.commission-empty > i {
  color: var(--accent);
  font-size: 32px;
}

.commission-empty strong {
  color: var(--text);
  font-size: 18px;
}

.commission-empty p {
  max-width: 420px;
  margin: 0;
  line-height: 1.55;
}

.commission-payment-policy {
  margin: 18px 0 46px;
  padding: 15px 18px;
}

.commission-payment-policy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.commission-payment-policy p {
  margin: 0;
  line-height: 1.5;
}

.profile-commissions-panel > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.profile-commissions-panel > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 42px;
  margin-top: 16px;
  padding: 0 14px;
  border: 1px solid rgba(189, 95, 255, 0.55);
  color: var(--accent);
  font-weight: 800;
}

@media (max-width: 820px) {
  .commissions-shell {
    width: min(100%, calc(100% - 20px));
  }

  .commissions-hero {
    padding: 36px 4px 24px;
  }

  .commissions-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .commission-thread-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .commission-thread-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 86vw);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .commission-thread-item {
    border-right: 1px solid var(--border);
  }

  .commission-thread-item.active {
    box-shadow: inset 0 3px 0 var(--accent);
  }

  .commission-conversation,
  .commission-message-list {
    min-height: 0;
    max-height: none;
  }

  .commission-conversation-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .commission-thread-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .commission-thread-actions button {
    flex: 1 1 auto;
  }

  .commission-message-list {
    padding: 14px;
  }

  .commission-message {
    width: 90%;
  }

  .commission-reply-form > div {
    align-items: stretch;
    flex-direction: column;
  }

  .author-vanity-preview {
    align-items: flex-start;
    flex-direction: column;
  }
}

.status-shell {
  width: min(1460px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 100vh;
}

.status-hero {
  padding: clamp(64px, 12vw, 150px) 0 clamp(36px, 7vw, 80px);
  max-width: 760px;
}

.status-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.status-hero p:not(.eyebrow) {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.6;
}

.status-dashboard,
.status-summary,
.status-grid,
.status-stat-grid,
.status-endpoint-list,
.status-service-list {
  display: grid;
  gap: 14px;
}

.status-dashboard {
  margin-bottom: 70px;
}

.status-summary {
  grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(180px, 0.6fr)) auto;
  align-items: stretch;
}

.status-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
  align-items: start;
}

.status-panel-main {
  grid-column: 1;
}

.status-card,
.status-panel,
.status-row,
.status-stat,
.status-refresh {
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background:
    linear-gradient(135deg, rgba(169, 116, 197, 0.1), rgba(18, 31, 37, 0.72) 34%, rgba(8, 13, 18, 0.88)),
    rgba(8, 13, 18, 0.84);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
}

.status-card,
.status-panel,
.status-row,
.status-stat,
.status-refresh,
.status-pill {
  border-radius: var(--radius-md);
}

.status-card {
  min-height: 112px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 7px;
}

.status-card > i,
.status-stat > i,
.status-panel-head h2 i {
  color: var(--accent);
}

.status-card strong {
  color: var(--text);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
}

.status-card small {
  color: var(--muted);
  font-weight: 800;
}

.status-overall strong {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.status-pill {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 11px;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: rgba(10, 16, 21, 0.8);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.status-pill.ok,
.status-row.ok .status-row-icon {
  color: var(--ok);
}

.status-pill.bad,
.status-row.bad .status-row-icon {
  color: var(--danger);
}

.status-refresh {
  min-width: 138px;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.status-refresh:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.status-panel {
  padding: 18px;
  min-width: 0;
}

.status-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: 14px;
}

.status-panel-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.2rem;
}

.status-panel-head h2 i {
  margin-right: 8px;
}

.status-panel-head span {
  color: var(--muted);
  font-weight: 900;
  font-size: 0.82rem;
}

.status-row {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) minmax(96px, auto) minmax(88px, auto);
  align-items: center;
  gap: var(--space-5);
  padding: 13px 14px;
  min-width: 0;
}

.status-row-name {
  color: var(--text);
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-row-code {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.status-row-latency {
  justify-self: end;
  font-size: 0.9rem;
  white-space: nowrap;
}

.status-service-list .status-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.status-service-list .status-row-code {
  display: none;
}

.status-row-latency.fast {
  color: var(--ok);
}

.status-row-latency.steady {
  color: var(--accent-cyan);
}

.status-row-latency.slow {
  color: var(--warn);
}

.status-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-stat {
  padding: 16px;
  display: grid;
  gap: var(--space-3);
}

.status-stat strong {
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
}

.status-stat span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .status-shell {
    width: min(100% - 28px, 760px);
  }

  .status-summary,
  .status-grid {
    grid-template-columns: 1fr;
  }

  .status-refresh {
    min-height: 52px;
  }

  .status-panel-main {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .status-shell {
    width: min(100% - 24px, 560px);
  }

  .status-hero {
    padding-top: 42px;
  }

  .status-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .status-row-code,
  .status-row-latency {
    grid-column: 2;
    justify-self: start;
  }
}

/* Blog */
.blog-header .public-nav {
  margin-left: auto;
}

.blog-shell {
  width: 100%;
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter) var(--public-page-gutter) 72px;
}

.blog-hero,
.blog-results-bar,
.blog-card-grid,
.blog-shell > .public-footer {
  width: min(100%, 1180px);
  margin-left: auto;
  margin-right: auto;
}

.blog-hero {
  display: grid;
  gap: 18px;
  margin-bottom: 34px;
}

.blog-hero h1 {
  margin: 0;
  max-width: 1080px;
  color: var(--text);
  font-size: clamp(42px, 5.4vw, 74px);
  line-height: 1.02;
}

.blog-hero p:not(.eyebrow) {
  max-width: 720px;
  color: var(--muted);
  font-size: 18px;
}

.blog-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  max-width: 980px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(13, 20, 26, .78);
}

.blog-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
}

.blog-meta {
  color: var(--muted);
  font-weight: 900;
}

.blog-results-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.blog-results-bar h2,
.blog-results-bar p {
  margin: 0;
}

.blog-results-bar p {
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
}

.blog-results-bar > button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .7);
  color: var(--muted);
  padding: 8px 11px;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
}

.blog-results-bar > button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.blog-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(13, 20, 26, .84);
  color: var(--text);
  text-align: left;
  contain: layout paint style;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.blog-card:hover,
.blog-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent), transparent 45%), 0 18px 45px rgba(0, 0, 0, .24);
  transform: translateY(-2px);
}

.blog-card-open {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.blog-card-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.blog-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(169, 116, 197, .22), rgba(169, 116, 197, .08));
}

.blog-card-media img,
.blog-preview-card img,
.blog-admin-row > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: var(--space-5);
  background:
    radial-gradient(circle at 25% 15%, rgba(169, 116, 197, .2), transparent 42%),
    linear-gradient(135deg, rgba(169, 116, 197, .24), rgba(7, 14, 20, .94));
  color: var(--text);
}

.blog-thumbnail-placeholder > i {
  color: var(--accent);
  font-size: clamp(24px, 4vw, 42px);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 45%, transparent));
}

.blog-thumbnail-placeholder span,
.blog-thumbnail-placeholder strong,
.blog-thumbnail-placeholder small {
  display: block;
}

.blog-thumbnail-placeholder strong {
  font-size: 1rem;
}

.blog-thumbnail-placeholder small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.blog-featured-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, white 12%);
  border-radius: var(--radius-pill);
  background: rgba(7, 12, 17, .84);
  color: #f1dcff;
  padding: 4px 9px;
  font-size: .68rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.blog-card-body {
  display: grid;
  grid-template-rows: auto auto minmax(3.8em, 1fr) auto;
  gap: var(--space-3);
  padding: 13px 14px 14px;
}

.blog-card-body h2,
.blog-card-body h3,
.blog-preview-card h3 {
  margin: 0;
  color: var(--text);
}

.blog-card-body h3 {
  min-height: 2.45em;
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.02rem;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.blog-card-body p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.blog-card-kicker,
.blog-card-body > footer,
.blog-card-actions,
.blog-post-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.blog-card-kicker,
.blog-card-body > footer {
  justify-content: space-between;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
}

.blog-card-body > footer {
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.blog-card-body > footer span:last-child {
  color: color-mix(in srgb, var(--accent) 76%, white);
}
.blog-view-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.blog-card-actions {
  border-top: 1px solid var(--line);
  padding: 8px 10px;
  background: rgba(7, 12, 17, .72);
}

.blog-card-actions .blog-post-actions {
  width: 100%;
}

.blog-card-meta,
.blog-post-meta,
.blog-comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.blog-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 72px 20px 28px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(12px);
}

.blog-page .blog-modal {
  padding: clamp(64px, 8vh, 88px) clamp(18px, 4vw, 56px) clamp(22px, 4vh, 42px);
  background: transparent;
  backdrop-filter: none;
  isolation: isolate;
}

.blog-modal[hidden] {
  display: none;
}

.blog-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
}

.blog-page .blog-modal-backdrop {
  background: rgba(2, 6, 9, .78);
  backdrop-filter: blur(10px);
}

.collection-modal {
  place-items: start center;
  padding-top: clamp(52px, 8vh, 92px);
}

.blog-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: min(860px, calc(100vh - 104px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 18, 24, .96);
}

.blog-page .blog-modal-panel {
  border-radius: var(--radius-lg);
  background: rgba(12, 18, 24, .98);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .52);
}

.blog-reader-modal-panel {
  width: min(1540px, 100%);
  max-height: min(980px, calc(100dvh - clamp(96px, 12vh, 132px)));
}

.blog-editor-modal-panel {
  width: min(1240px, calc(100vw - 36px));
}

.blog-modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}

.blog-modal-head h2 {
  margin: 0;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1;
}

.blog-modal-head p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
}

.blog-post-detail {
  display: grid;
}

.blog-post-header,
.blog-post-content,
.blog-comments {
  padding-left: clamp(24px, 6vw, 72px);
  padding-right: clamp(24px, 6vw, 72px);
}

.blog-post-header {
  padding-top: clamp(30px, 5vw, 54px);
  padding-bottom: 22px;
}

.blog-post-header h2 {
  max-width: 820px;
  margin: 8px 0 16px;
  color: var(--text);
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.02;
  text-wrap: balance;
}

.blog-post-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.blog-post-meta {
  align-items: center;
}

.blog-post-meta > span,
.blog-post-meta > button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-post-meta > button,
.blog-post-actions button,
.blog-confirm-panel button {
  border: 1px solid color-mix(in srgb, var(--line), var(--accent) 18%);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .76);
  color: var(--muted);
  padding: 7px 10px;
  font: inherit;
  font-size: .75rem;
  font-weight: 850;
  cursor: pointer;
}

.blog-post-meta > button:hover,
.blog-post-actions button:hover,
.blog-confirm-panel button:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  color: var(--text);
}

.blog-post-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.blog-post-actions button.danger,
.blog-confirm-panel button.danger {
  border-color: rgba(255, 93, 98, .48);
  background: rgba(255, 93, 98, .08);
  color: #ff9da0;
}

.blog-post-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

.blog-post-thumbnail {
  min-height: 220px;
  max-height: 480px;
  margin: 0 clamp(24px, 6vw, 72px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(8, 14, 20, .8);
}

.blog-post-thumbnail > img {
  width: 100%;
  height: min(48vw, 480px);
  min-height: 220px;
  display: block;
  object-fit: cover;
}

.blog-post-thumbnail .blog-thumbnail-placeholder {
  min-height: 300px;
}

.blog-post-content {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding-top: clamp(28px, 5vw, 50px);
  padding-bottom: clamp(34px, 6vw, 64px);
  color: #cbd7e1;
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
}

.blog-post-content > :first-child {
  margin-top: 0;
}

.blog-post-content > :last-child {
  margin-bottom: 0;
}

.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
  margin: 1.6em 0 .55em;
  color: var(--text);
  line-height: 1.2;
}

.blog-post-content p,
.blog-post-content li {
  color: #cbd7e1;
}

.blog-post-content blockquote {
  margin: 1.4rem 0;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: .7rem 1rem;
  color: var(--muted);
}

.blog-post-content pre,
.blog-post-content code {
  border-radius: var(--radius-sm);
  background: rgba(3, 8, 12, .86);
  color: #d9c4e8;
}

.blog-post-content code {
  padding: .12em .35em;
}

.blog-post-content pre {
  overflow-x: auto;
  padding: 1rem;
}

.blog-comments {
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 5vw, 42px);
  padding-bottom: clamp(34px, 6vw, 64px);
  background: rgba(6, 11, 16, .42);
}

.blog-comments-head,
.blog-comment-composer-head,
.blog-comment-form > footer,
.blog-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.blog-comments-head h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 1.3rem;
}

.blog-comments-head > span,
.blog-comment-composer-head small,
.blog-comment-head small,
.blog-comment-form > footer > small {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.blog-comment-list {
  display: grid;
  gap: var(--space-4);
}

.blog-comment {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-5);
  border-radius: 10px;
  padding: 13px;
}

.blog-comment > .comment-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.blog-comment-main {
  min-width: 0;
}

.blog-comment-head {
  justify-content: flex-start;
}

.blog-comment-head small {
  margin-left: auto;
}

.blog-comment-main > p {
  margin: 7px 0 0;
  color: #c6d2dc;
  line-height: 1.55;
  white-space: pre-wrap;
}

.blog-comment .comment-actions,
.blog-comment .comment-edit-form {
  margin-left: 0;
}

.blog-comment .comment-edit-form {
  margin-top: 10px;
}

.blog-comment-form {
  display: grid;
  gap: 11px;
  margin-top: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: var(--radius-lg);
  background: rgba(8, 14, 20, .72);
  padding: 14px;
}

.blog-comment-composer-head {
  justify-content: flex-start;
}

.blog-comment-composer-head > div {
  display: grid;
  gap: 2px;
}

.blog-comment-form textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: rgba(5, 10, 15, .88);
  color: var(--text);
  padding: 12px;
  font: inherit;
  line-height: 1.5;
}

.blog-comment-form textarea:focus {
  border-color: rgba(169, 116, 197, .72);
  box-shadow: 0 0 0 3px rgba(169, 116, 197, .14);
}

.blog-comment-form > footer button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, rgba(8, 14, 20, .9));
  color: var(--text);
  padding: 8px 13px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.blog-comment-form output {
  min-height: 1.2em;
  color: var(--muted);
  font-size: .78rem;
}

.blog-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr);
  gap: 18px;
  padding: 22px;
}

.blog-post-image {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.blog-post-image img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
}

.blog-rich-text {
  color: var(--text);
  line-height: 1.65;
}

.blog-rich-text p,
.blog-rich-text ul {
  color: var(--muted);
}

.blog-comments {
  display: grid;
  gap: var(--space-5);
}

.blog-comment,
.blog-admin-row,
.blog-preview-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 19, .58);
  padding: 14px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.comment-header > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.comment-header strong {
  color: var(--text);
  line-height: 1.15;
}

.comment-name-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.comment-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.12rem 0.46rem;
  border: 1px solid color-mix(in srgb, var(--role-color, #a974c5) 68%, transparent);
  border-radius: var(--radius-pill);
  color: var(--role-color, #a974c5);
  background: color-mix(in srgb, var(--role-color, #a974c5) 12%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.comment-header small {
  color: var(--muted);
}

.comment-avatar {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(169, 116, 197, 0.45);
  object-fit: cover;
  background: rgba(169, 116, 197, 0.12);
  box-shadow: 0 0 18px rgba(169, 116, 197, 0.16);
}

.comment-avatar.fallback {
  display: inline-grid;
  place-items: center;
  color: var(--text);
  font-weight: 800;
}

.blog-comment form {
  display: grid;
  gap: var(--space-4);
}

.blog-comment > p,
.collection-comment > p {
  margin: 0.65rem 0 0 3.1rem;
  color: var(--muted);
  line-height: 1.55;
}

.comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.75rem 0 0 3.1rem;
}

.comment-votes,
.comment-tools,
.comment-edit-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.comment-icon-button,
.comment-actions button,
.comment-edit-actions button {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--line), var(--accent) 18%);
  border-radius: var(--radius-md);
  background: rgba(13, 20, 26, 0.72);
  color: var(--muted);
  padding: 0 0.58rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.comment-icon-button:hover,
.comment-actions button:hover,
.comment-edit-actions button:hover {
  border-color: color-mix(in srgb, var(--accent), var(--line) 35%);
  color: var(--text);
}

.comment-icon-button.active {
  border-color: rgba(169, 116, 197, 0.65);
  color: var(--accent);
  background: rgba(169, 116, 197, 0.12);
}

.comment-icon-button.active.down {
  border-color: rgba(255, 93, 98, 0.55);
  color: var(--danger);
  background: rgba(255, 93, 98, 0.1);
}

.comment-icon-button.danger:hover {
  border-color: rgba(255, 93, 98, 0.62);
  color: #ff8d91;
}

.comment-icon-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.comment-edit-form {
  display: grid;
  gap: 0.65rem;
  margin: 0.75rem 0 0 3.1rem;
}

.comment-edit-form[hidden] {
  display: none;
}

.comment-edit-form textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 19, 0.78);
  color: var(--text);
  padding: 0.78rem;
  font: inherit;
  line-height: 1.45;
}

.comment-edit-form textarea:focus {
  outline: none;
  border-color: rgba(169, 116, 197, 0.72);
  box-shadow: 0 0 0 3px rgba(169, 116, 197, 0.14);
}

.blog-comment textarea {
  min-height: 110px;
}

.blog-admin-grid {
  grid-template-columns: minmax(680px, 1.35fr) minmax(360px, .65fr);
  align-items: start;
}

.blog-comments-panel {
  grid-column: 1 / -1;
}

.form-grid {
  display: grid;
  gap: var(--space-5);
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.inline-checks label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(10, 16, 22, .62);
}

.blog-admin-list {
  display: grid;
  gap: var(--space-4);
  max-height: 620px;
  overflow-y: auto;
  padding-right: 6px;
}

.blog-admin-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
}

.blog-admin-row.compact {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.blog-admin-row.ok {
  border-color: rgba(16, 185, 129, .35);
}

.blog-admin-row.warn {
  border-color: rgba(245, 158, 11, .45);
}

.blog-admin-thumb,
.blog-admin-row > img {
  width: 64px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, .13);
  color: var(--accent);
}

.blog-admin-row.compact .blog-admin-thumb {
  width: 42px;
  height: 42px;
}

.blog-admin-row strong,
.blog-admin-row small,
.blog-admin-row p {
  display: block;
  margin: 0;
}

.blog-admin-row small,
.blog-admin-row p,
.blog-preview-card .muted {
  color: var(--muted);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

.blog-preview {
  margin-top: 14px;
}

.blog-post-form {
  gap: 16px;
}

.blog-post-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.blog-post-form label > span {
  color: var(--muted);
}

.blog-post-form input:not([type="checkbox"]):not([type="file"]),
.blog-post-form select,
.blog-post-form textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(5, 10, 14, .78);
  color: var(--text);
  padding: 10px 11px;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.blog-post-form textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.45;
}

.blog-post-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.blog-post-form input:focus,
.blog-post-form select:focus,
.blog-post-form textarea:focus {
  border-color: var(--accent);
  background: rgba(8, 13, 18, .92);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.blog-editor-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(260px, .7fr);
  gap: 14px;
}

.blog-editor-modal-panel .blog-post-form {
  padding: 18px;
}

.blog-editor-launch-panel {
  align-self: start;
}

.blog-editor-launch-copy {
  display: grid;
  gap: var(--space-3);
  margin-top: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 10px;
  background: rgba(169, 116, 197, .08);
  padding: 16px;
  color: var(--muted);
  line-height: 1.55;
}

.blog-hero-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.blog-hero-actions[hidden] {
  display: none;
}

.blog-hero-actions button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 12%, rgba(12, 18, 24, .86));
  color: var(--text);
  padding: 0 16px;
  font-weight: 900;
}

.blog-hero-actions button i {
  color: var(--accent);
}

.blog-editor-card {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 14, 19, .46);
  padding: 14px;
}

.blog-access-card {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.blog-access-card .eyebrow,
.blog-access-card small {
  grid-column: 1 / -1;
}

.blog-thumbnail-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(169, 116, 197, .18), rgba(169, 116, 197, .08));
  color: var(--muted);
  text-align: center;
}

.blog-thumbnail-preview img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}

.blog-thumbnail-preview i {
  color: var(--accent);
  font-size: 30px;
}

.blog-thumbnail-picker {
  width: 100%;
}

.field-title {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.checkbox-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.checkbox-cloud label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--role, var(--accent)) 42%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--role, var(--accent)) 10%, transparent);
  color: var(--text);
  padding: 7px 10px;
  font-size: var(--text-sm);
  font-weight: 900;
}

.checkbox-cloud input {
  accent-color: var(--role, var(--accent));
}

.blog-editor-writing {
  min-height: 520px;
}

.blog-editor-writing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.blog-editor-writing-head h4 {
  margin: 2px 0 0;
}

.blog-editor-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(4, 9, 13, .72);
  padding: 3px;
}

.blog-editor-view-switch button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  padding: 6px 11px;
  font: inherit;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
}

.blog-editor-view-switch button[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line));
}

.blog-editor-view-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.blog-editor-preview-panel[hidden] {
  display: none;
}

.blog-editor-preview-panel {
  min-height: 430px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 10, 14, .72);
}

.blog-editor-preview-content {
  max-width: 820px;
  min-height: 428px;
  padding-top: 28px;
  padding-bottom: 38px;
}

.blog-editor-writing textarea {
  display: none;
}

.editorjs-shell {
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 10, 14, .48);
  padding: 20px 22px;
}

.editor-loading,
.editor-fallback {
  min-height: 360px;
  display: grid;
  place-items: center;
  gap: var(--space-4);
  color: var(--muted);
  text-align: center;
  font-weight: 900;
}

.editor-loading i,
.editor-fallback i {
  color: var(--accent);
  font-size: 24px;
}

.editorjs-unavailable + textarea,
.blog-editor-writing:has(.editorjs-unavailable) textarea {
  display: block;
}

.editorjs-shell .codex-editor,
.editorjs-shell .ce-block__content,
.editorjs-shell .ce-toolbar__content {
  max-width: 100%;
}

.editorjs-shell .ce-block__content,
.editorjs-shell .ce-toolbar__content {
  margin: 0;
}

.editorjs-shell .ce-paragraph,
.editorjs-shell .ce-header,
.editorjs-shell .cdx-list,
.editorjs-shell .cdx-quote,
.editorjs-shell .tc-table {
  color: var(--text);
}

.editorjs-shell .ce-toolbar__plus,
.editorjs-shell .ce-toolbar__settings-btn,
.editorjs-shell .ce-conversion-toolbar,
.editorjs-shell .ce-inline-toolbar,
.editorjs-shell .ce-settings,
.editorjs-shell .cdx-settings-button {
  color: #111827;
}

.editorjs-shell .ce-popover,
.editorjs-shell .ce-conversion-toolbar,
.editorjs-shell .ce-inline-toolbar,
.editorjs-shell .ce-settings {
  color: #111827;
}

.editorjs-shell .ce-paragraph[data-placeholder]:empty::before {
  color: var(--muted);
}

.quill-shell {
  padding: 0;
  overflow: hidden;
}

.quill-shell .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 82%, black);
  padding: 10px 12px;
}

.quill-shell .ql-container.ql-snow {
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

.quill-shell .ql-editor {
  min-height: var(--quill-min-height, 360px);
  line-height: 1.65;
  padding: 18px 20px;
}

.quill-shell .ql-editor.ql-blank::before {
  color: var(--muted);
  font-style: normal;
  left: 20px;
  right: 20px;
}

.quill-shell .ql-picker,
.quill-shell .ql-stroke,
.quill-shell .ql-fill,
.quill-shell .ql-picker-label {
  color: var(--muted);
  stroke: var(--muted);
}

.quill-shell .ql-toolbar button:hover .ql-stroke,
.quill-shell .ql-toolbar button.ql-active .ql-stroke,
.quill-shell .ql-toolbar .ql-picker-label:hover .ql-stroke,
.quill-shell .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: var(--accent);
}

.quill-shell .ql-toolbar button:hover,
.quill-shell .ql-toolbar button.ql-active,
.quill-shell .ql-toolbar .ql-picker-label:hover,
.quill-shell .ql-toolbar .ql-picker-label.ql-active {
  color: var(--accent);
}

.quill-shell .ql-picker-options {
  background: var(--panel);
  border-color: var(--line) !important;
  color: var(--text);
  box-shadow: var(--shadow);
}

.quill-shell a,
.blog-post-content a {
  color: var(--accent);
}

.blog-confirm-modal {
  z-index: 1500;
}

.blog-confirm-panel {
  width: min(500px, 100%);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  overflow: visible;
  padding: 24px;
}

.blog-confirm-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 185, 80, .38);
  border-radius: var(--radius-lg);
  background: rgba(255, 185, 80, .1);
  color: #ffc96b;
  font-size: 1.25rem;
}

.blog-confirm-panel h2 {
  margin: 3px 36px 8px 0;
  color: var(--text);
  font-size: 1.35rem;
}

.blog-confirm-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.blog-confirm-panel > footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 16px;
}

.blog-confirm-panel > footer button {
  min-height: 38px;
  padding: 8px 14px;
}

.blog-confirm-panel .blog-confirm-action:not(.danger) {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, rgba(8, 14, 20, .9));
  color: var(--text);
}

.email-admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.35fr);
  gap: 18px;
  align-items: start;
}

.email-compose-form,
.email-admin-card {
  display: grid;
  gap: 14px;
}

.model-insert-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
}

.email-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 8px 0;
}

.email-token-row code {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .04);
  padding: 6px 9px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.panel-actions.align-left {
  justify-content: flex-start;
}

.email-job-list {
  display: grid;
  gap: var(--space-4);
}

.email-job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .035);
  padding: 12px 14px;
}

.email-job-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-job-card > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.email-job-card small {
  color: var(--muted);
}

.email-job-card.ok {
  border-color: color-mix(in srgb, var(--ok) 34%, var(--line));
}

.email-job-card.warn {
  border-color: color-mix(in srgb, var(--warn) 44%, var(--line));
}

.email-job-card.error {
  border-color: color-mix(in srgb, var(--danger) 44%, var(--line));
}

.status-pill.warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.status-pill.compact {
  width: fit-content;
  padding: 6px 9px;
}

.settings-form input,
.settings-form textarea,
.settings-form select,
.blog-search input,
.email-compose-form input,
.email-compose-form textarea,
.email-compose-form select {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 9, 13, .72);
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
}

.settings-form textarea,
.email-compose-form textarea {
  resize: vertical;
}

@media (max-width: 820px) {
  .blog-shell {
    width: 100%;
    padding: 16px 16px max(36px, env(safe-area-inset-bottom));
  }

  .blog-page .blog-modal {
    place-items: start center;
    padding: max(58px, calc(env(safe-area-inset-top) + 52px)) 12px max(14px, env(safe-area-inset-bottom));
  }

  .blog-page .blog-modal-panel {
    max-height: calc(100dvh - max(72px, calc(env(safe-area-inset-top) + 66px)));
    border-radius: 10px;
  }

  .blog-page .blog-editor-modal-panel {
    width: 100%;
  }

  .blog-post-header,
  .blog-post-content,
  .blog-comments {
    padding-left: 20px;
    padding-right: 20px;
  }

  .blog-post-thumbnail {
    margin-left: 20px;
    margin-right: 20px;
  }

  .blog-post-toolbar,
  .blog-post-actions.reader {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-post-actions.reader button {
    flex: 1;
  }

  .blog-editor-writing {
    min-height: 430px;
  }

  .blog-editor-preview-panel,
  .blog-editor-preview-content {
    min-height: 360px;
  }

  .blog-search,
  .blog-post-layout,
  .blog-admin-grid,
  .blog-editor-layout,
  .email-admin-grid,
  .model-insert-row,
  .blog-access-card,
  .form-grid.two,
  .form-grid.four,
  .blog-admin-row,
  .blog-admin-row.compact {
    grid-template-columns: 1fr;
  }

  .row-actions {
    justify-content: stretch;
  }

  .row-actions button {
    flex: 1;
  }
}

@media (max-width: 560px) {
  .blog-hero {
    gap: 14px;
    margin-bottom: 26px;
  }

  .blog-hero h1 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .blog-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .blog-card:hover,
  .blog-card:focus-within {
    transform: none;
  }

  .blog-post-header,
  .blog-post-content,
  .blog-comments {
    padding-left: 16px;
    padding-right: 16px;
  }

  .blog-post-header h2 {
    font-size: clamp(1.85rem, 10vw, 3rem);
  }

  .blog-post-thumbnail {
    min-height: 170px;
    margin-left: 16px;
    margin-right: 16px;
  }

  .blog-post-thumbnail > img,
  .blog-post-thumbnail .blog-thumbnail-placeholder {
    height: 54vw;
    min-height: 170px;
  }

  .blog-post-meta {
    gap: 6px 10px;
  }

  .blog-comment {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-4);
    padding: 11px;
  }

  .blog-comment > .comment-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .blog-comment-head small {
    width: 100%;
    margin-left: 0;
  }

  .blog-comment .comment-actions,
  .blog-comment .comment-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-comment .comment-tools button,
  .blog-comment-form > footer button,
  .blog-confirm-panel > footer button {
    width: 100%;
  }

  .blog-comment-form > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-editor-writing-head {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-editor-view-switch,
  .blog-editor-view-switch button {
    flex: 1;
  }

  .blog-confirm-panel {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--space-5);
    padding: 20px 16px 16px;
  }

  .blog-confirm-icon {
    width: 42px;
    height: 42px;
  }

  .blog-confirm-panel > footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

* {
  box-sizing: border-box;
}

/* ============================================================================
   The mesh ground: one isometric grid, drawn in CSS, fixed behind everything.
   This is the identity's signature — it says "geometry" before a word is read,
   and it is the same isometric language as the logo's cube. Cheap: two repeating
   gradients, no images, no animation, no JS.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  body::before { opacity: .35; }
}

/* Wordmark: drawn, not typed. Wide grotesque, tightened, with the last letter
   marked — a registration tick, like a drawing's datum. */
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  font-feature-settings: "ss01" 1;
}

.brand-wordmark::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  vertical-align: 0.42em;
  background: var(--accent);
}

html {
  overflow-anchor: none;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Flat ground. The identity comes from the isometric mesh behind this, not
     from a coloured radial glow (the single most generic AI hero treatment). */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  display: grid;
  grid-template-columns: 300px 1fr;
  position: relative;
  isolation: isolate;
}

body.modal-open {
  position: fixed;
  inset: var(--modal-scroll-y, 0) 0 auto 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

.meshscout-particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .96;
  mix-blend-mode: normal;
  display: block;
  grid-area: 1 / 1 / -1 / -1;
  justify-self: stretch;
  align-self: stretch;
}

body.chrome-scroll-safe .public-header::before {
  background: rgba(8, 14, 20, calc(var(--dock-progress) * .96));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.meshscout-particles[hidden] {
  display: none;
}

.meshscout-particles canvas,
.meshscout-particles .particles-js-canvas-el {
  width: 100%;
  height: 100%;
  display: block;
}

/* The mesh ground. Replaces the purple/cyan glow vignette that was here. An
   isometric wireframe in the same language as the logo's cube: geometry first,
   colour reserved for action. Two repeating gradients, no image, no animation. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg, var(--mesh) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-60deg, var(--mesh) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, #000 46%, transparent 90%);
  mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, #000 46%, transparent 90%);
  opacity: .55;
}

body.chrome-scroll-safe::before {
  /* A still mesh is already calm; only soften it for reduced motion. */
  opacity: .4;
}

body.chrome-scroll-safe .meshscout-particles {
  display: none;
}

body > :not(.meshscout-particles) {
  position: relative;
  z-index: 2;
}

@keyframes meshscoutAmbientDrift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(1%, 1.4%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(2%, -1.2%, 0) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .meshscout-particles {
    opacity: .32;
  }

  body::before {
    opacity: .34;
    animation-duration: 64s;
  }
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #0d1217;
  padding: 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: min-content minmax(0, 1fr) min-content;
  gap: var(--space-4);
  overflow: hidden;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071014;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.brand-icon {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}

.sidebar h1,
.sidebar p,
.topbar h2,
.panel h3 {
  margin: 0;
}

.sidebar p,
.eyebrow,
.source-head span,
.metric-card span,
.metric-card small,
.source-meta,
.log-row span {
  color: var(--muted);
}

nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  align-content: start;
  gap: 7px;
  margin-top: 20px;
}

.sidebar-health {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  min-height: 0;
  max-height: min(42vh, 390px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .14);
}

.sidebar-section-head,
.source-row {
  display: flex;
  align-items: center;
}

.sidebar-section-head {
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sidebar-section-head small {
  color: #c6d1dc;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

.source-list {
  display: grid;
  gap: 3px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  min-height: 0;
}

.source-row {
  min-width: 0;
  gap: 5px;
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--source), #27323d 72%);
  background: #10171d;
  border-radius: var(--radius-md);
}

.source-row img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.source-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 10px #64748b;
  flex: 0 0 auto;
}

.source-row.running .source-row-dot,
.source-row.fresh .source-row-dot {
  background: #22c55e;
  box-shadow: 0 0 12px #22c55e;
}

.source-row.paused .source-row-dot,
.source-row.warning .source-row-dot {
  background: #f59e0b;
  box-shadow: 0 0 12px #f59e0b;
}

.source-row.needs-api .source-row-dot,
.source-row.needs-credentials .source-row-dot,
.source-row.needs-research .source-row-dot {
  background: #f59e0b;
  box-shadow: 0 0 12px #f59e0b;
}

.source-row.attention .source-row-dot {
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
}

.source-row div {
  min-width: 0;
  display: block;
}

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

.source-row strong {
  font-size: var(--text-xs);
  line-height: 1.05;
}

.source-row small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.05;
  display: none;
}

.source-row b {
  margin-left: auto;
  color: var(--source);
  font-size: var(--text-xs);
}

nav a,
button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  text-decoration: none;
  font-weight: 700;
}

button.loading {
  pointer-events: none;
  opacity: .86;
}

button.loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-right: 7px;
  vertical-align: -2px;
  animation: meshspin .75s linear infinite;
}

@keyframes meshspin {
  to {
    transform: rotate(360deg);
  }
}

nav a.active,
button:hover {
  border-color: var(--green);
  color: var(--green);
}

main {
  padding: 28px;
  display: grid;
  gap: 18px;
}

.topbar,
.panel-heading,
.source-head,
.source-meta,
.log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.topbar h2 {
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 0;
}

.tagline {
  color: #b7c2cc;
  margin: 8px 0 0;
  font-size: 18px;
}

/* Section eyebrows are drawing annotations: a mono, spaced label with a short
   rule before it, the way a plan labels a detail. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}

.status-pill {
  border: 1px solid #7c2d12;
  background: #1c1917;
  color: #fdba74;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  font-weight: 900;
}

.status-pill.ok {
  border-color: #065f46;
  background: #052e2b;
  color: #5eead4;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.metric-card,
.panel,
.source-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.metric-card {
  padding: 18px;
  display: flex;
  gap: 14px;
}

.metric-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: #10231f;
  color: var(--green);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.metric-card strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  margin: 4px 0;
}

.panel {
  padding: 18px;
}

.chart-panel {
  overflow: hidden;
}

canvas {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  margin-top: 16px;
}

.indexer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--space-5);
  margin-top: 14px;
}

.source-card {
  padding: 14px;
  border-color: color-mix(in srgb, var(--source), #27323d 65%);
}

.indexer-card {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--source), #27323d 70%);
  border-radius: var(--radius-md);
  padding: 13px;
  min-width: 0;
}

.indexer-empty-state,
.indexer-stale-warning {
  grid-column: 1 / -1;
}

.indexer-empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
}

.indexer-empty-state i {
  color: var(--accent);
  font-size: 22px;
}

.indexer-empty-state strong {
  color: var(--text);
}

.indexer-empty-state span {
  color: var(--muted);
}

.indexer-stale-warning {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, .08);
  color: #fbbf24;
  font-size: 13px;
}

.indexer-repair-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(140px, 1fr)) auto auto;
  align-items: end;
  gap: var(--space-4);
  padding: 14px;
  border: 1px solid rgba(169, 116, 197, .28);
  border-radius: var(--radius-md);
  background: rgba(10, 18, 24, .82);
}

.indexer-repair-panel > div:first-child,
.indexer-repair-panel output {
  display: grid;
  gap: 4px;
}

.indexer-repair-panel strong {
  color: var(--text);
}

.indexer-repair-panel strong i {
  color: var(--accent);
  margin-right: 6px;
}

.indexer-repair-panel span,
.indexer-repair-panel output {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.indexer-repair-panel label {
  display: grid;
  gap: 5px;
}

.indexer-repair-panel input,
.indexer-repair-panel select {
  min-width: 0;
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0d141a;
  color: var(--text);
  padding: 0 10px;
}

.indexer-repair-panel .repair-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 150px;
  height: 36px;
}

.indexer-repair-panel .repair-check input {
  width: 16px;
  height: 16px;
}

.indexer-repair-panel button {
  height: 36px;
  white-space: nowrap;
}

.indexer-repair-panel output {
  grid-column: 1 / -1;
  min-height: 18px;
}

.indexer-author-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-5);
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: var(--radius-md);
  background: rgba(13, 18, 27, .86);
}

.author-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.author-panel-head > div:first-child {
  display: grid;
  gap: 4px;
}

.author-panel-head strong {
  color: var(--text);
}

.author-panel-head strong i {
  color: #c084fc;
  margin-right: 6px;
}

.author-panel-head span,
.author-panel-metrics small,
.author-verify-form span,
.author-verify-form output {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.author-panel-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, auto));
  gap: var(--space-3);
}

.author-panel-metrics span {
  display: grid;
  gap: 2px;
  min-width: 88px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(6, 12, 18, .72);
}

.author-panel-metrics b {
  color: var(--text);
  font-size: 17px;
}

.author-verify-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) auto auto minmax(150px, auto);
  gap: var(--space-4);
  align-items: end;
}

.author-verify-form label {
  display: grid;
  gap: 5px;
}

.author-verify-form input,
.author-verify-form select {
  min-width: 0;
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0d141a;
  color: var(--text);
  padding: 0 10px;
}

.author-verify-form button {
  height: 36px;
  white-space: nowrap;
}

.author-verify-form output {
  grid-column: 1 / -1;
  min-height: 18px;
}

.indexer-card .source-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  align-items: start;
  gap: var(--space-5);
  justify-content: stretch;
}

.indexer-title {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.indexer-title strong,
.indexer-title span {
  display: block;
  min-width: 0;
}

.indexer-title strong {
  line-height: 1.1;
}

.indexer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  max-width: 185px;
}

.indexer-card .source-head img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 2px;
  background: #64748b;
  box-shadow: 0 0 14px #64748b;
}

.icon-control {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  margin-left: 0;
  border-color: color-mix(in srgb, var(--source), #27323d 70%);
  color: var(--source);
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 760px) {
  .indexer-repair-panel {
    grid-template-columns: 1fr;
  }

  .author-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .author-panel-metrics,
  .author-verify-form {
    grid-template-columns: 1fr;
  }

  .indexer-card .source-head {
    grid-template-columns: 1fr;
  }

  .indexer-actions {
    justify-content: flex-start;
    max-width: none;
  }
}

.indexer-card .source-head .icon-control:first-of-type {
  margin-left: 0;
}

.icon-control.start {
  color: #22c55e;
  border-color: #14532d;
  background: rgba(34, 197, 94, .08);
}

.icon-control.stop {
  color: #f87171;
  border-color: #7f1d1d;
  background: rgba(248, 113, 113, .1);
  box-shadow: 0 0 14px rgba(248, 113, 113, .12);
}

.icon-control.detail {
  color: #a78bfa;
  border-color: #5b21b6;
  background: rgba(124, 58, 237, .08);
}

.icon-control.seed {
  color: #34d399;
  border-color: #047857;
  background: rgba(16, 185, 129, .08);
}

.icon-control.browser {
  color: #f472b6;
  border-color: #9d174d;
  background: rgba(236, 72, 153, .08);
}

.icon-control.settings {
  color: #facc15;
  border-color: #854d0e;
  background: rgba(250, 204, 21, .08);
}

.icon-control.latest {
  color: #38bdf8;
  border-color: #075985;
  background: rgba(14, 165, 233, .08);
}

.icon-control.recover {
  color: #38bdf8;
  border-color: #075985;
  background: rgba(14, 165, 233, .08);
}

.icon-control.clear {
  color: #94a3b8;
  border-color: #334155;
  background: rgba(148, 163, 184, .06);
}

.icon-control.retry {
  color: #f59e0b;
  border-color: #92400e;
  background: rgba(245, 158, 11, .08);
}

.icon-control:disabled {
  opacity: .5;
}

.indexer-card.indicator-running .status-dot {
  background: #22c55e;
  box-shadow: 0 0 14px #22c55e;
}

.indexer-card.indicator-warning .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 14px #f59e0b;
}

.indexer-card.indicator-off .status-dot {
  background: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, .8);
}

.indexer-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  border-bottom: 1px solid rgba(39, 50, 61, .7);
  padding: 9px 0;
}

.indexer-line:first-of-type {
  margin-top: 12px;
}

.indexer-line strong {
  color: #dce6ef;
  font-size: 14px;
  text-align: right;
}

.indexer-line.repair-line strong {
  color: #f8d48a;
}

.indexer-line.repair-line span {
  color: #fbbf24;
}

.indexer-line span,
.indexer-card p,
.indexer-card small {
  color: var(--muted);
}

.indexer-card p {
  margin: 10px 0 4px;
}

.indexer-card .status-message {
  display: block;
  min-height: 32px;
  color: #b7c2cc;
}

.indexer-card .status-message.problem {
  color: #fbbf24;
}

.progress-track {
  height: 8px;
  background: #0b1116;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--line);
}

.progress-track span {
  display: block;
  height: 100%;
  background: var(--source);
  box-shadow: 0 0 12px var(--source);
}

.progress-track.quality-scanning span {
  background: #64748b;
  box-shadow: none;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: 14px;
}

.frontier-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--space-4);
  margin-top: 14px;
}

.frontier-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--source), var(--line) 70%);
  border-radius: var(--radius-md);
  background: rgba(13, 20, 26, .72);
}

.frontier-source-card.warn {
  border-color: rgba(245, 158, 11, .45);
}

.frontier-source-card strong,
.frontier-source-card small {
  display: block;
  min-width: 0;
}

.frontier-source-card small,
.frontier-row small {
  color: var(--muted);
}

.frontier-table {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  overflow-x: auto;
}

.frontier-row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(190px, 1.2fr) minmax(130px, .8fr) minmax(120px, .7fr) minmax(130px, .8fr) minmax(190px, 1fr) 116px;
  gap: var(--space-4);
  align-items: center;
  min-width: 1080px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--source, #a974c5), var(--line) 78%);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .66);
}

.frontier-head {
  border-color: var(--line);
  color: var(--muted);
  background: rgba(23, 31, 39, .84);
  font-size: var(--text-sm);
  font-weight: 900;
  text-transform: uppercase;
}

.frontier-row span {
  min-width: 0;
}

.frontier-row strong,
.frontier-row b,
.frontier-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frontier-erroring,
.frontier-stale-claim {
  border-color: rgba(255, 93, 98, .46);
}

.frontier-duplicate-heavy,
.frontier-stalled {
  border-color: rgba(245, 158, 11, .48);
}

.frontier-paused,
.frontier-scheduled,
.frontier-cooldown,
.frontier-exhausted {
  opacity: .78;
}

.frontier-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.credential-card {
  display: grid;
  gap: var(--space-4);
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--source), #27323d 75%);
  border-radius: var(--radius-md);
  padding: 14px;
}

.credential-card.configured {
  border-color: color-mix(in srgb, var(--source), var(--accent) 35%);
}

.credential-card.configured .status-dot {
  background: #22c55e;
  box-shadow: 0 0 14px #22c55e;
}

.credential-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.credential-card input,
.credential-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 10px 11px;
  outline: none;
}

.credential-card input:focus,
.credential-card select:focus {
  border-color: var(--source);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--source), transparent 78%);
}

.credential-card button {
  justify-self: start;
  color: var(--source);
  border-color: color-mix(in srgb, var(--source), #27323d 55%);
}

.credential-actions,
.maintenance-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.credential-actions button,
.maintenance-actions button {
  flex: 1 1 150px;
}

.credential-card output,
.maintenance-card output {
  display: block;
  min-height: 18px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.maintenance-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px 140px minmax(260px, auto);
  align-items: end;
  gap: var(--space-5);
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  padding: 14px;
}

.maintenance-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.maintenance-card input,
.maintenance-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 10px 11px;
}

.maintenance-card output {
  grid-column: 1 / -1;
}

.job-list {
  margin-top: 14px;
  display: grid;
  gap: var(--space-3);
}

.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .62);
}

.job-row strong,
.job-row span,
.job-row small {
  display: block;
}

.job-row span,
.job-row small {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.job-row.running {
  border-color: rgba(20, 184, 166, .45);
}

.job-row.failed {
  border-color: rgba(248, 113, 113, .45);
}

@media (max-width: 980px) {
  .maintenance-card {
    grid-template-columns: 1fr;
  }
}

.source-card img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.source-count {
  font-size: 30px;
  font-weight: 900;
  margin: 16px 0;
  color: var(--source);
}

.log-list {
  display: grid;
  gap: var(--space-3);
  margin-top: 14px;
}

.log-row {
  justify-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--panel-2);
}

.log-row p {
  margin: 0;
}

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--muted);
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

.first-use-state {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(220px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 2px;
  border-block: 1px solid var(--line);
  text-align: left;
}

.first-use-state.compact {
  padding-block: 16px;
}

.first-use-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--accent-2);
  font-size: 1.05rem;
}

.first-use-content {
  min-width: 0;
}

.first-use-content .eyebrow,
.first-use-content h3,
.first-use-content > p:last-child {
  margin: 0;
}

.first-use-content h3 {
  margin-top: 3px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.3;
}

.first-use-content > p:last-child {
  max-width: 720px;
  margin-top: 5px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

.first-use-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.first-use-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.first-use-action.primary {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}

.first-use-action:hover,
.first-use-action:focus-visible {
  border-color: var(--accent-2);
  color: var(--accent-2);
  outline: none;
}

@media (max-width: 900px) {
  .first-use-state {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .first-use-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .first-use-state {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: 15px;
  }

  .first-use-icon {
    width: 38px;
    height: 38px;
  }

  .first-use-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .first-use-action {
    width: 100%;
  }
}

@media (max-width: 980px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .comment-actions,
  .comment-edit-form,
  .blog-comment > p,
  .collection-comment > p {
    margin-left: 0;
  }
}

.public-page {
  display: block;
  overflow-x: clip;
  background:
    radial-gradient(circle at 20% 0%, rgba(169, 116, 197, .08), transparent 34rem),
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 32rem),
    var(--bg);
}

.search-app {
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter);
}

.public-header,
.public-brand,
.public-nav,
.public-search-box,
.public-source-row,
.public-summary,
.public-card-meta,
.public-card-stats {
  display: flex;
  align-items: center;
}

.public-header {
  /* Keep navigation aligned even when the page below uses a narrower content shell. */
  --public-header-width: min(calc(var(--public-viewport-width, 100vw) - 2 * var(--public-page-gutter)), calc(var(--public-page-max) - 2 * var(--public-page-gutter)));
  width: var(--public-header-width);
  justify-content: space-between;
  margin-inline: calc((100% - var(--public-header-width)) / 2);
  margin-bottom: 34px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 45;
  padding: 10px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  isolation: isolate;
}

.public-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background: rgba(8, 14, 20, calc(var(--dock-progress) * .58));
  border-bottom: 1px solid rgba(148, 163, 184, calc(var(--dock-progress) * .08));
  opacity: clamp(0, calc(var(--dock-progress) * 4), 1);
  -webkit-backdrop-filter: blur(calc(var(--dock-progress) * 14px)) saturate(calc(100% + var(--dock-progress) * 35%));
  backdrop-filter: blur(calc(var(--dock-progress) * 14px)) saturate(calc(100% + var(--dock-progress) * 35%));
  pointer-events: none;
}

.public-brand {
  gap: var(--space-5);
  color: var(--text);
  text-decoration: none;
  align-items: center;
  flex-direction: row;
}

/* The shared navigation brand is one image: the full MeshScout lockup
   (magnifier + wordmark). In the compact/docked header it shrinks to the
   icon-only mark so the search field keeps its room. */
.brand-logo {
  display: block;
  /* The resting masthead brand; the docked header uses .brand-logo-mark. */
  height: clamp(38px, 3vw, 54px);
  width: auto;
  object-fit: contain;
}

.brand-logo-mark {
  display: none;
  height: clamp(36px, 4vw, 52px);
  width: auto;
}

.brand-icon-nav {
  width: clamp(46px, 3.8vw, 64px);
  height: clamp(46px, 3.8vw, 64px);
  object-fit: contain;
}

.brand-wordmark {
  color: #edf2f7;
  font-size: clamp(20px, 1.35vw, 28px);
  font-weight: 950;
  letter-spacing: .01em;
  line-height: 1;
}

.public-brand strong,
.public-brand small {
  display: block;
}

.public-brand small {
  color: var(--muted);
}

.public-nav a,
.public-nav .nav-dropdown-button {
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
}

.public-nav {
  gap: var(--space-4);
}

.nav-menu-group {
  position: relative;
  display: inline-flex;
}

/* Header navigation buttons: rounded pills, flat ground, hairline that lights
   on hover. The dropdown menu items stay softly squared below, because they are
   full-width stacked rows where a pill reads as a lozenge. */
.public-nav a,
.nav-dropdown-button {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 14px;
  min-height: 42px;
  line-height: 1;
  background: transparent;
  letter-spacing: .01em;
}
.public-menu-popover a,
.nav-menu-popover a {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0 11px;
  min-height: 40px;
  line-height: 1;
  background: transparent;
  letter-spacing: .01em;
}

.public-nav a:hover,
.public-menu-popover a:hover,
.nav-menu-popover a:hover,
.nav-dropdown-button:hover,
.nav-dropdown-button:focus-visible {
  border-color: var(--green);
  color: var(--green);
}

.public-nav a,
.public-menu-popover a,
.nav-menu-popover a,
.nav-dropdown-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.locale-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.locale-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 11px;
  /* Matches the nav buttons; the filled tile read heavier than its neighbours. */
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  min-height: 38px;
  min-width: 58px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.locale-picker-button:hover,
.locale-picker-button[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(169, 116, 197, .13);
}

.locale-flag {
  width: 25px;
  height: 19px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 18px rgba(0, 0, 0, .25);
  line-height: 1;
  flex: 0 0 auto;
}

.locale-name {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locale-chevron {
  font-size: 10px;
  color: var(--muted);
  pointer-events: none;
  transition: transform .18s ease;
}

.locale-picker-button[aria-expanded="true"] .locale-chevron {
  transform: rotate(180deg);
}

.locale-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 3000;
  display: grid;
  gap: 4px;
  min-width: 220px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(11, 17, 22, .96);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px);
}

.locale-menu[hidden] {
  display: none;
}

.locale-menu-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 9px 10px;
  color: var(--text);
  background: transparent;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
}

.locale-menu-item:hover,
.locale-menu-item[aria-checked="true"] {
  border-color: rgba(169, 116, 197, .38);
  background: rgba(169, 116, 197, .12);
}

.locale-check {
  color: var(--accent);
  opacity: 0;
}

.locale-menu-item[aria-checked="true"] .locale-check {
  opacity: 1;
}

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

.user-avatar-inline {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  object-fit: cover;
  background: var(--green);
  color: #04110f;
  font-size: var(--text-xs);
  font-weight: 900;
}

.public-menu-button {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  gap: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 12px 28px rgba(0, 0, 0, .22);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.public-menu-button span {
  position: absolute;
  left: 13px;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: #cdd8e2;
  transform-origin: center;
  transition: top .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1), opacity .16s ease, width .18s ease, background .18s ease;
}

.public-menu-button span:nth-child(1) {
  top: 15px;
}

.public-menu-button span:nth-child(2) {
  top: 22px;
  width: 15px;
}

.public-menu-button span:nth-child(3) {
  top: 29px;
}

.public-menu-button:hover,
.public-menu-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background:
    radial-gradient(circle at 30% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%),
    rgba(12, 18, 24, .88);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent), 0 14px 34px rgba(0, 0, 0, .3);
}

.public-menu-button:active {
  transform: scale(.96);
}

.public-menu-button[aria-expanded="true"] span {
  background: var(--green);
}

.public-menu-button[aria-expanded="true"] span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}

.public-menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: translateX(8px) scaleX(.35);
}

.public-menu-button[aria-expanded="true"] span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

.public-menu-popover[hidden] {
  display: none;
}

.public-menu-popover {
  position: fixed;
  top: 62px;
  right: max(16px, calc((100vw - 1760px) / 2 + 24px));
  z-index: 50;
  min-width: 190px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 78px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: var(--space-3);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(10, 16, 21, .96);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .42);
  backdrop-filter: blur(16px);
}

.public-menu-popover a {
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}

.nav-sign-out {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: rgba(19, 26, 32, .72);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.nav-sign-out[hidden] { display: none; }
.nav-sign-out:hover,
.nav-sign-out:focus-visible { border-color: var(--green); color: var(--green); }
.nav-sign-out:disabled { opacity: .6; cursor: wait; }
.public-menu-popover .nav-sign-out { min-height: 44px; width: 100%; }

/* Sign out lives inside the profile dropdown now: a full-width menu row. */
.nav-menu-popover .nav-sign-out {
  justify-content: flex-start;
  width: 100%;
  min-height: 40px;
  margin-top: var(--space-2);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-top: var(--space-3);
  color: #fca5a5;
}
.nav-menu-popover .nav-sign-out:hover,
.nav-menu-popover .nav-sign-out:focus-visible { border-color: transparent; border-top-color: var(--line); color: #fca5a5; background: transparent; }

/* Keep account utilities reachable before the full desktop row gets crowded. */
@media (max-width: 1240px) {
  /* The navigation row stays; it is the same set as the mobile tab bar and it
     keeps the docked header from collapsing into a lone hamburger. The row
     wraps tightly rather than disappearing. */
  .public-header .public-nav { gap: var(--space-2); }
  .public-header .public-nav a,
  .public-header .public-nav .nav-dropdown-button { padding: 0 8px; }
  .public-header .public-menu-button { display: none; }
}

#publicSignOutError {
  position: fixed;
  z-index: 2100;
  inset: auto 16px max(16px, env(safe-area-inset-bottom)) auto;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #131a20;
  color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}

.mobile-menu-group {
  display: grid;
  gap: var(--space-3);
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .44);
}

.mobile-menu-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.auth-provider-popover[hidden] {
  display: none;
}

.auth-provider-popover,
.account-popover,
.collections-popover {
  position: fixed;
  z-index: 60;
  /* Sits above the mobile tab bar when opened from the Account tab. */
  --popover-bottom-clearance: 0px;
  width: min(320px, calc(100vw - 28px));
  display: grid;
  gap: var(--space-4);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(10, 16, 21, .98);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .46);
  backdrop-filter: blur(16px);
}

.nav-dropdown-button {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.nav-dropdown-button:hover,
.nav-dropdown-button:focus-visible {
  box-shadow: none;
}

.nav-caret {
  font-size: 0.72rem;
  color: var(--muted);
}

.nav-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 85;
  width: min(260px, calc(100vw - 28px));
  display: grid;
  gap: var(--space-3);
  padding: 8px;
  border: 1px solid rgba(169, 116, 197, 0.28);
  border-radius: 10px;
  background: rgba(12, 18, 25, 0.97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  opacity: 1;
  pointer-events: auto;
}

.nav-menu-popover[hidden] {
  display: none;
}

.nav-menu-popover a {
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}

.account-popover[hidden] {
  display: none;
}

.collections-popover[hidden] {
  display: none;
}

.auth-provider-popover strong,
.account-popover strong,
.collections-popover strong {
  color: var(--text);
}

.auth-provider-popover p,
.account-popover output {
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.account-popover form,
.account-popover label {
  display: grid;
  gap: var(--space-3);
}

.account-popover label span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.account-popover .account-checkbox {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .55);
}

.account-popover .account-checkbox input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--green);
}

.account-popover input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .82);
  color: var(--text);
  padding: 10px;
}

.account-popover input:disabled {
  opacity: .72;
  cursor: not-allowed;
}

.account-popover form > div {
  display: flex;
  gap: var(--space-3);
}

.account-popover-actions {
  display: grid;
  gap: var(--space-3);
}

.account-popover-actions a,
.account-popover-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .72);
  color: var(--text);
  padding: 0 12px;
  font-weight: 900;
  text-decoration: none;
}

.account-popover-actions a:hover,
.account-popover-actions button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.account-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .72);
  color: var(--text);
  padding: 0 12px;
  font-weight: 900;
  text-decoration: none;
}

.account-menu-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

.account-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.username-setup[hidden] {
  display: none;
}

.username-setup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 7, 11, .78);
  backdrop-filter: blur(12px);
}

.username-setup-panel {
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .58);
  padding: 24px;
}

.username-setup-panel h2,
.username-setup-panel p {
  margin: 0;
}

.username-setup-panel p,
.username-setup-panel output {
  color: var(--muted);
  line-height: 1.45;
}

.username-setup-panel label {
  display: grid;
  gap: 7px;
}

.username-setup-panel label span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.username-setup-panel input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .9);
  color: var(--text);
  padding: 12px;
  font-size: 16px;
}

.username-setup-panel > div:last-child {
  display: flex;
  gap: var(--space-4);
}

#collectionsList {
  display: grid;
  gap: 7px;
}

#collectionsList button {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  text-align: left;
}

#collectionsList b {
  color: var(--green);
}

.small-empty {
  padding: 12px;
  font-size: var(--text-sm);
}

#authProviderList {
  display: grid;
  gap: var(--space-3);
}

.linked-provider-section {
  display: grid;
  gap: var(--space-3);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.linked-provider-section > span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

#linkedProviderList {
  display: grid;
  gap: 7px;
}

.auth-provider-option,
.linked-provider-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .82);
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.linked-provider-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 8px;
}

.auth-provider-option:hover,
.linked-provider-row:hover {
  border-color: var(--green);
}

.linked-provider-row.linked {
  border-color: rgba(20, 184, 166, .38);
}

.auth-provider-option > .provider-icon,
.linked-provider-row > .provider-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: #f8fafc;
  color: #4285f4;
  overflow: hidden;
  font-size: 18px;
}

.linked-provider-row > .provider-icon {
  width: 28px;
  height: 28px;
}

.auth-provider-option.discord > .provider-icon,
.linked-provider-row.discord > .provider-icon {
  background: #5865f2;
  color: #fff;
}

.provider-icon i {
  display: block;
  line-height: 1;
}

.auth-provider-option small,
.auth-provider-option strong,
.linked-provider-row small,
.linked-provider-row strong {
  display: block;
}

.auth-provider-option small,
.linked-provider-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.linked-provider-row > span {
  color: var(--green);
  font-size: var(--text-sm);
  font-weight: 900;
}

.linked-provider-row button {
  padding: 7px 9px;
  font-size: var(--text-sm);
}

.auth-provider-option.disabled,
.linked-provider-row.disabled {
  opacity: .55;
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

.public-nav-search {
  display: none;
  min-width: 0;
}

/* Page head: an index masthead, not a centered landing hero. Lead column on
   the left, live readout on the right, both on the same content grid as the
   page body. */
.page-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-8); align-items: start; width: 100%; max-width: var(--public-page-max); margin: 0 auto; padding: clamp(1.75rem, 4vw, 3.25rem) var(--public-page-gutter) 2.25rem; text-align: left; }
.page-head-lead { min-width: 0; }
.page-head-lead h1 { margin: .5rem 0 1rem; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: 0; max-width: 22ch; }
.page-head-lead > p:not(.eyebrow) { max-width: 62ch; margin: 0 0 1.25rem; color: var(--muted); font-size: var(--text-md); line-height: 1.6; }
.page-head-aside { min-width: 0; border-top: 1px solid var(--line); }
.page-head-aside .row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); }
.page-head-aside .row dt, .page-head-aside .row .label { color: var(--muted); }
.page-head-aside .row dd, .page-head-aside .row .value { margin: 0; color: var(--text); }
.page-head-aside .page-head-note { margin: 0; padding: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.page-head-aside .watch-summary { display: grid; gap: 0; margin: 0; }
.page-head-aside .watch-summary span { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); color: var(--muted); }
.page-head-aside .watch-summary strong { color: var(--text); font-size: var(--text-md); }
/* A head inside an already-guttered shell aligns to the shell body instead of
   insetting a second time. */
.collection-shell > .page-head, .author-shell > .page-head, .watches-shell > .page-head, .quality-shell > .page-head, .companion-shell > .page-head { padding-inline: 0; }
@media (max-width: 900px) { .page-head { grid-template-columns: 1fr; gap: var(--space-6); } .page-head-lead h1 { max-width: none; } }


/* Homepage masthead: a search engine, not a landing page. The headline and the
   search own the left column and the top of the page; the source list is a
   compact right-hand ledger that never competes with the search. */
.search-hero {
  width: 100%;
  max-width: var(--public-page-max);
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3.25rem) var(--public-page-gutter) 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, .9fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  text-align: left;
}

.search-hero-lead {
  min-width: 0;
}

.search-hero > .search-hero-lead > :is(.eyebrow, h1, .hero-copy, .popular-searches) {
  opacity: max(.08, calc(1 - var(--dock-progress)));
  transform: translateY(calc(var(--dock-progress) * -22px));
}

.search-hero h1 {
  max-width: 20ch;
  margin: .6rem 0 1rem;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.hero-copy {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 1.4rem;
}

#heroSearchMount {
  position: relative;
  z-index: 2;
  width: 100%;
  opacity: max(.72, calc(1 - (var(--dock-progress) * .2)));
  transform: translateY(calc(var(--dock-progress) * -12px)) scale(calc(1 - (var(--dock-progress) * .045)));
  transform-origin: left top;
}

/* Ledger column: a compact title plus the sources as hairline rows. It reads
   like the legend on a drawing and never competes with the search. */
.search-hero-ledger {
  min-width: 0;
  align-self: stretch;
  border-top: 1px solid var(--line);
}

.search-hero-ledger-title {
  margin: 0;
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

/* Compact animation switch inside the hero ledger (desktop only; the ledger is
   hidden on mobile, where the header utility button takes over). */
.hero-effects-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  cursor: pointer;
}
.hero-effects-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hero-effects-track {
  flex: 0 0 auto;
  position: relative;
  width: 30px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 14, 20, .8);
  transition: background .18s ease, border-color .18s ease;
}
.hero-effects-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .18s ease, background .18s ease;
}
.hero-effects-toggle input:checked + .hero-effects-track {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.hero-effects-toggle input:checked + .hero-effects-track .hero-effects-thumb {
  transform: translateX(14px);
  background: var(--accent);
}
.hero-effects-toggle input:focus-visible + .hero-effects-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hero-effects-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}
.hero-effects-toggle:hover .hero-effects-label { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .hero-effects-track, .hero-effects-thumb { transition: none; }
}

.search-hero-ledger .source-freshness-panel {
  margin: 0;
  width: 100%;
}

.search-hero-ledger .source-freshness-rail {
  display: grid;
  justify-content: stretch;
  gap: 0;
  font-size: 11px;
}

.search-hero-ledger .source-freshness-label,
.search-hero-ledger .source-freshness-note {
  min-height: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  justify-content: flex-start;
}

@media (max-width: 1100px) {
  .search-hero {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }

  .search-hero h1 {
    max-width: none;
  }

  /* On narrow screens the source list moves into the filter sidebar, so the
     ledger column would render as an empty title. Hide it. */
  .search-hero-ledger {
    display: none;
  }
}

@media (max-width: 1100px) {
  .search-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "search"
      "aside";
    row-gap: var(--space-5);
  }

  .search-hero h1 {
    max-width: none;
  }

  /* On narrow screens the source list moves into the filter sidebar, so the
     ledger column would render as an empty title. Hide it. */
  .search-hero-ledger {
    display: none;
  }
}

@media (max-width: 980px) {
  .search-hero {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }

  .search-hero h1 {
    max-width: none;
  }

  /* On narrow screens the source list moves into the filter sidebar, so the
     ledger column would render as an empty title. Hide it. */
  .search-hero-ledger {
    display: none;
  }
}

#heroSearchMount {
  width: min(1280px, 100%);
  margin-inline: auto;
}

#heroSearchMount .public-search-box {
  width: 100%;
  max-width: none;
}

.public-search-box {
  position: relative;
  min-height: 68px;
  background: var(--panel);
  border: 1px solid var(--line);
  /* One radius for the search field in every state, resting or docked, so it
     never snaps from hard edges to soft curves as the page scrolls. */
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  gap: var(--space-5);
  max-width: none;
}
.public-search-box:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.public-search-box input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: 18px;
}

.public-source-row {
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 14px;
}

/* Sources render as ledger rows: icon, name, record count, status dot. Two
   columns on wide screens so the list fills the ledger without floating. */
#heroSourcesMount {
  width: 100%;
  margin: 0;
}

#heroSourcesMount .public-source-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin: 0;
}

#heroSourcesMount .public-source-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

#heroSourcesMount .public-source {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  gap: var(--space-3);
  border: 0;
  background: transparent;
  justify-content: flex-start;
}

/* The status dot and the count share one right edge so every row's figure
   lines up in a single column, regardless of how long the source name is. */
#heroSourcesMount .public-source span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#heroSourcesMount .public-source small {
  order: 2;
  flex: 0 0 auto;
  min-width: 6.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 600;
}

#heroSourcesMount .public-source::after {
  order: 3;
  flex: 0 0 auto;
  margin-left: var(--space-3);
}

#heroSourcesMount .public-source span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#heroSourcesMount .public-source small {
  order: 2;
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
}

#heroSourcesMount .public-source-hub-link {
  width: 26px;
  min-width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--edge);
  background: transparent;
  color: var(--muted);
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}

#heroSourcesMount .public-source-option:is(:hover, :focus-within) .public-source-hub-link {
  opacity: 1;
}

#heroSourcesMount .public-source-hub-link:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  outline: none;
}

#heroSourcesMount .public-source img {
  width: 20px;
  height: 20px;
}

@media (max-width: 620px) {
  #heroSourcesMount .public-source-row {
    grid-template-columns: 1fr;
  }
}

.public-source-option {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 38px;
  align-items: stretch;
  min-width: 0;
}

.public-source-option > .public-source {
  min-width: 0;
  border-radius: 8px 0 0 8px;
}

.public-source-hub-link {
  display: grid;
  width: 38px;
  min-width: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--source) 62%, var(--line));
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--source) 8%, var(--panel));
  color: var(--source);
  text-decoration: none;
}

.public-source-hub-link:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--source) 18%, var(--panel));
  color: color-mix(in srgb, var(--source) 72%, white);
  outline: 2px solid color-mix(in srgb, var(--source) 55%, transparent);
  outline-offset: -2px;
}

.public-source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  position: relative;
  padding-right: 10px;
  border-radius: var(--edge);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.public-source.active {
  color: var(--source);
  border-color: var(--source);
}

.public-source::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 10px #64748b;
}

.public-source.running::after,
.public-source.fresh::after,
.public-source.live::after,
.public-source.idle::after {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.public-source.needs-api::after,
.public-source.needs-credentials::after,
.public-source.needs-research::after,
.public-source.stale::after,
.public-source.delayed::after,
.public-source.warming::after,
.public-source.paused::after {
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
}

.public-source img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.public-source small {
  color: var(--source);
  font-weight: 900;
}

.public-coverage {
  color: var(--muted);
  font-weight: 800;
  margin: 12px 0 0;
}

.popular-searches {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.popular-searches[hidden] {
  display: none;
}

.popular-searches-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .38);
  color: #cbd5e1;
  backdrop-filter: blur(12px);
}

.popular-searches-label i {
  color: var(--accent);
}

.popular-searches > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.popular-search-chip {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .36);
}

.popular-search-chip button {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #dbe3ec;
  padding: 5px 9px;
  font-size: var(--text-sm);
  font-weight: 900;
}

.popular-search-chip button:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.popular-search-chip button:disabled {
  cursor: default;
  color: var(--muted);
}

.popular-search-chip button:disabled:hover {
  color: var(--muted);
  background: transparent;
}

.popular-search-chip-muted {
  border-color: rgba(148, 163, 184, .14);
  background: rgba(8, 14, 20, .42);
}

.home-popular-authors {
  min-width: 0;
  margin-top: 26px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-popular-authors[hidden] {
  display: none;
}

.home-popular-authors-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.home-popular-authors-heading .eyebrow {
  margin: 0 0 4px;
}

.home-popular-authors-heading h2 {
  margin: 0;
  font-size: 1.45rem;
}

.home-popular-authors-heading p:last-child {
  max-width: 720px;
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.home-popular-authors-heading button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(10, 16, 22, .7);
  color: var(--text);
  font-weight: 900;
}

.home-popular-authors-heading button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.home-popular-authors-heading button:disabled {
  opacity: .55;
  cursor: wait;
}

.home-popular-authors-heading button > i {
  margin: 0;
  line-height: 1;
}

.home-popular-authors-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  /* Headroom for the card hover/focus lift. A scroll container clips overflow,
     so the 2px upward translate was being cut off at the top edge. */
  padding: 8px 0 8px;
  scroll-padding-top: 8px;
}

.home-popular-author-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  min-height: 98px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: var(--radius-md);
  background: rgba(12, 20, 27, .84);
  color: var(--text);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.home-popular-author-card:hover,
.home-popular-author-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: rgba(16, 25, 34, .96);
}

.home-popular-author-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.home-popular-author-image {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(5, 10, 15, .85);
  color: var(--accent);
  font-size: 1.45rem;
}

.home-popular-author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
}

.home-popular-author-body {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.home-popular-author-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.home-popular-author-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .98rem;
}

.home-popular-author-name i {
  flex: 0 0 auto;
  color: #34d399;
  font-size: .76rem;
}

.home-popular-author-sources,
.home-popular-author-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.home-popular-author-sources span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 92px;
  gap: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Source chips are icon-only; the name lives in the title/aria-label. */
.home-popular-author-sources .home-popular-author-source-icon {
  max-width: none;
  overflow: visible;
  cursor: default;
}

.home-popular-author-sources .home-popular-author-source-icon img {
  width: 16px;
  height: 16px;
}

.home-popular-author-sources img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  object-fit: contain;
  border-radius: 3px;
}

.home-popular-author-metrics {
  gap: var(--space-4);
  color: #9fb0be;
  font-size: .72rem;
  font-weight: 900;
}

.home-popular-author-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.home-popular-author-metrics i,
.home-popular-author-arrow {
  color: var(--accent);
}

.home-popular-author-arrow {
  padding-right: 2px;
  font-size: .78rem;
}

@media (max-width: 760px) {
  .home-popular-authors {
    margin-top: 18px;
    padding: 18px 0 20px;
  }

  .home-popular-authors-heading {
    align-items: start;
  }

  .home-popular-authors-heading h2 {
    font-size: 1.25rem;
  }

  .home-popular-authors-heading p:last-child {
    font-size: .86rem;
  }

  .home-popular-authors-heading button {
    width: 36px;
    height: 36px;
    padding: 0;
  }

  .home-popular-authors-heading button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .home-popular-authors-track {
    grid-auto-columns: minmax(258px, 84vw);
  }
}

.popular-search-remove {
  width: 28px;
  padding: 0;
  border-left: 1px solid rgba(148, 163, 184, .18) !important;
  color: #fda4af !important;
}

.source-freshness-panel {
  width: min(1460px, 100%);
  margin: 10px auto 0;
}

.source-freshness-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.source-freshness-label,
.source-freshness-note {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}

.source-freshness-label,
.source-freshness-note {
  gap: 7px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: var(--radius-md);
  padding: 6px 9px;
  background: rgba(10, 16, 22, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.source-freshness-label {
  color: var(--text);
}

.source-freshness-label i {
  color: var(--accent);
}

/* Catalog readout: a hairline strip of figures, not six gradient cards. Mono
   numbers with a mono label above, separated by rules. */
.public-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  max-height: var(--summary-max-height);
  /* Full width of the padded page, matching the popular-creators section. The
     extra gutter here made the strip sit narrower than the lanes beside it. */
  margin: 0 0 var(--space-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}

.public-summary article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  box-shadow: none;
}

.public-summary article:last-child {
  border-right: 0;
}

.public-summary .stat-icon {
  grid-row: 1 / 3;
  color: var(--accent);
  /* Fill the 50px square: the shared rule caps the glyph, leaving it small. */
  font-size: 24px;
  opacity: .92;
}

.public-summary strong,
.public-summary span {
  display: block;
}

.public-summary strong {
  min-width: 0;
  color: var(--text);
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight: 600;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.public-summary span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Loading skeletons: while a stat, count or lane is still resolving, show a
   shaped placeholder instead of a misleading "0". The element keeps its
   accessible label; only the visual is swapped. */
.skeleton {
  position: relative;
  display: inline-block;
  min-width: 2.4ch;
  color: transparent !important;
  border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  overflow: hidden;
  /* Reserve the same line box as the real value so nothing shifts on load. */
  line-height: inherit;
  user-select: none;
  pointer-events: none;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 12%, transparent), transparent);
  animation: skeleton-sweep 1.35s ease-in-out infinite;
}
.skeleton-block { display: block; width: 100%; }
.skeleton-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Placeholder result cards reuse the real card shell but never react to hover
   and never show a cursor, so they read as "loading" rather than "clickable". */
.skeleton-card {
  cursor: default;
  pointer-events: none;
}
.skeleton-card:hover,
.skeleton-card:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.skeleton-card .public-card-image {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: 0;
}
/* Filter-value autocomplete for the search box (license:, author:, etc.). */
.search-filter-autocomplete {
  position: absolute;
  z-index: 61;
  top: calc(100% + 8px);
  left: 0;
  width: min(460px, calc(100vw - 28px));
  max-height: min(52vh, 420px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-overlay);
  text-align: left;
}
.search-filter-autocomplete-title,
.search-filter-autocomplete-empty {
  margin: 6px 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.search-filter-option {
  width: 100%;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-filter-option i { width: 16px; color: var(--accent); }
.search-filter-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-filter-option-meta { color: var(--muted); font-size: var(--text-xs); }
.search-filter-option:hover,
.search-filter-option.active,
.search-filter-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.search-filter-date { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px 10px; }
.search-filter-date input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-strong, #081017); color: var(--text); font: inherit; }
.search-filter-date-apply { min-height: 40px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line)); border-radius: var(--radius-sm); background: transparent; color: var(--accent); font-weight: 800; cursor: pointer; }
@keyframes skeleton-sweep {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

.public-results {
  display: grid;
  gap: 26px;
  align-items: start;
}

.material-app {
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter);
}

.material-header {
  margin-bottom: 56px;
}

.material-hero {
  max-width: 1080px;
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}

.material-hero h1,
.material-hero p {
  margin: 0;
}

.material-hero h1 {
  max-width: 900px;
  font-size: clamp(38px, 6vw, 74px);
  line-height: .98;
  letter-spacing: 0;
}

.material-hero > p:not(.eyebrow) {
  color: #b7c2cc;
  font-size: 18px;
  line-height: 1.55;
}

.material-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, 220px) auto;
  align-items: center;
  gap: var(--space-4);
  max-width: 980px;
  min-height: 64px;
  padding: 8px 10px 8px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.material-search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.material-search input,
.material-search select,
.material-results-bar select {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .86);
  color: var(--text);
  padding: 11px;
}

.material-search input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  outline: 0;
}

.material-search > i {
  color: var(--accent);
}

.material-search button,
.material-manufacturer-section > header button,
.material-results-footer button,
.material-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.material-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.material-filters {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(13, 20, 26, .82);
  padding: 14px;
}

.material-filter-group {
  display: grid;
  gap: var(--space-3);
}

.material-filter-group > strong {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.material-filter-group > div {
  max-height: 280px;
  overflow: auto;
  display: grid;
  gap: 7px;
  padding-right: 2px;
}

.material-filter-group button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid rgba(148, 163, 184, .14);
  color: var(--muted);
  background: rgba(8, 13, 18, .6);
  text-align: left;
}

.material-filter-group button.active {
  color: var(--source);
  border-color: var(--source);
  box-shadow: 0 0 18px color-mix(in srgb, var(--source) 14%, transparent);
}

.material-filter-group button span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.material-filter-group img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
}

.material-filter-group strong {
  color: var(--green);
}

.material-results-shell {
  display: grid;
  gap: 16px;
}

.material-results-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  position: relative;
  z-index: 2;
  order: 1;
}

.material-results-bar h2,
.material-results-bar p {
  margin: 0;
}

.material-results-bar p,
.material-results-bar label span {
  color: var(--muted);
  font-weight: 800;
}

.material-results-bar label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.material-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.material-results-stage {
  display: grid;
  gap: 22px;
  order: 2;
}

.material-results-footer {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

.material-results-footer[hidden] {
  display: none;
}

.material-results-footer label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-weight: 900;
}

.material-results-footer .public-pagination {
  order: 3;
  margin: 0;
}

.material-landing-mode .material-view-toggle,
.material-landing-mode .material-results-footer {
  display: none;
}

.material-view-toggle {
  justify-self: end;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.material-manufacturer-section {
  display: grid;
  gap: var(--space-5);
}

.material-manufacturer-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.material-manufacturer-section:first-child > header {
  border-top: 0;
  padding-top: 0;
}

.material-manufacturer-section h3,
.material-manufacturer-section p {
  margin: 0;
}

.material-manufacturer-section h3 {
  font-size: 22px;
}

.material-manufacturer-section p {
  color: var(--muted);
  font-weight: 800;
}

.material-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(16, 24, 31, .86);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.material-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.material-card-image {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0a1015;
  overflow: hidden;
}

.material-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.material-card-badges {
  position: absolute;
  inset: 10px 10px auto 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  pointer-events: none;
}

.material-card-badges span,
.material-card-badges strong {
  max-width: 48%;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  background: rgba(5, 10, 14, .72);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 950;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.material-card-badges strong {
  color: var(--green);
  text-align: right;
}

.material-card-body {
  display: grid;
  gap: var(--space-4);
  padding: 13px;
}

.material-card-meta,
.material-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.material-card-meta span,
.material-card-meta strong {
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.material-card-meta span:first-child {
  color: var(--source);
}

.material-card-meta strong {
  color: var(--green);
}

.material-card-meta .material-weight-chip {
  color: var(--text);
  background: color-mix(in srgb, var(--green) 18%, rgba(255, 255, 255, .04));
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}

.material-card h3,
.material-card p {
  margin: 0;
}

.material-card h3 {
  font-size: 17px;
  line-height: 1.25;
}

.material-card h3 a {
  color: var(--text);
  text-decoration: none;
}

.material-card h3 {
  color: var(--text);
}

.material-card p,
.material-card-facts {
  color: #b7c2cc;
  line-height: 1.4;
}

.material-card-facts {
  display: grid;
  gap: 2px;
  min-height: 24px;
  font-weight: 850;
}

.material-card-facts span {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
}

.material-card-id {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1.25;
}

.material-price-row {
  justify-content: space-between;
  margin-top: 2px;
}

.material-price-row strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: 18px;
}

.material-price-row span {
  color: var(--muted);
  text-decoration: line-through;
}

.material-price-row em {
  color: #ff5d6c;
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 950;
}

.material-modal[hidden] {
  display: none;
}

.material-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.material-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
}

.material-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(860px, calc(100vh - 56px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d141a;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .5);
}

.material-modal-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 2;
  margin: 12px 12px 0 0;
}

.material-modal-content {
  display: grid;
  gap: 18px;
  padding: 26px;
}

.material-modal-content header h2,
.material-modal-content header p,
.material-vendor-list h3,
.material-vendor-list p {
  margin: 0;
}

.material-modal-content header h2 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  max-width: 920px;
}

.material-modal-content header > div {
  display: grid;
  gap: var(--space-3);
}

.material-modal-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.material-modal-image {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #081014;
}

.material-modal-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.material-vendor-list {
  display: grid;
  gap: var(--space-4);
}

.material-vendor-list > p {
  color: var(--muted);
  font-weight: 800;
}

.material-vendor-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(150px, auto) auto;
  gap: var(--space-5);
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, .03);
}

.material-vendor-row:hover {
  border-color: var(--green);
}

.material-vendor-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--source);
  font-weight: 950;
}

.material-vendor-row strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: 18px;
}

.material-vendor-row small {
  color: var(--muted);
  font-weight: 800;
}

.material-vendor-row em {
  justify-self: end;
  color: var(--text);
  font-style: normal;
  font-weight: 900;
}

.material-price-row small {
  color: #8fb3d1;
  font-weight: 900;
}

.collections-page,
.collection-detail-page {
  display: grid;
  gap: 18px;
}

.collections-page > header,
.collection-detail-page > header {
  display: grid;
  grid-template-columns: 170px auto minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 30, .72);
  padding: 16px;
}

.collections-page > header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.collection-detail-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.collections-page h3,
.collection-detail-page h3,
.collections-page p,
.collection-detail-page p {
  margin: 0;
}

.collections-page p,
.collection-detail-page p {
  margin-top: 4px;
  color: var(--muted);
}

.collection-detail-actions {
  display: grid;
  gap: var(--space-3);
}

.collection-detail-actions button {
  width: 100%;
}

.collection-detail-visual {
  display: grid;
  place-items: center;
}

.collection-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.collection-description-text {
  max-width: 68ch;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.collection-edit-form {
  display: grid;
  gap: var(--space-3);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 18, .58);
}

.collection-edit-form label {
  display: grid;
  gap: 6px;
}

.collection-edit-form label span,
.collection-dialog-panel label span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.collection-edit-form textarea,
.collection-dialog-panel textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .82);
  color: var(--text);
  padding: 10px;
}

.collection-edit-form output {
  color: var(--muted);
  font-size: var(--text-sm);
}

.collection-visibility-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: var(--space-3);
}

.collection-visibility-toggle input {
  width: 16px !important;
  height: 16px;
  accent-color: var(--green);
}

.collection-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.collection-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 30, .76);
  min-height: 430px;
  padding: 0;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.collection-card:hover {
  border-color: color-mix(in srgb, var(--accent) 64%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .28), 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

.collection-collage,
.collection-hero-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
}

.collection-collage {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-width: 0 0 1px;
  border-radius: 0;
}

.collection-hero-collage {
  width: 136px;
  height: 104px;
  flex: 0 0 auto;
}

.collection-collage img,
.collection-hero-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-collage-image {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.collection-collage-image img {
  display: block;
}

.collection-collage.empty-collage,
.collection-hero-collage.empty-collage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  color: var(--green);
  font-weight: 900;
}

.collection-card-copy {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
  padding: 14px;
}

.collection-card strong,
.collection-card small,
.collection-card p {
  display: block;
}

.collection-card strong {
  color: var(--text);
  font-size: 19px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.collection-card p {
  margin: 0;
  color: #b7c2cd;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-card small {
  color: var(--muted);
}

.collection-card-topline,
.collection-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.collection-card-topline {
  justify-content: space-between;
}

.collection-card-topline > span:not(.collection-visibility),
.collection-card-meta span {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, .06);
  color: var(--muted);
  padding: 4px 8px;
  font-size: var(--text-xs);
  font-weight: 900;
}

.collection-card-meta {
  margin-top: 2px;
}

.collection-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.collection-card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  margin: 0 14px 14px;
}

.collection-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.collection-visibility {
  width: max-content;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, .08);
  color: var(--muted);
  padding: 3px 7px;
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.collection-visibility.public {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--green);
}

.collection-visibility.private {
  border-color: rgba(96, 165, 250, .28);
  background: rgba(96, 165, 250, .1);
  color: #93c5fd;
}

.collection-page-loading {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.collection-model-wrap {
  position: relative;
}

.collection-model-wrap > button {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  padding: 7px 9px;
  border-color: rgba(248, 113, 113, .55);
  background: rgba(15, 23, 30, .86);
  color: #fecaca;
}

.public-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  margin: 18px 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 14, 20, .34);
}

/* One plain sentence that tells a first-time visitor what the view and sort
   controls do, so nothing in the toolbar needs to be guessed. */
.public-toolbar-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.public-toolbar-summary {
  min-width: 0;
}

.public-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

.is-searching .public-toolbar {
  display: grid;
}

.collection-view-mode .public-toolbar {
  display: none;
}

.discovery-source-section + .discovery-source-section {
  margin-top: 24px;
}

.discovery-source-section h4 {
  margin: 0 0 12px;
  color: var(--source, var(--accent));
}

.saved-search-controls {
  display: inline-flex;
  align-items: center;
  /* Relative so the menu drops from this button, not the search box edge. */
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.saved-search-controls summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(8, 14, 20, .55);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.saved-search-controls details {
  position: static;
  min-width: 0;
}

.saved-search-controls summary {
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  list-style: none;
  width: 100%;
}

.saved-search-controls details[open] summary {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(8, 14, 20, .72));
}

.saved-search-controls summary::-webkit-details-marker {
  display: none;
}

.saved-search-menu {
  position: absolute;
  /* Opens directly under the bookmark button, growing right; the max-width
     keeps it on screen even when the button sits near the left edge. */
  left: 0;
  right: auto;
  top: calc(100% + 10px);
  z-index: 80;
  width: min(360px, calc(100vw - 24px));
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .96);
  padding: 8px;
  margin-top: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
}

.saved-search-save-current {
  width: 100%;
  justify-content: center;
  min-height: 40px;
  margin-bottom: 8px;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, rgba(15, 23, 30, .82));
  color: var(--accent);
}

.saved-search-row {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 6px;
  align-items: center;
}

.saved-search-row > button:first-child {
  display: block;
  justify-content: flex-start;
  text-align: left;
  background: rgba(15, 23, 30, .72);
  border-color: rgba(148, 163, 184, .14);
  color: var(--text);
  min-width: 0;
}

.saved-search-row strong,
.saved-search-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-search-row small {
  color: var(--muted);
  font-size: 0.78rem;
}

.saved-search-controls .empty {
  padding: 10px;
  border: 1px dashed rgba(148, 163, 184, .18);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .48);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.public-content {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  width: 100%;
  padding-top: 18px;
}

.public-category-sidebar {
  position: sticky;
  top: var(--dock-sidebar-top);
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr);
  gap: var(--space-5);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 30, .82);
  max-height: calc(100vh - 104px);
  min-height: 0;
  overflow: hidden;
}

.public-sidebar-sources {
  display: none;
  min-height: 0;
  overflow-y: auto;
  gap: 7px;
  padding-right: 2px;
  scrollbar-width: thin;
}

.public-category-sidebar .source-filter-header {
  display: none;
}

.public-sidebar-sources .public-source-row {
  display: grid;
  gap: 7px;
  margin-top: 0;
}

.public-sidebar-sources .public-source-option {
  grid-template-columns: minmax(0, 1fr) 38px;
  width: 100%;
}

.public-sidebar-sources .public-source {
  width: 100%;
  justify-content: flex-start;
}

.public-sidebar-sources .public-source small {
  margin-left: auto;
}

.sidebar-sources-active .public-sidebar-sources {
  display: grid;
}

.sidebar-sources-active .public-category-sidebar .source-filter-header {
  display: flex;
}

.sidebar-sources-active .public-category-sidebar {
  grid-template-rows: auto minmax(0, 42vh) auto minmax(180px, 1fr);
}

.search-docked .public-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* A flex row, not a grid: the header holds brand, search, nav (or the menu
     button), and the utilities cluster. A 3-column grid pushed the last two
     onto a second row. The search field is the only flexible item, so the
     brand and the right-hand controls never wrap. */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  gap: 18px;
  padding: 10px max(14px, calc((var(--public-viewport-width, 100vw) - var(--public-page-max)) / 2 + var(--public-page-gutter))) 10px 14px;
  background: transparent;
  border-bottom: 1px solid transparent;
  min-height: var(--search-header-height, 76px);
  margin: 0 calc((100% - var(--public-viewport-width, 100vw)) / 2) 34px;
}

/* Lift the brand clear of the viewport corner so it is not jammed against the
   edge while the row is docked. */
.search-docked .public-header { padding-left: 10px; }
.search-docked .public-brand { flex: 0 0 auto; }
/* The search field takes every pixel the nav and utilities do not need, with a
   fixed breath of space on each side instead of crowding the controls. */
.search-docked .public-nav-search { flex: 1 1 auto; min-width: 0; margin-left: 18px; margin-right: 22px; }
/* The docked row keeps the real navigation (For You, the MeshScout menu, the
   account chip), not a collapsed hamburger, so it matches the mobile tab bar. */
.search-docked .public-nav { display: flex; flex: 0 0 auto; }
.search-docked .header-utilities { flex: 0 0 auto; margin-left: 0; }

.search-docked .public-brand small {
  display: none;
}

.search-docked .public-brand {
  min-width: max-content;
}

.search-docked .public-nav-search {
  display: block;
  min-width: 0;
}

.search-docked .public-nav-search .public-search-box {
  /* Fill the space the nav and utilities leave rather than capping it, so the
     docked bar reads as one continuous field. */
  max-width: none;
  min-height: 46px;
  padding: 6px 8px 6px 14px;
}

.search-docked .public-nav-search .public-search-box input {
  font-size: 16px;
}

/* Intentionally empty: the docked header keeps .public-nav visible and the
   hamburger stays retired (see the rules above). */

.search-docked #heroSearchMount {
  pointer-events: none;
}

.search-docked .search-hero-ledger {
  display: none;
}

.search-docked .search-hero {
  height: var(--hero-height);
  min-height: var(--hero-height);
  max-height: none;
  overflow: clip;
  visibility: hidden;
  pointer-events: none;
}

.category-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.category-sidebar-header strong {
  color: var(--text);
}

.category-sidebar-header button {
  padding: 6px 8px;
  font-size: var(--text-sm);
  color: var(--green);
}

.public-categories {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
  padding-right: 2px;
  scrollbar-width: thin;
}

.public-categories button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 9px 10px;
  border-color: transparent;
  background: #0b1116;
  color: var(--muted);
  text-align: left;
}

.public-categories button:hover,
.public-categories button.active {
  border-color: var(--green);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.public-categories strong {
  color: var(--green);
  font-size: var(--text-sm);
}

.public-main-results {
  min-width: 0;
  padding-top: var(--dock-clearance);
  scroll-margin-top: var(--dock-results-top);
}

.search-handoff-active .public-search-box {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .search-hero,
  .public-summary {
    transition: none;
  }

  #heroSearchMount,
  .search-hero > :is(.eyebrow, h1, .hero-copy, .popular-searches, .source-freshness-panel, #heroSourcesMount) {
    transform: none;
  }
}

.public-toolbar h2 {
  margin: 0 0 4px;
  font-size: 24px;
}

.public-toolbar p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.public-view-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(8, 14, 20, .52);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.public-share-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid rgba(184, 111, 217, .34);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 10%, rgba(10, 16, 22, .76));
  color: var(--accent);
  padding: 0 11px;
  font-weight: 900;
  white-space: nowrap;
}

.public-sort-control,
.public-access-control,
.public-preferred-source-control,
.public-page-size {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-weight: 900;
}

/* Advanced filters live in the same popover as the other search options, so
   they stack with the existing controls instead of introducing a second panel
   to open. A divider separates them from the coarse options above. */
.public-advanced-filters {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.public-advanced-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 900;
}

.public-advanced-field > span:first-child {
  font-size: 0.82rem;
}

.public-advanced-field input,
.public-advanced-field select {
  min-height: 36px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(10, 16, 22, .72);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.public-advanced-field input:focus-visible,
.public-advanced-field select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 1px;
}

/* The metric filter is a field chooser plus its count, kept on one row so the
   pair reads as one control. */
.public-advanced-metric {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px;
}

@media (min-width: 761px) and (max-width: 1400px) {
  .public-toolbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .public-toolbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .public-search-options-menu {
    left: 0;
    right: auto;
  }
}

/* 761-1024px fine-pointer range. The mobile reflow rules start at 760px, so
   this band kept the desktop split layout and pushed the document wider than
   the viewport: the 310px sidebar plus results column, and the options popover
   anchored to a mid-row control. Collapse both so the layout genuinely fits,
   instead of depending on overflow-x: hidden (which only starts at 760px). */
@media (min-width: 761px) and (max-width: 1024px) {
  .public-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .public-category-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 14px;
  }

  .public-search-options {
    position: static;
  }

  .public-search-options[open] {
    grid-column: 1 / -1;
  }

  .public-search-options-menu {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }
}

.public-sort-control select,
.public-access-control select,
.public-preferred-source-control select,
.public-page-size select {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  min-height: 44px;
  padding: 9px 34px 9px 10px;
  font: inherit;
  font-weight: 900;
}

.public-view-toggle button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 900;
}

.public-view-toggle button.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, rgba(15, 23, 30, .82));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.public-toggle-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.public-toggle-control input {
  width: 15px;
  height: 15px;
  accent-color: var(--green);
}

.public-toggle-control > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.public-toggle-control.active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, rgba(11, 17, 22, .92));
  color: var(--text);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent);
}

.public-toggle-control.active i {
  color: var(--accent);
}

.public-search-options {
  position: relative;
}

.public-search-options summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0 11px;
  color: var(--muted);
  background: rgba(8, 14, 20, .7);
  font-size: 13px;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.public-search-options summary::-webkit-details-marker {
  display: none;
}

.public-search-options summary:hover,
.public-search-options[open] summary,
.public-search-options.has-active-options summary {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 9%, rgba(8, 14, 20, .9));
}

.public-search-options summary .fa-chevron-down {
  font-size: 10px;
  transition: transform 160ms ease;
}

.public-search-options[open] summary .fa-chevron-down {
  transform: rotate(180deg);
}

.public-search-option-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0 5px;
  color: #07110d;
  background: var(--green);
  font-size: 10px;
  font-weight: 1000;
}

.public-search-option-count[hidden] {
  display: none;
}

.public-search-options-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: var(--space-4);
  width: min(380px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius-md);
  background: #0b1116;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42);
}

.public-search-options-menu .public-sort-control,
.public-search-options-menu .public-access-control,
.public-search-options-menu .public-preferred-source-control,
.public-search-options-menu .public-page-size {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  width: 100%;
}

.public-search-options-menu select {
  width: 100%;
  min-width: 0;
}

.public-preferred-source-control[hidden] {
  display: none !important;
}

.homepage-lane-manager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .72);
}

.homepage-lane-manager > div,
.homepage-lane-manager strong,
.homepage-lane-manager-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.homepage-lane-manager strong {
  color: var(--text);
  font-weight: 950;
}

.homepage-lane-manager span {
  color: var(--muted);
  font-weight: 800;
}

.homepage-lane-manager-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.homepage-lane-manager-actions button {
  min-height: 34px;
  padding: 7px 10px;
}

.homepage-lane-manager > div:first-child { flex-wrap: wrap; }
.homepage-source-mode { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; }
.homepage-source-mode button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); }
.homepage-source-mode button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent), transparent 40%); background: color-mix(in srgb, var(--accent), transparent 84%); color: var(--text); }
.homepage-source-mode button span { color: inherit; }
.homepage-source-mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.homepage-source-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; color: var(--muted); font-size: .9rem; }
.homepage-source-status button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }

@media (max-width: 760px) {
  .homepage-source-mode button { min-height: 44px; }
  .homepage-lane-manager-actions { justify-content: flex-start; }
}

.source-section {
  display: grid;
  gap: var(--space-5);
  contain: layout style;
}

.source-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--source), transparent 55%);
  padding-bottom: 10px;
}

.source-section > header > div {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.source-section > header img,
.public-card-meta img,
.public-see-more img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: contain;
}

.public-source img,
.source-section > header img,
.public-card-meta img,
.public-see-more img,
.public-card-source-strip img,
.model-source-variants img {
  transform-origin: center;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .public-source:is(:hover, :focus-visible) img,
  .source-section > header > div:hover img,
  .public-card:hover .public-card-meta img,
  .public-see-more:is(:hover, :focus-visible) img,
  .public-card-source-strip img:hover,
  .model-source-variants a:is(:hover, :focus-visible) img {
    transform: translateY(-1px) scale(1.12);
    filter:
      brightness(1.08)
      saturate(1.14)
      drop-shadow(0 0 6px color-mix(in srgb, var(--source) 72%, transparent));
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--source) 42%, transparent),
      0 0 14px color-mix(in srgb, var(--source) 48%, transparent),
      0 7px 16px rgba(0, 0, 0, .3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-source img,
  .source-section > header img,
  .public-card-meta img,
  .public-see-more img,
  .public-card-source-strip img,
  .model-source-variants img {
    transition: none;
  }
}

.source-section h3 {
  margin: 0;
  color: var(--source);
  font-size: 22px;
}

.source-section header span {
  color: var(--muted);
  font-weight: 800;
}

.source-section header button {
  border-color: color-mix(in srgb, var(--source), transparent 45%);
  color: var(--source);
}

.lane-see-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--source), transparent 45%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--source) 8%, transparent);
  color: var(--source);
  text-decoration: none;
  font-weight: 900;
  padding: 10px 12px;
}

.section-header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.section-collapse-toggle {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border-color: color-mix(in srgb, var(--source), transparent 45%);
  color: var(--source);
}

.lane-icon-control,
.section-header-actions .section-collapse-toggle {
  box-sizing: border-box !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  gap: 0 !important;
  line-height: 1 !important;
  text-align: center;
  vertical-align: middle;
}

.lane-icon-control {
  border: 1px solid color-mix(in srgb, var(--source), transparent 55%);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--source);
}

.lane-drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.lane-drag-handle:active {
  cursor: grabbing;
}

.lane-drag-handle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--source), transparent 35%);
  outline-offset: 2px;
}

body.is-home-lane-dragging {
  user-select: none;
  cursor: grabbing;
}

.source-section.is-lane-dragging,
.for-you-section.is-lane-dragging {
  opacity: .45;
}

.source-section.is-lane-drop-target,
.for-you-section.is-lane-drop-target {
  outline: 2px solid color-mix(in srgb, var(--source), transparent 20%);
  outline-offset: 6px;
}

.section-collapse-toggle i,
.lane-icon-control i {
  pointer-events: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  line-height: 16px !important;
  font-size: 14px;
  text-align: center;
}

.source-section.section-collapsed,
.for-you-section.section-collapsed {
  gap: 0;
}

.source-section.section-collapsed > .source-grid,
.for-you-section.section-collapsed > .for-you-grid {
  display: none;
}

.for-you-section {
  display: grid;
  gap: var(--space-5);
  padding: 0 0 4px;
  --source: #a974c5;
  contain: layout style;
}

.for-you-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(169, 116, 197, .34);
  padding-bottom: 10px;
}

.for-you-section h3,
.for-you-section p {
  margin: 0;
}

.for-you-section h3 {
  color: #a974c5;
  font-size: 22px;
}

.for-you-section p,
.for-you-reason {
  color: var(--muted);
  font-weight: 800;
}

.for-you-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.for-you-card {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.for-you-actions {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(10, 15, 21, .76);
}

/* The signal controls are a collapsed disclosure: the rail reads as cards, and
   the per-card reason + a small "Tune" affordance sit on one compact row. */
.for-you-signal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 34px;
  padding: 7px 9px;
  cursor: pointer;
  list-style: none;
}

.for-you-signal-summary::-webkit-details-marker { display: none; }

.for-you-signal-summary:hover { color: var(--accent); }

.for-you-signal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.for-you-signal-toggle i { transition: transform .16s ease; }
.for-you-actions[open] .for-you-signal-toggle i { transform: rotate(180deg); }
.for-you-actions[open] .for-you-signal-toggle { color: var(--accent); }

.for-you-signal-body {
  display: grid;
  gap: var(--space-3);
  padding: 0 9px 9px;
}

.for-you-card .public-card {
  border-radius: 8px 8px 0 0;
}

.for-you-reason {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.for-you-reason-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.for-you-reason-row.has-menu {
  min-height: 32px;
  grid-template-columns: minmax(0, 1fr) 36px;
}

.for-you-feedback-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.for-you-actions button {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 9px;
  border-color: rgba(148, 163, 184, .24);
  color: #d7e4ee;
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1.15;
}

.for-you-feedback-toolbar > button {
  min-height: 40px;
}

.for-you-actions button.selected,
.for-you-actions button:hover {
  border-color: rgba(169, 116, 197, .58);
  color: #a974c5;
}

.for-you-page-section {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
}

.for-you-page-section > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 0 2px;
}

.for-you-page-section h3 {
  margin: 0;
  color: #f8fafc;
}

.for-you-page-status {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.88rem;
}

.for-you-refresh-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.78);
  color: #e2e8f0;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
}

.for-you-refresh-button:hover,
.for-you-refresh-button:focus-visible {
  border-color: rgba(169, 116, 197, 0.58);
  color: #a974c5;
}

.for-you-sentinel {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}
.for-you-load-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border, #2a323b);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.for-you-load-more:hover { border-color: var(--accent, #a974c5); color: var(--accent, #a974c5); }
.for-you-load-more[disabled] { opacity: .55; cursor: default; }
/* While a batch is loading, swap the arrow for a spinner and block re-clicks. */
.for-you-sentinel.is-loading .for-you-load-more { cursor: progress; }
.for-you-sentinel.is-loading .for-you-load-more i {
  animation: forYouSpin .9s linear infinite;
}
@keyframes forYouSpin { to { transform: rotate(360deg); } }
/* A failed batch re-arms the button as a retry rather than silently vanishing. */
.for-you-load-more-retry { border-color: color-mix(in srgb, #f59e0b 55%, var(--border, #2a323b)); color: #f59e0b; }
/* Tiny, self-collapsing end-of-feed affordance replaces the old blank band. */
.for-you-caught-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 10px 14px;
  color: #94a3b8;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
}
.for-you-caught-up i { color: #5eead4; }
@media (prefers-reduced-motion: reduce) {
  .for-you-sentinel.is-loading .for-you-load-more i { animation: none; }
}
.for-you-page-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-content: start;
}

.discover-page-section {
  display: grid;
  gap: 14px;
}

.discover-page-section > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 0 2px;
}

.discover-page-section h3 {
  margin: 0;
  color: #f8fafc;
}

.discover-page-section p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 800;
}

.discover-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.for-you-debug {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid rgba(169, 116, 197, .42);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 20, .96);
  color: #dbeafe;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
  backdrop-filter: blur(12px);
}

.for-you-debug header {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.for-you-debug header strong {
  font-size: .86rem;
}

.for-you-debug header span {
  max-width: 150px;
  overflow: hidden;
  color: #a974c5;
  font-size: .72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.for-you-debug button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, .86);
  color: #e2e8f0;
  cursor: pointer;
}

.for-you-debug-body {
  max-height: 560px;
  overflow: auto;
  padding: 10px 12px 12px;
}

.for-you-debug.collapsed .for-you-debug-body {
  display: none;
}

.for-you-debug dl {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 6px 10px;
  margin: 0;
  font-size: .75rem;
}

.for-you-debug dt {
  color: #94a3b8;
  font-weight: 800;
}

.for-you-debug dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.for-you-debug details {
  margin-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .16);
  padding-top: 10px;
}

.for-you-debug summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 900;
}

.for-you-debug-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: 8px;
}

.for-you-debug h4 {
  margin: 0 0 6px;
  color: #a974c5;
  font-size: .68rem;
  text-transform: uppercase;
}

.for-you-debug ul,
.for-you-debug ol {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: .7rem;
}

.for-you-debug li {
  min-width: 0;
}

.for-you-debug li code {
  color: #f8fafc;
  white-space: normal;
}

.for-you-debug li span {
  margin-left: 5px;
  color: #93c5fd;
}

.for-you-debug li small {
  display: block;
  color: #94a3b8;
}

.for-you-debug-error {
  margin: 0 0 10px;
  color: #fecaca;
  font-size: .76rem;
}

.source-grid,
.unified-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.search-loading {
  min-height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: 100%;
  padding: 20px;
  color: #c9d6e2;
  font-weight: 900;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(19, 26, 32, .82), rgba(8, 13, 17, .72));
}

[data-loading-more] {
  margin-top: 14px;
}

[data-loading-more] .search-loading {
  min-height: 54px;
  padding: 12px 16px;
  color: var(--muted);
  background: rgba(19, 26, 32, .52);
}

.search-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, .28);
  border-top-color: var(--green);
  animation: meshspin .8s linear infinite;
}

@keyframes meshspin {
  to {
    transform: rotate(360deg);
  }
}

.public-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  appearance: none;
  font: inherit;
  text-align: left;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  touch-action: pan-y;
  contain: layout paint style;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.public-card:hover,
.public-card:focus-visible {
  border-color: var(--source);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--source), transparent 38%), 0 16px 44px rgba(0, 0, 0, .32);
  outline: none;
}

.public-card-image {
  height: 230px;
  aspect-ratio: auto;
  background: #0f151b;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

.public-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.search-feedback-menu {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  color: var(--text);
}

.search-feedback-menu > [data-search-feedback-menu-toggle] {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  background: rgba(7, 12, 17, .9);
  color: #c4d0db;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.search-feedback-menu > [data-search-feedback-menu-toggle]:hover,
.search-feedback-menu > [data-search-feedback-menu-toggle]:focus-visible,
.search-feedback-menu.open > [data-search-feedback-menu-toggle] {
  border-color: color-mix(in srgb, var(--source), #fff 22%);
  color: #fff;
  outline: none;
}

.search-feedback-popover {
  position: absolute;
  top: 40px;
  left: 0;
  display: grid;
  width: min(270px, calc(100vw - 42px));
  max-height: 178px;
  gap: 4px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--source) 42%, var(--line));
  border-radius: var(--radius-md);
  background: #0b1218;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.search-feedback-popover > strong {
  padding: 5px 7px 7px;
  font-size: var(--text-sm);
}

.search-feedback-popover > button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 34px;
  align-items: center;
  gap: var(--space-3);
  padding: 7px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #c4d0db;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.search-feedback-popover > button:hover,
.search-feedback-popover > button:focus-visible {
  background: color-mix(in srgb, var(--source) 12%, #111a22);
  color: #fff;
  outline: none;
}

.search-feedback-duplicate {
  display: grid;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #080e13;
}

.search-feedback-duplicate[hidden] {
  display: none;
}

.search-feedback-duplicate label,
.search-feedback-duplicate label span {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.search-feedback-duplicate select,
.search-feedback-duplicate button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #101922;
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
  font-size: var(--text-xs);
}

.search-feedback-duplicate button {
  cursor: pointer;
  font-weight: 900;
}

.search-feedback-popover output {
  min-height: 0;
  padding: 3px 7px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.3;
}

.search-feedback-menu.submitted > [data-search-feedback-menu-toggle] {
  border-color: #33d69f;
  color: #33d69f;
}

.search-compare-button {
  position: absolute;
  top: 10px;
  left: 52px;
  z-index: 5;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  background: rgba(7, 12, 17, .9);
  color: #c4d0db;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.search-compare-button:hover,
.search-compare-button:focus-visible,
.search-compare-button.active {
  border-color: var(--accent-2);
  color: #fff;
  outline: none;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 38%, transparent), 0 8px 24px rgba(0, 0, 0, .3);
}

.search-compare-button.active {
  background: color-mix(in srgb, var(--accent) 36%, #071018);
}

.public-card-price {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-pill);
  background: rgba(7, 12, 17, .9);
  color: #fff;
  padding: 7px 10px;
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.public-card-price.premium {
  border-color: color-mix(in srgb, var(--source) 72%, #fff 28%);
  color: color-mix(in srgb, var(--source) 60%, #fff 40%);
}

.nsfw-blurred-card {
  position: relative;
  overflow: hidden;
}

.nsfw-blurred-card img {
  filter: blur(18px);
  transform: scale(1.06);
}

.nsfw-blurred-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 8, 12, 0.38);
  pointer-events: none;
}

.nsfw-blur-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(8, 12, 18, 0.78);
  color: var(--text);
  padding: 6px 9px;
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1.1;
  pointer-events: none;
}

.no-image {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--source);
  font-weight: 900;
  background: linear-gradient(135deg, #111a21, #0d1117);
}

.public-card-body {
  flex: 0 0 290px;
  display: flex;
  flex-direction: column;
  height: 290px;
  min-height: 290px;
  overflow: hidden;
  padding: 14px;
}

/* Title and description boxes derive from their line clamps, so the title
   reserves exactly two lines and the description always starts (and ends) at
   the same y on every card, regardless of how many lines the title wraps to.
   The title is deliberately larger than the description so it never reads as
   secondary text, and nothing clips because the reserved height matches the
   clamp. */
.public-card-body {
  --public-card-title-font-size: 19px;
  --public-card-title-line-height: 1.25;
  --public-card-title-lines: 2;
  --public-card-title-height: calc(var(--public-card-title-lines) * var(--public-card-title-font-size) * var(--public-card-title-line-height));
  --public-card-description-font-size: var(--text-base);
  --public-card-description-line-height: 1.45;
  /* The description fills the space between the fixed two-line title box and
     the pinned footer, so short descriptions do not leave a dead gap above the
     stats row. It reserves a minimum of a few lines (cards still align) and
     grows into whatever height is left, up to a clamp. */
  /* A fixed description box (exactly this many lines) so every card's text ends
     at the same y — the visible line the design is built around. It never
     clips: the box is sized to the clamp. */
  --public-card-description-lines: 4;
  --public-card-description-max-lines: 4;
  --public-card-description-height: calc(var(--public-card-description-lines) * var(--public-card-description-font-size) * var(--public-card-description-line-height));
  --public-card-description-min-height: var(--public-card-description-height);
}

.public-results:has(.public-card.multi-source) .public-card-body,
:is(.source-grid, .unified-grid, .related-grid, .for-you-grid):has(.public-card.multi-source) .public-card-body {
  flex-basis: 354px;
  height: 354px;
  min-height: 354px;
}

.public-results:has(.public-card.multi-source) .public-card:not(.multi-source) .public-card-body,
:is(.source-grid, .unified-grid, .related-grid, .for-you-grid):has(.public-card.multi-source) .public-card:not(.multi-source) .public-card-body {
  --public-card-description-lines: 8;
}

.public-results:has(.public-card.multi-source) .public-card.multi-source .public-card-body,
:is(.source-grid, .unified-grid, .related-grid, .for-you-grid):has(.public-card.multi-source) .public-card.multi-source .public-card-body {
  --public-card-description-lines: 5;
}

.public-card-meta,
.public-card-stats {
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.public-card-meta span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--source);
}

.public-card-meta .multiple-source-label {
  color: var(--accent);
}

.public-card.multi-source {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.public-card-stats {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.public-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #a9c4dd;
}

.public-card-stats i {
  color: var(--source);
  font-size: var(--text-xs);
}

.public-card-source-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  margin-top: 9px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, rgba(8, 14, 20, .76));
}

.public-card-source-strip img {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 5px;
  background: rgba(255, 255, 255, .86);
  object-fit: contain;
  padding: 2px;
}

.public-card-source-strip img.preferred {
  border-color: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 42%, transparent);
}

.public-card-source-strip span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
}

.public-card-source-strip .public-card-source-label {
  margin-right: 2px;
  color: var(--text);
}

.public-card-source-strip .public-card-source-count {
  color: var(--accent);
}

.public-card-source-strip .public-card-source-preference {
  flex-basis: 100%;
  padding-top: 2px;
  color: #b9c5d1;
  font-weight: 800;
}

.public-card h2,
.public-card h3 {
  display: -webkit-box;
  /* The title takes the source's accent colour, matching the source chip and
     the rest of the card, instead of the global text colour. */
  color: var(--source);
  /* Reserve exactly two title lines so a one-line title reserves the same box
     as a two-line title, which keeps the description start y identical on
     every card. The token keeps the title larger than the description. */
  min-height: var(--public-card-title-height);
  height: var(--public-card-title-height);
  max-height: var(--public-card-title-height);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--public-card-title-lines);
  font-size: var(--public-card-title-font-size);
  line-height: var(--public-card-title-line-height);
  margin: 12px 0 8px;
}

.public-card p,
.public-card-description {
  color: #aab6c1;
  font-size: var(--public-card-description-font-size);
  line-height: var(--public-card-description-line-height);
  /* Exactly the reserve: the same box on every card, so the description ends on
     one consistent line and a following short card (no author/stats) still
     lines up. It never clips because the height matches the clamp. */
  flex: 0 0 auto;
  height: var(--public-card-description-height);
  min-height: var(--public-card-description-height);
  max-height: var(--public-card-description-height);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: var(--public-card-description-max-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.public-card-description :is(p, ul, ol, blockquote, h1, h2, h3, h4) {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.public-card-description li {
  display: inline;
}

.public-card-description li + li::before {
  content: " · ";
}

.public-card-description a {
  color: #a974c5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.public-card-description strong,
.public-card-description b {
  color: #e8f1f8;
}

.public-card-author {
  min-height: 18px;
  color: #d2dde7;
  font-size: var(--text-sm);
  font-weight: 800;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The license is secondary metadata: it rides in the footer stat row as a
   quiet chip instead of a heading-sized line above the title. */
.public-card .public-card-license-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: #a9c4dd;
}

.public-card .public-card-license-chip i {
  color: var(--source);
  font-size: var(--text-xs);
}

/* No licence is still information: keep the chip in place but quieter so the
   footer row reads the same on every card. */
.public-card .public-card-license-chip.is-unstated {
  color: var(--muted);
  font-style: italic;
}

.public-card .public-card-license-chip.is-unstated i { color: var(--muted); }

/* An unknown author stays in the row (so the layout does not reflow) but reads
   as secondary. */
.public-card-author .is-unknown {
  color: var(--muted);
  font-style: italic;
}

.public-card .public-card-license-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-card-author-link {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  text-decoration: none;
}

.public-card-author-link:hover {
  color: var(--accent);
}

.public-card-author-link.verified {
  color: #dff7e8;
}

.public-see-more {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--source), transparent 35%);
  background: color-mix(in srgb, var(--source), transparent 93%);
  color: var(--source);
  text-align: center;
}

.public-see-more strong,
.public-see-more span {
  display: block;
}

.public-see-more span {
  color: var(--muted);
}

@media (max-width: 820px) {
  .public-card-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

.public-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 28px 0 10px;
}

.public-pagination-top {
  justify-content: flex-end;
  margin: -8px 0 18px;
  padding-right: 14px;
}

.public-pagination span {
  color: var(--muted);
  font-weight: 900;
}

.public-pagination form,
.public-pagination label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.public-pagination form {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
}

.public-pagination label span {
  font-size: var(--text-sm);
  color: var(--muted);
}

.public-pagination input {
  width: 76px;
  border: 0;
  outline: 0;
  border-radius: var(--radius-sm);
  background: #121a22;
  color: var(--text);
  padding: 8px 9px;
  font-weight: 900;
}

.public-pagination button[disabled] {
  opacity: .42;
  cursor: not-allowed;
}

.nav-icon,
.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  min-width: 1.1em;
  margin-right: 6px;
  color: var(--accent);
  font-size: .95em;
  flex: 0 0 auto;
}

.stat-icon {
  display: inline-grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 32% 24%, color-mix(in srgb, #fff 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 22px;
}

button i,
a i,
.model-modal-actions i,
.material-card-facts i,
.material-card-id i,
.material-price-row i,
.material-vendor-row i,
.collection-card-meta i,
.metric-icon i,
.process-card i,
.endpoint-card i {
  flex: 0 0 auto;
}

button > i,
a > i,
.model-modal-actions i,
.material-vendor-row i,
.material-price-row i,
.material-card-facts i,
.material-card-id i,
.collection-card-meta i {
  margin-right: 7px;
}

.public-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 44px 0 8px;
  padding: 22px 0 4px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.public-footer > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.public-footer .footer-brand-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Crawlable footer links. Rendered in the built HTML (see build-static-assets.mjs)
   so search engines can follow them without running JavaScript. Visually quiet:
   they are navigation, not a call to action. */
.crawl-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 2px;
}
.crawl-footer-links a {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}
.crawl-footer-links a:hover,
.crawl-footer-links a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}


.footer-legal-links {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: baseline;
}

.footer-legal-links::before {
  content: "";
  width: 1px;
  height: 16px;
  align-self: center;
  background: var(--line);
}

.footer-legal-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #0b1116 82%, transparent);
  color: #aebbc6;
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.footer-legal-links a:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

.footer-legal-links i {
  margin: 0;
  color: currentColor;
  font-size: 10px;
  line-height: 1;
}

.public-footer strong {
  color: var(--text);
  font-size: 16px;
}

.public-footer p {
  max-width: 980px;
  margin: 0;
  line-height: 1.55;
  font-size: 13px;
}

.back-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 48%),
    rgba(13, 20, 26, .88);
  color: var(--accent);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .34), 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}

.back-to-top:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.back-to-top[hidden] {
  display: none;
}

.source-attribution {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
}

.public-footer .source-attribution,
.public-footer .footer-quick-links,
.public-footer p,
.public-footer .footer-brand-row {
  width: 100%;
}

.source-attribution a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #0b1116;
  color: #c8d3dd;
  padding: 7px 9px;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.source-attribution img {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  object-fit: contain;
}

.source-attribution a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-quick-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.footer-quick-links a {
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #0b1116;
  color: #c8d3dd;
  padding: 7px 10px;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 900;
}

.footer-quick-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-contact-row {
  padding-top: 0;
  align-self: start;
}

.public-footer .footer-contact-row,
.public-footer .footer-source-list {
  clear: both;
  flex: 0 0 100%;
  max-width: 100%;
}

.public-footer .footer-contact-row {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}

.public-footer .footer-source-list {
  display: flex;
  justify-content: flex-start;
  padding-top: 8px;
}

.footer-contact-row a {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--text);
}

.contact-shell,
.donate-shell {
  width: 100%;
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter) var(--public-page-gutter) 44px;
}

.contact-hero,
.donate-hero {
  max-width: 800px;
  padding: clamp(1.75rem, 4vw, 3.5rem) 0 28px;
}

.donate-page .donate-hero {
  max-width: 760px;
  margin: 0;
  text-align: left;
}

.contact-hero h1,
.donate-hero h1 {
  margin: 0;
  max-width: 860px;
  color: var(--text);
  font-size: clamp(42px, 7vw, 78px);
  line-height: .95;
}

.contact-hero p:not(.eyebrow),
.donate-hero p:not(.eyebrow) {
  max-width: 720px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.donate-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.donate-layout-single {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

.donate-experience {
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(340px, 520px);
  gap: clamp(28px, 7vw, 118px);
  align-items: start;
  margin-top: 18px;
  padding: clamp(10px, 2vw, 18px) 0 clamp(20px, 4vw, 42px);
}

.donate-experience-centered {
  grid-template-columns: minmax(0, 540px);
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
}

.donate-experience-featured {
  grid-template-columns: minmax(280px, .82fr) minmax(380px, 470px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(36px, 9vw, 150px);
  min-height: clamp(600px, calc(100vh - 250px), 780px);
  margin-top: 0;
}

.donate-copy {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  max-width: 520px;
  padding-top: clamp(8px, 3vw, 36px);
}

.donate-copy-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 54%),
    rgba(169, 116, 197, .12);
  color: var(--accent);
  font-size: 22px;
}

.donate-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: .98;
}

.donate-copy h1 {
  margin: 0;
  max-width: 720px;
  color: var(--text);
  font-size: clamp(56px, 8vw, 104px);
  line-height: .9;
}

.donate-copy .eyebrow {
  margin: 4px 0 -2px;
}

.donate-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.donate-supporter-note {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  gap: 9px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.donate-supporter-note i {
  color: var(--accent);
}

.donate-checkout {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.donate-checkout-featured {
  width: min(100%, 470px);
  justify-self: center;
}

.donate-checkout-label {
  display: grid;
  gap: 0;
  justify-items: center;
  text-align: center;
  padding: 0 2px 4px;
}

.donate-checkout-label strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

.donate-checkout-label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  max-width: 420px;
  line-height: 1.45;
}

.donate-card,
.donate-supporter-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(169, 116, 197, .08), transparent 36%),
    rgba(13, 20, 27, .76);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .26);
}

.donate-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
}

.donate-card-primary {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
}

.donate-card-unified {
  min-height: 0;
}

.donate-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(169, 116, 197, .35);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, .16);
  color: var(--accent);
  font-size: 22px;
}

.donate-card h2,
.donate-supporter-panel h2 {
  margin: 0 0 10px;
  color: var(--text);
}

.donate-card p,
.donate-supporter-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.donate-action,
.donate-supporter-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, .14);
  color: var(--accent);
  font-weight: 950;
  text-decoration: none;
}

.donate-action:hover,
.donate-supporter-panel a:hover {
  border-color: var(--accent);
  background: rgba(169, 116, 197, .22);
}

.donate-action-secondary {
  border-color: rgba(148, 163, 184, .26);
  background: rgba(8, 14, 20, .58);
  color: var(--text);
}

.donate-action[aria-disabled="true"] {
  opacity: .58;
  cursor: not-allowed;
  pointer-events: none;
}

.donate-paypal-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    rgba(8, 14, 20, .72);
}

.donate-kofi-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, rgba(148, 163, 184, .2));
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    rgba(8, 14, 20, .72);
}

.donate-panel-heading strong,
.donate-panel-heading span {
  display: block;
}

.donate-panel-heading strong {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.donate-panel-heading span {
  color: var(--muted);
  line-height: 1.5;
}

.donate-embed-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(13, 20, 27, .94), rgba(8, 14, 20, .86)),
    rgba(8, 14, 20, .88);
}

.donate-embed-shell-kofi {
  max-width: none;
  justify-self: center;
  width: 100%;
  height: min(820px, calc(100vh - 128px));
  min-height: 740px;
  padding: 12px;
}

.donate-embed-shell-kofi iframe {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 7px;
  background: #f9f9f9;
  transform: translateY(0);
}

.donate-bmc-card {
  position: relative;
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  gap: var(--space-4);
  min-height: 640px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
}

.donate-bmc-card::before {
  content: none;
}

.donate-bmc-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: 640px;
  height: 640px;
  border: 0;
  border-radius: var(--radius-md);
  background: #fff;
  color-scheme: light;
}

.donate-bmc-orbit {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .12), transparent 34%),
    rgba(169, 116, 197, .13);
  box-shadow:
    inset 0 0 36px rgba(169, 116, 197, .18),
    0 0 52px rgba(169, 116, 197, .22);
}

.donate-bmc-orbit img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.donate-bmc-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
  max-width: 430px;
  text-align: center;
}

.donate-bmc-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.donate-bmc-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.donate-bmc-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: min(100%, 360px);
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, rgba(12, 19, 27, .92)), rgba(11, 18, 26, .95));
  color: var(--text);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 48px rgba(169, 116, 197, .16);
}

.donate-bmc-button:hover,
.donate-bmc-button:focus-visible {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 48%, rgba(12, 19, 27, .92)), rgba(11, 18, 26, .95));
}

.donate-bmc-button i {
  color: var(--accent);
}

.donate-bmc-fallback {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.donate-bmc-fallback:hover {
  color: var(--accent);
}

.donate-bmc-status {
  position: relative;
  z-index: 1;
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.donate-alt-platforms {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(169, 116, 197, .08), transparent 45%),
    rgba(8, 14, 20, .74);
}

.donate-alt-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.donate-alt-heading strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.donate-alt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.donate-alt-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: var(--radius-md);
  background: rgba(7, 13, 19, .78);
  color: var(--text);
  text-decoration: none;
  font-weight: 950;
  overflow: hidden;
}

.donate-alt-button:hover,
.donate-alt-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: rgba(169, 116, 197, .12);
}

.donate-alt-kofi i,
.donate-alt-paypal i {
  color: var(--accent);
}

#bmc-wbtn,
.bmc-btn-container {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(120vw, 120vh) scale(.01) !important;
}

.donate-embed-shell-paypal {
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 16px;
}

.donate-embed-shell-paypal #donate-button-container {
  display: grid;
  place-items: center;
}

.donate-paypal-inline {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
}

.donate-paypal-inline h3 {
  margin: 0 0 6px;
  color: var(--text);
}

.donate-paypal-inline p {
  font-size: 14px;
}

.donate-thanks {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius-pill);
  background: rgba(169, 116, 197, .12);
  color: var(--text);
  font-weight: 900;
}

.donate-thanks i {
  color: var(--accent);
}

.donate-supporter-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 18px 20px;
}

.contact-layout {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.contact-form,
.contact-info {
  padding: 22px;
}

.contact-form label {
  display: grid;
  gap: 7px;
  margin-top: 13px;
  color: var(--muted);
  font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 13px;
  background: rgba(8, 14, 19, .72);
  color: var(--text);
  font: inherit;
}

.contact-form textarea {
  min-height: 220px;
  resize: vertical;
  line-height: 1.5;
}

.contact-form output {
  display: block;
  min-height: 22px;
  margin-top: 12px;
  color: var(--muted);
}

.contact-form output.success {
  color: var(--accent);
}

.contact-form output.error {
  color: #fb7185;
}

.contact-form button[type="submit"] {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}

.contact-info h2 {
  margin: 0 0 14px;
}

.contact-info ul {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.contact-info li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-4);
  color: var(--muted);
  line-height: 1.5;
}

.contact-info i {
  color: var(--accent);
  margin-top: 3px;
}

.contact-direct-email {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px 10px;
  align-items: center;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-weight: 850;
}

.contact-direct-email a {
  grid-column: 2;
  color: var(--accent);
}

.api-docs-shell {
  width: 100%;
  max-width: min(1760px, 100vw);
  margin: 0 auto;
  padding: var(--public-page-gutter) var(--public-page-gutter) 44px;
}

.api-docs-page {
  background:
    radial-gradient(circle at 86% 4%, rgba(169, 116, 197, .035), transparent 30%),
    radial-gradient(circle at 8% 10%, rgba(169, 116, 197, .075), transparent 30%),
    var(--bg);
}

.api-docs-hero {
  max-width: 980px;
  padding: clamp(1.35rem, 3vw, 2.5rem) 0 18px;
}

.api-docs-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: .94;
}

.api-docs-hero p:not(.eyebrow),
.api-docs-section > p,
.api-docs-tips,
.api-docs-note {
  color: var(--muted);
  line-height: 1.65;
}

.api-docs-hero p:not(.eyebrow) {
  max-width: 720px;
  font-size: 17px;
}

.api-docs-base-card,
.api-docs-quickstart article,
.api-docs-section,
.api-endpoint-grid article,
.api-rate-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(10, 16, 22, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.api-docs-base-card {
  display: grid;
  gap: var(--space-4);
  padding: 14px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    rgba(10, 16, 22, .82);
}

.api-docs-base-card span,
.api-docs-index strong,
.api-endpoint-grid span,
.api-rate-grid span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.api-docs-base-card code {
  display: block;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(4, 9, 13, .86);
  color: #c8f5ee;
  padding: 12px;
  font-size: 14px;
}

.api-docs-base-card strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
}

.api-docs-base-card strong i,
.api-docs-section-head i,
.api-docs-quickstart i,
.api-docs-note i {
  color: var(--accent);
}

.api-docs-base-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.api-docs-quickstart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.api-docs-quickstart article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 14px;
  box-shadow: none;
}

.api-docs-quickstart i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.api-docs-quickstart strong {
  color: var(--text);
}

.api-docs-quickstart p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.api-docs-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 980px) minmax(230px, 300px);
  gap: 22px;
  align-items: start;
  padding-top: clamp(26px, 4vw, 54px);
}

.api-docs-index {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 3px;
  padding: 4px 0 0;
  max-height: calc(100vh - 104px);
  overflow: auto;
  border-right: 1px solid rgba(148, 163, 184, .12);
}

.api-docs-index-heading {
  margin: 16px 18px 5px 0;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: var(--text-xs);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.api-docs-index a {
  display: flex;
  align-items: center;
  min-height: 34px;
  border-right: 2px solid transparent;
  border-radius: 8px 0 0 8px;
  color: #c8d3dd;
  padding: 7px 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.api-docs-index a:hover,
.api-docs-index a.active {
  border-right-color: var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  color: var(--accent);
}

.api-docs-content {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.api-docs-single {
  max-width: 1180px;
}

.api-docs-section {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 30px);
  scroll-margin-top: 124px;
}

.api-docs-overview {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.api-docs-section-head {
  display: grid;
  gap: var(--space-3);
}

.api-docs-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
}

.api-docs-section p {
  margin: 0;
}

.api-docs-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-5);
}

.api-docs-section pre {
  overflow-x: auto;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--accent));
  border-radius: var(--radius-md);
  background: #060b10;
  color: #c9f7ef;
  padding: 14px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.api-docs-section code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  overflow-wrap: normal;
}

.api-docs-section :not(pre) > code,
.api-docs-table code,
.api-chip-row code {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  vertical-align: baseline;
}

.api-endpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.api-endpoint-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
}

.api-endpoint-grid article,
.api-endpoint-list article {
  display: grid;
  gap: var(--space-3);
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(6, 11, 16, .52);
}

.api-endpoint-list article:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: rgba(10, 16, 22, .72);
}

.api-endpoint-grid code,
.api-endpoint-list code {
  color: #dff8f4;
  font-weight: 900;
}

.api-endpoint-grid p,
.api-endpoint-list p {
  color: var(--muted);
  line-height: 1.5;
}

.api-endpoint-list span {
  width: fit-content;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.api-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.api-docs-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: rgba(6, 11, 16, .52);
}

.api-docs-table th,
.api-docs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.api-docs-table th {
  color: var(--text);
  background: rgba(169, 116, 197, .1);
  font-size: var(--text-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.api-docs-table tr:last-child td {
  border-bottom: 0;
}

.api-docs-table td {
  color: var(--muted);
}

.api-docs-table code,
.api-error-grid code {
  color: #c8f5ee;
}

.api-docs-section h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 18px;
}

.api-docs-note {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.api-rate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.api-rate-grid article {
  display: grid;
  gap: 4px;
  padding: 13px;
}

.api-rate-grid strong {
  color: var(--text);
  font-size: 26px;
}

.api-rate-grid small {
  color: var(--muted);
  font-weight: 900;
}

.api-error-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.api-error-grid code {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(6, 11, 16, .72);
  padding: 10px 12px;
}

.api-docs-tips {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 22px;
}

.api-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.api-chip-row code {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: #dff8f4;
  padding: 7px 10px;
}

.api-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.api-use-grid article {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(6, 11, 16, .52);
  padding: 14px;
}

.api-use-grid strong {
  color: var(--text);
}

.api-use-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.api-docs-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.api-docs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 13%, rgba(12, 18, 24, .88));
  color: var(--text);
  padding: 0 16px;
  text-decoration: none;
  font-weight: 950;
}

.api-docs-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.api-docs-rail {
  position: sticky;
  top: 84px;
  display: grid;
  gap: var(--space-4);
  max-height: calc(100vh - 104px);
  overflow: auto;
}

.api-docs-rail-card {
  display: grid;
  gap: var(--space-3);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(10, 16, 22, .74);
}

.api-docs-rail-card strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
}

.api-docs-rail-card i {
  color: var(--accent);
}

.api-docs-rail-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.api-docs-rail-card .api-docs-button {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
}

.privacy-hero small {
  display: inline-block;
  margin-top: 12px;
  color: var(--muted);
  font-weight: 900;
}

.privacy-layout {
  display: block;
  max-width: 1180px;
}

.privacy-policy {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 4vw, 34px);
}

.privacy-policy section {
  display: grid;
  gap: var(--space-4);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.privacy-policy section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.privacy-policy h2,
.privacy-policy h3,
.privacy-policy p {
  margin: 0;
}

.privacy-policy h2 {
  color: var(--text);
  font-size: clamp(22px, 3vw, 30px);
}

.privacy-policy h2 i {
  color: var(--accent);
  margin-right: 9px;
}

.privacy-policy h3 {
  margin-top: 8px;
  color: #d8e2eb;
  font-size: 16px;
}

.privacy-policy p,
.privacy-policy li {
  color: var(--muted);
  line-height: 1.65;
}

.privacy-policy ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 22px;
}

.privacy-policy a {
  color: var(--accent);
  font-weight: 900;
}

.analytics-notice {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: min(420px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(10, 16, 21, .96);
  box-shadow: 0 18px 70px rgba(0, 0, 0, .42);
  padding: 12px;
  backdrop-filter: blur(14px);
}

.analytics-notice p {
  margin: 0;
  color: #c9d4df;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.analytics-notice button {
  padding: 7px 9px;
  white-space: nowrap;
}

.model-modal[hidden] {
  display: none;
}

.collection-dialog[hidden] {
  display: none;
}

.listing-report-dialog[hidden] {
  display: none;
}

.community-correction-dialog[hidden] {
  display: none;
}

.author-edit-modal[hidden] {
  display: none;
}

.model-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: start center;
  padding: 98px 18px 24px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.model-modal.report-mode {
  place-items: center;
  padding: 18px;
}

.collection-dialog {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

body > .listing-report-dialog {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

body > .community-correction-dialog {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.author-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.author-edit-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid rgba(169, 116, 197, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(169, 116, 197, 0.12), transparent 34%),
    rgba(12, 18, 24, 0.98);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.model-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 11, .76);
  backdrop-filter: blur(8px);
}

.collection-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 11, .72);
  backdrop-filter: blur(8px);
}

.model-collection-picker {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text);
  background: #10171d;
  overflow: auto;
}

.model-collection-picker::backdrop {
  background: rgba(3, 7, 11, .72);
  backdrop-filter: blur(5px);
}

.model-collection-picker-note {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}

.collection-dialog-panel {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  display: grid;
  gap: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #10171d;
  padding: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.collection-dialog-panel h2 {
  margin: -6px 40px 2px 0;
}

.collection-dialog-panel label {
  display: grid;
  gap: 7px;
}

.collection-dialog-panel label[hidden] {
  display: none;
}

.collection-dialog-panel label span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.collection-dialog-panel input,
.collection-dialog-panel select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .82);
  color: var(--text);
  padding: 11px;
  font: inherit;
}

.collection-dialog-panel output {
  min-height: 18px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.community-correction-panel {
  width: min(620px, 100%);
  border-color: color-mix(in srgb, var(--accent-2) 42%, var(--line));
}

.community-correction-target {
  margin: -3px 0 2px;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.community-correction-target strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-correction-target span {
  flex: 0 0 auto;
}

.community-correction-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.community-correction-fields[hidden] {
  display: none;
}

.community-correction-fields[data-correction-fields="description"] {
  grid-template-columns: 1fr;
}

.community-correction-panel label small {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.community-correction-policy {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border-left: 2px solid var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  padding: 9px 10px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.community-correction-policy i {
  margin-top: 2px;
  color: var(--accent-2);
}

.collection-dialog-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.model-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1500px, 100%);
  max-height: calc(100dvh - 122px);
  scroll-padding-bottom: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #10171d;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.model-modal.report-mode .model-modal-panel {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  overflow: visible;
  border-color: rgba(186, 116, 213, .48);
  background:
    linear-gradient(145deg, rgba(186, 116, 213, .08), transparent 38%),
    rgba(12, 18, 24, .98);
}

.model-modal.report-mode .model-modal-panel > .model-modal-close {
  display: none;
}

.model-modal-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 16px 62px 13px 16px;
  border-bottom: 1px solid var(--line);
}

.model-modal-titlebar.has-trust-summary {
  grid-template-columns: minmax(0, .96fr) minmax(440px, 1.04fr);
  align-items: center;
}

.model-modal-title-copy {
  min-width: 0;
}

.model-modal-titlebar h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.model-modal-source-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.model-modal-source-line > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 9px;
  background: #0b1116;
}

.model-modal-source-line > span:first-child {
  color: var(--source);
}

.model-modal-source-line > .model-modal-ai-disclosure.ai-generated {
  border-color: color-mix(in srgb, #b979dc 62%, var(--line));
  color: #dca9ef;
}

.model-modal-source-line > .model-modal-ai-disclosure.not-ai {
  border-color: color-mix(in srgb, #22c55e 48%, var(--line));
  color: #86efac;
}

.model-modal-source-line > .model-modal-price.premium {
  border-color: color-mix(in srgb, var(--source) 58%, var(--line));
  color: color-mix(in srgb, var(--source) 58%, #fff 42%);
}

.model-modal-source-line > .model-modal-price.free {
  border-color: color-mix(in srgb, #22c55e 48%, var(--line));
  color: #86efac;
}

.model-modal-source-line a,
.model-modal-author-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 9px;
  background: #0b1116;
  color: #aab6c1;
  text-decoration: none;
}

.model-modal-source-line a:hover,
.model-modal-author-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.verified-author-icon {
  margin-left: 0.35rem;
  color: #22c55e;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.42));
}

.model-modal-author-link.verified {
  border-color: rgba(34, 197, 94, 0.48);
  background: rgba(34, 197, 94, 0.08);
  color: #86efac;
}

.model-modal-author-link.verified i {
  color: #22c55e;
}

.model-modal-source-line img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.model-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
}

.model-modal-hero {
  display: grid;
  grid-template-columns: minmax(380px, .96fr) minmax(420px, 1.04fr);
  align-items: stretch;
  gap: 14px;
  padding: 14px 16px 16px;
}

/* The action toolbar leads the modal, above the image and description, so the
   primary actions (view listing, add to collection) are visible without
   scrolling. It spans both columns; the media and info sit in the row below. */
.model-modal-hero > .model-modal-actions {
  grid-column: 1 / -1;
  grid-row: 1;
}

.model-modal-hero > .model-modal-media {
  grid-column: 1;
  grid-row: 2;
}

.model-modal-hero > .model-modal-info {
  grid-column: 2;
  grid-row: 2;
}
.model-modal-image {
  aspect-ratio: 16 / 10;
  max-height: min(52vh, 560px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0b1116;
}

.model-modal-media {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
}

.model-modal-image img,
.model-modal-rail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.model-modal-image img {
  object-fit: contain;
}

.model-modal-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 9px;
  padding-right: 2px;
}

.model-modal-description {
  display: grid;
  align-content: start;
  flex: 1 0 auto;
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .58);
  padding: 12px;
  min-width: 0;
  max-height: none;
  overflow: visible;
}

.model-modal-description h3 {
  margin: 0;
  color: var(--text);
}

.model-modal-description h4 {
  margin: 8px 0 2px;
  color: var(--text);
  font-size: .98rem;
}

.model-modal-description h1,
.model-modal-description h2 {
  margin: 4px 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.25;
}

.description-content {
  display: grid;
  gap: var(--space-5);
}

.listing-report-panel {
  width: min(520px, 100%);
  gap: 14px;
  border-color: rgba(186, 116, 213, .48);
  background: rgba(12, 18, 24, .98);
}

.model-modal-report-shell {
  display: block;
  padding: 0;
}

.model-modal-report-shell .listing-report-panel {
  width: 100%;
  max-height: calc(100dvh - 36px);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
}

.listing-report-panel textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(19, 26, 32, .82);
  color: var(--text);
  padding: 11px;
  font: inherit;
  line-height: 1.45;
}

.listing-report-panel button[type="submit"] {
  justify-content: center;
  min-height: 46px;
}

.listing-report-panel button[type="submit"]:disabled {
  opacity: .62;
  cursor: wait;
}

.model-modal-info p,
.model-modal-description p,
.model-modal-description li {
  color: #b7c2cd;
  line-height: 1.62;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.model-modal-description ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.model-modal-description ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
}

.model-modal-description a {
  color: #a974c5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.model-modal-description strong,
.model-modal-description b {
  color: #edf5fb;
}

.model-modal-description blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid rgba(169, 116, 197, .55);
  color: #cbd6df;
}

.model-modal-description code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  color: #e5edf4;
}

.model-modal-description pre {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: auto;
  background: #081016;
}

.model-modal-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  max-width: 100%;
  overflow-x: auto;
  padding: 1px 1px 5px;
  scrollbar-width: thin;
}

.model-modal-info-footer {
  display: grid;
  gap: var(--space-3);
  padding-top: 2px;
}

.model-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.model-modal-stats span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 1px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(11, 17, 22, .82));
  color: #aab6c1;
  padding: 10px 11px;
}

.model-modal-stats i {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 14px;
}

.model-modal-stats strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.model-modal-stats small,
.model-modal-meta small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.model-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: 10px;
  border-top: 1px solid rgba(143, 160, 172, .18);
}

.model-modal-meta span {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  color: #aab6c1;
  font-size: var(--text-sm);
}

.model-modal-meta i {
  grid-row: 1 / span 2;
  color: #a974c5;
}

.model-modal-meta strong {
  color: #dbe6ee;
  font-weight: 800;
}

.model-modal-tags {
  display: grid;
  gap: var(--space-3);
  padding-top: 10px;
  border-top: 1px solid rgba(143, 160, 172, .18);
}

.model-modal-tags h3 {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.model-modal-tags > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.model-modal-tags button {
  border: 1px solid rgba(169, 116, 197, .24);
  border-radius: var(--radius-pill);
  background: rgba(169, 116, 197, .055);
  color: #bfd0dc;
  padding: 6px 9px;
  font-size: var(--text-sm);
  font-weight: 800;
}

.model-modal-tags button::before {
  content: "#";
  color: #a974c5;
  margin-right: 2px;
}

.model-modal-tags button:hover {
  border-color: rgba(169, 116, 197, .58);
  color: #edf5fb;
  background: rgba(169, 116, 197, .11);
}

.model-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.model-modal-actions button,
.model-modal-open {
  width: fit-content;
  border: 1px solid var(--green);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--green);
  text-decoration: none;
  font-weight: 900;
  padding: 10px 12px;
}

.model-modal-hero > .model-modal-actions button,
.model-modal-hero > .model-modal-actions .model-modal-open,
.model-modal-hero > .model-modal-actions .model-modal-admin-menu summary {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  gap: 7px;
}

.model-modal-actions button:disabled {
  opacity: .6;
}

.model-modal-admin-menu {
  position: relative;
}

.model-modal-admin-menu summary {
  list-style: none;
  width: fit-content;
  border: 1px solid var(--green);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--green);
  cursor: pointer;
  font-weight: 900;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.model-modal-admin-menu summary::-webkit-details-marker {
  display: none;
}

.model-modal-admin-menu[open] summary {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.model-modal-admin-menu > div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  z-index: 8;
  display: grid;
  gap: var(--space-3);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(8, 15, 20, .98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

.model-modal-admin-menu > div button {
  width: 100%;
  justify-content: flex-start;
}

.model-save-output {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.model-source-variants {
  padding: 0 18px 18px;
}

.model-source-variants > .model-disclosure-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-bottom: 10px;
}
.model-source-variants[open] > .model-disclosure-summary { margin-bottom: 10px; }

.model-source-variants h3 {
  margin: 0;
  color: var(--source);
}

.model-source-variants > .model-disclosure-summary span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.model-source-variants > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}

.model-source-variants a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 18, .58);
  color: var(--text);
  padding: 8px;
  text-decoration: none;
}

.model-source-variants a.active,
.model-source-variants a:hover {
  border-color: var(--source);
}

.model-source-variants img {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .9);
  object-fit: contain;
  padding: 3px;
}

.model-source-variants span,
.model-source-variants small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-source-variants small {
  grid-column: 2;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
}

.model-modal-rail-image {
  position: relative;
  flex: 0 0 96px;
  display: block;
  width: 96px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0b1116;
  cursor: pointer;
  opacity: .72;
  transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.model-modal-rail-image:hover,
.model-modal-rail-image:focus-visible {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
}

.model-modal-rail-image.active {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
}

.model-modal-rail-image img {
  width: 100%;
  height: 100%;
}

.related-models {
  padding: 0 18px max(28px, env(safe-area-inset-bottom));
}

.related-models header {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-bottom: 12px;
}

.related-models h3 {
  margin: 0;
  color: var(--source);
}

.related-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

@media (max-width: 980px) {
  .model-modal-titlebar,
  .model-modal-titlebar.has-trust-summary,
  .model-modal-hero {
    grid-template-columns: 1fr;
  }

  .model-modal-titlebar {
    padding-right: 58px;
  }
}

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  /* The sign-in chooser is opened from the bottom Account tab, so on a phone it
     rises as a sheet above the tab bar instead of a small floating popover. */
  .auth-provider-popover {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(var(--mobile-tabbar-height, 60px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70dvh, 520px);
    overflow-y: auto;
  }

  .public-brand { gap: var(--space-3); }
  /* The resting masthead carries the brand: a full lockup big enough to read.
     Only the docked header shrinks to the compact mark (rules below). */
  .brand-logo { height: 42px; }
  .brand-logo-mark { height: 34px; }
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .search-app {
    /* The fixed header is ~56px; anything more just pushes content down. */
    padding: max(60px, calc(env(safe-area-inset-top) + 52px)) 12px max(16px, env(safe-area-inset-bottom));
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
  }

  .profile-shell {
    padding: max(60px, calc(env(safe-area-inset-top) + 52px)) 12px max(72px, env(safe-area-inset-bottom));
    max-width: 100vw;
    box-sizing: border-box;
  }

  .profile-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-top: 8px;
  }

  .profile-hero h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .profile-hero p {
    font-size: 15px;
  }

  .profile-identity {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-for-you-panel {
    grid-row: auto;
  }

  .profile-panel header,
  .profile-actions-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-panel header > div,
  .profile-actions-panel > div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-actions-panel button {
    width: 100%;
    justify-content: center;
  }

  .profile-source-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    max-width: 100vw;
    overflow: visible;
  }

  .search-docked .public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 0;
    gap: var(--space-4);
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    background: transparent;
  }

  /* Phones keep the full lockup even when the page is scrolled. The docked
     header used to shrink to the icon-only mark to make room for the search
     field it carried; the search field lives in the tab bar now, so the brand
     stays the same size and never changes on scroll. */
  .search-docked .brand-logo-full { display: block; }
  .search-docked .brand-logo-mark { display: none; }

  .search-docked .public-nav-search .public-search-box {
    min-height: 44px;
    padding: 6px 8px 6px 16px;
    /* Rounded pill while pinned, so the docked search reads cleanly. */
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
  }

  .search-docked .public-nav-search .public-search-box .saved-search-controls summary,
  .search-docked .public-nav-search .public-search-box #publicRandom {
    border-radius: 999px;
  }

  .search-docked .public-nav-search .public-search-box button {
    display: none;
  }

  .public-brand small,
  .desktop-tool-nav {
    display: none !important;
  }

  .public-nav,
  .search-docked .public-nav {
    display: none !important;
  }

  .public-menu-button {
    display: inline-grid;
    flex: 0 0 42px;
  }

  .public-menu-popover .locale-picker {
    justify-content: space-between;
    width: 100%;
  }

  .public-menu-popover .locale-picker-button {
    justify-content: space-between;
    width: 100%;
  }

  .public-menu-popover .locale-menu {
    left: 0;
    right: auto;
    width: 100%;
  }

  .search-hero {
    display: flex;
    flex-direction: column;
    /* The base grid hero sets `align-items: start`, which in a flex column
       sizes every child to its max-content width. Long trending chips then
       stretched the lead column (headline, search field, chips) past the
       viewport edge and clipped it. Stretch the rows to the container width. */
    align-items: stretch;
    padding-top: clamp(12px, 4vh, 34px);
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    text-align: left;
  }

  .search-hero h1 {
    font-size: clamp(32px, 9.5vw, 46px);
    line-height: 1.04;
    max-width: 100%;
    overflow-wrap: normal;
  }

  .hero-copy {
    font-size: 15px;
    line-height: 1.45;
    margin-inline: 0;
    margin-bottom: 12px;
  }

  .mobile-settled-layout .public-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px 0 14px;
    max-height: none;
    opacity: 1;
    transform: none;
  }

  .mobile-settled-layout .public-summary article {
    min-height: 68px;
    padding: 10px;
  }

  .mobile-settled-layout .public-summary article:nth-child(n + 5) {
    display: none;
  }

  .mobile-settled-layout .hero-copy {
    margin-top: 0;
  }

  #heroSearchMount {
    order: 2;
  }

  .public-coverage,
  .popular-searches {
    order: 3;
  }

  .popular-searches {
    justify-content: flex-start;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
  }

  .popular-searches-label {
    min-height: 28px;
    padding: 5px 8px;
    font-size: var(--text-xs);
    flex: 0 0 auto;
  }

  .popular-searches > div {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .popular-searches > div::-webkit-scrollbar {
    display: none;
  }

  .popular-search-chip {
    flex: 0 0 auto;
  }

  /* Trending chips match the "Trending searches" label height. The coarse
     pointer rule above would otherwise force every chip button to 44px, which
     left one tall chip beside a short label. */
  .popular-search-chip,
  .popular-search-chip button {
    min-height: 28px;
    height: 28px;
  }

  .popular-search-chip button {
    padding: 0 10px;
    font-size: var(--text-xs);
    line-height: 1;
  }

  .source-freshness-panel {
    order: 4;
    width: 100%;
    margin: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  #heroSourcesMount .public-source-row {
    justify-content: stretch;
    gap: var(--space-3);
  }

  #heroSourcesMount .public-source {
    min-height: 0;
    padding: 7px 9px;
  }

  .source-freshness-rail {
    width: 100%;
    min-width: 0;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .source-freshness-label,
  .source-freshness-note {
    min-height: 28px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: var(--text-sm);
  }

  .source-freshness-label,
  .source-freshness-note {
    background: rgba(10, 16, 22, .54);
  }

  /* Flex, not a fixed grid: the search field takes the free space and the
     controls (saved, options, random) sit at its right edge in order, and
     nothing wraps when a control is hidden. */
  .public-search-box {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-height: 52px;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    gap: var(--space-3);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28), 0 0 0 1px rgba(169, 116, 197, .08);
  }

  .public-search-box input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
  }

  .public-search-box button {
    display: none;
  }

  /* The filter (search options) control belongs in the resting search field too,
     not only while docked. */
  .public-search-box .search-filter-toggle {
    display: inline-flex;
  }

  /* The random button sits at the field's right edge, not floating mid-field. */
  .public-search-box #publicRandom {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 8px;
  }

  .public-search-box #publicRandom span {
    display: none;
  }

  .public-search-box #publicRandom .button-icon {
    margin: 0;
  }

  .public-search-box .saved-search-controls {
    display: inline-flex;
  }

  .public-search-box .saved-search-controls button,
  .public-search-box .saved-search-controls summary {
    display: inline-flex;
  }

  .saved-search-controls summary {
    width: 42px;
    min-height: 42px;
    padding: 8px;
  }

  .saved-search-controls summary span,
  .saved-search-controls summary .fa-chevron-down {
    display: none;
  }

  .saved-search-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    top: var(--saved-search-menu-top, max(126px, calc(env(safe-area-inset-top) + 86px)));
    width: auto;
    max-height: min(420px, calc(100vh - 140px));
    z-index: 190;
  }

  .saved-search-row > button:first-child {
    display: block;
  }

  .saved-search-row .icon-only {
    display: inline-flex;
  }

  .public-source-row,
  .public-summary {
    display: grid;
  }

  .public-source-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .public-source-option {
    grid-template-columns: minmax(0, 1fr) 42px;
    width: 100%;
  }

  .public-source-hub-link {
    width: 42px;
    min-width: 42px;
  }

  .public-source {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .public-source span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-source small {
    margin-left: auto;
  }

  .public-content {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .public-category-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 14px;
    grid-template-rows: auto auto auto auto;
    gap: 9px;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mobile-search-filters .public-category-sidebar {
    gap: var(--space-3);
  }

  .sidebar-sources-active .public-category-sidebar {
    grid-template-rows: auto auto auto auto;
  }

  .public-sidebar-sources {
    display: grid;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    gap: var(--space-3);
    padding: 0;
  }

  .public-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .mobile-settled-layout .public-sidebar-sources,
  .mobile-settled-layout .public-category-sidebar .source-filter-header {
    display: grid;
  }

  .mobile-settled-layout .public-category-sidebar .source-filter-header {
    display: flex;
  }

  .mobile-settled-layout .public-sidebar-sources .public-source-row {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
  }

  .mobile-settled-layout .public-sidebar-sources .source-freshness-panel {
    order: 2;
    margin-top: 4px;
  }

  .mobile-settled-layout .public-sidebar-sources .public-source {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 8px 10px;
    align-self: flex-start;
    justify-content: flex-start;
  }

  .mobile-settled-layout .public-sidebar-sources .public-source img {
    width: 22px;
    height: 22px;
  }

  .mobile-settled-layout .public-sidebar-sources .public-source span {
    font-size: 13px;
  }

  .mobile-settled-layout .public-sidebar-sources .public-source small {
    font-size: var(--text-xs);
  }

  .category-sidebar-header {
    min-height: 30px;
  }

  .category-sidebar-header strong {
    font-size: 18px;
  }

  .mobile-filter-toggle {
    margin-left: auto;
    min-height: 32px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: rgba(148, 163, 184, .2);
    background: rgba(8, 14, 20, .72);
    color: var(--muted);
    font-size: var(--text-sm);
  }

  .mobile-filter-toggle i {
    margin: 0;
    line-height: 1;
  }

  .mobile-filter-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  .mobile-search-filters.mobile-sources-collapsed .public-sidebar-sources {
    display: none;
  }

  .mobile-search-filters.mobile-categories-collapsed .public-categories {
    display: none;
  }

  .mobile-search-filters.mobile-categories-collapsed .public-category-sidebar {
    margin-bottom: 8px;
  }

  .public-categories button {
    min-height: 44px;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.2;
  }

  .public-categories button span,
  .public-categories button strong {
    min-width: 0;
  }

  .public-categories button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .source-grid,
  .unified-grid,
  .related-grid,
  .for-you-grid,
  .collection-card-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
  }

  .public-main-results,
  .source-section,
  .for-you-section,
  .public-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .source-section,
  .for-you-section {
    gap: var(--space-4);
  }

  .source-section > header,
  .for-you-section > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-3);
    padding-bottom: 8px;
  }

  .source-section > header > div:first-child {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: 2px;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .for-you-section > header > div:first-child {
    display: grid;
    gap: 4px;
    width: 100%;
    min-width: 0;
  }

  .source-section > header img {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .source-section h3,
  .for-you-section h3 {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(21px, 6vw, 30px);
    line-height: 1.05;
  }

  .source-section header span,
  .for-you-section p {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.2;
  }

  .source-section header span {
    white-space: nowrap;
  }

  .for-you-section p {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }

  .section-header-actions {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
  }

  .section-header-actions button[data-see-source],
  .section-header-actions .lane-see-more-link {
    flex: 1 1 116px;
    min-width: 112px;
    max-width: 160px;
    min-height: 36px;
    padding: 7px 10px;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lane-icon-control,
  .section-header-actions .section-collapse-toggle {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
  }

  .public-card-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .for-you-section > header {
    align-items: stretch;
  }

  .public-card:hover {
    transform: none;
  }

  .public-toolbar {
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: 12px;
    padding: 10px 0;
  }

  .is-searching .public-toolbar {
    display: grid;
  }

  .public-toolbar h2 {
    font-size: 24px;
    line-height: 1.15;
  }

  .public-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    width: 100%;
  }

  .public-toolbar-actions > .public-sort-control {
    grid-column: 1 / -1;
  }

  .public-view-toggle {
    grid-column: 1 / -1;
    width: 100%;
  }

  .public-share-search {
    width: auto;
    min-height: 42px;
  }

  .public-toggle-control {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
  }

  .public-search-options {
    min-width: 0;
  }

  .public-search-options summary {
    width: 100%;
    min-height: 42px;
  }

  .public-search-options[open] {
    grid-column: 1 / -1;
  }

  .public-search-options-menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }

  .public-view-toggle button {
    flex: 1 1 0;
    min-width: 0;
  }

  .public-search-options-menu .public-sort-control,
  .public-search-options-menu .public-access-control,
  .public-search-options-menu .public-preferred-source-control,
  .public-search-options-menu .public-page-size {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    width: 100%;
  }

  .public-sort-control select,
  .public-access-control select,
  .public-preferred-source-control select,
  .public-page-size select {
    width: 100%;
  }

  .collections-page > header,
  .collection-detail-page > header {
    grid-template-columns: 1fr;
  }

  .collection-card {
    grid-template-columns: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 400px;
  }

  .collection-card-actions {
    grid-column: auto;
  }

  .collection-collage {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .model-modal {
    place-items: end center;
    padding: max(70px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom));
  }

  .model-modal-panel {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 82px);
    border-radius: 8px 8px 0 0;
  }

  .model-modal-hero {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: var(--space-5);
  }

  .model-modal-info {
    order: 3;
    padding-right: 0;
  }

  .model-modal-media {
    order: 1;
    width: 100%;
  }

  .model-modal-titlebar,
  .model-modal-titlebar.has-trust-summary {
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 54px 12px 14px;
  }

  .model-modal-titlebar h2 {
    font-size: clamp(22px, 6vw, 30px);
  }

  .model-modal-image {
    order: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: min(52vh, 440px);
  }

  .model-modal-rail {
    order: 1;
  }

  .model-modal-info-footer {
    order: 2;
  }

  .model-modal-description {
    max-height: none;
    overflow: visible;
  }

  .model-modal-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .model-modal-stats span {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 6px;
    padding: 8px;
  }

  .model-modal-stats i {
    grid-row: 1 / span 2;
  }

  .model-modal-stats small {
    order: initial;
    font-size: 8px;
  }

  .model-modal-actions {
    order: 2;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: var(--space-3);
  }

  .model-modal-actions button,
  .model-modal-open {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    padding: 8px 9px;
    font-size: 13px;
    line-height: 1.15;
    text-align: center;
  }

  .model-modal-admin-menu,
  .model-modal-admin-menu summary {
    width: 100%;
    min-width: 0;
  }

  .model-modal-admin-menu {
    grid-column: 1 / -1;
  }

  .model-modal .related-models {
    overflow: hidden;
    padding: 0 12px 14px;
  }

  .model-modal .related-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    padding-bottom: 6px;
  }

  .model-modal .related-grid .public-card {
    flex: 0 0 min(78vw, 280px);
    scroll-snap-align: start;
  }

  .model-modal .related-grid .public-card-body {
    flex-basis: 250px;
    height: 250px;
    min-height: 250px;
  }

  .model-modal .related-grid .public-card-description {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    -webkit-line-clamp: 2;
  }

  .analytics-notice {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    grid-template-columns: 1fr auto auto;
  }

  .public-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    padding: 22px 0 max(76px, env(safe-area-inset-bottom));
  }

  .public-footer .footer-brand-row {
    display: grid;
    gap: 4px;
  }

  .footer-legal-links {
    display: flex;
    gap: var(--space-4);
  }

  .footer-legal-links::before {
    display: none;
  }

  .public-footer strong {
    font-size: 17px;
  }

  .public-footer p {
    font-size: 13px;
    line-height: 1.6;
  }

  .source-attribution a {
    min-height: 34px;
    padding: 7px 10px;
    font-size: var(--text-sm);
  }

  .footer-source-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    order: 2;
    width: 100%;
  }

  .footer-source-list a {
    min-width: 0;
    justify-content: flex-start;
  }

  .footer-source-list a img,
  .footer-contact-row a i {
    flex: 0 0 auto;
  }

  .footer-contact-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    order: 1;
    padding-top: 0;
    width: 100%;
  }

  .footer-contact-row a {
    justify-content: center;
    min-width: 0;
    text-align: center;
  }

  .public-footer p {
    order: 3;
  }
}

@media (max-width: 430px) {
  .public-source-row {
    gap: var(--space-4);
  }

  .public-source {
    padding: 12px 10px;
    gap: 7px;
  }

  .public-source img {
    width: 20px;
    height: 20px;
  }

  .public-source span {
    font-size: var(--text-sm);
  }

  .public-source small {
    font-size: var(--text-xs);
  }

  .mobile-settled-layout .public-sidebar-sources .public-source {
    min-width: 0;
    max-width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 7px 9px;
  }

  .mobile-settled-layout .public-sidebar-sources .public-source img {
    width: 20px;
    height: 20px;
  }

  .public-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-summary article {
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: 11px;
  }

  .public-summary strong {
    font-size: 22px;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .public-summary #publicIndexed {
    font-size: 18px;
  }

  .public-summary span {
    font-size: var(--text-sm);
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .analytics-notice {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-notice p {
    grid-column: 1 / -1;
  }

  .source-attribution a {
    font-size: var(--text-xs);
    padding: 7px 9px;
  }

  .source-attribution img {
    width: 18px;
    height: 18px;
  }
}

.admin-shell {
  background:
    radial-gradient(circle at 18% -10%, rgba(169, 116, 197, .07), transparent 30rem),
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 34rem),
    var(--bg);
}

.admin-pending .admin-sidebar,
.admin-pending .admin-main {
  display: none;
}

.admin-locked {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    #080d12;
}

.admin-locked section {
  width: min(440px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(14, 21, 27, .88);
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
}

.admin-locked .brand-mark {
  margin: 0 auto 16px;
}

.admin-locked .brand-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
}

.admin-locked h1 {
  margin: 0 0 8px;
}

.admin-locked p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 18px;
}

.admin-locked a {
  display: inline-flex;
  border: 1px solid var(--green);
  border-radius: var(--radius-md);
  color: var(--green);
  text-decoration: none;
  padding: 10px 12px;
  font-weight: 900;
}

.admin-sidebar {
  grid-template-columns: 1fr;
  grid-template-rows: min-content minmax(220px, 1fr) minmax(150px, 30vh);
  gap: var(--space-4);
}

.admin-brand {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 9px;
  padding: 2px 1px 9px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.admin-brand .brand-icon {
  width: 34px;
  height: 34px;
}

.admin-brand h1 {
  font-size: 23px;
  line-height: 1;
}

.admin-brand p {
  margin-top: 3px;
  font-size: 13px;
}

.admin-tabs {
  grid-column: 1;
  grid-row: 2;
  gap: 7px;
  margin-top: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.admin-tabs a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.admin-tabs i {
  color: var(--green);
  width: 16px;
  text-align: center;
  font-size: var(--text-sm);
}

.admin-tabs span {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-tabs a.active {
  background: rgba(169, 116, 197, .12);
}

.grouped-admin-tabs {
  gap: var(--space-3);
}

.admin-tab-group {
  display: grid;
  gap: 3px;
  padding: 0 0 7px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.admin-tab-group:last-child {
  border-bottom: 0;
}

.admin-tab-kicker {
  display: block;
  padding: 3px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-tab-group a {
  min-height: 31px;
  padding: 6px 8px;
  border-color: transparent;
  background: transparent;
}

.admin-tab-group a:hover,
.admin-tab-group a:focus-visible {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .04);
}

.admin-tab-group a.active {
  border-color: rgba(70, 207, 157, .56);
  background: rgba(70, 207, 157, .1);
}

.admin-tabs a.is-loading::after,
.admin-tabs a.has-error::after {
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: var(--text-xs);
}

.admin-tabs a.is-loading::after {
  content: "\f110";
  color: var(--accent);
  animation: fa-spin 1s linear infinite;
}

.admin-tabs a.has-error::after {
  content: "\f071";
  color: #f59e0b;
}

.admin-sidebar .sidebar-health {
  max-height: none;
  align-self: stretch;
}

.admin-sidebar .source-row {
  min-height: 24px;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}

.admin-sidebar .source-row strong {
  max-width: 126px;
}

.admin-main {
  align-content: start;
}

.nested-admin-panel {
  min-height: 0;
  box-shadow: none;
}

.panel-heading.compact {
  margin-bottom: 10px;
}

.panel-heading.compact h4 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 3px 0 0;
  color: var(--text);
}

.admin-topbar {
  align-items: start;
  padding-bottom: 4px;
}

.topbar-actions,
.panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-strong);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

.button-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

.admin-user-panel {
  display: grid;
  grid-template-columns: 34px minmax(120px, auto) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .62);
  padding: 6px;
}

.admin-user-panel[hidden] {
  display: none;
}

.admin-user-panel img,
.admin-user-panel > span {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04100d;
  font-weight: 1000;
}

.admin-user-panel strong,
.admin-user-panel small {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-panel small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.tab-panel {
  display: none;
  gap: 18px;
}

.tab-panel.active {
  display: grid;
}

.admin-subnav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 16, .48);
  scrollbar-width: thin;
}

.admin-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 900;
  white-space: nowrap;
}

.admin-subnav a i {
  color: var(--green);
  font-size: var(--text-sm);
}

.admin-subnav a:hover,
.admin-subnav a:focus-visible {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}

.admin-subnav a.active {
  border-color: rgba(70, 207, 157, .58);
  background: rgba(70, 207, 157, .12);
  color: var(--text);
}

.email-export-panel {
  grid-column: 1 / -1;
}

.dashboard-loading-state {
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 150px;
  padding: 24px;
  border-style: dashed;
  background: rgba(7, 12, 16, .34);
  text-align: center;
}

.dashboard-loading-state i {
  color: var(--accent);
  font-size: 24px;
}

.dashboard-loading-state strong {
  color: var(--text);
}

.dashboard-loading-state span {
  color: var(--muted);
}

.overview-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 18px;
}

.backup-admin-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
}

.backup-status-summary,
.backup-history-list {
  display: grid;
  gap: var(--space-5);
  margin-top: 14px;
}

.backup-current-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(178, 112, 217, .10), rgba(169, 116, 197, .05)),
    rgba(8, 13, 18, .72);
  border-radius: var(--radius-md);
  padding: 18px;
}

.backup-current-card.ok {
  border-color: rgba(34, 197, 94, .32);
}

.backup-current-card.warn {
  border-color: rgba(245, 158, 11, .42);
}

.backup-current-card h4,
.backup-artifacts h4 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 8px;
  color: var(--text);
}

.backup-current-card h4 i,
.backup-artifacts h4 i,
.backup-history-row > span i {
  color: var(--accent);
}

.backup-current-card span {
  color: var(--muted);
  line-height: 1.55;
}

.backup-current-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.backup-current-card dl div,
.backup-artifacts,
.backup-history-row {
  border: 1px solid var(--line);
  background: rgba(7, 12, 16, .72);
  border-radius: var(--radius-md);
}

.backup-current-card dl div {
  padding: 12px;
}

.backup-current-card dt {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.backup-current-card dd {
  margin: 4px 0 0;
  color: var(--text);
  font-weight: 900;
}

.backup-artifacts {
  padding: 16px;
}

.backup-artifacts ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.backup-artifacts li,
.backup-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.backup-artifacts li {
  color: var(--muted);
}

.backup-artifacts b,
.backup-history-row b {
  color: var(--text);
}

.backup-history-row {
  padding: 12px;
}

.backup-history-row.ok {
  border-color: rgba(34, 197, 94, .28);
}

.backup-history-row.warn {
  border-color: rgba(245, 158, 11, .42);
}

.backup-history-row > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(178, 112, 217, .11);
  flex: 0 0 auto;
}

.backup-history-row div {
  min-width: 0;
  margin-right: auto;
}

.backup-history-row strong,
.backup-history-row small {
  display: block;
}

.backup-history-row small {
  color: var(--muted);
}

.chart-card canvas {
  max-height: 320px;
}

.panel-heading small {
  color: var(--muted);
  font-weight: 900;
}

.panel-heading h3 i,
.compact-heading h3 i,
.source-log-head h4 i {
  color: var(--accent);
  margin-right: 8px;
}

.metric-card.warn {
  border-color: rgba(245, 158, 11, .42);
}

.metric-card.warn .metric-icon {
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: 14px;
}

.process-section {
  margin: 6px 0 2px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.process-card,
.summary-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid var(--line);
  background: rgba(11, 17, 22, .55);
  border-radius: var(--radius-md);
  padding: 12px;
}

.process-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: #10231f;
  color: var(--green);
  font-weight: 900;
}

.process-card.warn {
  border-color: rgba(245, 158, 11, .42);
}

.process-card.warn > span {
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
}

.process-card div,
.summary-row div {
  min-width: 0;
}

.process-card strong,
.process-card small,
.summary-row strong,
.summary-row small {
  display: block;
}

.process-card small,
.summary-row small {
  color: var(--muted);
}

.process-card b,
.summary-row b {
  margin-left: auto;
  color: var(--green);
}

.summary-list {
  display: grid;
  gap: var(--space-3);
  margin-top: 14px;
}

.summary-list.scroll-list,
#topSearchList,
#topModelList {
  max-height: 365px;
  overflow-y: auto;
  padding-right: 6px;
}

.summary-row {
  border-color: color-mix(in srgb, var(--source), #27323d 75%);
  text-decoration: none;
  color: inherit;
}

.summary-row img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.summary-row b {
  color: var(--source);
}

.contact-admin-grid {
  grid-template-columns: minmax(420px, .85fr) minmax(520px, 1.15fr);
  align-items: start;
}

.contact-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: 14px;
}

.contact-admin-summary article {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: rgba(8, 14, 19, .55);
}

.contact-admin-summary strong {
  display: block;
  color: var(--text);
  font-size: 22px;
}

.contact-admin-summary span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.contact-message-list {
  display: grid;
  gap: var(--space-3);
  max-height: 650px;
  overflow-y: auto;
  padding-right: 6px;
  margin-top: 14px;
}

.contact-message-row {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(12, 18, 24, .72);
  color: var(--text);
}

.contact-message-row:hover,
.contact-message-row.active {
  border-color: var(--accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 16%, transparent);
}

.contact-message-row.unread {
  background: color-mix(in srgb, var(--accent) 8%, rgba(12, 18, 24, .82));
}

.contact-message-row.closed {
  opacity: .72;
}

.contact-message-row.has-channel {
  border-color: color-mix(in srgb, #5865f2 36%, var(--line));
}

.contact-message-row > span {
  color: var(--accent);
}

.contact-message-row strong,
.contact-message-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-message-row small {
  color: var(--muted);
  margin-top: 3px;
}

.contact-channel-badge,
.contact-discord-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.contact-channel-badge {
  width: fit-content;
  margin-top: 7px;
  color: #b9c2ff;
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 900;
}

.contact-discord-link {
  color: #b9c2ff;
  font-weight: 900;
  text-decoration: none;
}

.contact-discord-link:hover {
  color: var(--accent);
}

.contact-message-row b {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.contact-detail {
  margin-top: 14px;
}

.contact-detail-card {
  display: grid;
  gap: 16px;
}

.contact-detail-card.closed {
  opacity: .86;
}

.contact-detail-head {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.contact-detail-head > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.contact-detail-head h4 {
  margin: 0;
  font-size: 22px;
}

.contact-detail-head small {
  color: var(--muted);
}

.contact-detail dl {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.contact-detail dl div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding-bottom: 8px;
}

.contact-detail dt {
  color: var(--muted);
  font-weight: 800;
}

.contact-detail dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.contact-detail pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(5, 10, 14, .64);
  color: var(--text);
  font: 600 14px/1.6 Inter, system-ui, sans-serif;
}

.discord-ticket-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #5865f2 35%, var(--line));
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(88, 101, 242, .1), rgba(169, 116, 197, .08));
}

.discord-ticket-panel h5 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 4px;
  font-size: 15px;
}

.discord-ticket-panel p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.contact-discord-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contact-discord-actions .button,
.contact-discord-actions button,
.discord-ticket-reply-form button {
  width: auto;
}

.contact-discord-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 22, 30, .72);
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
}

.contact-discord-actions .button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.discord-ticket-reply-form {
  display: grid;
  gap: var(--space-3);
}

.discord-ticket-reply-form > span {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  font-weight: 900;
}

.discord-ticket-reply-form textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  color: var(--text);
  background: rgba(5, 10, 14, .7);
  font: 700 14px/1.55 Inter, system-ui, sans-serif;
}

.discord-ticket-reply-form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.meshy-admin-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: start;
}

.meshy-commands-panel,
.meshy-logs-panel {
  grid-column: 1 / -1;
}

.meshy-status-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid rgba(169, 116, 197, .35);
  border-radius: 10px;
  background: rgba(169, 116, 197, .08);
  padding: 14px;
}

.meshy-status-card.ok {
  border-color: rgba(0, 210, 161, .35);
  background: rgba(0, 210, 161, .08);
}

.meshy-status-card.warn {
  border-color: rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .08);
}

.meshy-status-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--accent);
}

.meshy-status-card.ok > span {
  color: #22c55e;
}

.meshy-status-card.warn > span {
  color: #f59e0b;
}

.meshy-status-card strong,
.meshy-status-card small {
  display: block;
}

.meshy-status-card small {
  color: var(--muted);
  margin-top: 3px;
}

.meshy-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: var(--space-4);
  margin-top: 12px;
}

.meshy-stat-card,
.meshy-command {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 19, .55);
  padding: 12px;
}

.meshy-stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.meshy-stat-card i {
  color: var(--accent);
}

.meshy-stat-card strong,
.meshy-stat-card span,
.meshy-command strong,
.meshy-command span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meshy-stat-card strong {
  color: var(--text);
  font-size: 20px;
}

.meshy-stat-card span,
.meshy-command span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.meshy-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.admin-inline-output {
  display: block;
  min-height: 22px;
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.meshy-commands-panel > div:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.meshy-log-output {
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  font: 600 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(2, 7, 10, .72);
  padding: 14px;
}

.meshy-log-line {
  border: 1px solid rgba(148, 163, 184, .14);
  border-left: 3px solid rgba(169, 116, 197, .72);
  border-radius: var(--radius-md);
  background: rgba(9, 16, 23, .78);
  padding: 10px 12px;
  overflow: hidden;
}

.meshy-log-line.warn {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, .08);
}

.meshy-log-line.error {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, .08);
}

.meshy-log-line.debug {
  border-left-color: #8b5cf6;
}

.meshy-log-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.meshy-log-meta strong {
  color: #a974c5;
  border: 1px solid rgba(169, 116, 197, .25);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  background: rgba(169, 116, 197, .08);
}

.meshy-log-line.warn .meshy-log-meta strong {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, .32);
  background: rgba(251, 191, 36, .1);
}

.meshy-log-line.error .meshy-log-meta strong {
  color: #f87171;
  border-color: rgba(248, 113, 113, .32);
  background: rgba(248, 113, 113, .1);
}

.meshy-log-meta em {
  max-width: 320px;
  overflow: hidden;
  color: #c4b5fd;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meshy-log-line p,
.meshy-log-line pre {
  margin: 0;
}

.meshy-log-line p {
  color: var(--text);
  overflow-wrap: anywhere;
}

.meshy-log-line pre {
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  color: #b6c6d4;
  border-top: 1px solid rgba(148, 163, 184, .12);
  padding-top: 8px;
}

.settings-form {
  display: grid;
  gap: var(--space-5);
  margin-top: 14px;
}

.featured-admin-grid {
  grid-template-columns: minmax(360px, .65fr) minmax(560px, 1.35fr);
  align-items: start;
}

.featured-pick-list {
  margin-top: 14px;
}

.featured-pick span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.featured-pick img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
}

.featured-manager-list {
  display: grid;
  gap: var(--space-5);
  margin-top: 14px;
}

.featured-admin-row {
  display: grid;
  grid-template-columns: 34px 96px minmax(240px, 1fr) 132px;
  gap: 14px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--source), #27323d 70%);
  background: rgba(11, 17, 22, .58);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease, transform .18s ease;
}

.featured-admin-row[draggable="true"] {
  cursor: grab;
}

.featured-admin-row.is-dragging {
  opacity: .42;
  transform: scale(.995);
  cursor: grabbing;
}

.featured-admin-row.is-drop-target {
  border-color: var(--accent);
  background: rgba(169, 116, 197, .1);
}

.featured-admin-row.is-hidden {
  opacity: .62;
  border-style: dashed;
  background: rgba(11, 17, 22, .34);
}

.featured-admin-row > img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #0a1117;
}

.featured-drag-handle {
  width: 34px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--source), #27323d 72%);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, .08);
  color: var(--source);
  cursor: grab;
}

.featured-drag-handle:disabled {
  cursor: not-allowed;
  color: var(--muted);
  background: rgba(148, 163, 184, .06);
}

.featured-admin-main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.featured-admin-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.featured-admin-title strong {
  color: var(--text);
}

.featured-admin-title span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--source);
  font-size: var(--text-sm);
  font-weight: 900;
}

.featured-admin-title img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .88);
  object-fit: contain;
}

.featured-admin-main small {
  color: var(--muted);
}

.featured-admin-main input,
.featured-admin-main textarea {
  width: 100%;
  min-width: 0;
}

.featured-admin-main textarea {
  resize: vertical;
  max-width: 100%;
  min-height: 48px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 17, .82);
  color: var(--text);
  font: inherit;
  line-height: 1.35;
}

.featured-admin-main textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent), transparent 66%);
  border-color: var(--accent);
}

.featured-admin-main label,
.featured-admin-actions label {
  display: grid;
  gap: 5px;
}

.featured-admin-main label span,
.featured-admin-actions label span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.featured-admin-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-self: stretch;
  align-content: center;
}

.featured-admin-actions a,
.featured-admin-actions button {
  width: 100%;
}

.featured-order-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, .72);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.featured-order-pill strong {
  color: var(--text);
}

.featured-manager-list.is-saving-order {
  pointer-events: none;
  opacity: .72;
}

@media (max-width: 900px) {
  .featured-admin-row {
    grid-template-columns: 34px 84px minmax(0, 1fr);
  }

  .featured-admin-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
}

.translation-admin-grid {
  grid-template-columns: minmax(260px, .34fr) minmax(640px, 1fr);
  align-items: start;
}

.translation-language-panel {
  position: sticky;
  top: 18px;
}

.translation-language-list {
  display: grid;
  gap: var(--space-3);
  max-height: 54vh;
  overflow: auto;
  padding-right: 4px;
}

.translation-language-button {
  display: grid;
  gap: 4px;
  justify-items: stretch;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 19, .66);
  padding: 11px;
  color: var(--text);
}

.translation-language-button span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.translation-language-button i {
  color: var(--accent);
}

.translation-language-button small {
  color: var(--muted);
  font-weight: 900;
}

.translation-language-button:hover,
.translation-language-button.active {
  border-color: color-mix(in srgb, var(--accent), var(--line) 35%);
  background: rgba(169, 116, 197, .12);
}

.translation-new-language {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.translation-new-language label {
  display: grid;
  gap: 7px;
}

.translation-new-language span,
.translation-locale-row label > span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.translation-locale-row {
  display: grid;
  grid-template-columns: minmax(160px, .34fr) minmax(260px, 1fr);
  gap: var(--space-5);
  align-items: end;
}

.translation-locale-row label {
  display: grid;
  gap: 7px;
}

.translation-locale-row strong {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: var(--radius-pill);
  background: rgba(169, 116, 197, .1);
  color: var(--accent);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 1000;
}

.translation-filter-field input,
.translation-new-language input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 11px 12px;
  outline: 0;
}

.translation-form textarea {
  resize: vertical;
  font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  tab-size: 2;
}

.translation-file-row {
  display: grid;
  gap: var(--space-3);
}

.translation-file-row small {
  color: var(--muted);
}

.file-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, .08);
  color: var(--text);
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}

.file-picker input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-picker:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.translation-form .panel-actions {
  justify-content: flex-start;
}

.translation-form output {
  min-height: 20px;
  color: var(--muted);
  font-weight: 800;
}

.translation-form output:not(:empty) {
  color: var(--accent);
}

.translation-list {
  display: grid;
  gap: var(--space-4);
  max-height: 68vh;
  overflow: auto;
  padding-right: 4px;
}

.translation-row {
  display: grid;
  grid-template-columns: minmax(190px, .45fr) minmax(320px, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, .55);
}

.translation-row.is-override {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.translation-row strong {
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.translation-row.is-override strong {
  color: var(--accent);
}

.translation-row strong,
.translation-row code,
.translation-row p,
.translation-row textarea {
  overflow-wrap: anywhere;
}

.translation-row-meta {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.translation-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.translation-row label span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
}

.translation-row textarea {
  min-height: 56px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #071016;
  color: var(--text);
  padding: 9px 10px;
  resize: vertical;
}

.translation-row small {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.translation-row button {
  white-space: nowrap;
}

.translation-raw-editor {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 17, .48);
  padding: 10px;
}

.translation-raw-editor summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--muted);
  font-weight: 900;
}

.translation-raw-editor textarea {
  width: 100%;
  min-height: 220px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #071016;
  color: var(--text);
  padding: 12px;
}

/* Legacy single-key translation rows kept for older cached admin sessions. */
.translation-row-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/*
 * Keep this block after the new editor styles because older markup can still
 * exist for one refresh after deployment.
 */
.translation-form textarea {
  resize: vertical;
}

.setting-toggle {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 16, .38);
  padding: 12px;
}

.setting-toggle input {
  margin-top: 4px;
}

.setting-toggle span,
.setting-toggle strong,
.setting-toggle small {
  display: block;
}

.user-list {
  display: grid;
  gap: var(--space-4);
  margin-top: 14px;
}

.role-management {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .38);
  padding: 14px;
  margin: 14px 0 18px;
}

.system-key-management {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .38);
  padding: 14px;
  margin: 0 0 18px;
}

.system-key-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px 140px auto minmax(120px, .6fr);
  gap: var(--space-3);
  align-items: center;
  margin-bottom: 12px;
}

.system-key-form input,
.system-key-form select,
.api-key-actions input,
.api-key-actions select {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 9px 10px;
  min-width: 0;
}

.system-key-form output {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.user-search-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  margin: 14px 0 12px;
}

.user-search-toolbar label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 18, .82);
  color: var(--muted);
  padding: 0 12px;
}

.user-search-toolbar input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 12px 0;
  outline: 0;
}

.user-search-toolbar small {
  color: var(--muted);
  font-weight: 900;
}

.compact-heading {
  margin-bottom: 12px;
}

.role-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.role-admin-card {
  border: 1px solid color-mix(in srgb, var(--role, var(--accent)), #27323d 64%);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 19, .72);
  overflow: hidden;
}

.role-admin-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: 12px;
}

.role-swatch {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: var(--role, var(--accent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--role, var(--accent)), transparent 55%);
}

.role-admin-summary strong,
.role-admin-summary small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-admin-summary small,
.role-admin-editor > label > span,
.permission-grid small,
.user-detail-panel p {
  color: var(--muted);
}

.role-admin-editor {
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--role, var(--accent)), #27323d 72%);
  padding: 12px;
}

.role-admin-editor[hidden] {
  display: none;
}

.role-admin-editor input[type="text"],
.role-admin-editor input:not([type]),
.role-admin-editor .role-name-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 9px 10px;
}

.role-name-field,
.role-color-field {
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 900;
}

.role-color-field input {
  width: 52px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  padding: 3px;
}

.permission-grid {
  display: grid;
  gap: var(--space-4);
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.permission-group {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(39, 50, 61, .55);
  border-radius: var(--radius-md);
  background: rgba(5, 10, 14, .38);
  padding: 9px;
}

.permission-group h5 {
  margin: 0;
  color: var(--accent);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.permission-group > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.permission-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  border: 1px solid rgba(39, 50, 61, .78);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .58);
  padding: 9px;
}

.permission-grid input {
  margin-top: 3px;
  accent-color: var(--role, var(--accent));
}

.permission-grid strong,
.permission-grid small {
  display: block;
  line-height: 1.3;
}

.role-admin-actions,
.user-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.user-identity-editor {
  display: grid;
  grid-template-columns: minmax(160px, 260px);
  gap: var(--space-3);
  margin-top: 10px;
}

.user-identity-editor input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 18, .82);
  color: var(--text);
  padding: 10px;
}

.user-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.user-identity-actions .primary-action {
  min-width: 112px;
  justify-content: center;
  padding: 11px 16px;
  font-size: 13px;
}

.user-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .58);
  padding: 0;
  overflow: hidden;
}

.user-row-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: 12px;
}

.user-row.disabled {
  opacity: .72;
  border-style: dashed;
}

.user-row img {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: #0b1116;
}

.user-row strong,
.user-row small,
.user-identity {
  display: block;
  min-width: 0;
}

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

.user-row small {
  color: var(--muted);
}

.user-row b {
  color: var(--green);
}

.role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.role-list span {
  border: 1px solid color-mix(in srgb, var(--role, var(--accent)), #27323d 60%);
  color: var(--role, var(--accent));
  border-radius: var(--radius-pill);
  padding: 4px 7px;
  font-size: var(--text-xs);
  font-weight: 900;
}

.role-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.role-editor label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--role, var(--accent)), #27323d 68%);
  border-radius: var(--radius-pill);
  padding: 4px 7px;
  color: var(--role, var(--accent));
  font-size: var(--text-xs);
  font-weight: 900;
}

.role-editor input {
  accent-color: var(--role, var(--accent));
}

.user-detail-panel {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(360px, .9fr) minmax(520px, 1.15fr);
  gap: 16px;
  align-items: start;
  border-top: 1px solid var(--line);
  background: rgba(7, 12, 17, .72);
  padding: 14px;
}

.user-detail-panel[hidden] {
  display: none;
}

.user-detail-panel h4,
.user-detail-panel p {
  margin: 0;
}

.user-detail-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.user-detail-panel p {
  line-height: 1.4;
}

.role-assignment-section .role-editor {
  margin-top: 2px;
}

.user-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 2px 0 0;
}

.user-audit-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 17, .58);
  padding: 8px;
  min-width: 0;
}

.user-audit-grid dt {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.user-audit-grid dd {
  margin: 0;
  color: var(--text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.linked-account-list {
  display: grid;
  gap: var(--space-3);
}

.linked-account-list h4 {
  margin-top: 4px;
}

.linked-account-row,
.admin-collection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .6);
  padding: 8px;
}

.linked-account-row > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.linked-account-row i {
  color: var(--accent);
}

.user-collections-panel {
  display: grid;
  gap: var(--space-3);
}

.user-collections-panel > button {
  justify-self: start;
}

.admin-user-collections {
  display: grid;
  gap: var(--space-3);
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.admin-user-collections[hidden] {
  display: none;
}

.public-shell.collection-shell {
  width: 100%;
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter) var(--public-page-gutter) 4rem;
}

.collection-hero,
.curated-collections-lane,
.collection-results-bar,
.collection-shell > .collection-card-grid,
.collection-load-more,
.collection-shell > .public-footer {
  width: min(100%, 1460px);
  margin-left: auto;
  margin-right: auto;
}

.collection-hero {
  padding-block: clamp(1.75rem, 4vw, 3.5rem) 3rem;
  text-align: left;
}

.collection-search {
  width: 100%;
  margin: 1.5rem 0 0;
  max-width: none;
}

.curated-collections-lane {
  padding: 0 0 2.25rem;
}

.curated-collections-lane[hidden] {
  display: none;
}

.curated-collections-lane > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.curated-collections-lane h2 {
  margin: 0.3rem 0 0.25rem;
  font-size: 1.55rem;
}

.curated-collections-lane header p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}

.curated-lane-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.curated-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.curated-collection-grid .collection-discovery-card {
  min-height: 410px;
}

.collection-shell > .collection-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.collection-discovery-card {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(16, 24, 32, 0.86);
  min-height: 390px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.collection-discovery-card:hover {
  transform: translateY(-2px);
  border-color: rgba(169, 116, 197, 0.72);
  box-shadow: 0 0 24px rgba(169, 116, 197, 0.18);
}

.collection-discovery-card.staff-curated {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.collection-collage {
  height: 180px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  background: rgba(4, 9, 13, 0.8);
}

.collection-collage.count-1 {
  display: block;
}

.collection-collage.count-2 {
  grid-template-rows: 1fr;
}

.collection-collage.count-3 > .collection-collage-image:first-child {
  grid-row: span 2;
}

.collection-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collection-collage.empty {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 3rem;
}

.collection-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.staff-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.staff-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  color: #d8a6ef;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.collection-card-body h3 .staff-pick-badge,
.collection-modal-header h2 .staff-pick-badge {
  margin-left: 0.65rem;
  vertical-align: middle;
}

.collection-card-body p.collection-curation-note {
  display: flex;
  gap: 0.45rem;
  color: var(--text);
  font-size: 0.84rem;
  -webkit-line-clamp: 2;
}

.collection-curation-note i {
  color: var(--accent);
  margin-top: 0.15rem;
}

.collection-modal-curation-note {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.8rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
}

.collection-modal-curation-note strong {
  color: var(--accent-strong);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.collection-card-kicker,
.collection-card-stats,
.collection-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.82rem;
}

.collection-card-kicker span,
.collection-card-stats span,
.collection-modal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.collection-card-body h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.18;
}

.collection-card-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-card-stats {
  margin-top: auto;
  justify-content: space-between;
}

.public-shell.author-shell {
  width: 100%;
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter) var(--public-page-gutter) 4rem;
}

.author-hero,
.author-profile,
.author-results-bar,
.author-grid,
.author-shell > .public-footer {
  width: min(100%, 1640px);
  margin-left: auto;
  margin-right: auto;
}

.author-hero {
  padding-block: clamp(1.75rem, 4vw, 3.5rem) 3rem;
  text-align: left;
}

.author-search {
  width: 100%;
  margin: 1.5rem 0 0;
  max-width: none;
}

.author-search[hidden] {
  display: none;
}

.author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}

.author-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(16, 24, 32, 0.86);
  color: var(--text);
  padding: 1rem;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.author-card:hover {
  transform: translateY(-2px);
  border-color: rgba(169, 116, 197, 0.72);
  box-shadow: 0 0 24px rgba(169, 116, 197, 0.18);
}

.author-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.author-card-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.author-card-image {
  width: 56px;
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(169, 116, 197, 0.15), rgba(4, 9, 13, 0.82));
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
}

.author-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-card-body,
.author-card-title,
.author-card-sources,
.author-card-meta {
  min-width: 0;
}

.author-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.author-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.author-card-title strong {
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.author-card-title span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
}

.author-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 0.8rem;
}

.author-card-sources,
.author-source-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.author-source-pill {
  --source: var(--accent);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--source) 56%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, 0.76);
  color: color-mix(in srgb, var(--source) 82%, var(--text));
  padding: 0.48rem 0.62rem;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

.author-source-pill[href]:hover {
  border-color: color-mix(in srgb, var(--source) 82%, var(--line));
  background: rgba(14, 23, 31, 0.92);
}

.author-source-pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 4px;
}

.author-source-pill-main,
.author-source-pill-counts {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.author-source-pill-main strong,
.author-source-pill-main small,
.author-source-pill-counts em,
.author-source-pill-counts small {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-source-pill-main small,
.author-source-pill-counts small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.author-source-pill-counts {
  padding-left: 0.55rem;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
}

.author-source-pill-counts em {
  color: #9fb0be;
  font-style: normal;
}

.author-card-sources .author-source-pill-counts {
  display: none;
}

.author-card-sources {
  align-content: start;
  align-items: start;
  gap: 0.4rem;
}

.author-card-sources:empty {
  display: none;
}

.author-source-pill-compact {
  max-width: 100%;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-color: color-mix(in srgb, var(--source) 32%, var(--line));
  background: color-mix(in srgb, var(--source) 7%, rgba(11, 17, 22, 0.9));
  font-size: 0.72rem;
  line-height: 1.25;
}

.author-source-pill-compact img,
.author-source-pill-compact > i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.author-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.author-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.author-card-meta .author-card-match {
  margin-left: auto;
  color: color-mix(in srgb, var(--accent) 55%, var(--text));
}

@media (prefers-reduced-motion: reduce) {
  .author-card {
    transition: none;
  }

  .author-card:hover {
    transform: none;
  }
}

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  .public-shell.author-shell,
  .public-shell.collection-shell {
    padding-top: max(76px, calc(env(safe-area-inset-top) + 66px));
  }
}

.author-profile {
  margin-bottom: 2rem;
}

.author-profile-panel {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(16, 24, 32, 0.95), rgba(9, 15, 21, 0.94));
  overflow: hidden;
}

.author-profile-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.author-profile-main {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.author-profile-main > div:last-child {
  min-width: 0;
}

.author-profile-avatar {
  width: 104px;
  height: 104px;
  border: 1px solid rgba(169, 116, 197, 0.42);
  border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(169, 116, 197, 0.22), rgba(8, 14, 20, 0.9));
  color: var(--accent);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 2.5rem;
}

.author-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-profile-header h2 {
  margin: 0.45rem 0 0.55rem;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.author-profile-header p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.author-owner-line {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem !important;
  color: var(--text) !important;
  font-weight: 850;
}

.author-owner-line i {
  color: #55d98b;
}

.author-profile-about {
  max-width: 780px;
  margin-top: 0.75rem !important;
}

.author-profile-about strong {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.author-profile-bio {
  margin: 0 !important;
  color: var(--text) !important;
  line-height: 1.55;
}

.author-profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.author-profile-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(169, 116, 197, 0.35);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.08);
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.author-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.author-profile-stats span {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.72);
  padding: 0.7rem;
  display: grid;
  gap: 0.2rem;
}

.author-profile-stats i {
  color: var(--accent);
}

.author-profile-stats strong {
  color: var(--text);
  font-size: 1.08rem;
}

.author-profile-stats small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.author-like-button {
  min-width: 116px;
  border-color: rgba(169, 116, 197, 0.55);
  color: var(--accent);
  background: rgba(169, 116, 197, 0.1);
}

.author-like-button.active {
  background: rgba(169, 116, 197, 0.2);
  border-color: var(--accent);
}

.author-profile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  min-width: 0;
}

.author-profile-actions button {
  min-height: 40px;
  border: 1px solid rgba(169, 116, 197, 0.45);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  font-weight: 900;
  white-space: nowrap;
}

.author-profile-actions button.danger {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
}

.author-source-list,
.author-meshscout-activity,
.author-profile-section {
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--line);
}

.author-profile-layout {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  min-height: 520px;
}

.author-profile-side {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1rem;
  border-right: 1px solid var(--line);
  background: rgba(7, 12, 18, 0.24);
  grid-column: 1;
  grid-row: 1;
}

.author-profile-main-column {
  min-width: 0;
  display: grid;
  align-content: start;
  grid-column: 2;
  grid-row: 1;
}

.author-side-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(8, 14, 20, 0.56);
  padding: 0.95rem;
}

.author-side-card.author-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0;
}

.author-side-card.author-profile-stats h3 {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 1rem;
}

.author-side-card.author-source-list,
.author-side-card.author-meshscout-activity {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  padding: 0.95rem;
}

.author-verification-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0.8rem;
  margin: 0;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 17, 22, 0.72);
}

.author-profile-side .author-verification-note {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-lg);
  padding: 0.95rem;
  background: rgba(8, 14, 20, 0.56);
}

.author-verification-note > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(169, 116, 197, 0.12);
  color: var(--accent);
}

.author-verification-note.verified > i {
  background: rgba(46, 204, 113, 0.12);
  color: #55d98b;
}

.author-claim-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(96, 165, 250, 0.08);
}

.author-profile-side .author-claim-panel {
  grid-template-columns: 1fr;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-lg);
  padding: 0.95rem;
}

.author-claim-panel.locked {
  background: rgba(46, 204, 113, 0.07);
}

.author-claim-panel.locked h3 i {
  color: #55d98b;
}

.author-claim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.author-claim-actions .danger {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.08);
}

.author-claim-panel h3,
.author-claim-panel p {
  margin: 0;
}

.author-claim-panel p,
.author-claim-panel output,
.author-claim-panel small {
  color: var(--muted);
}

.author-claim-panel output,
.author-claim-panel output strong,
.author-claim-panel output small {
  display: block;
}

.author-claim-panel output:empty {
  display: none;
}

.author-claim-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  min-height: 34px;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(169, 116, 197, 0.35);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.08);
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.author-profile-editor {
  overflow: visible;
}

.author-profile-editor form {
  display: grid;
  gap: 0.95rem;
  padding: 1.05rem;
}

.author-profile-editor-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.author-profile-editor-header h2 {
  margin: 0.25rem 0 0;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1;
}

.author-profile-editor label,
.author-profile-link-editor {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.author-profile-editor input,
.author-profile-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, 0.86);
  color: var(--text);
  padding: 0.7rem 0.75rem;
  font: inherit;
}

.author-profile-link-editor > div {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1.2fr);
  gap: 0.45rem;
}

.author-profile-edit-actions {
  display: grid;
  gap: 0.45rem;
}

.author-profile-edit-actions output {
  min-height: 1.1rem;
  color: var(--muted);
  font-weight: 800;
}

.author-profile-picture-editor {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.author-profile-picture-preview {
  width: 92px;
  aspect-ratio: 1;
  border: 1px solid rgba(169, 116, 197, 0.38);
  border-radius: 16px;
  background: rgba(8, 14, 20, 0.78);
  color: var(--accent);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 2rem;
}

.author-profile-picture-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%);
  display: block;
}

.author-profile-focus-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.author-profile-link-editor {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.author-profile-link-editor > span {
  grid-column: 1 / -1;
}

.author-profile-editor .author-profile-link-editor .author-profile-link-row {
  display: grid;
  grid-template-columns: 24px minmax(88px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.34);
  font-size: 0.74rem;
}

.author-profile-link-editor i {
  color: var(--accent);
  text-align: center;
}

.author-profile-editor .author-profile-link-editor .author-profile-link-row input {
  min-height: 34px;
  padding: 0.5rem 0.6rem;
}

.author-editor-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  background: rgba(5, 10, 15, 0.62);
}

.author-editor-tabs.with-onboarding {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.author-editor-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-weight: 900;
}

.author-editor-tabs button.active {
  background: rgba(169, 116, 197, 0.16);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.author-editor-pane {
  display: none;
  gap: var(--space-5);
}

.author-editor-pane.active {
  display: grid;
}

.author-onboarding {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(169, 116, 197, 0.28);
  border-radius: 10px;
  background: rgba(7, 13, 19, 0.62);
}

.author-onboarding-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.author-onboarding-summary h3,
.author-onboarding-summary p {
  margin: 0;
}

.author-onboarding-summary h3 {
  margin-bottom: 5px;
  font-size: 1.25rem;
}

.author-onboarding-summary > div > p:last-child {
  max-width: 64ch;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.author-onboarding-summary > strong,
.author-onboarding-preview {
  border: 1px solid rgba(169, 116, 197, 0.28);
  border-radius: 7px;
  background: rgba(169, 116, 197, 0.1);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  padding: 7px 9px;
}

.author-onboarding-preview {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.author-onboarding-progress {
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.14);
}

.author-onboarding-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #34d399);
  transition: width 180ms ease;
}

.author-onboarding-steps {
  display: grid;
  gap: 7px;
}

.author-onboarding-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) minmax(170px, auto);
  gap: var(--space-4);
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, 0.5);
}

.author-onboarding-step.current {
  border-color: rgba(169, 116, 197, 0.52);
}

.author-onboarding-step > i {
  color: rgba(148, 163, 184, 0.55);
}

.author-onboarding-step.complete > i,
.author-onboarding-step.complete .author-onboarding-step-actions b,
.author-onboarding-complete {
  color: #34d399;
}

.author-onboarding-step > span,
.author-onboarding-step > span strong,
.author-onboarding-step > span small {
  display: block;
  min-width: 0;
}

.author-onboarding-step > span small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.author-onboarding-step-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.author-onboarding-step-actions em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  text-transform: uppercase;
}

.author-onboarding button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(169, 116, 197, 0.34);
  border-radius: 7px;
  background: rgba(169, 116, 197, 0.1);
  color: var(--text);
  font-weight: 900;
}

.author-onboarding button.quiet {
  border-color: rgba(148, 163, 184, 0.2);
  background: transparent;
  color: var(--muted);
}

.author-onboarding button.primary {
  background: var(--accent);
  color: #090d12;
}

.author-onboarding button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.author-onboarding-evidence {
  display: grid;
  gap: 9px;
  padding-top: 4px;
}

.author-onboarding-evidence > header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.author-onboarding-evidence > header > i {
  color: var(--accent);
}

.author-onboarding-evidence > header span,
.author-onboarding-evidence > header strong,
.author-onboarding-evidence > header small {
  display: block;
}

.author-onboarding-evidence > header small {
  color: var(--muted);
  font-size: 0.74rem;
}

.author-onboarding-evidence > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.author-onboarding-evidence article {
  display: grid;
  grid-template-columns: 26px minmax(90px, 0.36fr) minmax(0, 1fr) 28px;
  gap: var(--space-3);
  align-items: center;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--source) 42%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--source) 7%, rgba(8, 14, 20, 0.72));
}

.author-onboarding-evidence article > img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.author-onboarding-evidence article > span,
.author-onboarding-evidence article strong,
.author-onboarding-evidence article small {
  display: block;
  min-width: 0;
}

.author-onboarding-evidence article small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-onboarding-evidence article p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.author-onboarding-evidence article > a {
  color: var(--accent);
  text-align: center;
}

.author-onboarding > footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
}

.author-onboarding-complete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.author-onboarding > output {
  min-height: 1rem;
  color: #fca5a5;
  font-size: 0.74rem;
  font-weight: 800;
}

.author-editor-section {
  display: grid;
  gap: var(--space-5);
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(7, 13, 19, 0.5);
}

.author-editor-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.author-editor-section > header > div {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.author-editor-section > header i {
  color: var(--accent);
}

.author-editor-section > header span,
.author-editor-section > header strong,
.author-editor-section > header small {
  display: block;
}

.author-editor-section > header small,
.author-editor-help,
.author-editor-section label > small {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.author-vanity-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(8, 14, 20, 0.86);
}

.author-vanity-field code {
  padding: 0 0.75rem;
  color: var(--accent);
  font-weight: 900;
}

.author-profile-editor .author-vanity-field input {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}

.author-support-link-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.author-profile-editor .author-support-link-editor label {
  grid-template-columns: 22px minmax(105px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius-md);
}

.author-support-link-editor i {
  color: var(--accent);
  text-align: center;
}

.author-editor-toggle {
  display: block !important;
  position: relative;
  width: 46px;
  height: 26px;
}

.author-editor-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.author-editor-toggle span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(8, 14, 20, 0.86);
}

.author-editor-toggle span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #8796a6;
  transition: transform 160ms ease, background 160ms ease;
}

.author-editor-toggle input:checked + span {
  border-color: rgba(169, 116, 197, 0.72);
  background: rgba(169, 116, 197, 0.22);
}

.author-editor-toggle input:checked + span::after {
  transform: translateX(20px);
  background: var(--accent);
}

.author-editor-account-list {
  display: grid;
  gap: var(--space-3);
}

.author-editor-account {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 62px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--source) 55%, transparent);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, 0.62);
}

.author-editor-account > img,
.author-editor-account > i {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: grid;
  place-items: center;
}

.author-editor-account span,
.author-editor-account strong,
.author-editor-account small {
  display: block;
  min-width: 0;
}

.author-editor-account small,
.author-editor-account em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.author-editor-account button,
.author-source-linker button,
.author-source-claim-output button,
.author-source-claim-output a {
  min-height: 38px;
  border: 1px solid rgba(169, 116, 197, 0.4);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.1);
  color: var(--accent);
  padding: 0.55rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 900;
  text-decoration: none;
}

.author-editor-account button.danger {
  border-color: rgba(248, 113, 113, 0.42);
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.08);
}

.author-source-linker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4);
}

.author-source-claim-output:not(:empty) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: rgba(169, 116, 197, 0.08);
}

.author-source-claim-output strong,
.author-source-claim-output small {
  display: block;
}

.author-feature-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  max-height: 430px;
  overflow: auto;
}

.author-feature-option {
  position: relative;
  display: block !important;
}

.author-feature-option input {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 20px !important;
  height: 20px;
  accent-color: var(--accent);
}

.author-feature-option > span {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  min-height: 76px;
  padding: 8px 36px 8px 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, 0.62);
}

.author-feature-option input:checked + span {
  border-color: var(--accent);
  background: rgba(169, 116, 197, 0.12);
}

.author-feature-option img,
.author-feature-option > span > i {
  grid-row: 1 / 3;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: grid;
  place-items: center;
  background: rgba(169, 116, 197, 0.1);
}

.author-feature-image {
  position: relative;
  grid-row: 1 / 3;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.author-feature-image img {
  width: 100%;
  height: 100%;
}

.author-feature-image > i {
  position: absolute;
  z-index: 2;
  right: 5px;
  bottom: 5px;
  color: #fff;
  font-size: var(--text-sm);
}

.author-feature-option strong {
  align-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.author-editor-loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  color: var(--muted);
}

.author-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.author-specialties span {
  padding: 5px 8px;
  border: 1px solid rgba(169, 116, 197, 0.34);
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: rgba(169, 116, 197, 0.08);
  font-size: 0.76rem;
  font-weight: 900;
}

.author-follow-button.active {
  border-color: #55d98b !important;
  color: #55d98b !important;
  background: rgba(46, 204, 113, 0.1) !important;
}

.author-support-card h3,
.author-commission-card h3,
.author-collection-spotlight h3 {
  margin: 0 0 9px;
}

.author-support-card > div {
  display: grid;
  gap: 7px;
}

.author-support-card a,
.author-commission-card button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(169, 116, 197, 0.32);
  border-radius: var(--radius-md);
  color: var(--text);
  background: rgba(169, 116, 197, 0.07);
  text-decoration: none;
  font-weight: 900;
}

.author-commission-completed {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.author-commission-completed i {
  color: #42d392;
}

.author-commission-completed strong {
  color: var(--text);
  font-size: 0.9rem;
}

.author-collection-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.author-collection-meta i {
  color: var(--accent);
}

.author-collection-spotlight a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(169, 116, 197, 0.32);
  border-radius: var(--radius-md);
  color: var(--text);
  background: rgba(169, 116, 197, 0.07);
  text-decoration: none;
  font-weight: 900;
}

.author-collection-spotlight a span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.author-commission-card button {
  width: 100%;
}

.author-commission-card p,
.author-collection-spotlight p {
  color: var(--muted);
  line-height: 1.45;
}

.author-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.author-section-heading h3,
.author-section-heading p {
  margin: 0;
}

.author-section-heading > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.author-featured-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Shared signed-in activity controls */
.public-nav .nav-engagement-link {
  white-space: nowrap;
}

.public-nav .nav-icon-only {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.public-nav > .locale-picker .locale-picker-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
}

.public-nav > .locale-picker .locale-name,
.public-nav > .locale-picker .locale-chevron {
  display: none;
}

.notification-nav-button {
  position: relative;
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  color: var(--muted);
  background: rgba(12, 20, 27, 0.78);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.public-nav .nav-icon-only > i,
.notification-nav-button > i {
  width: 1em;
  margin: 0;
  display: block;
  line-height: 1;
  text-align: center;
}

.notification-nav-button:hover,
.notification-nav-button[aria-expanded="true"] {
  border-color: rgba(178, 116, 210, 0.7);
  color: var(--accent);
}

.notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border: 2px solid #0b1218;
  border-radius: var(--radius-pill);
  color: #071015;
  background: #55d98b;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
}

body > .notification-popover {
  position: fixed;
  z-index: 1600;
  width: min(390px, calc(100vw - 28px));
  max-height: min(620px, calc(100dvh - 100px));
  overflow: hidden;
  border: 1px solid rgba(178, 116, 210, 0.45);
  border-radius: var(--radius-md);
  background: #0c141b;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
}

.notification-popover[hidden] {
  display: none;
}

.notification-popover > header {
  min-height: 54px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.notification-popover > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.notification-popover h2 {
  margin: 0;
  font-size: 1rem;
}

.notification-popover header i {
  color: var(--accent);
}

.notification-popover header button {
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.notification-popover header button:hover {
  color: var(--text);
}

.notification-list {
  max-height: min(555px, calc(100dvh - 154px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  border-bottom: 1px solid rgba(40, 56, 68, 0.72);
  color: var(--text);
}

.notification-item:hover {
  background: rgba(178, 116, 210, 0.08);
}

.notification-item.unread {
  box-shadow: inset 3px 0 var(--accent);
  background: rgba(178, 116, 210, 0.05);
}

.notification-item-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 11px 8px 11px 12px;
  color: inherit;
  text-decoration: none;
}

.notification-item-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(178, 116, 210, 0.25);
  border-radius: 7px;
  color: var(--accent);
  background: rgba(178, 116, 210, 0.08);
}

.notification-item-main > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.notification-dismiss {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  color: #7f909d;
  background: transparent;
  cursor: pointer;
}

.notification-dismiss:hover,
.notification-dismiss:focus-visible {
  color: var(--text);
  background: rgba(178, 116, 210, 0.12);
}

.notification-item strong,
.notification-item small {
  overflow-wrap: anywhere;
}

.notification-item small {
  color: var(--muted);
  line-height: 1.35;
}

.notification-item time {
  color: #778794;
  font-size: 0.68rem;
  font-weight: 750;
}

.notification-empty {
  min-height: 110px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.public-menu-popover [data-notifications-nav] {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.public-menu-popover [data-notifications-nav] .notification-count {
  position: static;
  justify-self: end;
}

.site-announcement {
  position: relative;
  z-index: 20;
  width: 100%;
  border-top: 1px solid color-mix(in srgb, var(--announcement-accent) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--announcement-accent) 55%, transparent);
  color: var(--announcement-text);
  background: var(--announcement-bg);
}

.site-announcement > div {
  width: min(1460px, calc(100% - 32px));
  min-height: 44px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: var(--space-5);
  padding: 7px 0;
}

.site-announcement[data-align="center"] .site-announcement-copy {
  text-align: center;
}

.site-announcement[data-font="serif"] .site-announcement-copy {
  font-family: Georgia, "Times New Roman", serif;
}

.site-announcement[data-font="mono"] .site-announcement-copy {
  font-family: "Cascadia Mono", Consolas, monospace;
}

.site-announcement-copy {
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.site-announcement-copy > :first-child,
.site-announcement-copy > :last-child {
  margin-block: 0;
}

.site-announcement-copy a {
  color: var(--announcement-accent);
  font-weight: 900;
}

.site-announcement button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--announcement-text);
  background: transparent;
  cursor: pointer;
}

@media (max-width: 860px) {
  .public-nav .nav-engagement-link,
  .public-nav .notification-nav-button {
    display: none;
  }

  .notification-popover {
    top: 72px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto;
    max-width: none !important;
  }

  .site-announcement > div {
    width: calc(100% - 24px);
  }
}

.author-commission-modal form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.author-commission-modal label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.author-commission-modal input,
.author-commission-modal textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, 0.86);
  color: var(--text);
  padding: 0.75rem;
  font: inherit;
}

.author-commission-modal button[type="submit"] {
  min-height: 44px;
  border: 1px solid rgba(169, 116, 197, 0.45);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.14);
  color: var(--accent);
  font-weight: 900;
}

.profile-shell {
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter);
}

.profile-hero {
  width: min(100%, 1280px);
  margin-right: auto;
  margin-left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--line);
}

.profile-hero h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 72px);
  line-height: .98;
}

.profile-hero p {
  max-width: 760px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.profile-identity {
  min-width: min(320px, 100%);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(13, 20, 27, .74);
}

.profile-identity img,
.profile-identity > span {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
}

.profile-identity img {
  object-fit: cover;
}

.profile-identity > span {
  display: grid;
  place-items: center;
  background: rgba(169, 116, 197, .18);
  color: var(--accent);
  font-weight: 950;
  font-size: 24px;
}

.profile-identity strong,
.profile-identity small {
  display: block;
}

.profile-identity small,
.profile-note {
  color: var(--muted);
}

/* Profile picture editor: a round preview plus upload/remove actions. */
.profile-avatar-editor {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: 14px;
  flex-wrap: wrap;
}

.profile-avatar-preview {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(8, 14, 20, .78);
  color: var(--muted);
  font-weight: 900;
  font-size: 1.6rem;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-avatar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-avatar-actions small {
  color: var(--muted);
  flex-basis: 100%;
}

.profile-avatar-upload,
.profile-avatar-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--line), var(--accent) 18%);
  border-radius: var(--edge);
  background: rgba(8, 14, 20, .76);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.profile-avatar-upload:hover,
.profile-avatar-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}




.profile-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.profile-role-chip {
  --role-color: var(--accent);
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--role-color) 58%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--role-color) 14%, rgba(8, 14, 20, .76));
  color: color-mix(in srgb, var(--role-color) 82%, #ffffff);
  font-size: var(--text-xs);
  font-weight: 950;
  line-height: 1;
}

.profile-layout {
  display: grid;
  gap: 14px;
  width: min(100%, 1120px);
  margin: 14px auto 0;
}

.profile-tabs {
  display: flex;
  gap: 4px;
  width: min(100%, 1120px);
  margin: 18px auto 0;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(13, 20, 27, .72);
  box-sizing: border-box;
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tabs button {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.profile-tabs button:hover {
  color: var(--text);
  background: rgba(169, 116, 197, .08);
}

.profile-tabs button.active {
  color: var(--text);
  background: rgba(8, 14, 20, .92);
  box-shadow: inset 0 0 0 1px rgba(169, 116, 197, .42);
}

.profile-tabs button.active i {
  color: var(--accent);
}

.profile-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.profile-tab-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.profile-tab-panel[hidden] {
  display: none;
}

.profile-tab-general,
.profile-tab-for-you,
.profile-tab-homepage {
  grid-template-columns: minmax(0, 1fr);
}

.profile-tab-security {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.profile-actions-panel {
  /* Only the save bar is sticky. Every settings panel used to share this rule,
     which made the whole column stick and stack on top of itself while
     scrolling. Panels now lay out normally in the document flow. */
  position: sticky;
  bottom: 0;
  z-index: 3;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: var(--panel);
  padding: 14px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
}

.profile-panel {
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: var(--panel);
  padding: 14px;
}

.profile-panel header,
.profile-actions-panel,
.profile-actions-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.profile-panel header h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.profile-panel header button,
.profile-actions-panel button,
.profile-provider-row button,
.profile-provider-row a {
  min-height: 36px;
  padding: 8px 10px;
}

.profile-panel label {
  display: grid;
  gap: 7px;
}

.profile-panel input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .78);
  color: var(--text);
  padding: 11px;
  font: inherit;
}

.profile-note {
  margin: 8px 0 0;
  font-weight: 800;
  line-height: 1.5;
}

.profile-toggle-list,
.profile-linked-providers,
.profile-creator-list {
  display: grid;
  gap: var(--space-3);
  margin-top: 14px;
}

.profile-toggle-list label,
.profile-provider-row,
.profile-source-option {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .64);
}

.profile-toggle-list label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px;
  font-weight: 900;
}

.profile-toggle-list input,
.profile-source-option input {
  accent-color: var(--accent);
}

/* The analytics opt-in carries a short explanation, so the label stacks its
   checkbox beside a title and helper line instead of one centred row. */
.profile-toggle-list label.profile-analytics-toggle {
  align-items: flex-start;
}

.profile-analytics-toggle input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.profile-analytics-toggle-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-analytics-toggle-copy strong {
  font-weight: 900;
}

.profile-analytics-toggle-copy small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.45;
}

.profile-for-you-panel,
.profile-model-source-preferences,
.profile-recommendation-mutes {
  grid-column: 1 / -1;
}

.profile-source-preference-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 14px;
  margin-top: 14px;
}

.profile-source-preference-layout h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.profile-source-priority-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.profile-source-priority-row {
  display: grid;
  grid-template-columns: 30px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .64);
  padding: 7px 8px;
}

.profile-source-priority-row > span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 950;
  text-align: center;
}

.profile-source-priority-row img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  object-fit: contain;
}

.profile-source-priority-row strong {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--source), #f8fafc 20%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-source-priority-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, 34px);
  gap: 5px;
}

.profile-source-priority-actions button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}

.profile-source-policy > label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 900;
}

.profile-source-policy select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .78);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}

.profile-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  margin-top: 14px;
}

.profile-source-option {
  display: grid;
  grid-template-columns: auto 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  color: color-mix(in srgb, var(--source), #f8fafc 18%);
}

.profile-source-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--source), transparent 35%);
  background: color-mix(in srgb, var(--source), transparent 90%);
}

.profile-source-option img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 5px;
}

.profile-source-option span,
.profile-source-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-source-option span {
  font-weight: 950;
}

.profile-source-option small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: capitalize;
}

.profile-provider-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: 9px;
}

.profile-provider-row strong,
.profile-provider-row small {
  display: block;
}

.profile-provider-row small {
  color: var(--muted);
}

.profile-creator-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid rgba(85, 217, 139, 0.26);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(85, 217, 139, 0.08), rgba(8, 14, 20, 0.66));
  padding: 10px;
}

.profile-creator-avatar {
  width: 54px;
  aspect-ratio: 1;
  border: 1px solid rgba(169, 116, 197, 0.34);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--accent);
  background: rgba(8, 14, 20, 0.74);
}

.profile-creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-creator-card strong,
.profile-creator-card small {
  display: block;
}

.profile-creator-card small {
  color: #55d98b;
  font-weight: 900;
}

.profile-creator-card p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.profile-creator-card a {
  min-height: 36px;
  border: 1px solid rgba(169, 116, 197, 0.45);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.profile-actions-panel {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  background: rgba(10, 16, 21, .94);
  backdrop-filter: blur(14px);
}

.profile-signout-panel button {
  min-height: 38px;
  margin-top: 14px;
  border-color: rgba(255, 111, 126, .38);
  color: #ff9aa6;
  background: rgba(255, 111, 126, .08);
}

.profile-actions-panel output {
  color: var(--muted);
  font-weight: 900;
}

.profile-source-loading {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .64);
  color: var(--muted);
  font-weight: 900;
}

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  body.profile-page {
    overflow-x: hidden;
  }

  .profile-shell {
    width: 100%;
    max-width: 100vw;
    padding: max(76px, calc(env(safe-area-inset-top) + 66px)) 14px max(30px, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 12px 0 18px;
  }

  .profile-hero h1 {
    font-size: clamp(32px, 10vw, 46px);
  }

  .profile-hero p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.45;
  }

  .profile-identity {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .profile-layout {
    display: grid;
    gap: var(--space-5);
    width: 100%;
    min-width: 0;
    margin-top: 14px;
  }

  .profile-tabs {
    justify-content: flex-start;
    margin-top: 14px;
  }

  .profile-tabs button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 13px;
  }

  .profile-tab-panel,
  .profile-tab-security {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .profile-panel,
  .profile-actions-panel {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
  }

  .profile-panel header {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-panel header h2 {
    font-size: 21px;
    line-height: 1.15;
  }

  .profile-panel header > div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-note {
    font-size: 14px;
    line-height: 1.45;
  }

  .profile-source-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-source-preference-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-source-option {
    grid-template-columns: auto 26px minmax(0, 1fr) auto;
    min-height: 46px;
  }

  .profile-source-option small {
    max-width: 90px;
  }

  .profile-actions-panel {
    position: static;
    display: grid;
    gap: var(--space-4);
    background: rgba(13, 20, 27, .78);
  }

  .profile-actions-panel,
  .profile-actions-panel > div {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-actions-panel > div {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-actions-panel button {
    width: 100%;
    justify-content: center;
  }

  .profile-creator-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .profile-creator-card a {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .model-modal-hero > .model-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .model-modal-hero > .model-modal-actions button,
  .model-modal-hero > .model-modal-actions .model-modal-open,
  .model-modal-hero > .model-modal-actions .model-modal-admin-menu summary {
    min-height: 40px;
    padding: 8px 10px;
    border-width: 1px;
    font-size: 13px;
    line-height: 1.15;
  }

  .model-modal-hero > .model-modal-actions .model-modal-admin-menu,
  .model-modal-hero > .model-modal-actions .model-modal-admin-menu summary,
  .model-modal-hero > .model-modal-actions .model-modal-open {
    width: 100%;
  }
}

.author-verification-note strong {
  display: block;
  margin-bottom: 0.2rem;
}

.author-verification-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.author-verification-note b {
  color: var(--text);
}

/* Section-heading layout must not override the shared model-card title clamp. */
.author-source-list > h3,
.author-meshscout-activity > h3,
.author-profile-section > h3,
.author-profile-section > :is(header, .author-model-toolbar, .author-section-heading) h3 {
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.author-meshscout-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 210px));
  gap: 0.65rem;
}

.author-owner-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.author-owner-summary img,
.author-owner-summary > i {
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid rgba(169, 116, 197, 0.32);
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.72);
  display: grid;
  place-items: center;
  color: var(--accent);
  object-fit: cover;
}

.author-owner-summary strong,
.author-owner-summary small {
  display: block;
}

.author-owner-summary small {
  color: var(--muted);
  font-weight: 850;
}

.author-owner-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.author-owner-role-chip {
  min-height: 22px;
  padding: 0.3rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--role-color) 58%, var(--line));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--role-color) 14%, rgba(8, 14, 20, 0.76));
  color: color-mix(in srgb, var(--role-color) 82%, #ffffff);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.author-meshscout-stat-grid span {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, 0.72);
}

.author-meshscout-stat-grid i {
  color: var(--accent);
}

.author-meshscout-stat-grid strong {
  color: var(--text);
  font-size: 1.08rem;
}

.author-meshscout-stat-grid small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.creator-release-section { background: color-mix(in srgb, var(--panel) 74%, transparent); }
.creator-release-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.creator-release-header h3 { margin: 3px 0 0; font-size: 1.12rem; }
.creator-release-header p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.creator-release-header > label { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.creator-release-header select { min-height: 38px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-strong, #081017); color: var(--text); padding: 0 30px 0 10px; }
.creator-release-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.creator-release-item { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-strong, #081017); overflow: hidden; }
.creator-release-item > a:first-child { display: grid; grid-template-columns: 108px minmax(0, 1fr); min-height: 132px; color: var(--text); text-decoration: none; }
.creator-release-item:hover { border-color: color-mix(in srgb, var(--source) 65%, var(--line)); box-shadow: 0 0 18px color-mix(in srgb, var(--source) 10%, transparent); }
.creator-release-image { min-width: 0; height: 100%; background: color-mix(in srgb, var(--source) 7%, #050a0f); }
.creator-release-image img, .creator-release-image .no-image { width: 100%; height: 100%; min-height: 132px; object-fit: cover; }
.creator-release-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; }
.creator-release-body > strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .88rem; line-height: 1.25; }
.creator-release-body > p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.creator-release-date { display: flex; align-items: center; gap: 5px; color: var(--text); font-size: .7rem; }
.creator-release-date i { color: var(--source); }
.creator-release-date small { margin-left: auto; color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.creator-release-body footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; color: var(--muted); font-size: .68rem; }
.creator-release-source, .creator-release-multiple { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.creator-release-source { overflow: hidden; color: var(--source); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.creator-release-source img { width: 15px; height: 15px; object-fit: contain; }
.creator-release-multiple { flex: 0 0 auto; }
.creator-release-variants { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.creator-release-variants a { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: rgba(5, 10, 15, .9); color: var(--muted); }
.creator-release-variants img { width: 15px; height: 15px; object-fit: contain; }
.creator-release-more { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin: 14px auto 0; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--text); padding: 0 12px; }
.creator-release-section[aria-busy="true"] .creator-release-grid { opacity: .5; }

.author-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  transition: opacity 160ms ease;
}

[data-author-model-section][aria-busy="true"] .author-model-grid {
  opacity: 0.5;
}

.author-model-load-error {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid #fb7185;
  background: rgba(251, 113, 133, 0.08);
  color: #fecdd3;
}

.author-model-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.82);
  color: var(--text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.author-model-image {
  height: 190px;
  display: grid;
  place-items: center;
  background: rgba(4, 9, 13, 0.84);
  color: var(--accent);
  font-size: 2rem;
}

.author-model-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-model-body {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.author-model-source {
  --source: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--source);
  font-weight: 900;
  font-size: 0.78rem;
}

.author-model-source img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

.author-model-body strong {
  font-size: 1rem;
  line-height: 1.22;
}

.author-model-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.author-model-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.author-model-toolbar > div:first-child {
  min-width: min(100%, 300px);
}

.author-model-toolbar p {
  margin: -0.5rem 0 0;
  color: var(--muted);
}

.author-model-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) minmax(150px, 190px) auto auto;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 1rem;
}

.author-model-controls label {
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.82);
  color: var(--muted);
  padding: 0 0.7rem;
}

.author-model-controls label span {
  color: #9fb0be;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.author-model-controls label > i {
  color: var(--accent);
  font-size: 0.95rem;
}

.author-model-controls input,
.author-model-controls select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: 0;
}

.author-model-controls select {
  cursor: pointer;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 10px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 6px) 50% / 6px 6px no-repeat;
  padding-right: 1.2rem;
}

.author-model-controls select option {
  background: #0b1116;
  color: var(--text);
}

.author-model-controls button {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(11, 17, 22, 0.88);
  color: var(--text);
  padding: 0 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 900;
}

.author-model-controls button[type="submit"] {
  border-color: rgba(169, 116, 197, 0.55);
  color: var(--accent);
  background: rgba(169, 116, 197, 0.1);
}

.author-model-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 850;
}

.author-model-pagination button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(11, 17, 22, 0.85);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 900;
}

.author-model-pagination button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.author-model-pagination.bottom {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.author-model-pagination.bottom .author-inline-top {
  margin-left: auto;
}

.author-model-card .public-card-meta,
.author-model-card .public-card-author,
.author-model-card .public-card-stats {
  display: flex;
}


.author-model-card .public-card-stats {
  display: flex;
  gap: 0.8rem;
  margin-top: 0;
  color: #9fb0be;
  font-size: 0.8rem;
  font-weight: 850;
}

.author-model-card .public-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.author-comment-list {
  display: grid;
  gap: 0.8rem;
}

.author-comment {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem;
  background: rgba(8, 14, 20, 0.68);
}

.author-comment .comment-avatar {
  width: 42px;
  height: 42px;
}

.author-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.author-comment-head small {
  color: var(--muted);
}

.author-comment p {
  margin: 0;
  color: #c6d2dc;
  line-height: 1.5;
}

.author-comment .comment-actions,
.author-comment .comment-edit-form {
  margin-left: 0;
}

.author-comment-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.author-comment-form textarea {
  min-height: 120px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(8, 14, 20, 0.82);
  color: var(--text);
  padding: 0.9rem;
  font: inherit;
  line-height: 1.45;
}

.author-comment-form textarea:focus {
  outline: none;
  border-color: rgba(169, 116, 197, 0.72);
  box-shadow: 0 0 0 3px rgba(169, 116, 197, 0.16);
}

.author-signin-note {
  color: var(--muted);
  margin: 1rem 0 0;
}

@media (max-width: 760px) {
  .author-profile-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .author-profile-side {
    grid-column: auto;
    grid-row: auto;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.85rem;
  }

  .author-profile-main-column {
    grid-column: auto;
    grid-row: auto;
  }

  .author-profile-header {
    display: grid;
  }

  .author-profile-actions {
    justify-content: stretch;
  }

  .author-profile-actions button {
    flex: 1 1 130px;
  }

  .author-profile-main {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .author-profile-avatar {
    width: 82px;
    height: 82px;
  }

  .author-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .author-profile-header h2 {
    font-size: 1.9rem;
    line-height: 1.04;
  }

  .author-meshscout-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-release-header { align-items: stretch; flex-direction: column; }
  .creator-release-header > label, .creator-release-header select { width: 100%; }
  .creator-release-grid { grid-template-columns: 1fr; }

  .author-model-toolbar {
    align-items: stretch;
  }

  .author-model-controls {
    grid-template-columns: 1fr;
  }

  .author-profile-picture-editor,
  .author-profile-focus-controls,
  .author-profile-link-editor,
  .author-profile-link-editor > div {
    grid-template-columns: 1fr;
  }

  .author-profile-editor .author-profile-link-editor .author-profile-link-row {
    grid-template-columns: 24px minmax(88px, 0.38fr) minmax(0, 1fr);
  }

  .author-support-link-editor,
  .author-feature-picker {
    grid-template-columns: 1fr;
  }

  .author-source-linker,
  .author-source-claim-output:not(:empty) {
    grid-template-columns: 1fr;
  }

  .author-editor-account {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .author-editor-account em {
    display: none;
  }

  .author-editor-account button {
    width: 40px;
    padding: 0;
  }

  .author-editor-account button span {
    display: none;
  }

  .author-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .author-edit-modal {
    padding: 8px;
  }

  .author-edit-modal-panel {
    max-height: calc(100dvh - 16px);
  }

  .author-editor-tabs button span {
    font-size: 0.72rem;
  }

  .author-editor-tabs.with-onboarding {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .author-profile-editor form {
    padding: 0.75rem;
  }

  .author-editor-section {
    padding: 12px;
  }

  .author-onboarding {
    padding: 12px;
  }

  .author-onboarding-summary,
  .author-onboarding-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .author-onboarding-summary > strong {
    justify-self: start;
  }

  .author-onboarding-step > i {
    display: none;
  }

  .author-onboarding-step-actions {
    justify-content: flex-start;
  }

  .author-onboarding-evidence > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .author-onboarding-evidence article {
    grid-template-columns: 24px minmax(90px, 0.34fr) minmax(0, 1fr) 24px;
  }

  .author-onboarding > footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .author-profile-editor .author-support-link-editor label {
    grid-template-columns: 22px minmax(90px, 0.45fr) minmax(0, 1fr);
  }
}

.collection-load-more {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 0;
}

.collection-results-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.collection-results-actions button,
.collection-create-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.08);
  color: var(--text);
  padding: 0.7rem 0.95rem;
  font: inherit;
  font-weight: 900;
}

.collection-results-actions button.primary,
.collection-create-actions button.primary {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: var(--accent);
  color: #fff;
}

.collection-create-modal {
  padding: clamp(12px, 3vh, 36px) 18px;
}

.collection-create-modal .collection-modal-panel {
  position: relative;
  width: min(960px, calc(100vw - 36px));
  max-height: calc(100dvh - clamp(24px, 6vh, 72px));
}

.collection-create-header {
  padding: 1.35rem 1.35rem 1rem;
}

.collection-create-header h2 {
  margin: 0.4rem 2.5rem 0.45rem 0;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.05;
}

.collection-create-header > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.collection-create-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0 1.35rem 1rem;
  border-bottom: 1px solid var(--line);
}

.collection-create-modes button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  padding: 0.8rem;
  text-align: left;
}

.collection-create-modes button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.collection-create-modes button > i {
  color: var(--accent);
  font-size: 1.05rem;
  text-align: center;
}

.collection-create-modes button > span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.collection-create-modes small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
}

.collection-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 190px);
  gap: 0.9rem;
  padding: 1.2rem 1.35rem 1.35rem;
}

.collection-create-form label {
  display: grid;
  gap: 0.45rem;
}

.collection-create-form label:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2;
}

.collection-create-form label:nth-child(3) {
  grid-column: 2;
  grid-row: 1;
}

.collection-create-form label > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.collection-create-form input,
.collection-create-form select,
.collection-create-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-strong, #081017);
  color: var(--text);
  padding: 0.72rem;
  font: inherit;
}

.collection-create-form textarea {
  min-height: 92px;
  resize: vertical;
}

.collection-create-form output {
  grid-column: 1 / -1;
  min-height: 1.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.collection-create-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.smart-collection-creator.collection-create-smart {
  margin: 0;
  padding: 1.1rem 1.35rem 1.35rem;
  border: 0;
}

.smart-collection-creator.collection-create-smart > header h3 {
  margin: 0;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .collection-results-actions {
    width: 100%;
  }

  .collection-results-actions button {
    flex: 1;
  }

  .collection-create-modes,
  .collection-create-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-create-form label:nth-child(2),
  .collection-create-form label:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }

  .collection-create-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .collection-create-actions button {
    width: 100%;
  }
}

.collection-load-more button,
.collection-modal-actions button,
.collection-edit-actions button,
.collection-comment-form button {
  border: 1px solid rgba(169, 116, 197, 0.45);
  border-radius: var(--radius-md);
  color: var(--accent);
  background: rgba(169, 116, 197, 0.1);
  font-weight: 900;
  padding: 0.7rem 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 42px;
  width: auto;
}

.collection-modal-panel {
  width: min(1160px, calc(100vw - 36px));
}

.collection-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  padding: 1.25rem 1.25rem 1rem;
}

.collection-modal-header h2 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.collection-modal-header p {
  max-width: 720px;
  color: var(--muted);
}

.collection-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-width: 180px;
}

.collection-modal-actions button.active {
  background: rgba(169, 116, 197, 0.22);
  color: var(--text);
}

.collection-modal-actions button.is-loading {
  opacity: 0.72;
}

.collection-edit-form {
  margin: 1rem 1.25rem 0;
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 18, 0.72);
}

.collection-edit-form[hidden] {
  display: none;
}

.collection-edit-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-weight: 900;
}

.collection-edit-form input,
.collection-edit-form select,
.collection-edit-form textarea,
.collection-comment-form textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 17, 0.9);
  color: var(--text);
  padding: 0.75rem 0.85rem;
  font: inherit;
}

.collection-edit-form textarea {
  min-height: 96px;
  resize: vertical;
}

.collection-edit-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.collection-edit-actions .collection-delete-button {
  margin-left: auto;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
}

.collection-edit-actions .collection-delete-button:hover {
  border-color: rgba(248, 113, 113, 0.72);
  background: rgba(248, 113, 113, 0.14);
}

.collection-form-status {
  min-height: 1.25em;
  margin: 0;
  color: var(--muted);
}

.collection-modal-models {
  padding: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
}

.mini-model-card {
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(10, 15, 21, 0.75);
}

.mini-model-image {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.mini-model-card img,
.mini-model-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, 0.04);
}

.mini-model-card-body {
  padding: 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.mini-model-card span {
  color: var(--muted);
  font-size: 0.8rem;
}

.collection-comments {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding: 1.25rem;
}

.collection-comments h3 {
  margin: 0 0 0.85rem;
}

.collection-comment-list {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.collection-comment {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 18, 0.65);
  padding: 0.8rem;
}

.collection-comment small,
.collection-signin-note {
  color: var(--muted);
}

.collection-comment-parent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  border-left: 2px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  margin: 9px 0;
  padding: 6px 9px;
  color: var(--muted);
  font-size: .74rem;
}

.collection-comment-parent span,
.collection-comment-parent strong {
  display: block;
}

.collection-comment-parent span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-comment-form {
  display: grid;
  gap: 0.7rem;
}

.collection-reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 13, 18, .7);
  padding: 7px 9px;
  color: var(--muted);
  font-size: .75rem;
}

.collection-reply-context[hidden] { display: none; }
.collection-reply-context button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }

.collection-comment-form textarea {
  min-height: 110px;
  resize: vertical;
}

@media (max-width: 760px) {
  .public-shell.collection-shell {
    width: 100%;
    padding: max(76px, calc(env(safe-area-inset-top) + 66px)) 14px 3rem;
  }

  .collection-hero {
    padding-top: 1.5rem;
  }

  .collection-hero h1 {
  font-size: clamp(2rem, 8.5vw, 2.9rem);
  }

  .curated-collections-lane > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .curated-collection-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-modal-header {
    flex-direction: column;
  }

  .collection-modal-actions {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .collection-modal-actions button {
    flex: 1;
  }

  .collection-edit-actions .collection-delete-button {
    margin-left: 0;
  }

  .collection-modal-models {
    grid-template-columns: 1fr;
  }
}

.admin-collection-row {
  grid-template-columns: 72px minmax(0, 1fr);
  color: var(--text);
  text-decoration: none;
}

.admin-collection-row:hover {
  border-color: color-mix(in srgb, var(--accent), var(--line) 45%);
}

.admin-collection-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 64px;
  height: 48px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(7, 12, 17, .8);
}

.admin-collection-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-collection-collage i {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: var(--accent);
}

.api-key-list {
  display: grid;
  gap: var(--space-3);
}

.api-key-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.api-key-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.api-key-list-head h4 {
  margin: 0;
}

.api-key-list-head small {
  color: var(--muted);
  font-weight: 900;
}

.api-key-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .58);
  padding: 9px;
}

.api-key-row.revoked {
  opacity: .68;
  border-style: dashed;
}

.api-key-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.api-key-actions button {
  white-space: nowrap;
  min-height: 36px;
}

.api-key-actions select {
  width: 118px;
}

.api-key-actions input {
  width: 110px;
}

.api-key-actions input[hidden] {
  display: none;
}

.api-key-row div {
  min-width: 0;
}

.api-key-row strong,
.api-key-row small,
.api-key-row code {
  display: block;
}

.api-key-row small {
  color: var(--muted);
  margin-top: 2px;
}

.api-key-row code {
  max-width: 100%;
  overflow: auto;
  color: #9bd7c4;
  font-size: var(--text-xs);
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: #071016;
}

.api-tier-builder {
  display: grid;
  gap: var(--space-4);
}

.api-tier-list {
  display: grid;
  gap: var(--space-3);
}

.api-tier-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(160px, .5fr) auto;
  gap: var(--space-3);
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .58);
  padding: 10px;
}

.api-tier-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
}

.api-tier-row input {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 9px 10px;
}

.api-tier-row input[readonly] {
  opacity: .72;
}

.api-tier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.indexer-grid-full {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.throughput-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 14px 0 4px;
}

.throughput-strip span {
  display: block;
  border: 1px solid rgba(39, 50, 61, .8);
  background: rgba(11, 17, 22, .58);
  border-radius: var(--radius-md);
  padding: 9px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.throughput-strip b {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.compact-log {
  max-height: 360px;
  overflow: auto;
}

.maintenance-layout {
  display: grid;
  grid-template-columns: minmax(380px, .85fr) minmax(460px, 1.15fr);
  gap: 18px;
}

.edit-search-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.model-edit-layout {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr);
  gap: var(--space-5);
  margin-top: 14px;
}

.model-pick-list {
  display: grid;
  gap: var(--space-3);
  max-height: 520px;
  overflow: auto;
}

.model-pick {
  text-align: left;
  border-color: color-mix(in srgb, var(--source), #27323d 70%);
}

.model-pick span,
.model-pick strong,
.model-pick small {
  display: block;
}

.model-pick span {
  color: var(--source);
  font-size: var(--text-xs);
}

.model-pick small {
  color: var(--muted);
  margin-top: 4px;
}

.model-editor {
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--line);
  background: rgba(11, 17, 22, .58);
  border-radius: var(--radius-md);
  padding: 14px;
}

.model-editor[hidden] {
  display: none;
}

.model-editor label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.model-editor input,
.model-editor textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
}

.log-filters select {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #0b1116;
  color: var(--text);
  padding: 9px 11px;
}

.log-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.log-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--source), #27323d 68%);
  border-radius: var(--radius-pill);
  background: rgba(11, 17, 22, .58);
  color: #c9d4df;
  padding: 7px 10px;
  font-size: var(--text-sm);
  font-weight: 900;
}

.log-toggle input {
  appearance: none;
  width: 11px;
  height: 11px;
  border: 1px solid var(--source);
  border-radius: 3px;
  margin: 0;
  background: #071016;
}

.log-toggle input:checked {
  background: var(--source);
  box-shadow: 0 0 12px color-mix(in srgb, var(--source), transparent 35%);
}

.log-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: 14px;
}

.source-log-column {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .52);
  padding: 12px;
  border-color: color-mix(in srgb, var(--source, #27323d), #27323d 72%);
  max-height: 520px;
  overflow: auto;
}

.api-log-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: 14px;
}

.api-log-column {
  max-height: 460px;
}

.log-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 10px;
  background: #0b1116;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 900;
  white-space: nowrap;
}

.log-type-toggle input {
  accent-color: var(--green);
  margin: 0;
}

.endpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: 14px;
}

.endpoint-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .58);
  padding: 10px;
}

.endpoint-card.ok {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.endpoint-card.warn {
  border-color: rgba(245, 158, 11, .45);
}

.endpoint-card span {
  color: var(--green);
  font-weight: 900;
}

.endpoint-card.warn span {
  color: #f59e0b;
}

.endpoint-card strong,
.endpoint-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.endpoint-card small {
  color: var(--muted);
}

.system-host-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.system-kv,
.system-tunnel-card,
.system-process-row,
.system-process-head {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(11, 17, 22, .58);
}

.system-kv {
  padding: 12px;
}

.system-kv span,
.system-process-row small {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.system-kv strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.system-tunnel-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: 14px;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.system-tunnel-card.warn {
  border-color: rgba(245, 158, 11, .5);
}

.system-tunnel-card i {
  color: var(--accent);
  font-size: 22px;
}

.system-tunnel-card.warn i {
  color: #f59e0b;
}

.system-tunnel-card strong,
.system-tunnel-card span {
  display: block;
}

.system-tunnel-card span {
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.system-process-table {
  display: grid;
  gap: var(--space-3);
}

.system-process-head,
.system-process-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) 86px minmax(150px, 1fr) 70px minmax(190px, 1fr) minmax(190px, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: 10px 12px;
}

.system-process-head {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(11, 17, 22, .34);
}

.system-process-row {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

.system-process-row.warn {
  border-color: rgba(245, 158, 11, .45);
}

.system-process-row strong,
.system-process-row b,
.system-process-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.system-process-row b {
  color: var(--accent);
}

@media (max-width: 980px) {
  .contact-shell,
  .donate-shell {
    width: 100%;
    padding: 16px 16px max(36px, env(safe-area-inset-bottom));
  }

  .contact-layout,
  .donate-layout,
  .api-docs-hero,
  .api-docs-layout,
  .contact-admin-grid,
  .meshy-admin-grid {
    grid-template-columns: 1fr;
  }

  .meshy-commands-panel,
  .meshy-logs-panel {
    grid-column: auto;
  }

  .contact-hero,
  .donate-hero {
    padding-top: 1.5rem;
  }

  .donate-hero h1 {
    font-size: clamp(38px, 11vw, 58px);
  }

  .donate-experience {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 0;
  }

  .donate-experience-featured {
    min-height: 0;
  }

  .donate-copy {
    position: static;
    max-width: none;
    padding-top: 0;
  }

  .donate-copy h2 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .donate-copy h1 {
    font-size: clamp(48px, 15vw, 72px);
  }

  .donate-checkout-label {
    display: grid;
    gap: 0;
  }

  .donate-card {
    min-height: 0;
    padding: 16px;
  }

  .donate-paypal-inline {
    grid-template-columns: 1fr;
  }

  .donate-embed-shell-kofi {
    height: 760px;
    min-height: 760px;
    padding: 8px;
  }

  .donate-embed-shell-kofi iframe {
    width: 100%;
    transform: translateY(0);
  }

  .donate-bmc-card {
    min-height: 640px;
    padding: 0;
  }

  .donate-bmc-frame {
    width: 100%;
    min-height: 640px;
    height: 640px;
  }

  .donate-supporter-panel {
    display: grid;
    padding: 16px;
  }

  .donate-action,
  .donate-supporter-panel a {
    width: 100%;
  }

  .api-docs-shell {
    width: 100%;
    padding: 16px 16px max(36px, env(safe-area-inset-bottom));
  }

  .api-docs-hero {
    padding-top: 1.5rem;
  }

  .api-docs-hero h1 {
    font-size: clamp(38px, 12vw, 56px);
  }

  .api-docs-quickstart,
  .api-rate-grid,
  .api-use-grid,
  .api-docs-cta {
    grid-template-columns: 1fr;
  }

  .api-docs-index {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: var(--space-3);
    max-height: none;
    padding: 8px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    scrollbar-width: none;
  }

  .api-docs-index::-webkit-scrollbar {
    display: none;
  }

  .api-docs-index strong,
  .api-docs-index-heading {
    display: none;
  }

  .api-docs-index a {
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: var(--radius-md);
    white-space: nowrap;
  }

  .api-docs-index a:hover,
  .api-docs-index a.active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, rgba(13, 20, 27, .78));
  }

  .api-docs-rail {
    position: static;
    max-height: none;
    grid-row: 2;
  }

  .api-docs-content {
    grid-row: 3;
  }

  .api-docs-section {
    scroll-margin-top: 116px;
  }

  .contact-admin-summary {
    grid-template-columns: 1fr;
  }

  .contact-detail dl div {
    grid-template-columns: 1fr;
  }

  .system-process-head {
    display: none;
  }

  .system-process-row {
    grid-template-columns: 1fr 1fr;
  }

  .system-process-row > div {
    grid-column: 1 / -1;
  }

  .system-process-row b::before {
    content: "CPU ";
    color: var(--muted);
  }

  .system-process-row span:nth-of-type(1)::before {
    content: "Memory ";
    color: var(--muted);
    font-weight: 900;
  }

  .system-process-row span:nth-of-type(2)::before {
    content: "PIDs ";
    color: var(--muted);
    font-weight: 900;
  }

  .system-process-row span:nth-of-type(3)::before {
    content: "Network ";
    color: var(--muted);
    font-weight: 900;
  }

  .system-process-row span:nth-of-type(4)::before {
    content: "Block IO ";
    color: var(--muted);
    font-weight: 900;
  }
}

.source-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: 10px;
}

.source-log-column h4 {
  margin: 0;
  color: #dce6ef;
}

.source-log-head small {
  color: var(--muted);
  font-weight: 900;
}

.source-log-column .log-row {
  display: grid;
  grid-template-columns: 92px minmax(180px, 260px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}

.source-log-column .log-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.api-log-column .log-row {
  grid-template-columns: 92px minmax(220px, 320px) minmax(0, 1fr);
}

.source-log-column .log-row p {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.source-log-column .log-row code {
  display: block;
  margin-top: 5px;
  color: #8fa5b5;
  font-size: var(--text-xs);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.log-row.warn {
  border-color: rgba(245, 158, 11, .35);
}

.log-row.error {
  border-color: rgba(248, 113, 113, .38);
}

.log-row.error strong {
  color: #f87171;
}

.log-row.warn strong {
  color: #f59e0b;
}

@media (max-width: 1280px) {
  .overview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid,
  .translation-admin-grid,
  .maintenance-layout {
    grid-template-columns: 1fr;
  }

  .backup-current-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .backup-current-card dl {
    grid-template-columns: 1fr;
  }

  .backup-history-row {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .material-app {
    padding: 16px 16px max(36px, env(safe-area-inset-bottom));
  }

  .material-header {
    margin-bottom: 34px;
  }

  .material-header .public-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .material-hero h1 {
    font-size: clamp(36px, 12vw, 56px);
  }

  .material-search,
  .material-layout,
  .material-results-bar {
    grid-template-columns: 1fr;
  }

  .material-search {
    display: grid;
    padding: 12px;
  }

  .material-search > span {
    display: none;
  }

  .material-search button,
  .material-search select,
  .material-search input {
    width: 100%;
  }

  .material-layout {
    display: grid;
  }

  .material-filters {
    position: static;
  }

  .material-filter-group > div {
    max-height: 220px;
  }

  .material-results-bar {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
  }

  .material-view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-self: stretch;
    width: 100%;
  }

  .material-view-toggle button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .material-results-bar label {
    justify-content: space-between;
  }

  .material-results-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .material-results-footer label {
    justify-content: space-between;
  }

  .material-results {
    grid-template-columns: 1fr;
  }

  .material-modal {
    padding: 10px;
  }

  .material-modal-panel {
    max-height: calc(100vh - 20px);
  }

  .material-modal-content {
    padding: 18px;
  }

  .material-modal-grid,
  .material-vendor-row {
    grid-template-columns: 1fr;
  }

  .material-vendor-row em {
    justify-self: start;
  }

  .admin-shell {
    display: block;
  }

  .admin-sidebar {
    position: static;
    width: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grouped-admin-tabs {
    grid-template-columns: 1fr;
  }

  .sidebar-health {
    display: none;
  }

  .admin-main {
    margin: 0;
    padding: 14px;
  }

  .overview-metrics,
  .translation-admin-grid,
  .translation-locale-row,
  .throughput-strip,
  .model-edit-layout,
  .user-detail-panel,
  .user-search-toolbar,
  .user-identity-editor,
  .system-key-form,
  .api-tier-form,
  .api-tier-row,
  .api-key-row,
  .api-key-actions,
  .user-audit-grid,
  .linked-account-row,
  .system-key-management,
  .role-management {
    grid-template-columns: 1fr;
  }

  .user-identity-actions button,
  .api-tier-actions button {
    flex: 1;
  }

  .topbar-actions,
  .panel-heading,
  .compact-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .process-grid,
  .indexer-grid,
  .credential-grid,
  .api-log-grid,
  .role-admin-list {
    grid-template-columns: 1fr;
  }

  .user-row-main {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .user-row-main b,
  .user-row-main button {
    grid-column: 2;
    width: fit-content;
  }

  .admin-topbar {
    display: grid;
  }

  .source-log-column .log-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .translation-row {
    grid-template-columns: 1fr;
  }

  .translation-row-actions {
    justify-content: flex-start;
  }
}
/* Discovery and trust program */
.notification-header-actions { display: flex; align-items: center; gap: var(--space-4); }
.notification-watch-footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, #0c141b); }
.notification-watch-footer[hidden] { display: none; }
.notification-watch-footer a { min-height: 44px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 9px; padding: 0 12px; color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 850; }
.notification-watch-footer a > i:first-child { color: var(--accent); }
.notification-watch-footer a > i:last-child { color: var(--muted); font-size: .68rem; justify-self: end; }
.notification-watch-footer a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.model-modal-info > .model-source-variants { padding: 0; }
.model-trust-summary { border: 1px solid color-mix(in srgb, var(--accent-2) 34%, var(--line)); border-radius: 7px; background: color-mix(in srgb, var(--panel) 90%, #000); padding: 12px; display: grid; gap: var(--space-4); }
.model-trust-summary > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.model-trust-summary > header h3 { margin: 0; display: flex; align-items: center; gap: 7px; font-size: .9rem; }
.model-trust-summary > header h3 i { color: var(--accent-2); }
.model-trust-summary > header p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.model-trust-summary > header > span { flex: 0 0 auto; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.model-trust-best { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border-block: 1px solid var(--line); }
.model-trust-best > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.93); }
.model-trust-best img { width: 24px; height: 24px; object-fit: contain; }
.model-trust-best > div { min-width: 0; display: grid; gap: 1px; }
.model-trust-best small, .model-trust-best p { color: var(--muted); font-size: .67rem; }
.model-trust-best strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-trust-best p { margin: 2px 0 0; line-height: 1.3; }
.model-trust-best > strong { color: var(--accent-2); font-size: .8rem; }
.model-trust-summary dl { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.model-trust-summary dl div { min-width: 0; padding-left: 7px; border-left: 2px solid color-mix(in srgb, var(--accent-2) 40%, var(--line)); }
.model-trust-summary dt { color: var(--muted); font-size: .59rem; font-weight: 800; text-transform: uppercase; }
.model-trust-summary dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: .72rem; font-weight: 800; }
.model-trust-correction { justify-self: end; min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 0; background: transparent; color: var(--muted); font-size: .68rem; }
.model-trust-correction:hover, .model-trust-correction:focus-visible { color: var(--text); }
.model-trust-summary-compact { min-width: 0; padding: 8px 10px; gap: 7px; }
.model-trust-summary-compact > header { align-items: center; gap: var(--space-3); }
.model-trust-summary-compact > header h3 { font-size: .78rem; }
.model-trust-header-actions { display: flex; align-items: center; gap: 6px; }
.model-trust-header-actions > span { color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.model-trust-summary-compact .model-trust-correction { min-width: 28px; min-height: 28px; padding: 4px; justify-content: center; border-radius: 4px; }
.model-trust-summary-compact .model-trust-correction:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.model-trust-summary-compact .model-trust-best { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 7px; padding: 0; border: 0; }
.model-trust-summary-compact .model-trust-best > span { width: 24px; height: 24px; }
.model-trust-summary-compact .model-trust-best img { width: 19px; height: 19px; }
.model-trust-summary-compact .model-trust-best > div > strong { font-size: .78rem; white-space: normal; overflow-wrap: anywhere; }
.model-trust-summary-compact .model-trust-best > div > strong small { font-size: .64rem; font-weight: 500; }
.model-trust-summary-compact .model-trust-best p { font-size: .64rem; }
.model-trust-summary-compact dl { gap: 6px; }
.model-trust-summary-compact dt { font-size: .58rem; line-height: 1.35; }
.model-trust-summary-compact dd { font-size: .68rem; }
@media (max-width: 560px) {
  .model-trust-summary-compact > header { flex-wrap: wrap; }
  .model-trust-summary-compact dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-trust-summary-compact .model-trust-correction { min-width: 36px; min-height: 36px; }
}
.model-history { border-top: 1px solid var(--line); padding-top: 10px; }
/* Shared disclosure affordance: one chevron convention so "Available Sources",
   "Listing provenance" and "Model history" all read as expandable, and the
   arrow turns as the section opens. */
.model-disclosure > summary { list-style: none; cursor: pointer; }
.model-disclosure > summary::-webkit-details-marker { display: none; }
.model-disclosure-chevron { flex: 0 0 auto; color: var(--muted); font-size: .72rem; transition: transform .18s ease, color .18s ease; }
.model-disclosure > summary:hover .model-disclosure-chevron { color: var(--text); }
.model-disclosure[open] > summary .model-disclosure-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .model-disclosure-chevron { transition: none; } }
.model-history > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); list-style: none; }
.model-history > summary::-webkit-details-marker { display: none; }
.model-history > summary > span { display: flex; align-items: center; gap: var(--space-3); font-size: .85rem; font-weight: 850; }
.model-history > summary i { color: var(--accent-2); }
.model-history > summary small { color: var(--muted); font-size: .66rem; }
.model-history > div { padding-top: 10px; }
.model-history > div > p { margin: 0 0 10px; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.model-history ol { list-style: none; margin: 0; padding: 0; display: grid; }
.model-history li { position: relative; display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: var(--space-3); padding: 0 0 10px; }
.model-history li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 0; width: 1px; background: var(--line); }
.model-history li > span { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid var(--accent-2); border-radius: 50%; background: var(--panel); }
.model-history li > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
.model-history li strong { font-size: .74rem; line-height: 1.35; }
.model-history li time { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.model-modal-info > .model-source-variants > .model-disclosure-summary { border-top: 1px solid var(--line); padding-top: 13px; }
.comparison-surface > .model-disclosure-summary { align-items: flex-start; }
.comparison-surface > .model-disclosure-summary .model-disclosure-heading { min-width: 0; }
.comparison-surface > .model-disclosure-summary p { margin: 3px 0 0; color: var(--muted); max-width: 540px; font-size: .76rem; line-height: 1.4; }
.comparison-surface > .model-disclosure-summary .comparison-source-count { flex: 0 0 26px; width: 26px; height: 24px; display: grid; place-items: center; overflow: visible; border: 1px solid color-mix(in srgb, var(--source) 48%, var(--line)); border-radius: var(--radius-sm); color: var(--source); white-space: nowrap; }
.model-source-variants > .comparison-variant-list { display: grid; grid-template-columns: 1fr; gap: 6px; max-height: min(27vh, 240px); overflow-y: auto; padding-right: 3px; scrollbar-gutter: stable; }
.comparison-variant { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--panel) 88%, #000); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 5px 10px; }
.comparison-variant.recommended { border-color: var(--accent-2); box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 22%, transparent); }
.comparison-variant.selected { outline: 1px solid color-mix(in srgb, var(--source) 75%, transparent); }
.comparison-variant.unreachable { opacity: .68; }
.comparison-variant-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.comparison-source { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.comparison-source img { width: 24px; height: 24px; object-fit: contain; border-radius: 5px; background: rgba(255,255,255,.92); padding: 2px; }
.comparison-source div { min-width: 0; display: grid; }
.comparison-source strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.comparison-source span { color: var(--muted); font-size: .66rem; }
.comparison-variant-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.comparison-surface.model-source-variants .comparison-open { flex: 0 0 30px; width: 30px; height: 30px; display: grid; grid-template-columns: 1fr; place-items: center; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.comparison-open:hover, .comparison-open:focus-visible { color: var(--source); border-color: var(--source); }
.comparison-badges, .comparison-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.comparison-surface .comparison-badges span, .comparison-surface .comparison-metrics span { display: inline-flex; align-items: center; gap: 4px; overflow: visible; font-size: .66rem; color: var(--muted); white-space: normal; }
.recommended-badge { color: var(--accent-2) !important; font-weight: 800; }
.access-badge { padding: 2px 6px; border: 1px solid var(--line); text-transform: capitalize; }
.access-badge.free { color: #42d99a; border-color: color-mix(in srgb, #42d99a 45%, var(--line)); }
.access-badge.paid, .access-badge.freemium { color: #f2c96d; border-color: color-mix(in srgb, #f2c96d 45%, var(--line)); }
.comparison-variant dl { grid-column: 1; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px 9px; }
.comparison-variant dl div { min-width: 0; }
.comparison-variant dt { color: var(--muted); font-size: .61rem; text-transform: uppercase; font-weight: 800; }
.comparison-variant dd { margin: 1px 0 0; overflow-wrap: anywhere; font-size: .75rem; line-height: 1.18; font-weight: 700; }
.comparison-metrics { grid-column: 2; justify-content: flex-end; padding-bottom: 1px; }
.model-provenance { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.model-provenance summary { cursor: pointer; display: flex; gap: var(--space-3); align-items: center; font-weight: 800; list-style: none; }
.model-provenance summary::-webkit-details-marker { display: none; }
.model-provenance summary > span { flex: 1 1 auto; min-width: 0; }
.model-provenance > div { padding: 10px 0 0; display: grid; gap: 6px; color: var(--muted); }
.model-provenance p { margin: 0 0 4px; }
.model-provenance span { display: flex; justify-content: space-between; gap: 14px; }
.model-lineage { border-top: 1px solid var(--line); padding-top: 13px; display: grid; gap: 9px; }
.model-lineage > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.model-lineage > header h3 { margin: 0; display: flex; align-items: center; gap: var(--space-3); font-size: .9rem; }
.model-lineage > header h3 i { color: var(--accent-2); }
.model-lineage > header p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.model-lineage > header > span { flex: 0 0 auto; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--accent-2) 45%, var(--line)); border-radius: 5px; color: var(--accent-2); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.model-lineage-list { display: grid; gap: 6px; }
.model-lineage-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--panel) 88%, #000); padding: 6px 8px 6px 6px; }
.model-lineage-item.candidate { border-style: dashed; }
.model-lineage-model { min-width: 0; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }
.model-lineage-model:hover strong, .model-lineage-model:focus-visible strong { color: var(--accent-2); }
.model-lineage-image { position: relative; width: 62px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: var(--panel-2); }
.model-lineage-image > img { width: 100%; height: 100%; object-fit: cover; }
.model-lineage-image > .no-image { width: 100%; height: 100%; min-height: 0; font-size: .6rem; }
.model-lineage-image .nsfw-blur-label { font-size: .55rem; }
.model-lineage-copy { min-width: 0; display: grid; gap: 2px; }
.model-lineage-copy > small { color: var(--accent-2); font-size: .65rem; font-weight: 800; }
.model-lineage-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.model-lineage-copy > span { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.model-lineage-copy img { width: 15px; height: 15px; object-fit: contain; border-radius: 3px; background: rgba(255,255,255,.92); padding: 1px; }
.model-lineage-evidence { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: var(--muted); font-size: .62rem; }
.model-lineage-evidence > span { display: inline-flex; align-items: center; gap: 5px; }
.model-lineage-evidence > span i { color: var(--accent-2); }
.model-lineage-evidence a { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: var(--text); text-decoration: none; }
.model-lineage-evidence a:hover, .model-lineage-evidence a:focus-visible { border-color: var(--accent-2); color: var(--accent-2); }
.model-lineage-note { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.4; }

@media (max-width: 620px) {
  body > .community-correction-dialog {
    place-items: end center;
    padding: 10px;
  }

  .community-correction-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 18px 14px;
  }

  .community-correction-fields {
    grid-template-columns: 1fr;
  }

  .community-correction-target {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .collection-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.source-heading-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.source-heading-link:hover h3 { color: var(--source); text-shadow: 0 0 14px color-mix(in srgb, var(--source) 46%, transparent); }
.source-hub { display: grid; gap: 34px; }
.source-hub-summary { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 22px; padding: 20px 0; border-block: 1px solid color-mix(in srgb, var(--source) 40%, var(--line)); }
.source-hub-identity { display: flex; align-items: center; gap: 14px; }
.source-hub-identity > img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 13px color-mix(in srgb, var(--source) 45%, transparent)); }
.source-hub-identity h2, .source-hub-identity p { margin: 0; }
.source-hub-summary dl { display: grid; grid-template-columns: repeat(3, minmax(95px, 1fr)); gap: 18px; margin: 0; }
.source-hub-summary dl div { display: grid; gap: 3px; }
.source-hub-summary dt { color: var(--muted); font-size: .68rem; text-transform: uppercase; font-weight: 800; }
.source-hub-summary dd { margin: 0; font-size: 1.12rem; font-weight: 900; }
.source-hub-summary > a { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; border: 1px solid var(--source); padding: 9px 12px; }
.source-hub-quality { display: grid; gap: var(--space-4); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.source-hub-quality > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.source-hub-quality > header h3, .source-hub-quality > header span { margin: 0; }
.source-hub-quality > header span { color: var(--muted); font-size: .78rem; }
.source-hub-quality dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.source-hub-quality dl div { min-width: 0; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--source) 55%, var(--line)); }
.source-hub-quality dt { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.source-hub-quality dd { margin: 2px 0 0; font-weight: 900; }
.source-hub-categories > header, .source-hub-lane > header, .source-hub-creators > header { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.source-hub-categories > div { display: flex; flex-wrap: wrap; gap: 7px; }
.source-hub-categories button { display: inline-flex; gap: var(--space-3); align-items: center; padding: 7px 9px; }
.source-hub-categories strong { color: var(--source); }
.source-hub-lane > header, .source-hub-lane > header > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.source-hub-lane > header i { color: var(--source); }
.source-hub-model-grid { align-items: stretch; }
.source-hub-creators > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.source-hub-creators a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: 9px; border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.source-hub-creators a:hover { border-color: var(--source); }
.source-hub-creator-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); }
.source-hub-creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.source-hub-creators a > span:nth-child(2) { min-width: 0; display: grid; }
.source-hub-creators strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-hub-creators small { color: var(--muted); }

/* Public catalog quality explorer */
.quality-shell {
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  gap: 0;
}

.quality-hero {
  min-height: 0;
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem) 2rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.quality-overview,
.quality-sync,
.quality-sources,
.quality-method {
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
}

.quality-section-heading,
.quality-source-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.quality-section-heading h2,
.quality-source-toolbar h2,
.quality-sync h2,
.quality-method h2 {
  margin: 4px 0 0;
  letter-spacing: 0;
}

.quality-updated {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--muted);
  font-size: .82rem;
}

.quality-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.quality-summary-metric {
  min-width: 0;
  min-height: 132px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 18px;
  border-right: 1px solid var(--line);
}

.quality-summary-metric:last-child { border-right: 0; }
.quality-summary-metric > i { color: var(--accent); margin-bottom: 7px; }
.quality-summary-metric strong { font-size: 1.55rem; line-height: 1; }
.quality-summary-metric span { font-weight: 800; font-size: .82rem; }
.quality-summary-metric small { color: var(--muted); line-height: 1.35; }

.quality-loading-line {
  min-height: 132px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.quality-measurement-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .84rem;
}
.quality-measurement-note i { color: var(--accent); margin-top: 2px; }

.quality-sync {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(520px, 1.4fr);
  align-items: center;
  gap: 42px;
}
.quality-sync > div:first-child > p:last-child { color: var(--muted); line-height: 1.55; }
.quality-sync-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.quality-sync-metrics article { min-width: 0; display: grid; gap: 3px; padding: 10px 20px; border-right: 1px solid var(--line); }
.quality-sync-metrics span { color: var(--muted); font-size: .72rem; text-transform: uppercase; font-weight: 900; }
.quality-sync-metrics strong { font-size: 1.05rem; }
.quality-sync-metrics small { color: var(--muted); line-height: 1.35; }

.quality-controls { display: flex; align-items: end; gap: var(--space-5); }
.quality-segmented { display: grid; grid-auto-flow: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.quality-segmented button { min-height: 38px; padding: 7px 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); }
.quality-segmented button:last-child { border-right: 0; }
.quality-segmented button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.quality-sort { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.quality-sort select { min-height: 38px; min-width: 165px; }

.quality-source-list { display: grid; }
.quality-source { --quality-source: var(--accent); display: grid; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.quality-source:last-child { border-bottom: 1px solid var(--line); }
.quality-source > header,
.quality-source > footer,
.quality-source-actions,
.quality-source-identity,
.quality-scan-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.quality-source-identity { justify-content: flex-start; min-width: 0; }
.quality-source-identity h3,
.quality-source-identity p { margin: 0; }
.quality-source-identity p { color: var(--muted); font-size: .82rem; }
.quality-source-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--quality-source) 65%, var(--line)); border-radius: var(--radius-sm); color: var(--quality-source); font-weight: 900; }
.quality-source-icon img { width: 25px; height: 25px; object-fit: contain; }
.quality-source-icon.image-failed img { display: none; }
.quality-source-icon.image-failed::after { content: "?"; }
.quality-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: .75rem; font-weight: 900; }
.quality-state.measured { color: var(--green); border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.quality-state.checking { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.quality-state.attention { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }

.quality-scan-progress { display: grid; gap: 6px; }
.quality-scan-progress span,
.quality-scan-progress strong { font-size: .78rem; }
.quality-scan-progress small { color: var(--muted); }
.quality-meter { height: 5px; overflow: hidden; background: var(--panel-2); border-radius: 3px; }
.quality-meter > span { display: block; height: 100%; background: var(--quality-source, var(--accent)); }

.quality-dimensions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.quality-dimension { min-width: 0; display: grid; gap: 5px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--quality-source) 55%, var(--line)); }
.quality-dimension > span { color: var(--muted); font-size: .7rem; text-transform: uppercase; font-weight: 900; }
.quality-dimension strong { font-size: 1.05rem; }
.quality-dimension small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.quality-source > footer { align-items: end; }
.quality-limitations { display: flex; flex-wrap: wrap; gap: 6px; }
.quality-limitations span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; font-size: .72rem; }
.quality-limitations i { color: var(--quality-source); }
.quality-source-actions { align-items: end; }
.quality-source-actions small { color: var(--muted); }
.quality-source-actions a { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--quality-source); text-decoration: none; font-weight: 900; }
.quality-source-actions a:hover { text-decoration: underline; }

.quality-method > header { width: min(760px, 100%); margin-bottom: 28px; }
.quality-method > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.quality-method article { min-width: 0; padding-top: 14px; border-top: 2px solid var(--line); }
.quality-method article i { color: var(--accent); }
.quality-method article h3 { margin: 12px 0 7px; }
.quality-method article p { margin: 0; color: var(--muted); line-height: 1.55; }
.quality-empty { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: var(--space-4); color: var(--muted); border-block: 1px solid var(--line); }

@media (max-width: 1080px) {
  .quality-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quality-summary-metric:nth-child(3) { border-right: 0; }
  .quality-summary-metric:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .quality-sync { grid-template-columns: 1fr; gap: 22px; }
  .quality-source-toolbar { align-items: flex-start; flex-direction: column; }
  .quality-controls { width: 100%; justify-content: space-between; }
}

@media (max-width: 760px) {
  .quality-shell { width: min(100% - 24px, 1380px); }
  .quality-hero { min-height: 0; padding-block: 1.5rem 1.75rem; }
  .quality-hero h1 { font-size: 2.35rem; }
  .quality-section-heading { align-items: flex-start; flex-direction: column; }
  .quality-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-summary-metric { min-height: 120px; padding: 14px; border-bottom: 1px solid var(--line); }
  .quality-summary-metric:nth-child(2n) { border-right: 0; }
  .quality-summary-metric:nth-child(3) { border-right: 1px solid var(--line); }
  .quality-summary-metric:nth-last-child(-n+2) { border-bottom: 0; }
  .quality-sync-metrics { grid-template-columns: 1fr; border-left: 0; }
  .quality-sync-metrics article { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .quality-controls { align-items: stretch; flex-direction: column; }
  .quality-segmented { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .quality-segmented button { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .quality-segmented button:nth-child(2n) { border-right: 0; }
  .quality-segmented button:nth-last-child(-n+2) { border-bottom: 0; }
  .quality-sort select { width: 100%; }
  .quality-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .quality-source > footer { align-items: flex-start; flex-direction: column; }
  .quality-source-actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .quality-method > div { grid-template-columns: 1fr; gap: 20px; }
}
.author-editor-account { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.creator-account-health { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 11px; display: grid; gap: var(--space-4); }
.creator-account-health > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.creator-account-health > header span { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.creator-account-health > header strong { font-size: .72rem; text-transform: uppercase; color: var(--muted); }
.creator-account-health.healthy > header strong { color: #42d99a; }
.creator-account-health.attention > header strong, .creator-account-health.incomplete > header strong { color: #f2c96d; }
.creator-account-health.error > header strong { color: #ff8a8a; }
.creator-account-health dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.creator-account-health dl div { display: grid; gap: 2px; }
.creator-account-health dt { color: var(--muted); text-transform: uppercase; font-size: .62rem; font-weight: 800; }
.creator-account-health dd { margin: 0; font-weight: 800; }
.creator-account-health p { margin: 0; color: #ff9b9b; font-size: .76rem; }
.creator-account-health > button { justify-self: end; }
.watches-shell { min-height: 100vh; }
.watches-hero { text-align: left; }
.watches-hero h1 { margin: .5rem 0 1rem; }
.watches-hero > p:last-of-type { color: var(--muted); }
.watch-summary { display: grid; gap: 0; margin: 0; }
.watch-summary span { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); align-items: baseline; color: var(--muted); }
.watch-summary strong { color: var(--text); font-size: var(--text-md); }
.watch-tabs { width: fit-content; margin: 0 auto 28px; display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(7, 12, 17, .78); }
.watch-tabs button { min-height: 38px; display: inline-flex; align-items: center; gap: var(--space-3); border-color: transparent; background: transparent; color: var(--muted); }
.watch-tabs button.active { border-color: color-mix(in srgb, var(--accent) 56%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, #0b1116); color: var(--text); }
.watch-center-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 28px; padding-bottom: 70px; }
.watch-list-panel > header, .watch-create-panel > header { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.watch-list-panel h2, .watch-create-panel h2 { margin: 3px 0 0; }
.watch-group { margin-bottom: 25px; }
.watch-group h3 { display: flex; align-items: center; gap: var(--space-3); font-size: .9rem; color: var(--muted); }
.watch-group > div { display: grid; gap: var(--space-3); }
.watch-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); padding: 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); }
.watch-card.paused { opacity: .7; }
.watch-card-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent-2); }
.watch-card-main { min-width: 0; display: grid; gap: 2px; }
.watch-card-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-card-main small, .watch-type { color: var(--muted); font-size: .72rem; }
.watch-type { text-transform: uppercase; font-weight: 800; }
.watch-error { color: #ff8a8a; margin: 5px 0 0; font-size: .75rem; }
.watch-card-controls { display: flex; align-items: end; gap: 6px; }
.watch-card-controls label { display: grid; gap: 3px; color: var(--muted); font-size: .68rem; }
.watch-card-controls select { min-height: 34px; }
.watch-card-controls button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.watch-discord-row { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--line); padding-top: 9px; margin-top: 3px; }
.watch-discord-active { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .74rem; }
.watch-discord-active i { color: #7289da; }
.watch-discord-actions { display: flex; gap: 6px; }
.watch-discord-actions .ghost-action { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; }
.watch-test-result { grid-column: 2 / -1; display: grid; gap: 7px; border-top: 1px solid var(--line); padding-top: 11px; }
.watch-test-result p, .watch-test-result > small { margin: 0; color: var(--muted); font-size: .75rem; }
.watch-test-result ul, .activity-side-section ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.watch-test-result li, .activity-side-section li { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid rgba(39, 50, 61, .66); padding-bottom: 6px; }
.watch-test-result li small { color: var(--muted); text-align: right; }
.watch-create-panel { min-width: 0; }
.watch-search-picker { display: grid; gap: 6px; margin-bottom: 8px; color: var(--muted); font-size: .74rem; font-weight: 800; }
.watch-search-picker select, .activity-side-section input { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #0b1116; color: var(--text); padding: 8px 10px; }
.watch-create-panel > button { width: 100%; justify-content: center; }
.watch-preview-empty, .watch-preview-result { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(8, 14, 19, .66); padding: 14px; }
.watch-preview-empty { display: grid; justify-items: center; gap: 6px; color: var(--muted); text-align: center; }
.watch-preview-empty i { color: var(--accent-2); font-size: 1.25rem; }
.watch-preview-empty p, .watch-preview-result p, .watch-panel-note { margin: 0; color: var(--muted); line-height: 1.5; }
.watch-preview-result { display: grid; gap: var(--space-5); }
.watch-preview-result.warning { border-color: color-mix(in srgb, #f2c96d 62%, var(--line)); }
.watch-preview-result > header { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--muted); font-size: .72rem; text-transform: capitalize; }
.watch-preview-result h3 { margin: 0; font-size: .92rem; line-height: 1.45; }
.watch-preview-samples { display: grid; gap: 5px; }
.watch-preview-samples a { display: grid; gap: 2px; border-bottom: 1px solid rgba(39, 50, 61, .66); padding: 7px 0; color: var(--text); text-decoration: none; }
.watch-preview-samples a:hover span { color: var(--accent-2); }
.watch-preview-samples small { color: var(--muted); }
.watch-preview-result .primary-action, .watch-create-panel .secondary-action { justify-content: center; }
.activity-center-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.activity-feed-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.activity-feed-header h2 { margin: 3px 0 0; }
.activity-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.activity-filters button { min-height: 32px; padding: 6px 9px; color: var(--muted); }
.activity-filters button.active { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, #0b1116); }
.activity-health { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 12px; font-size: .78rem; }
.activity-health.healthy { border-color: color-mix(in srgb, #42d99a 38%, var(--line)); color: #7ee2b7; }
.activity-health.warning { border-color: color-mix(in srgb, #f2c96d 48%, var(--line)); color: #f2c96d; }
.activity-event-list { display: grid; }
.activity-event { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 11px; align-items: start; border-bottom: 1px solid var(--line); padding: 13px 4px; }
.activity-event.unread::before { content: ""; position: absolute; left: -8px; top: 19px; width: 4px; height: 22px; border-radius: 4px; background: var(--accent-2); }
.activity-event-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--accent-2); }
.activity-event > a { min-width: 0; display: grid; gap: 3px; color: var(--text); text-decoration: none; }
.activity-event > a:hover strong { color: var(--accent-2); }
.activity-event-type { color: var(--accent-2); font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.activity-event p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.activity-event small { color: var(--muted); font-size: .7rem; }
.activity-event > button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.activity-settings-panel { display: grid; align-content: start; gap: var(--space-4); }
.activity-side-section { border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(8, 14, 19, .66); padding: 13px; }
.activity-side-section > header { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-3); align-items: center; margin-bottom: 10px; }
.activity-side-section > header > i { color: var(--accent-2); }
.activity-side-section > header strong, .activity-side-section > header small { display: block; }
.activity-side-section > header small, .activity-side-section p, .activity-side-section > small { color: var(--muted); font-size: .72rem; }
.activity-side-section p { margin: 0; line-height: 1.5; }
.activity-side-section li { align-items: center; font-size: .76rem; }
.activity-side-section li small { color: var(--muted); text-transform: capitalize; }
.activity-side-section li button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; }
.activity-side-section form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.activity-side-section form label { display: grid; gap: 4px; color: var(--muted); font-size: .68rem; }
.activity-side-section form button { min-height: 34px; justify-content: center; }
.activity-side-section form output { grid-column: 1 / -1; color: var(--green); font-size: .72rem; }
.profile-digest-preview { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(8, 14, 19, .62); padding: 9px 10px; color: var(--muted); font-size: .76rem; }
.profile-digest-preview i { color: var(--accent-2); }
@media (max-width: 800px) {
  .watch-center-layout { grid-template-columns: 1fr; }
  .watch-card { grid-template-columns: 36px minmax(0, 1fr); }
  .watch-card-controls { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; padding-top: 4px; }
  .watch-card-controls label { flex: 1; min-width: 145px; }
  .watch-card-controls select { width: 100%; }
  .watch-test-result { grid-column: 1 / -1; }
  .watch-tabs { margin-bottom: 22px; }
  .activity-feed-header { align-items: flex-start; flex-direction: column; }
  .activity-filters { justify-content: flex-start; }
  .comparison-variant-list { grid-template-columns: 1fr; }
  .comparison-variant { grid-template-columns: 1fr; }
  .comparison-variant-actions { flex-shrink: 0; }
  .comparison-variant dl { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-metrics { grid-column: 1; justify-content: flex-start; }
  .model-trust-summary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-trust-summary dl div:last-child { grid-column: 1 / -1; }
  .model-history li > div { grid-template-columns: 1fr; gap: 2px; }
  .model-lineage-item { grid-template-columns: 1fr; }
  .model-lineage-evidence { justify-content: flex-start; padding-left: 71px; }
  .source-hub-summary { grid-template-columns: 1fr; }
  .source-hub-summary dl { grid-template-columns: repeat(3, 1fr); }
  .source-hub-quality dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-account-health dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.search-compare-tray[hidden],
.search-compare-dialog[hidden] {
  display: none;
}

body.compare-tray-open:not(.modal-open) {
  padding-bottom: 96px;
}

body > .search-compare-tray {
  position: fixed;
  z-index: 118;
  right: 14px;
  bottom: 12px;
  left: 14px;
  pointer-events: none;
}

.search-compare-tray-inner {
  width: min(1420px, 100%);
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  border-radius: var(--radius-md);
  background: rgba(8, 15, 21, .97);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .54), 0 0 24px color-mix(in srgb, var(--accent) 13%, transparent);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.search-compare-tray-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
}

.search-compare-tray-title > i {
  color: var(--accent-2);
}

.search-compare-tray-title > span {
  display: grid;
  gap: 2px;
}

.search-compare-tray-title strong {
  font-size: .82rem;
}

.search-compare-tray-title small {
  color: var(--muted);
  font-size: .68rem;
}

.search-compare-chips {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.search-compare-chip {
  flex: 0 1 235px;
  min-width: 150px;
  max-width: 235px;
  height: 38px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  padding: 0 4px 0 8px;
  border: 1px solid color-mix(in srgb, var(--source) 46%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--source) 7%, #0d151c);
}

.search-compare-chip > img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.search-compare-chip > span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-compare-chip > button,
.search-compare-tray-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #111a22;
  color: var(--muted);
  cursor: pointer;
}

.search-compare-chip > button {
  width: 28px;
  height: 28px;
  padding: 0;
}

.search-compare-chip > button:hover,
.search-compare-tray-actions button:hover,
.search-compare-tray-actions button:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  outline: none;
}

.search-compare-tray-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.search-compare-tray-actions button {
  min-height: 38px;
  gap: 7px;
  padding: 0 11px;
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
}

.search-compare-tray-actions [data-compare-open] {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 15%, #111a22);
}

.search-compare-tray-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

body > .search-compare-dialog {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.search-compare-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 11, .82);
  backdrop-filter: blur(9px);
}

.search-compare-panel {
  position: relative;
  z-index: 1;
  width: min(1500px, 100%);
  max-height: calc(100dvh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: var(--radius-md);
  background: #081017;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .62);
  touch-action: pan-y;
}

.search-compare-panel > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 15px;
  border-bottom: 1px solid var(--line);
}

.search-compare-panel > header h2,
.search-compare-panel > header p {
  margin: 0;
}

.search-compare-panel > header h2 {
  margin-top: 3px;
  font-size: 1.35rem;
}

.search-compare-panel > header p:last-child {
  max-width: 760px;
  margin-top: 5px;
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.45;
}

.search-compare-panel > header > button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #111a22;
  color: var(--text);
  cursor: pointer;
}

.search-compare-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-compare-loading {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--muted);
}

.search-compare-currency-note,
.search-compare-legal {
  margin: 0;
  padding: 10px 18px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.search-compare-currency-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--line);
  color: #f0cf7c;
}

.search-compare-legal {
  border-top: 1px solid var(--line);
}

.search-compare-table-scroll {
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

.search-compare-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  table-layout: fixed;
}

.search-compare-table th,
.search-compare-table td {
  width: 250px;
  min-width: 250px;
  padding: 11px 13px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
  text-align: left;
}

.search-compare-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 150px;
  min-width: 150px;
  background: #0b131a;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.search-compare-table thead tr > :first-child {
  z-index: 4;
}

.search-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0;
  background: #0b131a;
}

.search-compare-table td {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.38;
}

.search-compare-table td > strong,
.search-compare-table td > span {
  display: block;
}

.search-compare-table td > strong {
  color: var(--text);
}

.search-compare-table td > small,
.search-compare-table .verified {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.search-compare-table .verified {
  color: #42d99a;
}

.search-compare-model-head {
  min-height: 232px;
  display: grid;
  grid-template-rows: 145px minmax(38px, auto) auto;
  gap: var(--space-3);
  padding: 10px;
  border-top: 3px solid var(--source);
}

.search-compare-model-head > div {
  min-width: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #0e161d;
}

.search-compare-model-head > div img,
.search-compare-model-head > div .no-image {
  width: 100%;
  height: 145px;
  object-fit: cover;
}

.search-compare-model-head > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .82rem;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.search-compare-model-head > span {
  display: flex;
  gap: 6px;
}

.search-compare-model-head button,
.search-compare-model-head a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #111a22;
  color: var(--text);
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.search-compare-source {
  display: grid !important;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
}

.search-compare-source img {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.search-compare-source small {
  text-transform: capitalize;
}

.search-compare-access {
  width: max-content;
  margin-bottom: 5px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-transform: capitalize;
}

.search-compare-access.free {
  border-color: color-mix(in srgb, #42d99a 48%, var(--line));
  color: #42d99a;
}

.search-compare-access.paid,
.search-compare-access.freemium {
  border-color: color-mix(in srgb, #f0cf7c 48%, var(--line));
  color: #f0cf7c;
}

.search-compare-lowest {
  color: #42d99a !important;
  font-weight: 800;
}

.search-compare-metrics {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.search-compare-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-compare-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
}

.search-compare-tags small {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
}

.search-compare-variant-sources {
  display: flex !important;
  gap: 5px;
  margin-top: 7px;
}

.search-compare-variant-sources img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

@media (max-width: 760px) {
  body.compare-tray-open:not(.modal-open) { padding-bottom: 142px; }
  .search-compare-tray { right: 7px; bottom: 7px; left: 7px; }
  .search-compare-tray-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: 8px; }
  .search-compare-tray-title { min-width: 0; }
  .search-compare-tray-title strong { font-size: .76rem; }
  .search-compare-chips { grid-column: 1 / -1; grid-row: 2; }
  .search-compare-chip { flex-basis: 180px; min-width: 145px; max-width: 180px; }
  .search-compare-tray-actions [data-compare-clear] span { display: none; }
  .search-compare-tray-actions button { min-height: 36px; padding: 0 9px; }
  .search-compare-dialog { padding: 7px; }
  .search-compare-panel { max-height: calc(100dvh - 14px); }
  .search-compare-panel > header { padding: 13px; }
  .search-compare-panel > header h2 { font-size: 1.06rem; }
  .search-compare-panel > header p:last-child { display: none; }
  .search-compare-table th, .search-compare-table td { width: 220px; min-width: 220px; }
  .search-compare-table tr > :first-child { width: 110px; min-width: 110px; }
  .search-compare-model-head { min-height: 205px; grid-template-rows: 120px minmax(38px, auto) auto; }
  .search-compare-model-head > div img, .search-compare-model-head > div .no-image { height: 120px; }
}

.smart-collection-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line)); border-radius: 4px; color: var(--accent-bright, #c485e8); font-size: .7rem; line-height: 1; vertical-align: middle; }
.smart-collection-card-summary { color: var(--muted) !important; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-collection-manager { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 78%, transparent); }
.smart-collection-creator { margin: 22px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.smart-collection-creator > header { max-width: 740px; }
.smart-collection-creator h2, .smart-collection-manager strong { margin: 0; }
.smart-collection-creator p, .smart-collection-manager p, .smart-collection-manager small { margin: 5px 0 0; color: var(--muted); }
.smart-collection-convert, .smart-collection-actions, .smart-custom-rule form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.smart-collection-creator input, .smart-collection-creator select, .smart-collection-convert select { min-height: 40px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-strong, #081017); color: var(--text); padding: 0 10px; }
.smart-collection-creator button, .smart-collection-actions button, .smart-collection-actions a, .smart-collection-convert button, .smart-model-pin { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--text); padding: 0 11px; text-decoration: none; }
.smart-recipe-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.smart-recipe-tabs button { min-width: 0; min-height: 52px; justify-content: flex-start; padding: 8px 11px; border-color: var(--line); background: transparent; color: var(--muted); text-align: left; }
.smart-recipe-tabs button span { min-width: 0; line-height: 1.25; }
.smart-recipe-tabs button:hover, .smart-recipe-tabs button[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 68%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.smart-recipe-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
.smart-recipe-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); gap: 28px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.smart-recipe-rule > strong { font-size: .96rem; }
.smart-recipe-rule > p { max-width: 650px; font-size: .82rem; }
.smart-recipe-field { display: grid; gap: 7px; margin-top: 14px; }
.smart-recipe-field > span, .smart-recipe-field > label, .smart-recipe-details label > span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.smart-recipe-field select { width: min(100%, 520px); }
.smart-recipe-details { display: grid; grid-template-columns: minmax(0, 1fr) 115px; gap: var(--space-4); align-items: end; }
.smart-recipe-details label { display: grid; gap: 7px; }
.smart-recipe-details input, .smart-recipe-details select { width: 100%; }
.smart-recipe-details output { grid-column: 1 / -1; min-height: 18px; color: var(--muted); font-size: .76rem; }
.smart-recipe-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-3); }
.smart-recipe-input-wrap { position: relative; width: min(100%, 620px); }
.smart-recipe-input-wrap > i { position: absolute; z-index: 2; left: 12px; top: 13px; color: var(--muted); pointer-events: none; }
.smart-recipe-input-wrap > input { width: 100%; padding-left: 35px; }
.smart-recipe-suggestions { position: absolute; z-index: 35; top: calc(100% + 5px); left: 0; right: 0; max-height: 250px; overflow: auto; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); border-radius: 5px; background: var(--panel-strong, #081017); box-shadow: 0 16px 34px rgba(0, 0, 0, .42); }
.smart-recipe-suggestions button { width: 100%; min-height: 40px; justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.smart-recipe-suggestions button:last-child { border-bottom: 0; }
.smart-recipe-suggestions button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.smart-recipe-suggestions small { color: var(--muted); }
.smart-recipe-selections { display: flex; flex-wrap: wrap; gap: 6px; }
.smart-recipe-selections > span { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding-left: 9px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 4px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); font-size: .78rem; }
.smart-recipe-selections button { min-width: 28px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); }
.smart-recipe-preview { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.smart-recipe-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.smart-recipe-preview > header p { font-size: .78rem; }
.smart-recipe-preview > header > span { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.smart-recipe-preview-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: 12px; }
.smart-recipe-preview-models .mini-model-card { min-height: 0; }
.smart-custom-rule { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.smart-custom-rule summary { width: fit-content; color: var(--muted); font-size: .8rem; cursor: pointer; }
.smart-custom-rule form { margin-top: 12px; }
.smart-collection-manager.compact { margin-bottom: 14px; }
.smart-collection-model { position: relative; min-width: 0; }
.smart-collection-model .mini-model-card { height: 100%; }
.smart-model-pin { position: absolute; top: 8px; right: 8px; min-height: 30px; padding: 0 8px; background: rgba(5, 11, 16, .9); backdrop-filter: blur(8px); }
.smart-model-pin.active { color: var(--accent-bright, #c485e8); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent); }
@media (max-width: 800px) {
  .smart-collection-manager, .smart-custom-rule form, .smart-collection-convert, .smart-collection-actions { align-items: stretch; flex-direction: column; }
  .smart-recipe-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-recipe-form { grid-template-columns: 1fr; gap: 18px; }
  .smart-recipe-preview-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-collection-creator input, .smart-collection-creator select, .smart-collection-creator button, .smart-collection-convert select, .smart-collection-convert button, .smart-collection-actions a, .smart-collection-actions button { width: 100%; }
}
@media (max-width: 520px) {
  .smart-recipe-tabs, .smart-recipe-preview-models { grid-template-columns: 1fr; }
  .smart-recipe-details { grid-template-columns: 1fr; }
  .smart-recipe-details output, .smart-recipe-actions { grid-column: 1; }
  .smart-recipe-preview > header { align-items: flex-start; flex-direction: column; gap: 6px; }
}

.public-recipe-filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.public-recipe-filter-summary > span { display: grid; gap: 2px; min-width: 0; }
.public-recipe-filter-summary strong { font-size: .78rem; }
.public-recipe-filter-summary small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-recipe-filter-summary button { flex: 0 0 auto; min-height: 32px; }

.for-you-reason-menu { position: relative; min-width: 0; height: 32px; }
.for-you-reason-menu > summary { width: 36px; height: 32px; min-height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; list-style: none; }
.for-you-reason-menu > summary::-webkit-details-marker { display: none; }
.for-you-reason-menu > div { position: absolute; z-index: 25; right: 0; bottom: calc(100% + 7px); width: min(310px, calc(100vw - 32px)); padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius-sm); background: var(--panel-strong, #081017); box-shadow: 0 16px 35px rgba(0, 0, 0, .42); }
.for-you-reason-menu ul { margin: 9px 0; padding-left: 18px; color: var(--muted); font-size: .78rem; }
.for-you-reason-menu hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.for-you-reason-menu button { width: 100%; min-height: 34px; justify-content: flex-start; margin-top: 5px; }

.profile-recommendation-mutes { grid-column: 1 / -1; }
.profile-muted-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); margin: 14px 0 16px; }
.profile-muted-source { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 9px; min-width: 0; min-height: 46px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb, var(--panel-strong, #081017) 88%, transparent); color: var(--muted); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease; }
.profile-muted-source:hover { border-color: color-mix(in srgb, var(--source) 62%, var(--line)); background: color-mix(in srgb, var(--source) 7%, var(--panel-strong, #081017)); color: var(--text); box-shadow: 0 0 16px color-mix(in srgb, var(--source) 11%, transparent); transform: translateY(-1px); }
.profile-muted-source:focus-within { border-color: var(--source); outline: 2px solid color-mix(in srgb, var(--source) 24%, transparent); outline-offset: 1px; }
.profile-muted-source input { width: 16px; height: 16px; margin: 0; justify-self: end; accent-color: var(--source); cursor: pointer; }
.profile-muted-source img { width: 21px; height: 21px; object-fit: contain; }
.profile-muted-source-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-muted-source.active, .profile-muted-source:has(input:checked) { border-color: color-mix(in srgb, var(--source) 76%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--source) 11%, var(--panel-strong, #081017)); box-shadow: inset 3px 0 0 var(--source), 0 0 16px color-mix(in srgb, var(--source) 10%, transparent); }
.profile-muted-category-fieldset { min-width: 0; margin: 15px 0 0; padding: 0; border: 0; }
.profile-muted-category-fieldset legend, .profile-muted-tag-field > label { margin-bottom: 7px; color: var(--muted); font-size: .8rem; }
.profile-muted-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1px 14px; max-height: 250px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-strong, #081017); scrollbar-gutter: stable; }
.profile-muted-category-grid label { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 34px; color: var(--muted); cursor: pointer; }
.profile-muted-category-grid label:hover, .profile-muted-category-grid label:has(input:checked) { color: var(--text); }
.profile-muted-category-grid input { flex: 0 0 auto; accent-color: var(--accent-bright, #c485e8); }
.profile-muted-category-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-category-loading { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; margin: 0; color: var(--muted); }
.profile-muted-tag-field { margin-top: 15px; }
.profile-muted-tag-field > label { display: block; }
.profile-muted-tag-field > small { display: block; margin-top: 6px; color: var(--muted); }
.profile-muted-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.profile-muted-tag-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 4px 0 9px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.profile-muted-tag-chip button { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
.profile-muted-tag-chip button:hover { color: var(--text); }
.profile-tag-combobox { position: relative; }
.profile-tag-combobox > i { position: absolute; z-index: 1; left: 11px; top: 13px; color: var(--muted); pointer-events: none; }
.profile-tag-combobox input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-strong, #081017); color: var(--text); padding: 0 12px 0 35px; }
.profile-tag-combobox input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset: 1px; }
.profile-tag-suggestions { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0; max-height: 255px; overflow: auto; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 5px; background: var(--panel-strong, #081017); box-shadow: 0 16px 35px rgba(0, 0, 0, .42); }
.profile-tag-suggestions button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 38px; padding: 0 11px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.profile-tag-suggestions button:last-child { border-bottom: 0; }
.profile-tag-suggestions button:hover, .profile-tag-suggestions button[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.profile-tag-suggestions small { color: var(--muted); }
.profile-tag-suggestions p { margin: 0; padding: 11px; color: var(--muted); }
@media (max-width: 640px) {
  .profile-muted-source-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .profile-muted-category-grid { grid-template-columns: 1fr; max-height: 300px; }
}

/* Browser Companion. Three stacked panels on the shared page grid: the hero
   head, the source lookup, and a short guide to the browser shortcut. The shell
   is a plain block so the generic `main { display:grid }` rule cannot stretch
   the rows across a mostly-empty viewport. */
.companion-shell { min-height: 100vh; }
.companion-hero { text-align: left; }
.companion-tool, .companion-guide, .companion-result { width: 100%; margin: 0 0 20px; }
.companion-tool { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.companion-tool > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.companion-tool h2, .companion-result h2 { margin: 3px 0 0; letter-spacing: 0; }
.companion-tool-copy { max-width: 78ch; margin: 0 0 16px; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.companion-tool form > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.companion-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
.companion-input-row input { min-width: 0; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-strong, #081017); color: var(--text); }
.companion-input-row input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset: 1px; }
.companion-tool output { display: block; min-height: 20px; margin-top: 9px; color: var(--muted); font-size: .83rem; }
.companion-tool output.success { color: var(--green); }
.companion-tool output.error { color: var(--red); }
.companion-guide { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px 40px; align-items: start; padding: 20px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--panel); }
.companion-guide h2 { margin: 4px 0 10px; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
.companion-guide-lead > p:not(.eyebrow):not(.companion-guide-hint) { margin: 0 0 10px; max-width: 60ch; color: var(--muted); line-height: 1.6; }
.companion-guide-hint { margin: 0 0 14px; color: var(--muted); font-size: .8rem; }
.companion-shortcut { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 40px; }
.companion-guide-status { display: block; min-height: 18px; margin-top: 9px; color: var(--muted); font-size: .82rem; }
.companion-guide-status.success { color: var(--green); }
.companion-guide-status.error { color: var(--red); }
.companion-guide-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.companion-guide-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .88rem; line-height: 1.5; }
.companion-guide-steps li > span:first-child { font-family: var(--font-mono); color: var(--accent); font-weight: 800; }
.companion-preview { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 9px; padding: 8px 11px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); color: var(--muted); }
.companion-model-summary { display: grid; grid-template-columns: minmax(240px, 36%) minmax(0, 1fr); min-height: 310px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--source) 48%, var(--line)); border-radius: var(--radius-sm); background: var(--panel); box-shadow: inset 3px 0 0 var(--source); }
.companion-model-media { position: relative; min-height: 310px; overflow: hidden; background: var(--panel-strong, #081017); }
.companion-model-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.companion-model-media.fallback { display: grid; place-items: center; color: var(--source); font-weight: 800; }
.companion-media-fallback { display: none; color: var(--source); font-weight: 800; }
.companion-model-media.image-failed { display: grid; place-items: center; }
.companion-model-media.image-failed img { display: none; }
.companion-model-media.image-failed .companion-media-fallback { display: block; }
.companion-sensitive-label { display: none; }
.companion-model-media.sensitive img { filter: blur(22px); transform: scale(1.08); }
.companion-model-media.sensitive .companion-sensitive-label { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; text-shadow: 0 2px 12px #000; }
.companion-model-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 26px; }
.companion-model-copy h2 { max-width: 780px; font-size: 2.2rem; line-height: 1.12; }
.companion-model-copy > p:not(.eyebrow) { max-width: 760px; margin: 14px 0; color: var(--muted); line-height: 1.62; }
.companion-model-source { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.companion-model-source .companion-source-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.companion-model-source .companion-source-icon img { max-width: 16px; max-height: 16px; }
.companion-model-stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 2px 0 0; }
.companion-model-stats > div { min-width: 0; }
.companion-model-stats dt { color: var(--muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.companion-model-stats dd { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; font-family: var(--font-mono); color: var(--text); font-weight: 750; }
.companion-model-stats dd i { color: var(--muted); font-size: .78em; }
.companion-model-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.companion-model-tags span { padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--panel-strong, #081017) 70%, transparent); color: var(--muted); font-size: .74rem; }
.companion-creator-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; color: var(--muted); }
.companion-creator-line i { color: var(--green); }
.companion-creator-line a { color: var(--text); font-weight: 800; }
.companion-creator-line span { font-size: .76rem; }
.companion-model-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 18px; }
.companion-model-actions a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; color: var(--text); font-weight: 750; text-decoration: none; }
.companion-model-actions a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.companion-model-actions a.primary-button { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 800; }
.companion-model-actions a.primary-button:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.companion-trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.companion-trust-strip > div { min-width: 0; padding: 13px 15px; border-right: 1px solid var(--line); }
.companion-trust-strip > div:last-child { border-right: 0; }
.companion-trust-strip span { display: block; color: var(--muted); font-size: .73rem; font-weight: 700; text-transform: uppercase; }
.companion-trust-strip strong { display: block; margin-top: 4px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.companion-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: .79rem; }
.companion-reasons strong { margin-right: 3px; color: var(--text); }
.companion-reasons span { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 4px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.companion-context-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: var(--space-5); margin-top: 20px; align-items: start; }
.companion-sources, .companion-account { border-top: 1px solid var(--line); padding-top: 16px; }
.companion-sources > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 9px; }
.companion-sources > header > span { color: var(--muted); font-size: .8rem; }
.companion-source-row { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(0, 1.7fr) 36px; align-items: center; gap: var(--space-5); min-height: 66px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--source) 2.5%, transparent); }
.companion-source-row:first-child { border-top: 1px solid var(--line); }
.companion-source-row.recommended { box-shadow: inset 3px 0 0 var(--source); background: color-mix(in srgb, var(--source) 7%, transparent); }
.companion-source-name { min-width: 0; display: flex; align-items: center; gap: 9px; }
.companion-source-name > div { min-width: 0; }
.companion-source-name strong, .companion-source-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.companion-source-name small { margin-top: 2px; color: var(--muted); font-size: .72rem; text-transform: capitalize; }
.companion-source-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 5px; background: #fff; color: #0b0f13; font-weight: 900; }
.companion-source-icon img { max-width: 22px; max-height: 22px; object-fit: contain; }
.companion-source-icon.image-failed img { display: none; }
.companion-source-row dl { min-width: 0; display: grid; grid-template-columns: .7fr 1.3fr .9fr .65fr; gap: var(--space-4); margin: 0; }
.companion-source-row dl > div { min-width: 0; }
.companion-source-row dt { color: var(--muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.companion-source-row dd { margin: 3px 0 0; overflow: hidden; color: var(--text); font-size: .79rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.companion-source-row > .icon-button { display: grid; place-items: center; }
.companion-legal { margin: 10px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.companion-not-indexed { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-5); padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: var(--radius-sm); background: var(--panel); box-shadow: inset 3px 0 0 var(--accent); }
.companion-not-indexed > i { color: var(--accent); font-size: 1.8rem; margin-top: 4px; }
.companion-not-indexed h2 { margin: 4px 0 0; }
.companion-not-indexed p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); line-height: 1.6; max-width: 720px; }
.companion-not-indexed-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 16px; }
.companion-not-indexed-actions .primary-button { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: 0 16px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 800; }
.companion-not-indexed-actions .primary-button:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.companion-not-indexed-actions .primary-button[disabled] { opacity: .7; cursor: progress; }
.companion-not-indexed-actions .button { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 42px; }
.companion-account > h2 { margin-bottom: 12px; }
.companion-account-list { border-top: 1px solid var(--line); }
.companion-account-list > a, .companion-account-list > div { min-height: 62px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; align-items: center; gap: var(--space-4); padding: 9px 5px; border-bottom: 1px solid var(--line); color: var(--text); }
.companion-account-list > div { grid-template-columns: 22px minmax(0, 1fr); color: var(--muted); }
.companion-account-list span, .companion-account-list strong, .companion-account-list small { min-width: 0; display: block; }
.companion-account-list strong, .companion-account-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.companion-account-list small { margin-top: 3px; color: var(--muted); }
.companion-account-empty { padding: 18px 0; color: var(--muted); }
.companion-account-empty p { margin: 9px 0; line-height: 1.5; }
.profile-companion-panel > a { width: fit-content; }
/* MeshScout-style action button: matches the View profile affordance used on
   creator cards so panel actions read as one consistent family. */
.meshscout-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  margin-top: 8px;
  min-height: 38px;
  padding: .6rem .85rem;
  border: 1px solid rgba(169, 116, 197, 0.45);
  border-radius: var(--radius-md);
  background: rgba(169, 116, 197, 0.08);
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.meshscout-button:hover,
.meshscout-button:focus-visible {
  border-color: var(--accent);
  background: rgba(169, 116, 197, 0.16);
  color: var(--accent);
}
.profile-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.profile-avatar-upload:disabled {
  opacity: .6;
  cursor: progress;
}
@media (max-width: 820px) {
  .companion-hero h1 { font-size: 2.25rem; }
  .companion-model-summary { grid-template-columns: 1fr; }
  .companion-model-media { min-height: 250px; aspect-ratio: 16 / 10; }
  .companion-model-copy h2 { font-size: 1.7rem; }
  .companion-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion-trust-strip > div:nth-child(2) { border-right: 0; }
  .companion-trust-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .companion-context-grid { grid-template-columns: 1fr; }
  .companion-guide { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .companion-hero { margin-top: 0; }
  .companion-tool > header { align-items: flex-start; }
  .companion-shortcut span { display: none; }
  .companion-input-row { grid-template-columns: 1fr; }
  .companion-model-copy { padding: 20px 17px; }
  .companion-model-actions { width: 100%; }
  .companion-model-actions a { flex: 1 1 160px; justify-content: center; }
  .companion-source-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .companion-source-row dl { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 37px; }
  .companion-source-row > .icon-button { grid-column: 2; grid-row: 1; }
}

/* Shared spacing for the supporting public pages. */
.watches-shell {
  width: min(1460px, calc(100% - 48px));
  margin-inline: auto;
}

.companion-shell {
  box-sizing: border-box;
  width: min(var(--public-page-max), calc(100% - 2 * var(--public-page-gutter)));
  max-width: var(--public-page-max);
  margin-inline: auto;
  padding: var(--public-page-gutter) 0 48px;
  /* The shared `main { display:grid }` rule would stretch the rows across a
     tall viewport; the Companion stacks naturally instead. */
  display: block;
}

.companion-shell > .public-footer { margin-top: 40px; }

.collection-results-bar,
.author-results-bar,
#authorListTitle,
.author-profile,
[data-author-model-section] {
  scroll-margin-top: max(104px, calc(env(safe-area-inset-top) + 84px));
}

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  .contact-shell,
  .donate-shell,
  .api-docs-shell,
  .status-shell,
  .commissions-shell,
  .watches-shell,
  .companion-shell {
    padding-top: max(76px, calc(env(safe-area-inset-top) + 66px));
  }

  .watches-shell {
    width: calc(100% - 28px);
  }

}

/* Public updates */
.updates-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--public-page-max);
  margin: 0 auto;
  padding: var(--public-page-gutter) var(--public-page-gutter) 72px;
}

.updates-hero,
.updates-toolbar,
.updates-timeline,
.updates-shell > .public-footer {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.updates-hero {
  padding: 38px 0 46px;
  border-bottom: 1px solid var(--line);
}

.updates-hero h1 {
  max-width: 960px;
  margin: 8px 0 14px;
  color: var(--text);
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

.updates-hero > p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.updates-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.updates-toolbar > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.updates-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 20, .7);
}

.updates-filters button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
}

.updates-filters button:hover,
.updates-filters button:focus-visible {
  color: var(--text);
}

.updates-filters button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, rgba(8, 14, 20, .9));
  color: var(--text);
}

.updates-timeline {
  display: grid;
  padding: 10px 0 46px;
}

.updates-date-group {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 54px);
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}

.updates-date-heading {
  align-self: start;
  display: grid;
  gap: 6px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}

.updates-date-heading h2 {
  margin: 0;
  font-size: inherit;
}

.updates-date-heading time {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.updates-date-heading span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.4;
}

.updates-date-content,
.updates-section,
.updates-entry-list {
  min-width: 0;
  display: grid;
}

.updates-date-content {
  gap: 30px;
}

.updates-section {
  gap: 14px;
}

.updates-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}

.updates-entry-list {
  gap: var(--space-4);
}

.updates-entry {
  --update-color: #9aa8b5;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--update-color) 25%, var(--line));
  border-left: 3px solid var(--update-color);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--update-color) 4%, rgba(10, 16, 21, .82));
}

.updates-entry-added { --update-color: #45d49b; }
.updates-entry-fixed { --update-color: #55c6e7; }
.updates-entry-changed { --update-color: #c18cda; }
.updates-entry-removed { --update-color: #f17b86; }

.updates-entry-label {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: start;
  color: var(--update-color);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.updates-entry-copy {
  min-width: 0;
  display: grid;
  gap: 11px;
}

.updates-entry-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.updates-entry-copy p:first-child {
  color: var(--text);
}

.updates-entry-copy a {
  color: var(--accent-2);
  text-underline-offset: 3px;
}

.updates-entry-copy code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #080e13;
  font-size: .9em;
}

.updates-impact {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--update-color) 18%, var(--line));
}

.updates-impact strong {
  color: var(--update-color);
}

.updates-loading,
.updates-empty {
  display: grid;
  gap: var(--space-5);
  padding: 48px 0;
  color: var(--muted);
}

.updates-loading span {
  width: min(100%, 780px);
  height: 74px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(148, 163, 184, .05), rgba(148, 163, 184, .12), rgba(148, 163, 184, .05));
  background-size: 220% 100%;
  animation: updates-loading 1.3s linear infinite;
}

.updates-empty {
  place-items: center;
  text-align: center;
}

.updates-empty i {
  color: var(--accent-2);
  font-size: 26px;
}

@keyframes updates-loading {
  to { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .updates-loading span { animation: none; }
}

@media (max-width: 760px) {
  .updates-shell {
    padding: max(78px, calc(env(safe-area-inset-top) + 68px)) 14px max(38px, env(safe-area-inset-bottom));
  }

  .updates-hero,
  .updates-toolbar,
  .updates-timeline,
  .updates-date-group,
  .updates-date-content,
  .updates-section,
  .updates-entry-list,
  .updates-entry {
    min-width: 0;
    max-width: 100%;
  }

  .updates-hero {
    padding: 32px 2px 34px;
  }

  .updates-hero h1 {
    font-size: 40px;
  }

  .updates-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }

  .updates-filters {
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .updates-filters button {
    flex: 0 0 auto;
  }

  .updates-date-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 28px 0;
  }

  .updates-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: 15px;
  }
}

/* The shared header gets the same top gutter on every supporting public page. */
.public-page > main:not(.search-app):has(> .public-header) {
  padding-top: var(--public-page-gutter);
}

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  .public-page > main:not(.search-app):has(> .public-header) {
    padding-top: max(76px, calc(env(safe-area-inset-top) + 66px));
  }
}

/* Keep the shared provider chooser above public model/commission overlays. */
#publicAuthPopover { position: fixed; z-index: 1700; box-sizing: border-box; overflow: auto; }
.public-auth-provider-list { display: grid; gap: var(--space-3); min-width: 0; }
.public-auth-provider-list .auth-provider-option { box-sizing: border-box; min-width: 0; }
.public-auth-status:empty { display: none; }

/* Revenue disclosure shown under Materials retailer offers. Informational, not
   an error: it must be visible without competing with the prices beside it. */
.materials-v2-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--revenue-disclosure-border);
  border-radius: var(--radius-md);
  background: var(--revenue-disclosure-bg);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.materials-v2-disclosure i {
  margin-top: 1px;
  color: var(--accent-2);
}

.materials-v2-disclosure a {
  color: var(--accent-2);
  white-space: nowrap;
}
/* --- Redesign stage 2: styles requested by the page specialists ----------- */

/* Creator profile: grouped cross-source heading (Agent E) */
.author-source-section h3 {
  margin: 0;
  font-size: 1.15rem;
}

/* Blog: weekly roundup identification and empty state (Agent G) */
.blog-roundup-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.blog-roundup-note i {
  margin-top: 1px;
  color: var(--accent);
}

.blog-roundup-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.blog-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--muted);
  text-align: center;
}

.blog-empty-state h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}

.blog-empty-state p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: 1.55;
}
/* Source control: the wide button filters results; the small link opens the
   source hub. Icon only, with the meaning carried by title/aria-label. */
/* Homepage close: what MeshScout is, below the results block so it never
   competes with search. A page-wide plate — intro column and trust ledger side
   by side, then a full-width note — so it lines up with the grid above. */
.home-about {
  margin-top: var(--space-8);
  padding: var(--space-7) 0 var(--space-6);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: start;
}

.home-about-lead h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.home-about-lead p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.6;
  max-width: 62ch;
}

/* Trust ledger: a title-block table of what the index does, not a tile grid.
   Each row is a labelled fact separated by hairlines. */
.home-ledger {
  border-top: 1px solid var(--line);
}

.home-ledger-row {
  display: grid;
  grid-template-columns: minmax(84px, 108px) 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.home-ledger-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-ledger-val {
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .home-about {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }
}

@media (max-width: 560px) {
  .home-ledger-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}
/* Touch targets: on a finger-driven device every control a person taps is at
   least 44px, so the site stays easy to use for children and older visitors.
   Desktop pointer density is untouched. */
@media (pointer: coarse) {
  .public-nav a,
  .public-nav .nav-dropdown-button,
  .public-menu-button,
  .locale-picker-button,
  .notification-nav-button,
  .nav-sign-out,
  .public-source,
  #heroSourcesMount .public-source-hub-link,
  .public-view-toggle button,
  .public-toggle-control,
  .public-sort-control select,
  .public-access-control select,

  .home-popular-authors-heading button,
  .homepage-source-mode button,
  .homepage-source-status button,
  .section-collapse-toggle,
  .saved-search-controls summary,
  .blog-results-bar > button,
  .blog-post-actions button,
  .blog-comment-form > footer button,
  .blog-hero-actions button,
  .blog-editor-view-switch button,
  .blog-confirm-panel > footer button,
  .account-popover-actions a,
  .account-popover-actions button,
  .account-menu-link,
  .commission-thread-actions button,
  .commission-thread-actions a {
    min-height: 44px;
  }

  .public-source,
  #heroSourcesMount .public-source-hub-link,
  .icon-control,
  .section-collapse-toggle,
  .home-popular-authors-heading button {
    min-width: 44px;
  }

  .public-toggle-control input,
  .collection-visibility-toggle input {
    min-width: 22px;
    min-height: 22px;
  }
}

/* Menu group labels: a quiet mono heading that separates "Browse" from
   "Search tools" inside a menu, so a menu reads as a small map rather than an
   undifferentiated list. */
.nav-menu-popover .nav-menu-label {
  display: block;
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
  pointer-events: none;
}

.nav-menu-popover .nav-menu-label:not(:first-child) {
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
}


/* Legacy hero classes fold into the shared .page-head index masthead so every
   page carries one head: a left lead column and a right ledger, on the body
   grid. These selectors are additive overrides; the base primitive above is
   unchanged. */
.page-head.api-docs-hero, .page-head.blog-hero, .page-head.commissions-hero,
.page-head.contact-hero, .page-head.donate-hero, .page-head.profile-hero,
.page-head.status-hero, .page-head.updates-hero {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  padding-block: clamp(1.6rem, 3.6vw, 2.75rem) 1.75rem;
}
.page-head.api-docs-hero { max-width: min(1760px, 100%); }
.page-head.blog-hero { max-width: min(1180px, 100%); }
.page-head.commissions-hero { max-width: var(--public-page-max); }
.page-head.contact-hero { max-width: min(1180px, 100%); }
.page-head.donate-hero { max-width: min(1240px, 100%); }
.page-head.profile-hero { max-width: min(1120px, 100%); }
.page-head.status-hero { max-width: min(1460px, 100%); }
.page-head.updates-hero { max-width: min(1240px, 100%); }
/* .page-head sits inside an already-guttered shell on every converted page,
   so it must not inset a second time. */
.commissions-shell > .page-head, .status-shell > .page-head, .blog-shell > .page-head,
.contact-shell > .page-head, .api-docs-shell > .page-head, .updates-shell > .page-head,
.profile-shell > .page-head, .donate-shell > .page-head, .public-shell > .page-head,
.handoff-shell > .page-head { padding-inline: 0; }
/* Keep the primitive in control of lead typography and ledger notes even after
   the legacy per-page rules above. */
.page-head .page-head-lead > h1 { max-width: 24ch; margin: .5rem 0 1rem; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; }
.page-head .page-head-lead > p:not(.eyebrow) { max-width: 62ch; margin: 0 0 1.25rem; color: var(--muted); font-size: var(--text-md); line-height: 1.6; }
.page-head .page-head-aside .page-head-note { margin: 0; padding: var(--space-4) 0 0; max-width: none; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }

/* The support page keeps its own lead and promise emphasis, and its choice
   panel is a card, so the aside drops the ledger hairline. */
.page-head .support-story p.support-lead { max-width: 560px; }
.page-head .support-story p.support-promise { max-width: 560px; color: var(--text); font-size: 15px; }
.page-head-aside:has(> .support-choice) { border-top: 0; }

/* ----------------------------------------------------------------------------
   Search filter helper: a discoverable list of the filter syntax the search
   engine already understands, with click-to-insert. Part of the all-ages pass:
   the syntax existed but nothing told a person it was there.
   ---------------------------------------------------------------------------- */
/* Icon-only round controls inside the pill search bar. Saved, Search options and
   Random all share the same 44px circle so the bar reads as one row of actions
   instead of mixed shapes. */
/* The shared `button > i` and `.button-icon` rules add a trailing margin for
   icons that sit beside a label. These controls are icon-only, so that margin
   pushed the glyph off-centre; reset it for the round search-bar buttons. */
.search-filter-toggle > i,
.saved-search-controls summary > i,
.public-search-box #publicRandom > i {
  margin: 0;
  min-width: 0;
  width: auto;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-filter-toggle,
.saved-search-controls summary,
.public-search-box #publicRandom {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.saved-search-controls summary::-webkit-details-marker { display: none; }
.search-filter-toggle:hover,
.saved-search-controls summary:hover,
.saved-search-controls details[open] summary,
.public-search-box #publicRandom:hover,
.search-filter-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.public-search-box #publicRandom .button-icon { margin: 0; }
.public-search-box { position: relative; }
.search-filter-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: min(520px, calc(100vw - 28px));
  max-height: min(60vh, 520px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: var(--panel);
  box-shadow: var(--shadow-overlay);
  text-align: left;
}
.search-filter-intro {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.search-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.search-filter-list li {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.search-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.search-filter-chip code {
  font-family: var(--font-mono);
  color: var(--accent);
}
.search-filter-chip:hover,
.search-filter-chip:focus-visible {
  border-color: var(--accent);
}
.search-filter-list small {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}
@media (max-width: 560px) {
  .search-filter-list li { grid-template-columns: 1fr; gap: 4px; }
  .search-filter-toggle span { display: none; }
}

/* ---------------------------------------------------------------------------
   Homepage source carousel (additive block)
   Replaces the stacked per-source grids with one horizontally scrolling track
   of models drawn from every indexed source, plus a trailing "See all results"
   card. Arrows scroll roughly one viewport; the track is natively swipeable.
   --------------------------------------------------------------------------- */
.source-carousel {
  --source: var(--accent);
  display: grid;
  /* One explicit, bounded column. Without this the implicit auto column sizes to
     the card track's content, so the track grows to thousands of pixels and gets
     clipped by an ancestor instead of scrolling inside the lane. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
  max-width: 100%;
  contain: layout style;
}

.source-carousel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent), transparent 55%);
  padding-bottom: 10px;
}

.source-carousel > header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
  flex-wrap: wrap;
}

.source-carousel h3 {
  margin: 0;
  /* The lane heading takes the source's own colour (the icon/name already do),
     falling back to the brand accent only if a lane has no --source set. */
  color: var(--source, var(--accent));
  font-size: 22px;
}

.source-carousel > header span {
  color: var(--muted);
  font-weight: 800;
  font-size: var(--text-sm);
}

.carousel-arrow {
  box-sizing: border-box;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: var(--panel);
  color: var(--accent);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.carousel-arrow:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--accent), transparent 35%);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  outline: none;
}

.carousel-arrow[disabled] {
  opacity: .4;
  cursor: default;
  border-color: var(--line);
  background: var(--panel);
}

.carousel-arrow i {
  pointer-events: none;
  margin: 0;
  line-height: 1;
}

.carousel-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  padding: 2px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.carousel-track:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent), transparent 30%);
  outline-offset: 3px;
}

.carousel-track > .public-card,
.carousel-track > .for-you-card,
.carousel-track > .public-see-more {
  flex: 0 0 clamp(200px, 60vw, 248px);
  width: clamp(200px, 60vw, 248px);
  scroll-snap-align: start;
}

/* Cards sit in a horizontal track, so vertical-only panning would block a
   swipe. Allow both axes and keep a fixed body height so every card matches. */
.carousel-track .public-card { touch-action: pan-x pan-y; }
.carousel-track .public-card-body {
  flex: 0 0 300px;
  height: 300px;
  min-height: 300px;
}

.carousel-track .public-see-more {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--accent), transparent 35%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent), transparent 93%);
  color: var(--accent);
  text-align: center;
  text-decoration: none;
  padding: 20px 16px;
}

.carousel-track .public-see-more i { font-size: 22px; }
.carousel-track .public-see-more strong { display: block; }
.carousel-track .public-see-more span { display: block; color: var(--muted); }

@media (max-width: 760px) {
  .source-carousel > header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }
  .source-carousel > header .section-header-actions { align-self: flex-end; }
  .carousel-track > .public-card,
  .carousel-track > .public-see-more { flex-basis: clamp(184px, 74vw, 232px); width: clamp(184px, 74vw, 232px); }
}

/* For You rail as a carousel: each item is a card plus its reason/feedback row,
   stacked, sized like the source-track cards. */
.carousel-track > .for-you-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 clamp(200px, 60vw, 248px);
  width: clamp(200px, 60vw, 248px);
  align-self: stretch;
  height: auto;
  scroll-snap-align: start;
}
.carousel-track > .for-you-card .public-card {
  /* Base .public-card sets height:100%, which inside this flex column made it
     consume the full lane height and push the More/Less row past the track's
     overflow-y:hidden clip. Take the remaining space instead. */
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.carousel-track > .for-you-card .public-card-body {
  flex: 1 1 auto;
}
/* Collapsed, the signal box is just the summary row; every card in the rail
   ends up the same size. Expanding drops the controls below, in flow. */
.carousel-track > .for-you-card .for-you-actions {
  margin-top: 0;
  min-height: 0;
  border-radius: 0 0 var(--edge) var(--edge);
}

.carousel-viewport .carousel-track {
  flex: 1 1 auto;
  min-width: 0;
}

.carousel-viewport .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  backdrop-filter: blur(6px);
}

.carousel-viewport .carousel-arrow-prev { left: 4px; }
.carousel-viewport .carousel-arrow-next { right: 4px; }

/* A disabled button already swallows its own click instead of forwarding it to
   whatever is behind it, so `pointer-events: none` only opened a hole: a click
   fell through the 44px arrow onto the model card underneath and opened the
   model instead of scrolling the lane. Keep the faded look, drop the hole. */
.carousel-viewport .carousel-arrow[disabled] {
  opacity: .32;
}

/* Give the track a little breathing room so a card never hides under an arrow
   when the first or last item is snapped to the edge. */
.carousel-viewport .carousel-track { scroll-padding-inline: 52px; padding-inline: 2px; }

/* Collapsed lane keeps its header and controls but hides the track. */
.source-carousel.section-collapsed .carousel-viewport,
.for-you-section.section-collapsed .carousel-viewport {
  display: none;
}

@media (max-width: 600px) {
  .carousel-viewport .carousel-arrow { width: 38px; min-width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------------------
   Fixes pass: front-page spacing, filter popup clipping, card text clipping.
   --------------------------------------------------------------------------- */

/* 1. Source ledger spacing. The freshness rail was a wide centred flexbox
   squeezed into a narrow column, so its three chips wrapped and collided.
   Make it a tidy stacked block with real padding and gaps. */
.search-hero-ledger .source-freshness-rail {
  display: grid;
  gap: 6px;
  justify-content: stretch;
  width: 100%;
}
.search-hero-ledger .source-freshness-label,
.search-hero-ledger .source-freshness-note {
  min-height: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--edge);
  background: transparent;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. Catalog readout strip: give the figures breathing room from the rules.
   The strip spans the padded page (no extra inline gutter) so it lines up with
   the popular-creators section beside it. */
.public-summary {
  margin-bottom: var(--space-7);
}
.public-summary article {
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-4);
}
.public-summary article:first-child { padding-left: var(--space-2); }
.public-summary strong { line-height: 1.1; }
.public-summary span { margin-top: 2px; }

/* 3. Search options popup: stop text clipping through the chips and give the
   rows room. The chip was an inline-flex inside a grid cell that could shrink
   below its content. */
.search-filter-panel { padding: 16px; }
.search-filter-list li {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
}
.search-filter-chip {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 2px;
}
.search-filter-chip code { white-space: nowrap; }
.search-filter-chip span { white-space: normal; }
.search-filter-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 4. Card text clipping. The card body is a fixed height and the title clamp
   was fighting the description clamp. Keep the title in a reserved two-line
   box (never shrink it to a sliver) so a tall description cannot squeeze it
   and every card's description starts at the same y. */
.public-card h2,
.public-card h3 {
  flex: 0 0 auto;
  min-height: var(--public-card-title-height);
  height: var(--public-card-title-height);
  max-height: var(--public-card-title-height);
  font-size: var(--public-card-title-font-size);
  line-height: var(--public-card-title-line-height);
  margin: 10px 0 6px;
  -webkit-line-clamp: var(--public-card-title-lines);
}


/* -------------------------------------------------------------------------
   Features page. One purpose: explain the real capabilities without the
   generated-look tells in DESIGN.md. A left lead column with a right ledger,
   hairline sections, a single ordered sequence for the OrcaSlicer workflow,
   and quiet row lists instead of an equal grid of icon tiles.
   ------------------------------------------------------------------------- */
.features-shell {
  width: min(var(--public-page-max), calc(100% - 2 * var(--public-page-gutter)));
  margin: 0 auto;
  display: grid;
  gap: 0;
  padding-bottom: 40px;
}


.features-shell > .public-footer { margin-top: 56px; }

.features-hero {
  padding-inline: 0;
  margin-bottom: 8px;
}

.features-hero h1 { max-width: 20ch; }

.features-ledger { display: grid; align-content: start; }
.features-ledger .row { margin: 0; }
.features-ledger .page-head-note { border-top: 1px solid var(--line); }

.features-section,
.features-capability,
.features-closing {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.features-section > header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.features-section > header h2,
.features-capability h2,
.features-closing h2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.features-section > header h2 > i,
.features-capability h2 > i,
.features-closing h2 > i {
  color: var(--accent);
  font-size: .82em;
  flex: 0 0 auto;
}

.features-section > header h2 + p,
.features-section > header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
  max-width: 62ch;
}

/* The OrcaSlicer workflow is the one genuine order on the page, so it is the
   one numbered sequence. The figure is a mono annotation, not decoration. */
.features-sequence {
  list-style: none;
  counter-reset: feature-step;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.features-step {
  counter-increment: feature-step;
  display: grid;
  /* The third column was reserved for step metadata the Orca steps do not use,
     which left a wide empty gutter and pushed the body text to the left third.
     Two columns keep the number and the copy, and the text can breathe. */
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.features-step::before {
  content: counter(feature-step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent);
  padding-top: 2px;
}

.features-step-body h3 { margin: 0 0 4px; font-size: 1rem; line-height: 1.3; }
.features-step-body p { margin: 0; color: var(--muted); line-height: 1.5; max-width: 78ch; }

.features-step-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.features-step-meta li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}

.features-step-meta span { color: var(--muted); }
.features-step-meta strong { font-family: var(--font-mono); font-weight: 600; text-align: right; }

.features-limit {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--muted);
  line-height: 1.6;
  font-size: .9rem;
}
.features-limit strong { color: var(--text); }

/* Capability sections pair a prose column with a compact figure ledger, the
   same lead-plus-aside shape used by the page head. */
.features-capability {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.features-capability-body h2 { margin-bottom: 14px; }
.features-capability-body p { margin: 0 0 12px; color: var(--muted); line-height: 1.62; max-width: 66ch; }
.features-capability-body p:last-child { margin-bottom: 0; }

.features-facts { margin: 0; display: grid; border-top: 1px solid var(--line); }
.features-facts .row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.features-facts dt { color: var(--muted); font-size: .82rem; }
.features-facts dd { margin: 0; font-size: .86rem; line-height: 1.45; }

/* The map groups are rows of destinations, not icon-tile cards. */
.features-surfaces { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.features-surface-group { min-width: 0; padding: 18px 20px 18px 0; border-right: 1px solid var(--line); }
.features-surface-group:last-child { border-right: 0; }
.features-surface-group h3 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 12px; font-size: .92rem; }
.features-surface-group h3 > i { color: var(--accent); font-size: .9em; }
.features-surface-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.features-surface-group li { color: var(--muted); line-height: 1.5; font-size: .86rem; }
.features-surface-group strong { color: var(--text); }

.features-closing {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.features-closing h2 { margin: 0 0 14px; }
.features-closing ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 10px; color: var(--muted); line-height: 1.6; max-width: 66ch; }
.features-closing li::marker { color: var(--accent); }

@media (max-width: 1080px) {
  .features-section > header,
  .features-capability,
  .features-closing { grid-template-columns: 1fr; gap: var(--space-6); }
  .features-surfaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-surface-group:nth-child(2n) { border-right: 0; }
  .features-surface-group:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .features-shell { width: calc(100% - 2 * var(--public-page-gutter)); }
  .features-step { grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--space-5); }
  .features-step-meta { grid-column: 2 / -1; margin-top: 12px; }
  .features-surfaces { grid-template-columns: 1fr; }
  .features-surface-group { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .features-surface-group:last-child { border-bottom: 0; }
  .features-facts .row { grid-template-columns: 1fr; gap: 3px; }
}
/* -------------------------------------------------------------------------
   Features page. Compact and benefit-first: a lead head with a live ledger,
   one spotlight panel with a short benefit list, then a quiet two-column map
   of the remaining features. Rows and hairlines, not a grid of equal cards.
   ------------------------------------------------------------------------- */
.features-shell {
  width: min(var(--public-page-max), calc(100% - 2 * var(--public-page-gutter)));
  margin: 0 auto;
  display: grid;
  gap: 0;
  padding-bottom: 40px;
}

.features-shell > .public-footer { margin-top: 52px; }

.features-hero { padding-inline: 0; margin-bottom: 6px; }
.features-hero h1 { max-width: 16ch; }

.features-ledger .row { margin: 0; }
.features-ledger .page-head-note { border-top: 1px solid var(--line); }

/* Spotlight: the headline feature gets one panel, the rest get a quiet list. */
.features-spotlight {
  margin-top: 22px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--panel);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 26px 40px;
  align-items: start;
}
.features-spotlight-head h2 { margin: 8px 0 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; }
.features-spotlight-head > p:not(.features-tag) { margin: 0; color: var(--muted); line-height: 1.6; }
.features-tag {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.features-benefits { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.features-benefits li {
  display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.features-benefits li > i { color: var(--accent); font-size: .95rem; padding-top: 3px; }
.features-benefits strong { display: block; font-size: .92rem; }
.features-benefits div { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.features-benefits div strong { color: var(--text); margin-bottom: 2px; }
.features-note {
  grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .84rem;
}
.features-note::before { content: "\f05a"; font: var(--fa-font-solid); color: var(--accent); margin-right: 8px; }

/* The remaining features: a two-column map of compact rows. */
.features-grid { margin-top: 34px; }
.features-grid-title { margin: 0 0 4px; font-size: 1.15rem; }
.features-grid-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.features-item { min-width: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.features-item > i { color: var(--accent); font-size: .95rem; }
.features-item h3 { margin: 8px 0 5px; font-size: 1rem; line-height: 1.25; }
.features-item p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .88rem; }

.features-straight { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.features-straight h2 { margin: 0 0 10px; font-size: 1.15rem; }
.features-straight ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.features-straight li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.55; font-size: .88rem; }
.features-straight strong { color: var(--text); }

@media (max-width: 900px) {
  .features-spotlight { grid-template-columns: 1fr; gap: 20px; }
  .features-grid-list,
  .features-straight ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .features-shell { width: calc(100% - 2 * var(--public-page-gutter)); }
  .features-spotlight { padding: 18px; }
}
/* -------------------------------------------------------------------------
   Features page. Benefit-first and image-led: a lead head with a live ledger,
   one spotlight panel with a real slicer screenshot and a short benefit list,
   then a compact map of the remaining features with screenshots for the three
   that need one. Rows and hairlines, not an equal grid of icon tiles.
   ------------------------------------------------------------------------- */
.features-shell {
  width: min(var(--public-page-max), calc(100% - 2 * var(--public-page-gutter)));
  margin: 0 auto;
  display: grid;
  gap: 0;
  padding-bottom: 40px;
}

.features-shell > .public-footer { margin-top: 52px; }

.features-hero { padding-inline: 0; margin-bottom: 6px; }
.features-hero h1 { max-width: 16ch; }

.features-ledger .row { margin: 0; }
.features-ledger .page-head-note { border-top: 1px solid var(--line); }

/* Screenshots sit in a hairline frame; cut corners like the rest of the print. */
.features-shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel);
}
.features-shot img { display: block; width: 100%; height: auto; }

/* Spotlight: the headline feature gets one panel, the rest get a quiet list. */
.features-spotlight {
  margin-top: 22px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--panel);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 22px 40px;
  align-items: start;
}
.features-spotlight-head h2 { margin: 8px 0 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; }
.features-spotlight-head > p:not(.features-tag) { margin: 0; color: var(--muted); line-height: 1.6; }
.features-tag {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.features-shot-orca { grid-column: 2; grid-row: 1 / span 2; }

.features-benefits { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); grid-column: 1; }
.features-benefits li {
  display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.features-benefits li > i { color: var(--accent); font-size: .95rem; padding-top: 3px; }
.features-benefits strong { display: block; font-size: .92rem; }
.features-benefits div { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.features-benefits div strong { color: var(--text); margin-bottom: 2px; }
.features-note {
  grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .84rem;
}
.features-note::before { content: "\f05a"; font: var(--fa-font-solid); color: var(--accent); margin-right: 8px; }

/* The remaining features: a two-column map of compact rows, three with shots. */
.features-grid { margin-top: 34px; }
.features-grid-title { margin: 0 0 4px; font-size: 1.15rem; }
.features-grid-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.features-item { min-width: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.features-item > i, .features-item-copy > i { color: var(--accent); font-size: .95rem; }
.features-item h3 { margin: 8px 0 5px; font-size: 1rem; line-height: 1.25; }
.features-item p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .88rem; }
.features-item-media .features-shot { margin-bottom: 14px; }
.features-item-media .features-item-copy > i { display: none; }
.features-item-media h3 { margin-top: 0; }

.features-straight { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.features-straight h2 { margin: 0 0 10px; font-size: 1.15rem; }
.features-straight ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.features-straight li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.55; font-size: .88rem; }
.features-straight strong { color: var(--text); }

@media (max-width: 900px) {
  .features-spotlight { grid-template-columns: 1fr; gap: 18px; }
  .features-shot-orca { grid-column: 1; grid-row: auto; order: -1; }
  .features-benefits { grid-column: 1; }
  .features-grid-list,
  .features-straight ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .features-shell { width: calc(100% - 2 * var(--public-page-gutter)); }
  .features-spotlight { padding: 18px; }
}
/* -------------------------------------------------------------------------
   Features page. Benefit-first and image-led: a lead head with a live ledger,
   one spotlight panel for the OrcaSlicer plugin, then one uniform grid where
   every feature carries a same-size screenshot. Rows and hairlines, not a wall
   of icons or a centered stack.
   ------------------------------------------------------------------------- */
.features-shell {
  width: min(var(--public-page-max), calc(100% - 2 * var(--public-page-gutter)));
  margin: 0 auto;
  display: grid;
  gap: 0;
  padding-bottom: 40px;
}

.features-shell > .public-footer { margin-top: 52px; }

.features-hero { padding-inline: 0; margin-bottom: 6px; }
.features-hero h1 { max-width: 16ch; }

.features-ledger .row { margin: 0; }
.features-ledger .page-head-note { border-top: 1px solid var(--line); }

/* Every screenshot is the same frame and the same ratio, so the grid reads as
   one set and no card can look empty. */
.features-shot {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-3);
  aspect-ratio: 1200 / 760;
}
.features-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Spotlight: the headline feature gets one panel. */
.features-spotlight {
  margin-top: 22px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--panel);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 22px 40px;
  align-items: start;
}
.features-spotlight-head h2 { margin: 8px 0 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; }
.features-spotlight-head > p:not(.features-tag) { margin: 0; color: var(--muted); line-height: 1.6; }
.features-tag {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.features-shot-orca { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; }

.features-benefits { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); grid-column: 1; }
.features-benefits li {
  display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.features-benefits li > i { color: var(--accent); font-size: .95rem; padding-top: 3px; }
.features-benefits strong { display: block; font-size: .92rem; }
.features-benefits div { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.features-benefits div strong { color: var(--text); margin-bottom: 2px; }
.features-note {
  grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .84rem;
}
.features-note::before { content: "\f05a"; font: var(--fa-font-solid); color: var(--accent); margin-right: 8px; }

/* The remaining features: one uniform two-column grid, each with a shot. */
.features-grid { margin-top: 36px; }
.features-grid-title { margin: 0 0 4px; font-size: 1.15rem; }
.features-grid-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.features-item { min-width: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.features-item h3 { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.25; display: flex; align-items: center; gap: var(--space-4); }
.features-item h3 > i { color: var(--accent); font-size: .88em; }
.features-item p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .88rem; }

.features-straight { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.features-straight h2 { margin: 0 0 10px; font-size: 1.15rem; }
.features-straight ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.features-straight li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.55; font-size: .88rem; }
.features-straight strong { color: var(--text); }

@media (max-width: 900px) {
  .features-spotlight { grid-template-columns: 1fr; gap: 18px; }
  .features-shot-orca { grid-column: 1; grid-row: auto; order: -1; }
  .features-benefits { grid-column: 1; }
  .features-grid-list,
  .features-straight ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .features-shell { width: calc(100% - 2 * var(--public-page-gutter)); }
  .features-spotlight { padding: 18px; }
}

/* -------------------------------------------------------------------------
   Topic banner. Shown above the results when a query is understood as a topic
   ("halloween"), it explains the expansion and offers related searches. Hairline
   rows and cut chips, not a hero card.
   ------------------------------------------------------------------------- */
.public-topic-banner {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.public-topic-banner[hidden] { display: none; }
.public-topic-head { display: flex; align-items: flex-start; gap: 12px; }
.public-topic-head > i { color: var(--accent); font-size: 1rem; padding-top: 3px; }
.public-topic-head > div { min-width: 0; flex: 1; }
.public-topic-head strong { display: block; font-size: .95rem; }
.public-topic-head p { margin: 3px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.public-topic-category {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 11px; min-height: 34px;
  border: 1px solid var(--line); border-radius: var(--edge);
  background: transparent; color: var(--text); font: inherit; font-weight: 800; font-size: .82rem;
  cursor: pointer;
}
.public-topic-category:hover { border-color: var(--accent); color: var(--accent); }
.public-topic-terms { display: flex; flex-wrap: wrap; gap: 7px; }
.public-topic-term {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--edge);
  color: var(--text); text-decoration: none; font-size: .8rem; font-weight: 700;
}
.public-topic-term:hover { border-color: var(--accent); color: var(--accent); }
.public-topic-related-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.public-topic-related {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); text-decoration: none; font-weight: 800;
}
.public-topic-related:hover { color: var(--accent); }
.public-topic-related i { color: var(--accent); font-size: .78em; }
@media (max-width: 560px) {
  .public-topic-head { flex-wrap: wrap; }
  .public-topic-category { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   Search suggestions (combobox). Anchored to the search box; one row per
   suggestion with a kind icon, the label, and an optional meta line. Hairlines
   and the single accent, matching the rest of the public chrome.
   ------------------------------------------------------------------------- */
.public-search-box { position: relative; }
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 70;
  padding: 6px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-overlay);
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.search-suggest[hidden] { display: none; }
.search-suggest-list { display: grid; gap: 1px; }
.search-suggest-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-suggest-option > i { color: var(--muted); font-size: .9rem; }
.search-suggest-option[data-kind="topic"] > i { color: var(--accent); }
.search-suggest-option[data-kind="category"] > i { color: var(--accent); }
.search-suggest-option[data-kind="popular"] > i { color: var(--warn); }
.search-suggest-option.active,
.search-suggest-option:hover { background: var(--panel-2); }
.search-suggest-option.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.search-suggest-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.search-suggest-meta { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.search-suggest-option[data-kind="title"] .search-suggest-label { font-weight: 600; }


/* Mobile ambient mesh fix ------------------------------------------------------
   The desktop mesh mask is a radial anchored at `50% 0%`, so the isometric grid
   only paints the top ~40% of the viewport. On phones the fixed header plus the
   announcement banners occupy exactly that band, which left every mobile scroll
   showing a plain dark ground with no mesh at all.
   Re-anchor the mesh as a full-height vertical fade so the geometry reads for the
   whole scroll, and hold the "lite"/reduced-motion opacity high enough to be
   legible on a small screen while still never competing with a result card.
   Desktop is untouched. */
@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  body::before {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, .45) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, .45) 100%);
    opacity: .55;
  }

  body.chrome-scroll-safe::before {
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px), (prefers-reduced-motion: reduce) and (max-width: 1024px) and (pointer: coarse) {
  body::before {
    opacity: .5;
  }
}
/* ============================================================================
   Mobile app-style navigation (bottom tab bar) — additive, mobile only.
   Five persistent tabs; Explore and Account each open their own grouped sheet.
   No backdrop-filter here: a translucent blur on a fixed element is what made
   the bar lag and smear while scrolling on phones.
   ========================================================================== */
.public-mobile-tabbar { display: none; }

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  :root { --mobile-tabbar-height: 60px; }

  .public-mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    /* Lifted by the keyboard height while the search field is focused
       (--mobile-keyboard-offset), so the field and bar stay above the
       on-screen keyboard instead of hiding behind it. Zero the rest of the
       time, so closing the keyboard animates the bar back down. */
    bottom: var(--mobile-keyboard-offset, 0px);
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 2px;
    /* Padding-top leaves room for the raised Search circle to overflow. */
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    background: linear-gradient(180deg, #0e1620, #0a1017);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: bottom .24s cubic-bezier(.22, 1, .36, 1);
  }

  .public-mobile-tabbar[hidden] { display: none; }

  .mobile-tab {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 46px;
    /* Extra room above the icon so the active bar never crowds it. */
    padding: 9px 2px 5px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #7f8d9a;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .16s ease, background .16s ease;
  }

  .mobile-tab .nav-icon {
    font-size: 18px;
    line-height: 1;
  }

  /* The label, not every span: .mobile-tab-avatar is also a span and must keep
     its own circular sizing instead of being stretched full-width. */
  .mobile-tab > span:not(.mobile-tab-avatar) {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
  }

  .mobile-tab.active,
  .mobile-tab[aria-expanded="true"] {
    color: var(--accent-2);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }

  .mobile-tab.active::before,
  .mobile-tab[aria-expanded="true"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 20px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    transform: translateX(-50%);
  }

  /* Reserve the bar's height once, at the bottom of the scrolling content, so
     no page has to be measured or nudged and the bar cannot sit on content. */
  body.has-mobile-tabbar {
    padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .back-to-top {
    bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* The sheet is a bottom-anchored panel sitting just above the tab bar. */
  .public-menu-popover {
    top: auto;
    bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 10px);
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    min-width: 0;
    max-height: min(62dvh, 500px);
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 20px;
    background: #101821;
    background-image:
      radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
      linear-gradient(#121a24, #0d141c);
    box-shadow: 0 -22px 60px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-sheet-section { display: grid; gap: 10px; }
  .mobile-sheet-section[hidden] { display: none; }

  .mobile-sheet-links { display: grid; gap: 8px; }

  .public-menu-popover .mobile-menu-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 2px;
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .public-menu-popover .mobile-menu-label .nav-icon { color: var(--accent); font-size: 13px; }

  .public-menu-popover .mobile-sheet-links a,
  .public-menu-popover .nav-menu-subgroup a {
    min-height: 48px;
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
  }

  .public-menu-popover .mobile-sheet-links a .nav-icon { font-size: 16px; color: var(--accent); }

  .public-menu-popover .nav-menu-subgroup {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .mobile-sheet-footer {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .mobile-sheet-footer a,
  .mobile-sheet-footer .nav-sign-out {
    min-height: 48px;
    width: 100%;
    justify-content: flex-start;
    border-radius: 14px;
  }

  /* The hamburger retires on phones now the tab bar is the navigation. */
  .public-header .public-menu-button { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-tab { transition: none; }
}

/* ============================================================================
   Phone density pass — a smaller, app-like first screen.
   ========================================================================== */
@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  .public-summary,
  .mobile-settled-layout .public-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 10px 0 12px;
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .public-summary article,
  .mobile-settled-layout .public-summary article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: center;
    min-height: 0;
    padding: 11px 6px 12px;
    border-right: 1px solid var(--line);
  }

  .public-summary article:nth-child(3n) { border-right: 0; }
  .public-summary article:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .public-summary article:last-child { border-right: 0; }

  /* The tile is the icon's frame. Center the glyph inside it instead of
     letting a 50px tile inherit the strip's own icon sizing. */
  .public-summary .stat-icon {
    grid-row: auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
  }

  .public-summary strong {
    display: block;
    font-size: 16px;
    line-height: 1.05;
  }

  .public-summary span {
    display: block;
    margin: 0;
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: .03em;
  }

  /* Every stat is compact enough to show at once. */
  .mobile-settled-layout .public-summary article:nth-child(n + 5) {
    display: flex;
  }

  .home-popular-authors { margin-top: 14px; padding: 14px 0 16px; }

  .home-popular-authors-track {
    /* Wide enough for a real username plus its chips before it truncates. */
    grid-auto-columns: minmax(210px, 72vw);
    gap: 10px;
    padding: 6px 0;
  }

  .home-popular-author-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 66px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .home-popular-author-image {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  /* The name gets all the room. The verified tick is a small inline glyph
     that never steals width from the username, so long names show more
     characters before they have to ellipsize. */
  .home-popular-author-name { gap: 3px; min-width: 0; }
  .home-popular-author-name strong {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .95rem;
    letter-spacing: 0;
  }
  .home-popular-author-name i {
    flex: 0 0 auto;
    font-size: .54rem;
    opacity: .9;
  }

  /* The arrow is decorative and sat in its own grid column, costing the name
     horizontal room. Overlay it so the name column can use the whole width. */
  .home-popular-author-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding-right: 26px;
  }
  .home-popular-author-arrow {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  .home-popular-author-body { gap: 4px; }
  .home-popular-author-sources span { max-width: 74px; font-size: .62rem; }
  .home-popular-author-sources .home-popular-author-source-icon img { width: 13px; height: 13px; }
  .home-popular-author-metrics { gap: 8px; font-size: .66rem; }
  .home-popular-author-arrow { font-size: .72rem; }
}

@media (max-width: 420px) {
  .public-summary strong { font-size: 15px; }
  .public-summary span { font-size: 8px; }
  .home-popular-authors-track { grid-auto-columns: minmax(196px, 76vw); }
}

/* ============================================================================
   Homepage toolbar de-bloat.
   ========================================================================== */
.home-page:not(.is-searching):not(.collection-view-mode) .public-toolbar-hint,
.home-page:not(.is-searching):not(.collection-view-mode) .public-toolbar-actions {
  display: none;
}

.home-page:not(.is-searching) .public-toolbar-summary p {
  margin: 0;
}

/* Keep transient bottom overlays clear of the mobile tab bar. */
@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  .analytics-notice {
    bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* ============================================================================
   Model-card quick actions (sitewide): a save-for-later heart and an
   add-to-collection bookmark over the top-right of the card image. Mirrors the
   OrcaSlicer plugin cards. Two round buttons stacked; the heart fills when the
   listing is in the account's Saved set.
   ========================================================================== */

/* Geometry mirrors the plugin's .cardact: 30px round buttons, hairline border,
   near-solid panel ground, inline stroke glyph. */
.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--text);
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.card-action-ico {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.card-action:hover,
.card-action:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.card-action[data-busy="1"] { opacity: .6; cursor: progress; }

.card-action-save.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.card-action-save.on .card-action-ico { fill: currentColor; stroke: currentColor; }

@media (pointer: coarse) {
  .card-action { width: 36px; height: 36px; }
  .card-action-ico { width: 17px; height: 17px; }
}

/* ============================================================================
   Card layout rebalance: the artwork keeps the price badge, the save/bookmark
   actions and (when a search is active) the compare toggle; the feedback flag
   moves out of the image and into the card body footer so the picture stays
   clean and the controls stop stacking in one corner.
   ========================================================================== */

/* The card footer: the "..." overflow menu sits bottom-left, across from the
   download/like/view stats. Compare lives up beside the source name; there is
   no separate actions row any more. */
.public-card .public-card-foot {
  /* The card body is a flex column; the footer owns the single margin-top:auto
     so the stats/license row is pinned to the bottom of every card, whether or
     not the card renders an author line or the feedback menu. */
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: 10px;
}

/* Creator and collection cards render the stat row directly in the body (no
   feedback menu, so no .public-card-foot wrapper). Pin that row to the bottom
   too, and only when it is the body's last child, so the slack collects in one
   place instead of mid-card. */
.public-card-body > .public-card-stats:last-child {
  margin-top: auto;
}

.public-card .search-feedback-menu {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  color: var(--muted);
}

.public-card .search-feedback-menu > [data-search-feedback-menu-toggle] {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  box-shadow: none;
}

.public-card .search-feedback-menu > [data-search-feedback-menu-toggle]:hover,
.public-card .search-feedback-menu > [data-search-feedback-menu-toggle]:focus-visible,
.public-card .search-feedback-menu.open > [data-search-feedback-menu-toggle] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

/* The popover opens upward from the footer so it stays inside the card. */
.public-card .search-feedback-popover {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(268px, calc(100vw - 40px));
  max-height: 260px;
}

/* ============================================================================
   Card controls, final placement (matches the OrcaSlicer plugin):
   - Save-for-later heart + add-to-collection bookmark stack in the TOP-LEFT
     of the image, exactly like the plugin's card corner.
   - Compare and feedback live in the card footer row, not over the artwork.
   ========================================================================== */

.card-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 6;
  display: grid;
  gap: 8px;
}

/* The feedback menu was an image overlay; as a footer control it becomes a
   quiet pill next to compare. */
.public-card .public-card-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Compare sits in the card meta row, across from the source name: a small
   ghost pill that reads at a glance without a heavy filled tile. */
.public-card .public-card-meta .search-compare-button {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  height: auto;
  min-height: 26px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
  box-shadow: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

.public-card .public-card-meta .search-compare-button .search-compare-label { line-height: 1; }

.public-card .public-card-actions-row .search-compare-button:hover,
.public-card .public-card-actions-row .search-compare-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line));
  color: var(--accent-2);
  box-shadow: none;
}

.public-card .public-card-actions-row .search-compare-button.active {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.public-card .search-feedback-menu {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  color: var(--muted);
}

.public-card .search-feedback-menu > [data-search-feedback-menu-toggle] {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  box-shadow: none;
}

.public-card .search-feedback-menu > [data-search-feedback-menu-toggle]:hover,
.public-card .search-feedback-menu > [data-search-feedback-menu-toggle]:focus-visible,
.public-card .search-feedback-menu.open > [data-search-feedback-menu-toggle] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

/* The popover opens upward from the footer so it stays inside the card. */
.public-card .search-feedback-popover {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(268px, calc(100vw - 40px));
  max-height: 260px;
}

/* Creator picture beside the author name on a model card. A blank placeholder
   holds the same footprint when the creator has no picture, so rows line up. */
.public-card-author .public-card-author-avatar,
.public-card-author-link .public-card-author-avatar {
  flex: 0 0 auto;
  /* A fixed box with hard min/max pins: it never inflates from an ancestor
     rule, and the picture and the placeholder are always the same size. */
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  object-fit: cover;
  display: block;
}

.public-card-author .public-card-author-avatar.is-empty,
.public-card-author-link .public-card-author-avatar.is-empty {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  /* The glyph is sized on the icon, never the box, so the box stays 18px. */
  font-size: 10px;
  line-height: 1;
}

.public-card-author .public-card-author-avatar.is-empty .fa-user,
.public-card-author-link .public-card-author-avatar.is-empty .fa-user {
  font-size: 9px;
}

.public-card-author-link {
  overflow: hidden;
}

.public-card-author-link > span,
.public-card-author > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `<span>` author rows (no profile link) need the same flex shape as links. */
.public-card-author > span:not(.public-card-author-avatar) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.public-card-author > span:not(.public-card-author-avatar),
.public-card-author > .public-card-author-avatar {
  vertical-align: middle;
}

.public-card-author {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* The center tab is the primary action: a larger raised circle that reads as
   the app's Search button. It links to the search home for now. */
.public-mobile-tabbar .mobile-tab-search {
  align-self: center;
  justify-self: center;
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin-top: -22px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 92%, #0b1117), color-mix(in srgb, var(--accent) 62%, #0b1117));
  color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 42%, transparent), 0 2px 0 rgba(255, 255, 255, .06) inset;
  grid-template-rows: auto;
}

.public-mobile-tabbar .mobile-tab-search .mobile-tab-search-mark {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.public-mobile-tabbar .mobile-tab-search:hover,
.public-mobile-tabbar .mobile-tab-search:focus-visible {
  color: #fff;
  border-color: var(--accent-2);
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 100%, #0b1117), color-mix(in srgb, var(--accent) 70%, #0b1117));
}

/* The circle carries no underline bar (it is not a section toggle). */
.public-mobile-tabbar .mobile-tab-search::before { display: none; }

/* The Account tab shows the member's avatar (or an initial) when signed in. */
.mobile-tab-avatar {
  display: inline-grid;
  place-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  max-width: 20px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}
.mobile-tab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mobile-tab-avatar .mobile-tab-avatar-initial { font-size: 11px; font-weight: 900; line-height: 1; }
.mobile-tab-avatar .nav-icon { font-size: 18px; }

/* Notifications inside the Account sheet reads as a link row, not a bare button. */
.public-menu-popover .mobile-sheet-links .mobile-sheet-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.public-menu-popover .mobile-sheet-links .mobile-sheet-button .nav-icon { color: var(--accent); font-size: 16px; }
.public-menu-popover .mobile-sheet-links .mobile-sheet-button:hover { border-color: var(--accent); }

/* ============================================================================
   Header utilities cluster (top-right): inbox, watches, notifications.
   These carry important updates, so they live in the header itself on every
   viewport and stay out of the account menu.
   ========================================================================== */
.header-utilities {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The primary nav and the utilities share the header's right edge: the nav's
   auto margin pushes the pair across, and the utilities sit just after it.
   margin-top is zeroed because a bare `nav { margin-top: 20px }` rule
   (meant for the legacy sidebar) leaked in and dropped the row 10px below
   the utilities, so the two halves never lined up. */
.public-header > .public-nav { margin: 0 0 0 auto; }
.public-header > .header-utilities { margin-left: var(--space-2); }

/* Below the desktop nav breakpoint the nav is replaced by the menu button, so
   the utilities take over the auto margin and stay pinned right. */
@media (max-width: 1240px) {
  .public-header > .header-utilities { margin-left: auto; }
}

/* Desktop shows sign-in in the nav row, so the header chip is mobile-only. */
.header-sign-in { display: none; }

.header-utilities[hidden] { display: none; }

.header-utility {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  /* Transparent like the nav buttons beside them, so the whole right cluster
     reads as one row instead of two filled tiles among flat ones. */
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.header-utility:hover,
.header-utility:focus-visible,
.header-utility[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.header-utility[hidden] { display: none; }

/* The utility glyphs are Font Awesome <i> inside a grid button. A global
   "button > i / a > i" rule adds a 7px right margin (meant for label+icon
   pairs) which shoves the glyph 3.5px left. Zero it here so the icon is
   optically centred in its square. */
.header-utility > i {
  margin: 0;
}

/* The animation toggle lives in the hero ledger on desktop. The ledger is
   hidden below 1100px, so the header utility button carries it there instead.
   Declared after .header-utility so its display wins. */
.effects-toggle-button { display: none; }
@media (max-width: 1100px) {
  .effects-toggle-button { display: inline-grid; }
}
.effects-toggle-button.effects-on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

.header-utility .notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0f13;
  font-size: 10px;
  font-weight: 900;
  /* A line-height equal to the height plus blocks on it pins the digit dead
     centre; the inherited baseline otherwise sat it a touch low. */
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* MeshScout nav entry (desktop dropdown + mobile tab): the brand mark leads. */
.nav-mark {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.mobile-tab .mobile-tab-mark {
  width: 19px;
  height: 19px;
  object-fit: contain;
  opacity: .72;
}

.mobile-tab.active .mobile-tab-mark,
.mobile-tab[aria-expanded="true"] .mobile-tab-mark {
  opacity: 1;
}

.mobile-menu-label .mobile-menu-mark {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  /* The header utilities ride in the fixed header, right-aligned, above the
     tab bar; the bottom bar keeps the primary destinations only. */
  .header-utilities {
    gap: 6px;
    margin-left: 0;
  }

  /* Signed out, the header carries a sign-in control (the nav row is hidden). */
  .header-sign-in {
    display: inline-grid !important;
  }

  .header-utility {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 14px;
  }
}

@media (pointer: coarse) {
  .header-utility { min-width: 40px; min-height: 40px; }
}

/* ============================================================================
   Docked/hamburger menu: the full two-column menu opened by the header menu
   button (<=1240px, where the desktop nav row is hidden). Browse on the left,
   account on the right, so nothing is missing and it reads as one panel.
   ========================================================================== */





/* The link list is a grid at every width (the mobile rule that sets this lives
   inside a media query, so it did not apply in the docked menu here). */
.public-menu-popover .mobile-sheet-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.public-menu-popover.menu-two-column .mobile-sheet-links > a,
.public-menu-popover.menu-two-column .mobile-sheet-links > button {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.public-menu-popover.menu-two-column .mobile-sheet-links > a > span { overflow: hidden; text-overflow: ellipsis; }

/* The hamburger exists from 761px to 1240px: that is where the menu shows every
   section at once in two columns. Phones keep the bottom-bar sheets. */
@media (min-width: 761px) and (max-width: 1240px) {
  .public-menu-popover.menu-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    width: min(640px, calc(100vw - 32px));
    min-width: min(640px, calc(100vw - 32px));
    align-items: start;
  }
  .public-menu-popover.menu-two-column .mobile-sheet-section { display: grid; gap: 8px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .public-menu-popover.menu-two-column {
    grid-template-columns: minmax(0, 1fr);
    width: min(420px, calc(100vw - 32px));
    min-width: min(420px, calc(100vw - 32px));
  }
}

/* ============================================================================
   Phone search: the centre tab expands into the field.
   Tapping the raised circle slides it left and grows a real search input to
   the right, covering the tab bar. It focuses immediately (opening the
   keyboard), closes on the X, on Escape, or on a tap outside, and animates
   both ways. The cramped docked header field is retired on phones.
   ========================================================================== */
.mobile-search-panel { display: none; }

@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  /* The tab bar is the search surface on a phone; the pinned header field is
     gone so nothing is squeezed into the top bar. */
  .search-docked .public-nav-search { display: none; }

  .public-mobile-tabbar .mobile-search-panel {
    /* Absolute inside the bar so it can slide out of the centre circle. */
    position: absolute;
    top: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    left: 4px;
    right: 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 0 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
    border-radius: 999px;
    background: linear-gradient(180deg, #121b25, #0c141c);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
    /* Closed: parked back at the circle and squeezed to its width. Only the
       x axis is scaled, so the glyphs never stretch; padding keeps the
       contents inside instead of collapsing to a smear. */
    --search-compact-x: min(0px, calc(var(--search-origin-x, 50%) - 26px));
    --search-grow: .12;
    transform-origin: var(--search-origin-x, 50%) 50%;
    transform: translateX(var(--search-compact-x)) scaleX(var(--search-grow));
    opacity: 0;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
  }

  .public-mobile-tabbar .mobile-search-panel.is-open {
    --search-grow: 1;
    transform: translateX(0) scaleX(1);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-search-panel-icon {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--accent) 80%, var(--text));
    font-size: 15px;
  }

  .mobile-search-panel input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    /* 16px stops iOS from zooming the viewport on focus. */
    font-size: 16px;
    outline: none;
  }

  .mobile-search-panel input::placeholder { color: var(--muted); }
  .mobile-search-panel input::-webkit-search-cancel-button { display: none; }

  .mobile-search-panel-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
  }

  /* The shared `button > i` / `.button-icon` rules add a trailing margin and a
     1.1em floor for icons that sit beside a label. The X is alone in its
     circle, so both pushed the glyph off-centre. Force a single centred flex
     cell that matches the glyph box. */
  .mobile-search-panel-close > i {
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .mobile-search-panel-close:hover,
  .mobile-search-panel-close:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
  }

  /* While the field is open the tabs are inert underneath it. */
  /* The tab row fades out as the field appears and fades back in when it
     closes. The circle is the origin of the field, so it fades over the same
     beat rather than snapping away. */
  .public-mobile-tabbar .mobile-tab {
    transition: opacity .2s ease, color .16s ease, background .16s ease;
  }

  body.mobile-search-open .public-mobile-tabbar .mobile-tab {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-mobile-tabbar .mobile-search-panel { transition: none; }
  .public-mobile-tabbar { transition: none; }
  body.mobile-search-open .public-mobile-tabbar .mobile-tab { transition: none; }
}

/* ============================================================================
   Phone density: cards and lane controls.
   The card body carried a fixed 300px so a lane's cards would line up, which
   on a phone left a large dead gap under the stats. Let the body size to its
   content and keep the floor as a min-height; the author row still pins to
   the bottom, so cards in a lane stay equal without the empty space.
   ========================================================================== */
@media (max-width: 760px), (max-width: 1024px) and (pointer: coarse) {
  /* Two cards per lane read at a glance; three-plus needed a scroll to see
     even one whole card. 44vw shows more of the next card than before. */
  .carousel-track > .public-card,
  .carousel-track > .public-see-more {
    flex-basis: clamp(148px, 44vw, 190px);
    width: clamp(148px, 44vw, 190px);
  }

  .carousel-track > .for-you-card {
    flex-basis: clamp(156px, 47vw, 200px);
    width: clamp(156px, 47vw, 200px);
  }

  /* The image was 4/3 of a ~230px card. A shallower ratio keeps the card
     from towering once the width drops. */
  .carousel-track .public-card-image {
    aspect-ratio: 1 / 1;
  }

  .carousel-track .public-card-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 10px;
  }

  /* A tighter clamp keeps the description from dominating the card while
     still leaving the same breathing room on every card in the lane. The
     title keeps a reserved two-line box (and stays larger than the
     description) so descriptions begin at the same y within the lane. */
  .carousel-track .public-card-body {
    --public-card-title-font-size: 15px;
    --public-card-title-line-height: 1.22;
    --public-card-description-lines: 2;
    --public-card-description-font-size: 13px;
    --public-card-description-line-height: 1.4;
  }

  .carousel-track .public-card h2,
  .carousel-track .public-card h3 {
    min-height: var(--public-card-title-height);
    height: var(--public-card-title-height);
    max-height: var(--public-card-title-height);
    margin: 8px 0 6px;
    font-size: var(--public-card-title-font-size);
    line-height: var(--public-card-title-line-height);
    -webkit-line-clamp: var(--public-card-title-lines);
  }

  .carousel-track .public-card p,
  .carousel-track .public-card-description { margin-bottom: 10px; }

  .carousel-track .public-card-author {
    margin-bottom: 6px;
    min-height: 16px;
    font-size: 12px;
  }

  .carousel-track .public-card-stats { font-size: 11px; }

  /* The lane header stacks on a phone: title, then a row of lane controls.
     The controls were 38px squares, so the row ate a lot of height for three
     small actions. Shrink them and tighten the stack. */
  .source-carousel > header {
    gap: 8px;
    padding-bottom: 8px;
    /* This range also covers a coarse pointer up to 1024px wide (an iPad is
       768px), where the phone-only stacking rule above does not apply. The
       actions row below is full-width in this range, so the header has to
       stack too: left as a row, a 100%-wide actions box took the whole line
       and squeezed the lane title to zero width, wrapping it one word per
       line on tablets. */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .source-carousel > header > div:first-child {
    gap: 8px;
    align-items: center;
  }

  .source-carousel h3 { font-size: 18px; }
  .source-carousel > header span { font-size: 12px; }

  .source-carousel > header .section-header-actions {
    gap: 6px;
    flex: 0 0 auto;
    align-self: flex-start;
  }

  .source-carousel > header .section-header-actions .lane-icon-control,
  .source-carousel > header .section-header-actions .section-collapse-toggle,
  .source-carousel > header .section-header-actions .lane-see-more-link {
    box-sizing: border-box !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 12px;
  }

  /* See all is the one control that needs its label; keep it a pill. */
  .source-carousel > header .section-header-actions .lane-see-more-link {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
}

/* Creator-page skeleton: mirrors the search/homepage skeleton so a profile has
   a visible shape while it loads instead of a bare spinner. */
.author-profile-skeleton {
  display: grid;
  gap: 18px;
}

/* Server-rendered category/source landing content (SEO Workstream 4). Shown in
   the first HTML response and kept as a no-JS fallback; the interactive search
   replaces it once the visitor runs a query. */
.meshscout-landing {
  display: grid;
  gap: 16px;
  padding: 18px 0 8px;
}

.meshscout-landing-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted, #9aa7b4);
}

.meshscout-landing-breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: 0.5;
}

.meshscout-landing-count {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted, #9aa7b4);
}

.meshscout-landing-models-block h2,
.meshscout-landing-related h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.meshscout-landing-models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meshscout-landing-model a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.meshscout-landing-model a:hover,
.meshscout-landing-model a:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
}

.meshscout-landing-model img,
.meshscout-landing-model-fallback {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  place-items: center;
}

.meshscout-landing-model-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.meshscout-landing-model-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.meshscout-landing-model-body small {
  color: var(--muted, #9aa7b4);
}

.meshscout-landing-actions {
  display: grid;
  gap: 8px;
  align-items: start;
}

.meshscout-landing-cta {
  justify-self: start;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent, #2f80ed);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.meshscout-landing-filters {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted, #9aa7b4);
}

.meshscout-landing-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meshscout-landing-related a {
  display: inline-flex;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
}

.meshscout-landing-source-notes {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.meshscout-landing-source-notes p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted, #9aa7b4);
}
.author-profile-skeleton-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.author-profile-skeleton-avatar {
  width: 84px;
  height: 84px;
  min-width: 84px;
  border-radius: 999px;
}
.author-profile-skeleton-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
}
.author-profile-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* -------------------------------------------------------------------------
   OrcaSlicer plugin landing page. Reuses the Features page chrome; these are
   only the pieces that page does not already have: a breadcrumb trail, the
   packaged-version line, and the CTA action row.
   ------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
}
.breadcrumbs a {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs i { font-size: .6rem; opacity: .6; }
.breadcrumbs > span:last-child { color: var(--text); }

.orca-plugin-version-line {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 16px;
}
.orca-plugin-version-line strong { color: var(--text); }

.orca-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }

/* -------------------------------------------------------------------------
   Topic landing pages (/topic/:slug). The block is injected into the initial
   HTML, so it carries its own layout rather than relying on the JS search grid.
   ------------------------------------------------------------------------- */
.topic-landing {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 8px;
}
.topic-landing-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
}
.topic-landing-breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: .5;
}
.topic-landing-breadcrumbs a { color: var(--muted); text-decoration: none; }
.topic-landing-breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.topic-landing-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.topic-landing h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.topic-landing-intro { max-width: 70ch; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.topic-landing-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.topic-landing-terms a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
}
.topic-landing-models-block h2,
.topic-landing-related h2 { font-size: 1.15rem; margin: 0 0 12px; }
.topic-landing-terms a:hover { border-color: var(--accent); color: var(--accent); }
.topic-landing-models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.topic-landing-model a {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  height: 100%;
}
.topic-landing-model img,
.topic-landing-model-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--panel-2, rgba(255, 255, 255, .04));
  color: var(--muted);
}
.topic-landing-model a:hover { border-color: var(--accent); }
.topic-landing-model-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  padding: 10px 12px 12px;
}
.topic-landing-model-source {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.topic-landing-model-body strong,
.topic-landing-model-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-landing-model-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-landing-model-author.is-unknown { opacity: .7; }
.topic-landing-model-author i { font-size: .7rem; }
/* The creator picture on a landing card. Same fixed 18px circle as the model
   cards so a creator looks identical on every surface. */
.topic-landing-model-author-avatar {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  object-fit: cover;
}
.topic-landing-model-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .72rem;
  color: var(--muted);
}
.topic-landing-model-license {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.topic-landing-model-license.is-missing { opacity: .7; font-style: italic; }
.topic-landing-model-stats { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topic-landing-model-stats span { display: inline-flex; align-items: center; gap: 3px; }
.topic-landing-thin,
.topic-landing-empty { color: var(--muted); font-size: .88rem; margin: 0 0 18px; }
.topic-landing-related { margin: 0 0 18px; }
.topic-landing-related ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.topic-landing-related a { color: var(--accent); text-decoration: none; font-size: .88rem; }
.topic-landing-related a:hover { text-decoration: underline; }
.topic-landing-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 8px; }
.topic-landing-cta-note { color: var(--muted); font-size: .86rem; }
.topic-landing-cta-note a { color: var(--accent); }
.topic-landing-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--accent);
  color: #05121a;
  font-weight: 600;
  text-decoration: none;
}
.topic-landing-cta:hover { filter: brightness(1.08); }

/* ---- live notification toast ---------------------------------------------- */
/* A message that arrives while the reader is on the page. The bell is the durable
   record, so this only has to catch the eye and disappear again; it is anchored to
   the corner opposite the header utilities so it never covers the bell it is
   telling you about. */
.notification-toast-host {
  position: fixed;
  z-index: 1700;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.notification-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(178, 116, 210, 0.5);
  border-radius: var(--radius-md);
  background: #0c141b;
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  animation: notification-toast-in 0.22s ease-out;
}

.notification-toast i { color: var(--accent); flex: none; }
.notification-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@keyframes notification-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .notification-toast { animation: none; }
}

@media (max-width: 860px) {
  /* Sit above the bottom tab bar rather than behind it. */
  .notification-toast-host { bottom: 84px; left: 14px; right: 14px; max-width: none; }
}