/* BrainTrellis design system — dense dark "engineering notebook" (mindchuk-grade, refined).
   Hairline cards, monospace metadata, a clean grotesk for prose, one accent, full-bleed dense
   feed. Every surface references --bt-* RGB-channel theme vars (set inline per active theme,
   §6.1), so a theme switch (including imported VSCode themes) re-skins everything. */

/* ---- Vendored type (self-hosted; CSP font-src 'self') ------------------- */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/hanken-400.78c2be80e151.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/hanken-500.8d6eb9d4c9c2.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/hanken-700.f3223a1e6b4c.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/jbmono-400.caf0dfde4e44.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/jbmono-500.a21e038a03f7.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/plexsans-400.77bc02670657.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/plexsans-500.f7016cd446d2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/plexsans-600.196e3cbc5fee.woff2") format("woff2"); }

:root {
  --bt-font: var(--bt-font-family, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif);
  --bt-mono: var(--bt-font-mono, "JetBrains Mono", ui-monospace, monospace);
  --bt-radius: var(--bt-card-radius, 0.55rem);
  --bt-r-sm: 0.4rem;
  /* Hairline but visible — like the reference. */
  --bt-line: rgb(var(--bt-border) / 0.8);
  --bt-line-strong: rgb(var(--bt-border) / 1);
  /* Pinned-card accent (warm gold), as RGB channels like every other token. */
  --bt-pin: 235 178 72;
}

* { box-sizing: border-box; }
/* compact base, scaled by the --bt-zoom percent (font-size slider) — rem-based UI scales whole */
html { color-scheme: dark; font-size: calc(18px * var(--bt-zoom, 100) / 100); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--bt-font);
  font-size: 0.92rem;
  line-height: 1.46;
  background: rgb(var(--bt-bg) / 1);
  color: rgb(var(--bt-text) / 1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Atmosphere: soft accent glow + faint dot grid behind everything (CSS-only). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56rem 38rem at 84% -14%, rgb(var(--bt-accent) / 0.06), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(rgb(var(--bt-text) / 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

a { color: rgb(var(--bt-accent) / 1); text-decoration: none; }
a:hover { color: rgb(var(--bt-accent) / 0.82); }
::selection { background: rgb(var(--bt-accent) / 0.28); }
:focus-visible { outline: 2px solid rgb(var(--bt-accent) / 0.7); outline-offset: 2px; border-radius: 4px; }

/* ---- Header ------------------------------------------------------------- */
.bt-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  background: rgb(var(--bt-bg) / 0.72);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--bt-line);
}
.bt-wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--bt-mono); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em;
  color: rgb(var(--bt-text) / 1);
}
.bt-wordmark::before {
  content: ""; width: 0.85rem; height: 0.85rem; border-radius: 3px;
  background: linear-gradient(135deg, rgb(var(--bt-accent) / 1), rgb(var(--bt-palette-6, 45 212 191) / 1));
  box-shadow: 0 0 16px rgb(var(--bt-accent) / 0.5);
}
.bt-nav { display: flex; gap: 0.5rem; align-items: center; font-size: 0.88rem; }
.bt-nav > a { padding: 0.32rem 0.6rem; border-radius: var(--bt-r-sm); color: rgb(var(--bt-text-muted) / 1); }
.bt-nav > a:hover { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1); }

/* ---- Buttons ------------------------------------------------------------ */
.bt-cta, .bt-cta-lg {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font: 500 0.88rem/1 var(--bt-font);
  background: rgb(var(--bt-accent) / 1); color: rgb(var(--bt-bg) / 1);
  border: 0; padding: 0.55rem 0.95rem; border-radius: var(--bt-r-sm);
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.bt-cta:hover, .bt-cta-lg:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgb(var(--bt-accent) / 0.28); }
.bt-cta:active, .bt-cta-lg:active { transform: translateY(1px); }
.bt-cta-lg { font-size: 1.02rem; padding: 0.75rem 1.4rem; border-radius: 0.6rem; }
.bt-danger { background: rgb(var(--bt-danger) / 1); }

/* ---- Account dropdown --------------------------------------------------- */
.bt-account { position: relative; }
.bt-account > summary { cursor: pointer; list-style: none; padding: 0.32rem 0.7rem;
  border: 1px solid var(--bt-line); border-radius: 999px; font-size: 0.84rem; color: rgb(var(--bt-text) / 1); }
.bt-account > summary::-webkit-details-marker { display: none; }
.bt-account[open] > summary { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-menu {
  position: absolute; right: 0; margin-top: 0.5rem; min-width: 13rem; z-index: 50;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.7rem; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}
.bt-menu a, .bt-menu button {
  padding: 0.5rem 0.65rem; border-radius: var(--bt-r-sm); text-align: left; font: inherit;
  background: none; border: 0; color: rgb(var(--bt-text) / 1); cursor: pointer;
}
.bt-menu a:hover, .bt-menu button:hover { background: rgb(var(--bt-bg) / 1); }

/* ---- Layout: wide + dense ---------------------------------------------- */
.bt-main { flex: 1 0 auto; width: 100%; max-width: 100rem; margin: 0 auto; padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem) 5rem; }
.bt-messages { list-style: none; padding: 0; margin: 0.75rem auto; max-width: 100rem; }
.bt-msg { padding: 0.6rem 0.9rem; border-radius: var(--bt-r-sm); margin-bottom: 0.4rem;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line); font-size: 0.9rem; }
.bt-msg.error { border-color: rgb(var(--bt-danger) / 0.5); color: rgb(var(--bt-danger) / 1); }

