/* ================================================================
   binarybee · /live — light cream palette
   honey identity preserved; public-friendly, welcoming surface
   ================================================================ */

:root {
  /* honey accent family */
  --honey-50:  #fff8e1;
  --honey-100: #ffeeb3;
  --honey-200: #ffe082;
  --honey-300: #ffd24d;
  --honey-400: #ffc21f;
  --honey-500: #f5b800;
  --honey-600: #d4a017;
  --honey-700: #a87a0c;
  --honey-800: #7c5908;
  --honey-900: #4a3505;

  /* paper / warm cream surface family */
  --paper-50:  #fffaf0;
  --paper-100: #faf3e3;
  --paper-200: #f3e8cf;
  --paper-300: #e8dcc1;

  /* ink (text on paper) */
  --ink-900: #2a1f0e;
  --ink-800: #3d2f17;
  --ink-700: #5a4828;
  --ink-500: #8a7549;
  --ink-400: #a8957a;

  --line:    #ead9b0;
  --line-strong: #d8c298;

  --emerald-50:  #ecfdf5;
  --emerald-300: #6ee7b7;
  --emerald-500: #10b981;
  --emerald-700: #047857;

  --red-300: #fca5a5;
  --red-600: #dc2626;

  --bg: var(--paper-50);
  --fg: var(--ink-800);

  --maxw: 880px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --shadow-sm: 0 1px 0 rgba(74, 53, 5, 0.04), 0 4px 12px -6px rgba(74, 53, 5, 0.10);
  --shadow-md: 0 2px 0 rgba(74, 53, 5, 0.04), 0 12px 28px -14px rgba(74, 53, 5, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  position: relative;
  padding-bottom: 92px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* radial honey wash */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 184, 0, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(212, 160, 23, 0.06), transparent 50%);
}

/* hex tile background */
.hex-tile {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><polygon points='28,2 54,17 54,47 28,62 2,47 2,17' fill='none' stroke='%23a87a0c' stroke-opacity='0.10' stroke-width='1'/></svg>");
  background-size: 56px 64px;
}

/* ============ NAV BAR ============ */
.navbar {
  position: relative;
  z-index: 10;
  background: rgba(255, 250, 240, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.navbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.brand__mark { width: 28px; height: 30px; display: grid; place-items: center; }
.brand__sub {
  font-size: 11px;
  color: var(--honey-700);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-left: 6px;
  display: none;
}
@media (min-width: 600px) { .brand__sub { display: inline; } }
.nav-links {
  display: none;
  margin-left: auto;
  gap: 24px;
  font-size: 14px;
  color: var(--ink-700);
}
.nav-links a { transition: color 0.15s; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ink-900); }
.nav-links a.on { color: var(--ink-900); border-bottom-color: var(--honey-500); }
@media (min-width: 760px) { .nav-links { display: flex; } }
.nav-cta {
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--paper-50);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
.nav-cta:hover { background: var(--ink-800); transform: translateY(-1px); }
@media (min-width: 760px) { .nav-cta { margin-left: 0; } }

/* ============ PAGE ============ */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ============ HEADER ============ */
.live-h1 {
  font-size: clamp(30px, 5.5vw, 40px);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
.live-h1__bee { margin-right: 8px; }
.live-sub {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-500);
}
.live-sub__dim { opacity: 0.55; }
.live-sub__honey { color: var(--honey-700); font-weight: 500; }
.live-pill-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--emerald-700);
  font-weight: 600;
}
.live-pill-here {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--honey-700);
  font-weight: 600;
}
.live-pill-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500, #6b6253);
  font-weight: 500;
  opacity: 0.85;
}
.dot-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.refresh-toggle {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.refresh-toggle--off {
  background: var(--honey-500);
  color: var(--ink-900);
}
.refresh-toggle--off:hover { background: var(--honey-400); transform: translateY(-1px); }
.refresh-toggle--on {
  background: white;
  color: var(--ink-700);
  border: 1px solid var(--line);
}
.refresh-toggle--on:hover { border-color: var(--honey-500); color: var(--ink-900); }
.refresh-toggle__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
}
.refresh-toggle--on .refresh-toggle__dot { animation: pulse 1.8s ease-in-out infinite; }