/* ---- Search + toolbar --------------------------------------------------- */
.bt-search-row { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; }
.bt-search {
  flex: 1; padding: 0.8rem 1rem 0.8rem 2.6rem; font: 400 0.98rem var(--bt-font); color: rgb(var(--bt-text) / 1);
  background: rgb(var(--bt-surface) / 0.7)
    no-repeat 0.95rem center / 1rem
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23889" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>');
  border: 1px solid var(--bt-line); border-radius: 0.6rem; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bt-search::placeholder { color: rgb(var(--bt-text-muted) / 0.8); }
.bt-search:focus { outline: none; border-color: rgb(var(--bt-accent) / 0.7); background-color: rgb(var(--bt-surface) / 1); }
.bt-add { width: 3rem; flex: none; font-size: 1.3rem; cursor: pointer; color: rgb(var(--bt-bg) / 1);
  background: rgb(var(--bt-accent) / 1); border: 0; border-radius: 0.6rem; transition: filter 0.15s ease, box-shadow 0.15s ease; }
.bt-add:hover { filter: brightness(1.07); box-shadow: 0 6px 20px rgb(var(--bt-accent) / 0.3); }

.bt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bt-tagfilter { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.bt-theme-picker select { background: rgb(var(--bt-surface) / 1); color: rgb(var(--bt-text) / 1); font: inherit;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 0.4rem 0.7rem; }

/* ---- Tags --------------------------------------------------------------- */
.bt-tag { font-family: var(--bt-mono); font-size: 0.68rem; letter-spacing: 0.02em; text-transform: lowercase;
  padding: 0.16rem 0.5rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgb(var(--bt-text-muted) / 0.3); color: rgb(var(--bt-text-muted) / 1); background: rgb(var(--bt-surface) / 0.5); }
.bt-tag:hover { color: rgb(var(--bt-text) / 1); }
.bt-tag-clear { color: rgb(var(--bt-danger) / 1); border-color: rgb(var(--bt-danger) / 0.5); }
.bt-pal-0{color:rgb(var(--bt-palette-0)/1);border-color:rgb(var(--bt-palette-0)/.35);background:rgb(var(--bt-palette-0)/.09)}
.bt-pal-1{color:rgb(var(--bt-palette-1)/1);border-color:rgb(var(--bt-palette-1)/.35);background:rgb(var(--bt-palette-1)/.09)}
.bt-pal-2{color:rgb(var(--bt-palette-2)/1);border-color:rgb(var(--bt-palette-2)/.35);background:rgb(var(--bt-palette-2)/.09)}
.bt-pal-3{color:rgb(var(--bt-palette-3)/1);border-color:rgb(var(--bt-palette-3)/.35);background:rgb(var(--bt-palette-3)/.09)}
.bt-pal-4{color:rgb(var(--bt-palette-4)/1);border-color:rgb(var(--bt-palette-4)/.35);background:rgb(var(--bt-palette-4)/.09)}
.bt-pal-5{color:rgb(var(--bt-palette-5)/1);border-color:rgb(var(--bt-palette-5)/.35);background:rgb(var(--bt-palette-5)/.09)}
.bt-pal-6{color:rgb(var(--bt-palette-6)/1);border-color:rgb(var(--bt-palette-6)/.35);background:rgb(var(--bt-palette-6)/.09)}
.bt-pal-7{color:rgb(var(--bt-palette-7)/1);border-color:rgb(var(--bt-palette-7)/.35);background:rgb(var(--bt-palette-7)/.09)}
.bt-pal-8{color:rgb(var(--bt-palette-8)/1);border-color:rgb(var(--bt-palette-8)/.35);background:rgb(var(--bt-palette-8)/.09)}
.bt-pal-9{color:rgb(var(--bt-palette-9)/1);border-color:rgb(var(--bt-palette-9)/.35);background:rgb(var(--bt-palette-9)/.09)}
.bt-pal-10{color:rgb(var(--bt-palette-10)/1);border-color:rgb(var(--bt-palette-10)/.35);background:rgb(var(--bt-palette-10)/.09)}
.bt-pal-11{color:rgb(var(--bt-palette-11)/1);border-color:rgb(var(--bt-palette-11)/.35);background:rgb(var(--bt-palette-11)/.09)}
.bt-pal-12{color:rgb(var(--bt-palette-12)/1);border-color:rgb(var(--bt-palette-12)/.35);background:rgb(var(--bt-palette-12)/.09)}
.bt-pal-13{color:rgb(var(--bt-palette-13)/1);border-color:rgb(var(--bt-palette-13)/.35);background:rgb(var(--bt-palette-13)/.09)}
.bt-pal-14{color:rgb(var(--bt-palette-14)/1);border-color:rgb(var(--bt-palette-14)/.35);background:rgb(var(--bt-palette-14)/.09)}
.bt-pal-15{color:rgb(var(--bt-palette-15)/1);border-color:rgb(var(--bt-palette-15)/.35);background:rgb(var(--bt-palette-15)/.09)}

/* ---- Feed: dense columns, masonry-ish via CSS columns ------------------- */
.bt-date-head { display: flex; align-items: center; gap: 0.75rem; font-family: var(--bt-mono);
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgb(var(--bt-text-muted) / 0.85);
  margin: 1.1rem 0 0.6rem; }
.bt-date-head::after { content: ""; flex: 1; height: 1px; background: var(--bt-line); }
.bt-pinned-head { color: rgb(var(--bt-accent) / 1); }
.bt-pinned { margin-bottom: 0.4rem; }

/* Cards flow side-by-side, packed top-aligned across many columns. */
.bt-feed { columns: 16rem; column-gap: 0.7rem; }
.bt-feed > .bt-date-head, .bt-feed > .bt-loadmore, .bt-feed > .bt-empty { column-span: all; }
.bt-card {
  break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 0.7rem;
  position: relative; display: block; padding: 0.85rem 0.95rem;
  background: rgb(var(--bt-surface) / 0.85);
  /* Border color is driven by --bt-edge (a tag's palette slot or the pin gold), falling
     back to the neutral hairline; --bt-edge-a is the alpha, bumped on hover. */
  border: 1px solid rgb(var(--bt-edge, var(--bt-border)) / var(--bt-edge-a, 1));
  border-radius: var(--bt-radius);
  box-shadow: inset 0 1px 0 rgb(var(--bt-text) / 0.04);
  transition: border-color 0.16s ease, transform 0.12s ease, box-shadow 0.2s ease, background-color 0.16s ease;
}
.bt-card:hover {
  --bt-edge-a: 0.95;
  transform: translateY(-1px);
  background: rgb(var(--bt-surface) / 1);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.26), inset 0 1px 0 rgb(var(--bt-text) / 0.06);
}
/* Tag-tinted edges: a card's border picks up its primary tag's palette color. */
.bt-edge-0  { --bt-edge: var(--bt-palette-0);  --bt-edge-a: 0.5; }
.bt-edge-1  { --bt-edge: var(--bt-palette-1);  --bt-edge-a: 0.5; }
.bt-edge-2  { --bt-edge: var(--bt-palette-2);  --bt-edge-a: 0.5; }
.bt-edge-3  { --bt-edge: var(--bt-palette-3);  --bt-edge-a: 0.5; }
.bt-edge-4  { --bt-edge: var(--bt-palette-4);  --bt-edge-a: 0.5; }
.bt-edge-5  { --bt-edge: var(--bt-palette-5);  --bt-edge-a: 0.5; }
.bt-edge-6  { --bt-edge: var(--bt-palette-6);  --bt-edge-a: 0.5; }
.bt-edge-7  { --bt-edge: var(--bt-palette-7);  --bt-edge-a: 0.5; }
.bt-edge-8  { --bt-edge: var(--bt-palette-8);  --bt-edge-a: 0.5; }
.bt-edge-9  { --bt-edge: var(--bt-palette-9);  --bt-edge-a: 0.5; }
.bt-edge-10 { --bt-edge: var(--bt-palette-10); --bt-edge-a: 0.5; }
.bt-edge-11 { --bt-edge: var(--bt-palette-11); --bt-edge-a: 0.5; }
.bt-edge-12 { --bt-edge: var(--bt-palette-12); --bt-edge-a: 0.5; }
.bt-edge-13 { --bt-edge: var(--bt-palette-13); --bt-edge-a: 0.5; }
.bt-edge-14 { --bt-edge: var(--bt-palette-14); --bt-edge-a: 0.5; }
.bt-edge-15 { --bt-edge: var(--bt-palette-15); --bt-edge-a: 0.5; }
/* Pinned cards win: warm gold border + a PINNED flag in the head. */
.bt-card-pinned { --bt-edge: var(--bt-pin); --bt-edge-a: 0.75; }
.bt-pinned-flag { display: inline-flex; align-items: center; gap: 0.28rem; flex: none;
  margin-right: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(var(--bt-pin) / 1); background: rgb(var(--bt-pin) / 0.12);
  border: 1px solid rgb(var(--bt-pin) / 0.35); }
.bt-pinned-flag .bt-ico { width: 0.72rem; height: 0.72rem; }
/* type cue: a small colored tick on the timestamp row (replaces the old side bar) */
.bt-card-head::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  flex: none; margin-right: 0.45rem; background: rgb(var(--bt-text-muted) / 0.6); align-self: center; }
.bt-kind-text .bt-card-head::before { background: rgb(var(--bt-type-text) / 0.95); }
.bt-kind-checklist .bt-card-head::before { background: rgb(var(--bt-type-checklist) / 0.95); }
.bt-kind-link .bt-card-head::before { background: rgb(var(--bt-type-link) / 0.95); }
.bt-kind-image .bt-card-head::before, .bt-kind-video .bt-card-head::before { background: rgb(var(--bt-type-image) / 0.95); }

.bt-card-head { display: flex; align-items: center; font-family: var(--bt-mono);
  font-size: 0.64rem; letter-spacing: 0.03em; color: rgb(var(--bt-text-muted) / 0.85); margin-bottom: 0.5rem; }
.bt-card-actions { display: flex; gap: 0.1rem; margin-left: auto; opacity: 0; transition: opacity 0.12s ease; }
.bt-card:hover .bt-card-actions, .bt-card:focus-within .bt-card-actions { opacity: 1; }
.bt-icon { background: none; border: 0; cursor: pointer; color: rgb(var(--bt-text-muted) / 1); font-size: 0.85rem;
  padding: 0.1rem 0.26rem; border-radius: 4px; }
.bt-icon:hover { background: rgb(var(--bt-bg) / 1); color: rgb(var(--bt-text) / 1); }
.bt-card-title { margin: 0 0 0.3rem; font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; }
.bt-card-body { white-space: pre-wrap; word-break: break-word; font-size: 0.88rem; color: rgb(var(--bt-text) / 0.92); }
.bt-card-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.6rem; }

.bt-card-chips { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.bt-chip { display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer;
  font-family: var(--bt-mono); font-size: 0.66rem; letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: rgb(var(--bt-bg) / 1); color: rgb(var(--bt-text-muted) / 1);
  border: 1px solid rgb(var(--bt-border) / 1); }
.bt-chip:hover { color: rgb(var(--bt-text) / 1); border-color: rgb(var(--bt-accent) / 0.6); }
.bt-chip .bt-ico { width: 0.8rem; height: 0.8rem; }

.bt-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.28rem; font-size: 0.88rem; }
.bt-checklist li { display: flex; gap: 0.45rem; align-items: flex-start; }
.bt-checklist li.checked span { text-decoration: line-through; color: rgb(var(--bt-text-muted) / 1); }
.bt-check { background: none; border: 0; cursor: pointer; color: rgb(var(--bt-type-checklist) / 1); font-size: 1rem; line-height: 1; padding: 0; }