/* ============ DONATE STRIP (TOP) ============ */
.donate-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #fff4cf 0%, #ffe9a8 100%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.donate-strip__icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.donate-strip__copy {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--ink-800);
  line-height: 1.4;
}
.donate-strip__copy strong { color: var(--honey-800); font-weight: 700; }
.donate-strip__copy .sep { color: var(--ink-400); margin: 0 4px; }
.donate-strip__btn {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--ink-900);
  color: var(--paper-50);
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, transform 0.15s;
}
.donate-strip__btn:hover { background: var(--ink-800); transform: translateY(-1px); }

/* ============ STAT GRID ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-lg);
  padding: 16px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.stat-card__num {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: var(--honey-800);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card__num--small { font-size: 16px; color: var(--ink-900); }
.stat-card__label {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}
/* tiny rate label / gauge slot under a stat-card */
.stat-card__extra {
  margin-top: 8px;
  font-size: 11px;
  color: var(--honey-700);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* honey-jar gauge — used inside the archive size stat card */
.gauge { display: flex; flex-direction: column; gap: 4px; }
.gauge__bar {
  height: 6px;
  background: var(--paper-200);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.gauge__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--honey-300), var(--honey-500) 70%, var(--honey-600));
  border-radius: 3px 0 0 3px;
  transition: width 0.6s ease;
  min-width: 2px;
}
.gauge__caption {
  font-size: 10px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gauge__eta { color: var(--honey-700); font-weight: 600; }

/* ============ SECTION ============ */
.section {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 600px) { .section { padding: 22px; } }
.section__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-800);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.section__eyebrow .meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-500);
}

/* ============ LANE CARD ============ */
.lane {
  margin-top: 14px;
  background: var(--paper-100);
  border-left: 4px solid var(--honey-500);
  border-radius: var(--r-sm);
  padding: 14px;
}
.lane__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.lane__title { min-width: 0; }
.lane__title .lane__name {
  color: var(--honey-800);
  font-weight: 700;
}
.lane__title .lane__slug {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-900);
  word-break: break-all;
}
.lane__elapsed {
  font-size: 11px;
  color: var(--ink-500);
  white-space: nowrap;
}
.lane__bar {
  height: 14px;
  background: var(--paper-200);
  border-radius: 4px;
  overflow: hidden;
}
.lane__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--honey-400), var(--honey-600));
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-900);
  transition: width 1s ease;
}
.idle {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-500);
  font-style: italic;
}

/* ============ JUST FINISHED ============ */
.section__hd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.section--clickable {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.section--clickable:hover {
  background: var(--paper-100);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.section__open-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--paper-50);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.section--clickable:hover .section__open-cta {
  background: var(--honey-500);
  color: var(--ink-900);
}
.section__collapsed-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.5;
}
.section__close-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--paper-200);
  color: var(--ink-700);
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.section__close-btn:hover { background: var(--paper-300); color: var(--ink-900); }

/* ============ CATEGORIES LIST ============ */
.cat-list {
  margin-top: 14px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--paper-100);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: white;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.cat-item:hover {
  border-color: var(--line-strong);
  background: #fffaef;
  transform: translateX(2px);
}
.cat-item__name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--honey-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-item__blurb {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.4;
  min-width: 0;
}
.cat-item__count {
  min-width: 32px;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--paper-200);
  color: var(--ink-500);
}
.cat-item__count--on {
  background: var(--honey-500);
  color: var(--ink-900);
}
.cat-foot {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-500);
  font-style: italic;
  text-align: right;
}
@media (max-width: 540px) {
  .cat-item { grid-template-columns: 1fr auto; }
  .cat-item__blurb { grid-column: 1 / -1; font-size: 12px; }
}

/* ===== Grouped categories: biggies (top-level) + smallies (collapsed) ===== */
.cat-list--grouped {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  max-height: 520px;
}

/* Biggie row — its own card with honey-fill bar showing share of max */
.biggie {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: white;
  border: 1px solid var(--line);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.biggie:hover {
  border-color: var(--honey-500);
  background: #fffaef;
  transform: translateX(2px);
}
.biggie__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.biggie__name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--honey-800);
}
.biggie__count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  background: var(--honey-500);
  padding: 2px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.biggie__blurb {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.4;
}
.biggie__bar {
  margin-top: 8px;
  height: 8px;
  background: var(--paper-200);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.biggie__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--honey-300), var(--honey-500) 60%, var(--honey-600));
  border-radius: 4px 0 0 4px;
  transition: width 0.6s ease;
}
.biggie__hints {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-500);
  font-style: italic;
}
.biggie__hints-l { color: var(--honey-700); font-style: normal; font-weight: 600; }
.biggie__hint { color: var(--ink-700); font-style: normal; }