.bt-linkcard { display: flex; flex-direction: column; gap: 0.3rem; }
.bt-link-domain { display: flex; align-items: center; gap: 0.4rem; font-family: var(--bt-mono); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--bt-text-muted) / 1); }
.bt-favicon { border-radius: 3px; }
.bt-link-title { color: rgb(var(--bt-text) / 1); font-weight: 600; font-size: 0.9rem; }

.bt-reminder { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.7rem;
  padding: 0.16rem 0.5rem; border-radius: 999px; color: rgb(var(--bt-accent) / 1);
  background: rgb(var(--bt-accent) / 0.1); border: 1px solid rgb(var(--bt-accent) / 0.25); }

.bt-loadmore { display: block; margin: 1.5rem auto; cursor: pointer; font: 500 0.82rem var(--bt-mono);
  letter-spacing: 0.04em; padding: 0.55rem 1.5rem; background: rgb(var(--bt-surface) / 1); color: rgb(var(--bt-text) / 1);
  border: 1px solid var(--bt-line); border-radius: 999px; }
.bt-loadmore:hover { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-result-count { font-family: var(--bt-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgb(var(--bt-text-muted) / 1); margin: 0 0 1rem; }

.bt-empty { text-align: center; padding: 5rem 1rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-empty-title { font-size: 1.2rem; color: rgb(var(--bt-text) / 1); margin: 0 0 0.35rem; font-weight: 600; }
.bt-empty-sub { color: rgb(var(--bt-text-muted) / 1); font-size: 0.9rem; }

/* ---- Media -------------------------------------------------------------- */
.bt-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.35rem; margin: 0.55rem 0; }
.bt-media-thumb { width: 100%; height: 5rem; object-fit: cover; border-radius: var(--bt-r-sm); cursor: zoom-in; border: 1px solid var(--bt-line); }
.bt-media-video { width: 100%; border-radius: var(--bt-r-sm); }
.bt-media-label { display: inline-block; cursor: pointer; font-size: 0.85rem; color: rgb(var(--bt-accent) / 1); }
.bt-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: zoom-out;
  background: rgb(0 0 0 / 0.86); backdrop-filter: blur(6px); animation: bt-fade 0.15s ease; }
.bt-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 0.6rem; box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); }

/* ---- Modal -------------------------------------------------------------- */
.bt-modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding-top: 9vh;
  background: rgb(0 0 0 / 0.55); backdrop-filter: blur(5px); animation: bt-fade 0.15s ease; }