/* Smallies group — collapsed long-tail */
.smallies-group {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--paper-100);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.smallies-toggle {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-700);
  padding: 4px 2px;
  transition: color 0.15s;
}
.smallies-toggle:hover { color: var(--honey-800); }
.smallies-toggle__chev {
  display: inline-block;
  width: 12px;
  color: var(--honey-700);
  font-size: 11px;
}
.smallies-toggle__l { font-weight: 600; }
.smallies-toggle__l .meta {
  margin-left: 6px;
  font-weight: 500;
  color: var(--ink-500);
  font-size: 11px;
}
.smallies-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.smallie {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-700);
  transition: border-color 0.15s, background 0.15s;
}
.smallie:hover {
  border-color: var(--honey-500);
  background: #fffaef;
  color: var(--honey-800);
}
.smallie__name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
}
.smallie__count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 11px;
  color: var(--honey-700);
  font-variant-numeric: tabular-nums;
}

/* ============ LANES (multi) + BEE → HIVE ============ */
.lanes {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lane { position: relative; }
.lane__bar-wrap {
  position: relative;
}
.lane--done .lane__fill {
  background: linear-gradient(90deg, #34d399, #10b981);
  color: white;
}
@keyframes lane-flash {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}
.lane--done .lane__bar { animation: lane-flash 0.9s ease-out; }

/* shared hive lives in section header (top-right) — bees fly INTO it */
.section--has-hive { position: relative; }
.section-hive {
  position: relative;
  display: inline-flex;
  width: 28px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(74, 53, 5, 0.22));
}
.section-hive__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 184, 0, 0.6), transparent 70%);
  animation: hive-pulse 1.1s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}
@keyframes hive-pulse {
  0%   { opacity: 0; transform: scale(0.5); }
  35%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2.2); }
}
.section-hive svg {
  position: relative;
  z-index: 1;
  animation: hive-bob 1.2s ease-in-out;
}
@keyframes hive-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* bee starts at lane bar's right edge, arcs up + right INTO the section's hive,
   distance scaled by lane index — works for any lane count */
.lane__bee {
  position: absolute;
  right: 4px;
  top: 50%;
  pointer-events: none;
  z-index: 6;
  transform-origin: 50% 50%;
  /* --lane-i is set inline; lane 0 flies short, lane N flies further */
  --bee-up: calc(-90px - var(--lane-i, 0) * 96px);
  --bee-mid-up: calc(-50px - var(--lane-i, 0) * 90px);
  animation: bee-home 1.15s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  filter: drop-shadow(0 2px 4px rgba(74, 53, 5, 0.25));
}
@keyframes bee-home {
  0% {
    transform: translate(-12px, -50%) rotate(-8deg) scale(0.7);
    opacity: 0;
  }
  15% {
    transform: translate(-8px, -90%) rotate(-2deg) scale(1);
    opacity: 1;
  }
  55% {
    transform: translate(8px, var(--bee-mid-up)) rotate(6deg) scale(1.02);
    opacity: 1;
  }
  85% {
    /* arrived at the hive entrance — squishes as it dives in */
    transform: translate(18px, var(--bee-up)) rotate(10deg) scale(0.7);
    opacity: 0.85;
  }
  100% {
    /* gone — absorbed into the apiary */
    transform: translate(20px, var(--bee-up)) rotate(10deg) scale(0.2);
    opacity: 0;
  }
}
.inline-search {
  min-width: 160px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--paper-100);
  border: 1px solid var(--line);
  color: var(--ink-900);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.inline-search::placeholder { color: var(--ink-400); }
.inline-search:focus { border-color: var(--honey-500); background: white; }

.finished-list {
  margin-top: 14px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--paper-100);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finished-item {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-sm);
  transition: background 0.15s;
}
.finished-item[open] { background: var(--paper-100); }
.finished-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: background 0.15s;
}
.finished-item > summary::-webkit-details-marker { display: none; }
.finished-item > summary:hover { background: var(--paper-100); }
.finished-item__icon { color: var(--honey-700); font-size: 12px; flex-shrink: 0; }
.finished-item__slug {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--honey-800);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.finished-item__cat,
.finished-item__when {
  font-size: 11px;
  color: var(--ink-500);
  flex-shrink: 0;
}
.finished-item__when { margin-left: auto; }
.finished-item__body { padding: 4px 12px 12px; }
.finished-item__preview {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--paper-100);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
}

/* ============ SUGGEST CARD ============ */
.suggest-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, white 0%, var(--paper-100) 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.suggest-card__collapsed {
  width: 100%;
  text-align: left;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background 0.15s, transform 0.15s;
  background: transparent;
}
.suggest-card__collapsed:hover {
  background: var(--paper-100);
  transform: translateY(-1px);
}
.suggest-card__collapsed-l { min-width: 0; }
.suggest-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-800);
}
.suggest-card__title {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.suggest-card__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-500);
  max-width: 520px;
  line-height: 1.5;
}
.suggest-card__open-cta {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--honey-500);
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, transform 0.15s;
}
.suggest-card__collapsed:hover .suggest-card__open-cta {
  background: var(--honey-400);
  transform: translateX(2px);
}

.suggest-card__form { padding: 22px; }
.suggest-card__hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}
.suggest-card__hd h3 {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.suggest-card__close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--paper-200);
  color: var(--ink-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.suggest-card__close:hover { background: var(--paper-300); color: var(--ink-900); }

.source-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (min-width: 560px) { .source-types { grid-template-columns: repeat(3, 1fr); } }
.source-type {
  text-align: left;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-800);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-height: 48px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.source-type:hover { border-color: var(--line-strong); background: var(--paper-100); }
.source-type--on {
  border-color: var(--honey-500);
  background: #fff4cf;
  color: var(--honey-800);
  box-shadow: 0 0 0 1px var(--honey-500) inset;
}
.source-type__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.source-type__hint {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-500);
  line-height: 1.35;
}
.source-type--on .source-type__hint { color: var(--honey-800); opacity: 0.75; }

.field { display: block; margin-bottom: 14px; }
.field__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.field__label-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--honey-800);
}
.field__label-l .req { color: var(--red-600); margin-left: 2px; }
.field__help { font-size: 10px; color: var(--ink-500); text-align: right; }

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-900);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-400); opacity: 1; }
.field input:focus,
.field textarea:focus {
  border-color: var(--honey-500);
  box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.18);
}
.field textarea {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 110px;
}
.field input.captcha {
  width: 110px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.suggest-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 8px;
  background: var(--ink-900);
  color: var(--paper-50);
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  transition: background 0.15s, transform 0.15s;
}
.suggest-submit:not(:disabled):hover { background: var(--honey-500); color: var(--ink-900); transform: translateY(-1px); }
.suggest-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.suggest-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.suggest-card__note {
  font-size: 11px;
  color: var(--ink-500);
  font-style: italic;
}

.suggest-success {
  padding: 28px 22px;
  text-align: left;
}
.suggest-success__emoji { font-size: 40px; line-height: 1; }
.suggest-success h3 {
  margin: 12px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.025em;
}
.suggest-success p {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-800);
  line-height: 1.55;
}
.suggest-success__ref {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: white;
}
.suggest-success__ref-l {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--honey-800);
  font-weight: 700;
}
.suggest-success__ref-id {
  margin-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
}
.suggest-success__actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.suggest-success__btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: white;
  color: var(--honey-800);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s;
}
.suggest-success__btn:hover { background: var(--paper-100); }

/* ============ HELPER BEES STRIP ============ */
.helper-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #fff8e1 0%, #fff4cf 100%);
  border: 1px solid var(--line-strong);
}
.helper-strip__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.helper-strip__copy {
  flex: 1; min-width: 0;
  font-size: 14px;
  color: var(--ink-800);
  line-height: 1.4;
}
.helper-strip__copy strong { color: var(--honey-800); font-weight: 700; }
.helper-strip__copy .sep { color: var(--ink-400); margin: 0 4px; }
.helper-strip__btn {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 8px;
  background: rgba(245, 184, 0, 0.85);
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.helper-strip__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-500);
  font-style: italic;
  width: 100%;
}

/* ============ NICE THINGS BUTTON ============ */
.nice-row { display: flex; justify-content: center; padding-top: 4px; }
.nice-btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: white;
  color: var(--honey-800);
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, transform 0.15s;
}
.nice-btn:hover {
  background: var(--paper-100);
  transform: translateY(-1px);
}