.bt-modal { width: min(40rem, 92vw); background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.85rem; padding: 1.25rem; box-shadow: 0 30px 70px rgb(0 0 0 / 0.5); animation: bt-rise 0.16s ease; }
.bt-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.6rem; }
.bt-checklist-toggle { margin-bottom: 0.7rem; }
.bt-checklist-toggle summary, .bt-import-export summary { cursor: pointer; color: rgb(var(--bt-text-muted) / 1); font-size: 0.85rem; margin-bottom: 0.5rem; }
.bt-media-upload { margin-bottom: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@keyframes bt-fade { from { opacity: 0; } }
@keyframes bt-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---- Inputs / forms ----------------------------------------------------- */
.bt-input, .bt-form input, .bt-form select, .bt-form textarea, .bt-modal textarea, .bt-modal input[type=text] {
  width: 100%; padding: 0.6rem 0.8rem; font: 400 0.95rem var(--bt-font); margin-bottom: 0.7rem;
  background: rgb(var(--bt-bg) / 0.6); color: rgb(var(--bt-text) / 1); border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }
.bt-input:focus, .bt-form input:focus, .bt-modal textarea:focus { outline: none; border-color: rgb(var(--bt-accent) / 0.7); }

/* ---- Panels ------------------------------------------------------------- */
.bt-panel, .bt-panel-wide { background: rgb(var(--bt-surface) / 0.7); border: 1px solid var(--bt-line);
  border-radius: 0.9rem; padding: 1.5rem; max-width: 34rem; margin: 1.5rem auto; }
.bt-panel-wide { max-width: 100rem; }
.bt-panel h1 { margin-top: 0; letter-spacing: -0.02em; }
.bt-data-rights { font-size: 0.85rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-ai-toggle label { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.bt-ai-toggle input { width: auto; }
.bt-join { font-family: var(--bt-mono); font-size: 1.05rem; padding: 0.8rem 1rem; border-radius: var(--bt-r-sm);
  background: rgb(var(--bt-bg) / 0.6); border: 1px dashed rgb(var(--bt-accent) / 0.4); }
.bt-price { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; margin: 1rem 0; }
.bt-price span { font-size: 0.85rem; font-weight: 400; color: rgb(var(--bt-text-muted) / 1); }

/* ---- Landing ------------------------------------------------------------ */
.bt-hero-top { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.bt-theme-switch { font: 500 0.78rem var(--bt-mono); letter-spacing: 0.03em; cursor: pointer;
  background: rgb(var(--bt-surface) / 1); color: rgb(var(--bt-text) / 1); border: 1px solid var(--bt-line); border-radius: 999px; padding: 0.4rem 0.85rem; }
.bt-theme-switch:hover { border-color: rgb(var(--bt-accent) / 0.6); }
.bt-hero { text-align: center; padding: clamp(3rem, 9vw, 6rem) 1rem 2.5rem; }
.bt-hero-title { font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; margin: 0 0 1rem;
  background: linear-gradient(180deg, rgb(var(--bt-text) / 1), rgb(var(--bt-text) / 0.62));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bt-hero-sub { color: rgb(var(--bt-text-muted) / 1); max-width: 36rem; margin: 0 auto 1.75rem; font-size: 1.05rem; }
.bt-price-note { color: rgb(var(--bt-text-muted) / 1); font-size: 0.85rem; margin-top: 1rem; }
.bt-how { padding: 2.5rem 1rem; max-width: 60rem; margin: 0 auto; }
.bt-how h2 { text-align: center; letter-spacing: -0.02em; }
.bt-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.bt-how-grid > div { background: rgb(var(--bt-surface) / 0.6); border: 1px solid var(--bt-line); border-radius: 0.8rem; padding: 1.4rem; }
.bt-how-grid h3 { margin: 0 0 0.4rem; font-family: var(--bt-mono); font-size: 0.92rem; color: rgb(var(--bt-accent) / 1); }
.bt-how-grid p { margin: 0; color: rgb(var(--bt-text-muted) / 1); font-size: 0.92rem; }

/* ---- Theme Studio ------------------------------------------------------- */
.bt-studio { display: grid; grid-template-columns: 23rem 1fr; gap: 2rem; align-items: start; }
.bt-studio-controls h1 { margin-top: 0; }
.bt-studio-controls h3 { margin: 1.3rem 0 0.5rem; font-family: var(--bt-mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--bt-text-muted) / 1); }
.bt-swatch-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; font-size: 0.85rem; }
.bt-swatch-row input[type=color], .bt-palette-grid input[type=color] { width: 2.4rem; height: 1.8rem; padding: 0;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); background: none; cursor: pointer; }
.bt-palette-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.3rem; }
.bt-palette-grid input[type=color] { width: 100%; }
.bt-save { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bt-import-export { margin-top: 1.25rem; font-size: 0.85rem; }
.bt-studio-preview { position: sticky; top: 5rem; }
.bt-studio-preview .bt-feed { columns: auto; }
@media (max-width: 52rem) { .bt-studio { grid-template-columns: 1fr; } }

/* ---- allauth auth pages ------------------------------------------------- */
.bt-auth { max-width: 27rem; }
.bt-auth h1 { margin: 0 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.bt-auth p { color: rgb(var(--bt-text-muted) / 1); font-size: 0.92rem; }
.bt-auth form { margin: 1.25rem 0; }
.bt-auth label { display: block; font-family: var(--bt-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0.7rem 0 0.25rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-auth input[type=text], .bt-auth input[type=email], .bt-auth input[type=password], .bt-auth input:not([type]) {
  width: 100%; padding: 0.65rem 0.8rem; font: 400 0.95rem var(--bt-font);
  background: rgb(var(--bt-bg) / 0.6); color: rgb(var(--bt-text) / 1); border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }
.bt-auth input:focus { outline: none; border-color: rgb(var(--bt-accent) / 0.7); }
.bt-auth input[type=checkbox] { margin-right: 0.4rem; }
.bt-auth button, .bt-auth [type=submit] { margin-top: 1.1rem; }
.bt-auth ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bt-auth hr { border: 0; border-top: 1px solid var(--bt-line); margin: 1.5rem 0; }
.bt-auth h2 { font-family: var(--bt-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 1.5rem 0 0.6rem; color: rgb(var(--bt-text-muted) / 1); }

/* ---- Error pages -------------------------------------------------------- */
.bt-error-body { display: grid; place-items: center; min-height: 100vh; }
.bt-error { text-align: center; }
.bt-error-code { font-family: var(--bt-mono); font-size: 3.5rem; margin: 0; color: rgb(var(--bt-accent, 129 140 248) / 1); }
.bt-error-title { margin: 0.5rem 0; letter-spacing: -0.02em; }
.bt-error-msg { color: rgb(var(--bt-text-muted, 148 148 165) / 1); }

/* ---- Light theme override (landing light/dark switch + Paper) ----------- */
html[data-theme="paper"] {
  color-scheme: light;
  --bt-bg: 244 242 237; --bt-surface: 255 255 255; --bt-surface-raised: 250 249 246;
  --bt-text: 26 26 31; --bt-text-muted: 92 94 107; --bt-border: 210 206 196;
  --bt-accent: 79 70 229; --bt-danger: 220 38 38;
  --bt-palette-0: 79 70 229; --bt-palette-1: 5 150 105; --bt-palette-2: 217 119 6; --bt-palette-3: 220 38 38;
  --bt-palette-4: 37 99 235; --bt-palette-5: 219 39 119; --bt-palette-6: 13 148 136; --bt-palette-7: 101 163 13;
  --bt-palette-8: 192 38 211; --bt-palette-9: 234 88 12; --bt-palette-10: 2 132 199; --bt-palette-11: 124 58 237;
  --bt-palette-12: 22 163 74; --bt-palette-13: 202 138 4; --bt-palette-14: 190 24 93; --bt-palette-15: 100 116 139;
  --bt-type-text: 79 70 229; --bt-type-checklist: 5 150 105; --bt-type-link: 37 99 235; --bt-type-image: 217 119 6;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Extra vendored fonts (Theme Studio picker) ------------------------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/fraunces-400.15ccd91d7a8f.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/fraunces-600.b8dca52ca5f9.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plexmono-400.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/spacemono-400.049dfc5919c2.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/spacemono-700.e5e908997a45.woff2") format("woff2"); }

/* ---- Theme gallery (swatch cards; per-theme --sw-* set via nonce'd <style>) */
.bt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.7rem; margin: 1rem 0 1.5rem; }
.bt-sw { display: block; text-align: left; cursor: pointer; padding: 0; border-radius: 0.6rem; overflow: hidden;
  border: 1px solid var(--bt-line); background: rgb(var(--sw-bg) / 1); transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.18s ease; }
.bt-sw:hover { transform: translateY(-2px); border-color: rgb(var(--sw-accent) / 0.7); box-shadow: 0 10px 26px rgb(0 0 0 / 0.32); }
.bt-sw[aria-current="true"] { border-color: rgb(var(--sw-accent) / 1); box-shadow: 0 0 0 1px rgb(var(--sw-accent) / 0.6); }
.bt-sw-card { margin: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 0.45rem; background: rgb(var(--sw-surface) / 1);
  border: 1px solid rgb(var(--sw-border) / 1); }
.bt-sw-line { height: 0.4rem; border-radius: 3px; background: rgb(var(--sw-text) / 0.85); margin-bottom: 0.3rem; }
.bt-sw-line.short { width: 55%; background: rgb(var(--sw-text) / 0.4); }
.bt-sw-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: rgb(var(--sw-accent) / 1); margin-top: 0.2rem; }
.bt-sw-strip { display: flex; height: 0.35rem; }
.bt-sw-strip span { flex: 1; }
.bt-sw-label { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.7rem;
  font-family: var(--bt-mono); font-size: 0.72rem; color: rgb(var(--sw-text) / 1); background: rgb(var(--sw-surface) / 1);
  border-top: 1px solid rgb(var(--sw-border) / 1); }
.bt-sw-label .tag { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--sw-text) / 0.5); }

.bt-fontpicker { display: grid; gap: 0.6rem; }
.bt-fontpicker label { font-family: var(--bt-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgb(var(--bt-text-muted) / 1); }
.bt-fontpicker select { width: 100%; }
.bt-sw-strip span:nth-child(1){background:rgb(var(--sw-p0)/1)}
.bt-sw-strip span:nth-child(2){background:rgb(var(--sw-p1)/1)}
.bt-sw-strip span:nth-child(3){background:rgb(var(--sw-p2)/1)}
.bt-sw-strip span:nth-child(4){background:rgb(var(--sw-p3)/1)}
.bt-sw-strip span:nth-child(5){background:rgb(var(--sw-p4)/1)}
.bt-sw-strip span:nth-child(6){background:rgb(var(--sw-p5)/1)}

/* ---- Font-size slider (toolbar) ---------------------------------------- */
.bt-toolbar-right { display: flex; align-items: center; gap: 0.4rem; }
.bt-zoom { position: relative; }
.bt-zoom > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.bt-zoom > summary::-webkit-details-marker { display: none; }
.bt-zoom-aa { font-family: var(--bt-font); line-height: 1; }
.bt-zoom-aa strong { font-size: 1.15em; }
.bt-zoom-pop { position: absolute; right: 0; margin-top: 0.5rem; z-index: 50; width: 16rem;
  background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.7rem; padding: 0.85rem; box-shadow: 0 18px 40px rgb(0 0 0 / 0.45); }
.bt-zoom-pophead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem;
  font-family: var(--bt-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgb(var(--bt-text-muted) / 1); }
.bt-zoom-reset { background: none; border: 0; cursor: pointer; font: inherit; color: rgb(var(--bt-accent) / 1);
  text-transform: none; letter-spacing: 0; }
.bt-zoom-slide { display: flex; align-items: center; gap: 0.6rem; }
.bt-zoom-sm { font-size: 0.8rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-zoom-lg { font-size: 1.3rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-zoom-slide input[type=range] { flex: 1; accent-color: rgb(var(--bt-accent) / 1); }

/* ---- Tabler icons ------------------------------------------------------- */
.bt-ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.15em; flex: none; }
.bt-tag-icon { display: inline-flex; align-items: center; gap: 0.3rem; }
.bt-tag-icon .bt-ico { width: 0.85rem; height: 0.85rem; }

/* header switcher buttons (text-size + themes) */
.bt-navbtn { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none;
  padding: 0.34rem 0.55rem; border-radius: var(--bt-r-sm); color: rgb(var(--bt-text-muted) / 1);
  border: 1px solid transparent; }
.bt-navbtn:hover { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1); text-decoration: none; }
.bt-navbtn::-webkit-details-marker { display: none; }
.bt-navbtn .bt-ico { width: 1.1rem; height: 1.1rem; }
.bt-navbtn-sub { font-family: var(--bt-mono); font-size: 0.68rem; opacity: 0.8; }
.bt-zoom[open] > .bt-navbtn { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1); }

/* icon sizing in context */
.bt-add { display: inline-flex; align-items: center; justify-content: center; }
.bt-add .bt-ico { width: 1.25rem; height: 1.25rem; }
.bt-icon .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-icon.is-active { color: rgb(var(--bt-accent) / 1); }
.bt-check .bt-ico { width: 1rem; height: 1rem; }
.bt-reminder .bt-ico { width: 0.9rem; height: 0.9rem; }
.bt-media-label { display: inline-flex; align-items: center; gap: 0.3rem; }
.bt-media-label .bt-ico { width: 1rem; height: 1rem; }
.bt-cta .bt-ico, .bt-cta-lg .bt-ico { width: 1rem; height: 1rem; }

/* ---- Link preview image (og:image) ------------------------------------- */
.bt-link-img { width: 100%; max-height: 9rem; object-fit: cover; border-radius: var(--bt-r-sm);
  margin-bottom: 0.5rem; border: 1px solid rgb(var(--bt-border) / 1); display: block; background: rgb(var(--bt-bg) / 0.5); }

/* ---- Footer ------------------------------------------------------------- */
.bt-footer { flex: none; border-top: 1px solid var(--bt-line);
  background: rgb(var(--bt-surface) / 0.4); margin-top: 2rem; }
.bt-footer-inner { max-width: 100rem; margin: 0 auto; padding: 1.1rem clamp(1rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; justify-content: space-between;
  font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 1); }
.bt-footer-brand a { color: rgb(var(--bt-text) / 0.9); }
.bt-footer-brand a:hover { color: rgb(var(--bt-accent) / 1); }
.bt-footer-nav { display: flex; align-items: center; gap: 1.1rem; }
.bt-footer-nav a { color: rgb(var(--bt-text-muted) / 1); }
.bt-footer-nav a:hover { color: rgb(var(--bt-accent) / 1); }
.bt-footer-copy { font-family: var(--bt-mono); font-size: 0.68rem; opacity: 0.8; }

/* ---- Legal / prose pages ------------------------------------------------ */
.bt-legal { max-width: 46rem; margin: 0 auto; }
.bt-legal-head { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bt-line); }
.bt-legal-head h1 { font-size: 1.7rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.bt-legal-meta { color: rgb(var(--bt-text-muted) / 1); font-size: 0.84rem; margin: 0 0 0.6rem; }
.bt-legal-draft { font-size: 0.78rem; color: rgb(var(--bt-text-muted) / 1);
  background: rgb(var(--bt-accent) / 0.08); border: 1px solid rgb(var(--bt-accent) / 0.22);
  border-radius: var(--bt-r-sm); padding: 0.5rem 0.75rem; margin: 0; }
.bt-legal-body { font-size: 0.92rem; line-height: 1.62; color: rgb(var(--bt-text) / 0.92); }
.bt-legal-body h2 { font-size: 1.04rem; letter-spacing: -0.01em; margin: 1.9rem 0 0.5rem;
  color: rgb(var(--bt-text) / 1); }
.bt-legal-body p { margin: 0 0 0.85rem; }
.bt-legal-body ul { margin: 0 0 0.95rem; padding-left: 1.2rem; }
.bt-legal-body li { margin: 0 0 0.4rem; }

/* ---- In-page compose / tag panels -------------------------------------- */
.bt-compose, .bt-tagform { background: rgb(var(--bt-surface-raised) / 1); border: 1px solid var(--bt-line-strong);
  border-radius: 0.85rem; padding: 1rem 1.1rem; margin: 0 0 0.9rem; box-shadow: 0 12px 30px rgb(0 0 0 / 0.22);
  animation: bt-rise 0.16s ease; }
.bt-seg-group { display: inline-flex; gap: 0.2rem; padding: 0.2rem; margin-bottom: 0.8rem;
  background: rgb(var(--bt-bg) / 0.55); border: 1px solid var(--bt-line); border-radius: 999px; }
.bt-seg { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font: 500 0.82rem var(--bt-font);
  color: rgb(var(--bt-text-muted) / 1); background: none; border: 0; padding: 0.36rem 0.85rem; border-radius: 999px; }
.bt-seg:hover { color: rgb(var(--bt-text) / 1); }
.bt-seg.is-active { color: rgb(var(--bt-text) / 1); background: rgb(var(--bt-surface) / 1);
  box-shadow: inset 0 0 0 1px var(--bt-line-strong); }
.bt-seg .bt-ico { width: 0.95rem; height: 0.95rem; }
.bt-compose-body { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.bt-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.2rem; }
.bt-compose-hint { font-size: 0.72rem; color: rgb(var(--bt-text-muted) / 0.8); }
.bt-compose-hint kbd { font-family: var(--bt-mono); font-size: 0.68rem; padding: 0.05rem 0.3rem; margin: 0 0.05rem;
  border: 1px solid var(--bt-line); border-radius: 4px; background: rgb(var(--bt-bg) / 0.6); }
.bt-compose-actions { display: flex; gap: 0.5rem; align-items: center; }
.bt-btn-ghost { cursor: pointer; font: 500 0.85rem var(--bt-font); color: rgb(var(--bt-text-muted) / 1);
  background: none; border: 1px solid var(--bt-line); padding: 0.5rem 0.85rem; border-radius: var(--bt-r-sm); }
.bt-btn-ghost:hover { color: rgb(var(--bt-text) / 1); border-color: var(--bt-line-strong); }
button.bt-tag { font: inherit; cursor: pointer; }

/* ---- Tag manager -------------------------------------------------------- */
.bt-tagform-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.bt-tagform-head h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; }
.bt-field-label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgb(var(--bt-text-muted) / 1); margin: 0.2rem 0 0.35rem; }
.bt-field-hint { font-size: 0.74rem; color: rgb(var(--bt-text-muted) / 0.85); margin: -0.4rem 0 0.7rem; }
.bt-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.bt-swatch { width: 1.4rem; height: 1.4rem; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(var(--bt-text) / 0.12); }
.bt-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.bt-swatch.is-active { border-color: rgb(var(--bt-text) / 0.85); }
.bt-taglist { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.bt-taglist-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }
.bt-taglist-row .bt-tagdot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.bt-taglist-row .bt-tagname { flex: 1; font-size: 0.88rem; }

/* Solid palette fills for tag-color swatches (CSP-safe, no inline style). */
.bt-swfill-0 { background: rgb(var(--bt-palette-0) / 1); }
.bt-swfill-1 { background: rgb(var(--bt-palette-1) / 1); }
.bt-swfill-2 { background: rgb(var(--bt-palette-2) / 1); }
.bt-swfill-3 { background: rgb(var(--bt-palette-3) / 1); }
.bt-swfill-4 { background: rgb(var(--bt-palette-4) / 1); }
.bt-swfill-5 { background: rgb(var(--bt-palette-5) / 1); }
.bt-swfill-6 { background: rgb(var(--bt-palette-6) / 1); }
.bt-swfill-7 { background: rgb(var(--bt-palette-7) / 1); }
.bt-swfill-8 { background: rgb(var(--bt-palette-8) / 1); }
.bt-swfill-9 { background: rgb(var(--bt-palette-9) / 1); }
.bt-swfill-10 { background: rgb(var(--bt-palette-10) / 1); }
.bt-swfill-11 { background: rgb(var(--bt-palette-11) / 1); }
.bt-swfill-12 { background: rgb(var(--bt-palette-12) / 1); }
.bt-swfill-13 { background: rgb(var(--bt-palette-13) / 1); }
.bt-swfill-14 { background: rgb(var(--bt-palette-14) / 1); }
.bt-swfill-15 { background: rgb(var(--bt-palette-15) / 1); }