/* ============ NICE THINGS MODAL ============ */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(42, 31, 14, 0.45);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 640px;
  margin: 32px auto;
  background: var(--paper-50);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: 0 24px 60px -12px rgba(74, 53, 5, 0.35);
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: var(--ink-700);
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}
.modal__close:hover { background: var(--paper-200); color: var(--ink-900); }
.modal__inner {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.modal__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-800);
}
.modal__sub { margin-top: 4px; font-size: 11px; color: var(--ink-500); font-style: italic; }
.cost-block {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-md);
  padding: 16px;
}
.cost-block__h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey-800);
}
.cost-block__sub { margin-top: 2px; font-size: 11px; color: var(--ink-500); font-style: italic; }
.cost-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cost-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
}
.cost-list li .l { color: var(--ink-800); }
.cost-list li .v { text-align: right; color: var(--honey-800); font-weight: 600; }
.cost-list li .v.ok { color: var(--emerald-700); }
.cost-list li .note {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--ink-500);
  font-style: italic;
  margin-top: -2px;
}
.byo-block {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-md);
  padding: 16px;
}
.byo-block p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-800);
  line-height: 1.55;
}
.byo-block p strong { color: var(--honey-800); font-weight: 700; }
.mission-block {
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, #fff4cf 0%, #ffe9a8 100%);
  border-radius: var(--r-md);
  padding: 16px;
}
.mission-block p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-800);
  line-height: 1.55;
}
.mission-block p strong { color: var(--honey-800); font-weight: 700; }
.mission-block__actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mission-block__btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, transform 0.15s;
}
.mission-block__btn--primary {
  background: var(--ink-900);
  color: var(--paper-50);
}
.mission-block__btn--primary:hover { background: var(--ink-800); transform: translateY(-1px); }
.mission-block__btn--ghost {
  background: white;
  border: 1px solid var(--line-strong);
  color: var(--honey-800);
}
.mission-block__btn--ghost:hover { background: var(--paper-100); }

/* ============ BOTTOM DONATE BAR (FIXED) ============ */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 250, 240, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 24px -12px rgba(74, 53, 5, 0.12);
}
.bottom-bar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
}
.bottom-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bottom-bar__icon { font-size: 22px; line-height: 1; }
.bottom-bar__copy {
  font-size: 13px;
  color: var(--ink-800);
  line-height: 1.35;
  min-width: 0;
}
.bottom-bar__copy strong { color: var(--ink-900); font-weight: 700; }
.bottom-bar__copy .sub { display: block; font-size: 11px; color: var(--ink-500); margin-top: 1px; }

.amt-row { display: flex; gap: 6px; }
.amt {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-800);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 36px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.amt:hover { border-color: var(--line-strong); }
.amt--on {
  background: var(--ink-900);
  color: var(--paper-50);
  border-color: var(--ink-900);
}
.amt--custom { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px 0 10px; }
.amt--custom input {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  width: 50px;
  outline: none;
  padding: 8px 4px;
}
.amt--custom.amt--on input { color: var(--paper-50); }
.amt--custom.amt--on input::placeholder { color: rgba(255, 250, 240, 0.6); }

.bottom-bar__give {
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--honey-500);
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
  min-height: 38px;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.bottom-bar__give:hover { background: var(--honey-400); transform: translateY(-1px); }

/* ============ MOBILE ============ */
@media (max-width: 720px) {
  body { padding-bottom: 188px; }
  .navbar__inner { padding: 12px 16px; }
  .page { padding: 20px 16px 24px; gap: 16px; }
  .donate-strip { padding: 12px 14px; }
  .donate-strip__copy { width: 100%; order: 2; }
  .donate-strip__btn { width: 100%; justify-content: center; order: 3; }
  .section { padding: 16px; }
  .suggest-card__collapsed { flex-direction: column; align-items: stretch; padding: 18px; }
  .suggest-card__open-cta { width: 100%; justify-content: center; }
  .suggest-card__form { padding: 18px; }

  .bottom-bar__inner {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px;
  }
  .bottom-bar__left .sub { display: none; }
  .amt-row { flex-wrap: wrap; }
  .amt { padding: 7px 12px; font-size: 12px; }
  .bottom-bar__give { width: 100%; }
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-100); }
::-webkit-scrollbar-thumb {
  background: var(--paper-300);
  border-radius: 8px;
  border: 2px solid var(--paper-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--honey-500); }
::selection { background: rgba(245, 184, 0, 0.3); color: var(--ink-900); }