/* ===================================================================
   fix-3 — design pass: LP flow, Rewards board, Free TLB fountain.
   Unlayered and loaded after ui-unify.css. Selectors are prefixed
   `html body` so they beat the layered hub.css component rules.
   Mobile keeps the compact density: visible sizes stay small, hit
   areas are extended invisibly (see LESSONS.md #14).
   =================================================================== */

/* ── shared bits ─────────────────────────────────────────────────── */
html body .lpx-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
}
html body .lpx-kicker {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
html body .lpx-count, html body .lpx-field-aside {
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em;
}
html body .lpx-notice {
  margin: 0.15rem 0 0.7rem; padding: 0.55rem 0.7rem; border-radius: 10px;
  font-size: 0.78rem; line-height: 1.45; color: rgba(242, 232, 220, 0.78);
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
}
html body .lpx-notice[data-tone="warn"] { background: rgba(232, 93, 4, 0.07); border-color: rgba(232, 93, 4, 0.26); color: var(--cream); }
html body .lpx-notice[hidden] { display: none; }

/* ── LP: page frame ──────────────────────────────────────────────── */
html body #pane-pool > .pool-shell.lpx { max-width: 520px; }
html body .lpx-head { margin: 0 0 0.9rem; }
html body .lpx-title {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--cream);
}
html body .lpx-sub { margin: 0.25rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); max-width: 46ch; }
html body .lpx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
html body .lpx-side { display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
html body .lpx-side > .lp-head { margin: 0; }
html body .lpx-side > .position-card { margin: 0; }
html body .pool-workspace { min-width: 0; }

@media (min-width: 1024px) {
  html body #pane-pool > .pool-shell.lpx { max-width: 980px; }
  html body .lpx-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 520px); justify-content: center; gap: 1.25rem; align-items: start; }
  html body .lpx-side { position: sticky; top: 5.25rem; }
  html body .lpx-head { max-width: calc(380px + 520px + 1.25rem); margin-inline: auto; }
}

/* ── LP: pool card (pair list + stats) ───────────────────────────── */
html body .lpx-card.lp-head { padding: 0.85rem 0.85rem 0.2rem; background: rgba(0, 0, 0, 0.28); }
html body .lpx-card .lpx-card-head { margin-bottom: 0.55rem; }
html body .lp-pair-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; margin: 0 0 0.7rem; }
html body .lp-pair {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem;
  width: 100%; padding: 0.55rem 0.65rem; margin: 0; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px;
  background: rgba(255, 255, 255, 0.02); box-shadow: none; color: var(--cream);
  transition: border-color 0.16s ease, background 0.16s ease;
}
html body .lp-pair:last-child { border-right: 1px solid rgba(255, 255, 255, 0.07); }
html body .lp-pair:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
html body .lp-pair.is-selected {
  background: linear-gradient(135deg, rgba(232, 93, 4, 0.13), rgba(232, 93, 4, 0.04));
  border-color: rgba(232, 93, 4, 0.55); box-shadow: none;
}
html body .lp-pair-marks img { width: 26px; height: 26px; border-width: 2px; }
html body .lp-pair-marks img + img { margin-left: -9px; }
html body .lp-pair-text { display: grid; gap: 0.18rem; min-width: 0; }
html body .lp-pair-name {
  display: flex; align-items: center; gap: 0.4rem; font-family: var(--display); font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.01em; line-height: 1.1; white-space: nowrap;
}
html body .lp-pair-sub { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .lp-pair-badge {
  font-family: var(--mono); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.1rem 0.35rem; border-radius: 999px; color: var(--orange-bright);
  background: rgba(232, 93, 4, 0.12); border: 1px solid rgba(232, 93, 4, 0.3);
}
html body .lp-pair-tvl { font-family: var(--mono); font-size: 0.76rem; color: rgba(242, 232, 220, 0.82); font-variant-numeric: tabular-nums; }
html body .lp-pair-tvl.is-empty-val { color: var(--muted); }
html body .lpx-card .pool-hero-stats { margin: 0 -0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* pair picker sheet (same chassis as the swap token picker) */
html body .lpx-pick-list { display: grid; gap: 0.4rem; }
html body .lpx-pick-list .lp-pair { padding: 0.7rem 0.75rem; }

/* ── LP: action card ─────────────────────────────────────────────── */
html body .pool-workspace .pool-tabs { margin-bottom: 0.75rem; }
html body #pane-pool .pool-widget .widget-head { margin-bottom: 0.75rem; }
html body .lpx-fields { display: grid; }
html body #pane-pool .token-box-premium > label { font-size: 0.78rem; color: var(--muted); }
html body #pane-pool .token-row { display: flex; align-items: center; gap: 0.6rem; }
html body #pane-pool .token-select.is-static { cursor: default; }
html body #pane-pool .token-select.is-static .token-select-caret { display: none; }
html body #pane-pool .token-select.is-static:hover { border-color: var(--border); }
html body #pane-pool button.token-select:disabled { opacity: 1; }
html body #pane-pool .token-select img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
html body #pane-pool .lpx-amount { text-align: right; font-size: 1.35rem; }
html body #pane-pool .token-foot { gap: 0.6rem; }
html body #pane-pool .token-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #pane-pool .pool-plus-divider { margin: -0.45rem 0; }
html body #pane-pool .pool-plus-divider span { width: 28px; height: 28px; border-radius: 9px; font-size: 0.95rem; }

/* summary */
html body #pane-pool .lpx-summary {
  margin: 0.75rem 0 0.7rem; padding: 0.7rem 0.8rem 0.6rem;
  background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255, 255, 255, 0.07);
}
html body #pane-pool .lpx-summary .liq-preview-row { padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html body #pane-pool .lpx-summary .liq-preview-row strong.is-empty-val { color: var(--muted); }
html body .lpx-rows { margin: 0.45rem 0 0; display: grid; gap: 0.32rem; }
html body .lpx-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
html body .lpx-rows dt { margin: 0; font-size: 0.78rem; color: var(--muted); }
html body .lpx-rows dd { margin: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--cream); font-variant-numeric: tabular-nums; text-align: right; }
html body .lpx-rows dd.is-empty-val { color: var(--muted); }
html body .lpx-rows--out { gap: 0.4rem; }
html body .lpx-rows--out dd { font-family: var(--display); font-weight: 600; font-size: 0.98rem; }
html body #pane-pool .lpx-summary .rate-line:empty { display: none; }
html body #pane-pool .lpx-summary .rate-line { margin-top: 0.4rem; font-size: 0.74rem; }
html body #pane-pool .lpx-summary.is-quoting :is(dd, strong) { opacity: 0.55; transition: opacity 0.2s; }
html body #rm-summary .liq-preview-label { display: block; }

/* remove: quick % chips */
html body .lpx-pct { display: flex; gap: 0.35rem; margin-top: 0.6rem; }
html body .lpx-pct button {
  flex: 1 1 0; padding: 0.32rem 0; border-radius: 999px; font-family: var(--mono); font-size: 0.74rem;
  color: rgba(242, 232, 220, 0.78); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09); cursor: pointer;
}
html body .lpx-pct button:hover:not(:disabled) { border-color: rgba(232, 93, 4, 0.45); color: var(--cream); }
html body .lpx-pct button.is-on { color: var(--orange-bright); border-color: rgba(232, 93, 4, 0.6); background: rgba(232, 93, 4, 0.1); }
html body .lpx-pct button:disabled { opacity: 0.4; cursor: not-allowed; }

/* lock: duration chips with the weight multiplier */
html body .lpx-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0.8rem 0 0.4rem; }
html body .lpx-field-head .pool-field-label { margin: 0; font-size: 0.7rem; }
html body .lpx-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
html body .lpx-term {
  display: grid; justify-items: center; gap: 0.05rem; padding: 0.38rem 0.2rem; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--cream);
}
html body .lpx-term:hover { border-color: rgba(232, 93, 4, 0.4); }
html body .lpx-term.is-on { border-color: rgba(232, 93, 4, 0.65); background: rgba(232, 93, 4, 0.11); }
html body .lpx-term-d { font-family: var(--display); font-weight: 650; font-size: 0.82rem; }
html body .lpx-term-m { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); }
html body .lpx-term.is-on .lpx-term-m { color: var(--orange-bright); }
html body .lpx-native-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
html body #lock-days-custom { margin-top: 0.45rem; }
html body #lock-days-custom[hidden] { display: none; }
html body #pane-pool .lock-calc-box { margin: 0.8rem 0 0.7rem; }

/* unlock card */
html body .lpx-unlock { margin-top: 0.75rem; }
html body .lpx-unlock .lpx-card-head { margin-bottom: 0.55rem; }
html body .lpx-unlock .terminal-title { margin: 0; font-size: 0.95rem; }
html body .lpx-unlock .pool-unlock-list { margin: 0 0 0.5rem; }
html body .lpx-unlock .pool-unlock-list p.empty { margin: 0; padding: 0.6rem 0; min-height: 0; font-size: 0.78rem; text-align: left; justify-content: flex-start; border: 0; background: none; }
html body .lpx-unlock .pool-unlock-list p.empty::before { display: none; }
html body .lpx-manual { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.5rem; }
html body .lpx-manual > summary { cursor: pointer; font-size: 0.78rem; color: var(--muted); list-style: none; padding: 0.15rem 0; }
html body .lpx-manual > summary::-webkit-details-marker { display: none; }
html body .lpx-manual > summary::after { content: " ▾"; opacity: 0.6; }
html body .lpx-manual[open] > summary::after { content: " ▴"; }
html body .lpx-manual-body { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
html body .lpx-manual-body .pool-input { flex: 1 1 auto; min-width: 0; margin: 0; }
html body .lpx-manual-body .btn-secondary { flex: none; margin: 0; }

/* ── LP: phones (compact density; hit areas extended invisibly) ──── */
@media (max-width: 720px) {
  html body .lpx-head { margin-bottom: 0.65rem; }
  html body .lpx-title { font-size: 1.12rem; }
  html body .lpx-sub { font-size: 12px; }
  html body .lpx-grid, html body .lpx-side { gap: 0.65rem; }
  html body .lpx-card.lp-head { padding: 0.65rem 0.65rem 0.1rem; }
  html body .lpx-card .pool-hero-stats { margin: 0 -0.65rem; }
  /* pools: one swipeable row of compact cards */
  html body .lp-pair-bar:not(.is-single) {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -0.65rem; padding: 0 0.65rem; scroll-padding-inline: 0.65rem;
  }
  html body .lp-pair-bar::-webkit-scrollbar { display: none; }
  html body .lp-pair-bar:not(.is-single) > .lp-pair { flex: 0 0 auto; width: auto; min-width: 9.5rem; grid-template-columns: auto auto; scroll-snap-align: start; }
  html body .lp-pair-bar:not(.is-single) > .lp-pair .lp-pair-tvl { display: none; }
  html body .lp-pair { padding: 0.45rem 0.55rem; gap: 0.5rem; border-radius: 10px; }
  html body .lp-pair-marks img { width: 22px; height: 22px; }
  html body .lp-pair-marks img + img { margin-left: -8px; }
  html body .lp-pair-name { font-size: 12px; }
  html body .lp-pair-sub, html body .lp-pair-tvl { font-size: 10.5px; }
  html body .lp-pair-badge { font-size: 9.5px; padding: 0.05rem 0.3rem; }
  html body .lpx-kicker, html body .lpx-count, html body .lpx-field-aside { font-size: 10.5px; }
  html body .lpx-notice { font-size: 12px; padding: 0.5rem 0.6rem; }
  html body .lpx-rows dt { font-size: 11px; }
  html body .lpx-rows dd { font-size: 11.5px; }
  html body .lpx-pct button { font-size: 11px; padding: 0.28rem 0; }
  html body .lpx-term { padding: 0.32rem 0.15rem; border-radius: 9px; }
  html body .lpx-term-d { font-size: 12px; }
  html body .lpx-term-m { font-size: 10.5px; }
  html body #pane-pool .lpx-amount { font-size: 1.2rem; }
  html body #pane-pool .token-select { font-size: 0.92rem; }
  html body .lpx-unlock .pool-unlock-list p.empty, html body .lpx-manual > summary { font-size: 12px; }
  /* invisible 44px hit areas */
  :where(html body) :where(.lp-pair, .lpx-pct button, .lpx-term, .lpx-manual > summary, #add-token-1) { position: relative; }
  html body :is(.lpx-pct button, .lpx-term, #add-token-1)::after,
  html body .lpx-manual > summary::before {
    content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)) min(0px, calc((100% - 44px) / 2));
  }
  html body .lpx-pct button::after, html body .lpx-term::after { inset-inline: -0.15rem; }
  html body .lpx-manual > summary::after { position: static; }
}
@media (max-width: 374px) {
  html body .lpx-terms { gap: 0.28rem; }
  html body .lpx-term-d { font-size: 11.5px; }
}

/* position card matches the pool card */
html body .lpx-side > .position-card {
  padding: 0.8rem 0.85rem; border-radius: 16px; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: none;
}
html body .lpx-side > .position-card .terminal-title { margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; }
html body .lpx-side > .position-card .pool-position-kicker { margin: 0; font-family: var(--mono); font-size: 0.7rem; }
html body .lpx-side > .position-card .position-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.6rem; text-align: left; }
html body .lpx-side > .position-card:not(.is-rewards-pool) .position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .lpx-side > .position-card .val { font-family: var(--display); font-weight: 650; font-size: 1rem; color: var(--cream); }
html body .lpx-side > .position-card .lbl { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; }
/* the % row already has MAX; the legacy MAX hook stays in the DOM */
html body #pane-pool #btn-max-lp { display: none; }
html body #pane-pool .token-amount:focus-visible { outline: none; box-shadow: none; }

@media (max-width: 720px) {
  html body .lpx-side > .position-card { padding: 0.6rem 0.65rem; border-radius: 14px; }
  html body .lpx-side > .position-card .val { font-size: 0.92rem; }
  html body .lpx-side > .position-card .lbl, html body .lpx-side > .position-card .terminal-title,
  html body .lpx-side > .position-card .pool-position-kicker { font-size: 10.5px; }
  /* stats: one row of four on phones */
  html body .lpx-card .pool-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body .lpx-card .pool-stat-tile { padding: 0.5rem 0.45rem 0.55rem; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
  html body .lpx-card .pool-stat-tile:last-child { box-shadow: none; }
  html body .lpx-card .pool-stat-tile span { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .lpx-card .pool-stat-tile strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}

/* #18 ring moves from the bare input to its whole token box */
html body #pane-pool .token-box .token-amount:focus-visible { outline: none !important; box-shadow: none !important; }
/* text inputs match :focus-visible on tap too — the box's own focus-within border is the indicator */
@media (max-width: 720px) {
  html body .lpx-card .pool-stat-tile span { white-space: normal; line-height: 1.15; overflow: visible; }
  html body .lpx-card .pool-hero-stats { align-items: end; }
}
/* phones ≤400 signed in: wordmark yields to the session chip (icon stays) */
@media (max-width: 400px) {
  html body .header:has(#wallet-session:not(.hidden)) .logo-text { display: none; }
}
html body .lpx-grid { align-items: start; }

/* ===================================================================
   fix-3 · Rewards — claim hero + live period on top, periods/locks,
   history + always-visible "How rewards work". Two stacked columns on
   desktop (cards never stretch into voids); one ordered stack on phones.
   =================================================================== */
html body #pane-rewards .rwx { max-width: 1120px; }
html body #pane-rewards .rwx-sub { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); max-width: 60ch; }
html body #pane-rewards .rwx-grid { display: flex; flex-direction: column; gap: 12px; }
html body #pane-rewards .rwx-col { display: contents; }
html body #pane-rewards #rewards-widget { order: 1; }
html body #pane-rewards #rw-live-panel { order: 2; }
html body #pane-rewards #rw-locks-panel { order: 3; }
html body #pane-rewards #rw-period-panel { order: 4; }
html body #pane-rewards #rw-history-panel { order: 5; }
html body #pane-rewards #rw-how-panel { order: 6; }

html body #pane-rewards .rwx-card {
  padding: 14px 16px; border-radius: 16px; background: var(--glass-bg);
  border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  min-width: 0;
}
html body #pane-rewards .rwx-card .lpx-card-head { margin-bottom: 10px; }
html body #pane-rewards .rwx-card .lpx-card-head h3 { margin: 0; }
html body #pane-rewards .rwx-card .rw-panel-desc { margin-top: -4px; }

/* claim hero */
html body #pane-rewards #rewards-widget { padding: 18px; }
html body #pane-rewards .rwx-meter { margin-top: 14px; }
html body #pane-rewards .rwx-meter[hidden] { display: none; }
html body #pane-rewards .rwx-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
html body #pane-rewards .rwx-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--orange-bright, #ff8a3d)); transition: width 0.4s ease; }
html body #pane-rewards .rwx-meter-legend { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
html body #pane-rewards .rwx-meter-legend .is-claimable { color: var(--orange-bright, #ff8a3d); }
html body #pane-rewards .rwx-meter-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; background: rgba(255, 255, 255, 0.16); vertical-align: 0; }
html body #pane-rewards .rwx-meter-legend .is-claimable::before { background: var(--orange); }
html body #pane-rewards #rewards-widget .rw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 14px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; background: rgba(0, 0, 0, 0.24); }
html body #pane-rewards #rewards-widget .rw-stats > div { background: none; border: 0; border-radius: 0; padding: 10px 12px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); min-width: 0; }
html body #pane-rewards #rewards-widget .rw-stats > div:last-child { box-shadow: none; }
html body #pane-rewards #rewards-widget .rw-stats dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* live period */
html body #pane-rewards .rwx-live .rw-chip { margin-left: auto; }
html body #pane-rewards .rwx-live-top { display: flex; flex-direction: column; gap: 2px; }
html body #pane-rewards .rwx-live-id { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; }
html body #pane-rewards .rwx-live-big { font-family: var(--display); font-size: 1.5rem; font-weight: 650; color: var(--cream); line-height: 1.15; }
html body #pane-rewards .rwx-live-bar { margin-top: 12px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
html body #pane-rewards .rwx-live-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--green, #5a9a6e); }
html body #pane-rewards .rwx-live-dist { margin: 6px 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
html body #pane-rewards .rwx-live-rows { margin-top: 10px; }
html body #pane-rewards .rwx-live .rewards-emissions-est { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(232, 93, 4, 0.08); border: 1px solid rgba(232, 93, 4, 0.22); font-size: 0.78rem; color: var(--cream); }
html body #pane-rewards .rwx-live .rewards-emissions-est[hidden] { display: none; }
html body #pane-rewards .rwx-live-empty strong { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 650; color: var(--cream); }
html body #pane-rewards .rwx-live-empty p { margin: 4px 0 12px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
html body #pane-rewards .rwx-live-cta { width: auto; min-height: 36px; padding: 0 14px; }

/* periods */
html body #pane-rewards .rwx-stream { padding: 12px; border-radius: 12px; }
html body #pane-rewards .rwx-stream .rewards-stream-head strong { font-family: var(--display); font-size: 0.9rem; }
html body #pane-rewards .rwx-stream-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
html body #pane-rewards .rwx-stream-stats dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
html body #pane-rewards .rwx-stream-stats dd { margin: 3px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--cream); font-variant-numeric: tabular-nums; }
html body #pane-rewards .rwx-stream-stats .is-claimable dd { color: var(--orange-bright, #ff8a3d); }
html body #pane-rewards .rwx-stream-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.74rem; color: var(--muted); }

/* locks */
html body #pane-rewards .rwx-link { background: none; border: 0; padding: 0; margin-left: auto; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--orange-bright, #ff8a3d); cursor: pointer; position: relative; }
html body #pane-rewards .rwx-link::after { content: ""; position: absolute; inset: -12px -8px; }
html body #pane-rewards .rwx-link:hover { text-decoration: underline; }
html body #pane-rewards .rwx-lock { padding: 12px; border-radius: 12px; }
html body #pane-rewards .rwx-lock-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 10px 0 0; }
html body #pane-rewards .rwx-lock-meta dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
html body #pane-rewards .rwx-lock-meta dd { margin: 2px 0 0; font-size: 0.82rem; color: var(--cream); font-variant-numeric: tabular-nums; }

/* how it works */
html body #pane-rewards .rwx-steps { list-style: none; counter-reset: rwx; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
html body #pane-rewards .rwx-steps > li { counter-increment: rwx; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
html body #pane-rewards .rwx-steps > li::before { content: counter(rwx); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.75rem; color: var(--orange-bright, #ff8a3d); background: rgba(232, 93, 4, 0.1); border: 1px solid rgba(232, 93, 4, 0.3); }
html body #pane-rewards .rwx-steps p { margin: 2px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
html body #pane-rewards .rwx-steps strong { color: var(--cream); }
html body #pane-rewards .rwx-facts { margin: 12px 0 0; padding: 10px 0 0 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 4px; }
html body #pane-rewards .rwx-facts li { font-size: 0.76rem; line-height: 1.45; color: var(--muted); }
html body #pane-rewards .rwx-calc { margin-top: 12px; padding: 0; border: 0; background: none; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; }
html body #pane-rewards .rwx-calc > summary { padding: 12px 0 2px; }

@media (min-width: 900px) {
  html body #pane-rewards .rwx-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
  html body #pane-rewards .rwx-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  html body #pane-rewards .rwx-card { padding: 18px 20px; }
  html body #pane-rewards #rewards-widget { padding: 22px; }
  html body #pane-rewards .rwx-col > * { grid-row: auto !important; grid-column: auto !important; }
}
@media (max-width: 899px) {
  html body #pane-rewards #rewards-widget .rw-claim-row { gap: 10px; }
}
@media (max-width: 720px) {
  html body #pane-rewards .rwx-card { padding: 12px 13px; border-radius: 14px; }
  html body #pane-rewards #rewards-widget { padding: 14px; }
  html body #pane-rewards #rewards-widget .rw-stats > div { padding: 8px 8px; }
  html body #pane-rewards #rewards-widget .rw-stats dt { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body #pane-rewards #rewards-widget .rw-stats dd { font-size: 12px; }
  html body #pane-rewards .rwx-live-big { font-size: 1.2rem; }
  html body #pane-rewards :is(.rwx-stream-stats, .rwx-lock-meta) dt,
  html body #pane-rewards .rwx-meter-legend { font-size: 10.5px; }
  html body #pane-rewards .rwx-stream-stats dd { font-size: 13px; }
  html body #pane-rewards :is(.rwx-sub, .rwx-steps p, .rwx-facts li, .rwx-stream-foot, .rwx-live-empty p) { font-size: 12px; }
}
@media (max-width: 480px) {
  html body #pane-rewards #rewards-widget .rw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #pane-rewards #rewards-widget .rw-stats > div:nth-child(2) { box-shadow: none; }
  html body #pane-rewards #rewards-widget .rw-stats > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
}
html body #pane-rewards .rwx-live .epoch-earnings-main { display: block; font-weight: 600; color: var(--cream); }
html body #pane-rewards .rwx-live .indicative-apy-disclaimer { display: block; margin-top: 4px; font-size: 0.68rem; line-height: 1.4; color: var(--muted); }
html body #pane-rewards #rw-how-panel .lpx-card-head h3 { font-family: var(--display); font-size: 0.9rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--cream); }
@media (max-width: 720px) { html body #pane-rewards #rewards-widget > .lpx-card-head { display: none; } }

/* ===================================================================
   fix-3 · Free TLB — always reachable; designed off / connect / eligible
   / cooldown / cap / empty states; claim card leads, pool + recent beside.
   =================================================================== */
html body .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body #pane-fountain .fountain-shell { max-width: 1120px; gap: 14px; }
html body #pane-fountain .fx-head { text-align: left; margin: 0; padding: 0; }
html body #pane-fountain .fx-head .rewards-title { margin: 2px 0 0; font-size: 1.35rem; }
html body #pane-fountain .fx-head .fountain-lead { margin: 4px 0 0; max-width: 62ch; text-align: left; font-size: 0.8rem; }
html body #pane-fountain .fx-card {
  padding: 16px 18px; border-radius: 16px; background: var(--glass-bg);
  border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset; min-width: 0; margin: 0;
}
html body #pane-fountain .fx-card::before, html body #pane-fountain .fx-card::after { display: none; }
html body #pane-fountain .fx-card .lpx-card-head { margin-bottom: 10px; }
html body #pane-fountain .fx-card h3 { margin: 0; font-family: var(--display); font-size: 0.9rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--cream); }
html body #pane-fountain .fx-desc { margin: -4px 0 10px; font-size: 0.76rem; line-height: 1.45; color: var(--muted); }

/* chips */
html body #pane-fountain .fx-chip { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); line-height: 1; white-space: nowrap; }
html body #pane-fountain .fx-chip[hidden] { display: none; }
html body #pane-fountain .fx-chip:is([data-state="eligible"], [data-state="ok"]) { color: var(--green, #5a9a6e); border-color: rgba(90, 154, 110, 0.45); background: rgba(90, 154, 110, 0.1); }
html body #pane-fountain .fx-chip:is([data-state="cooldown"], [data-state="connect"]) { color: var(--orange-bright, #ff8a3d); border-color: rgba(232, 93, 4, 0.4); background: rgba(232, 93, 4, 0.08); }
html body #pane-fountain .fx-chip:is([data-state="full"], [data-state="empty"], [data-state="limited"]) { color: #e0b25a; border-color: rgba(224, 178, 90, 0.4); background: rgba(224, 178, 90, 0.08); }

/* layout */
html body #pane-fountain .fx-layout { display: flex; flex-direction: column; gap: 12px; }
html body #pane-fountain .fx-col { display: contents; }
html body #pane-fountain #fountain-claim-card { order: 1; }
html body #pane-fountain #fountain-pool-card { order: 2; }
html body #pane-fountain .fountain-recent-card { order: 3; }
html body #pane-fountain .fountain-schedule-card { order: 4; }
html body #pane-fountain #fountain-donate-card { order: 5; }
@media (min-width: 900px) {
  html body #pane-fountain .fountain-dual-grid.single-col .fx-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
  html body #pane-fountain .fountain-dual-grid.single-col .fx-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  html body #pane-fountain .fx-card { padding: 18px 20px; }
}

/* claim card */
html body #pane-fountain .fx-claim.is-ready { border-color: rgba(232, 93, 4, 0.35); box-shadow: 0 0 0 1px rgba(232, 93, 4, 0.08) inset, 0 12px 28px -18px rgba(232, 93, 4, 0.35); }
html body #pane-fountain .fx-label { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
html body #pane-fountain .fx-amt { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
html body #pane-fountain .fx-amt strong { font-family: var(--display); font-size: 2.5rem; font-weight: 650; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
html body #pane-fountain .fx-claim.is-ready .fx-amt strong { color: var(--orange); }
html body #pane-fountain .fx-amt strong.is-empty-val { font-size: 1.6rem; }
html body #pane-fountain .fx-amt span { font-size: 0.8rem; color: var(--muted); }
html body #pane-fountain .fx-sub { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
html body #pane-fountain .fx-cooldown { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(232, 93, 4, 0.07); border: 1px solid rgba(232, 93, 4, 0.22); }
html body #pane-fountain .fx-cooldown[hidden] { display: none; }
html body #pane-fountain .fx-cooldown-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.76rem; color: var(--muted); }
html body #pane-fountain .fx-cooldown-top strong { font-family: var(--mono); font-size: 1rem; color: var(--cream); font-variant-numeric: tabular-nums; }
html body #pane-fountain .fx-bar { margin-top: 8px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
html body #pane-fountain .fx-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--orange-bright, #ff8a3d)); transition: width 0.6s linear; }
html body #pane-fountain .fx-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
html body #pane-fountain .fx-checks:empty { display: none; }
html body #pane-fountain .fx-checks li { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--muted); min-width: 0; }
html body #pane-fountain .fx-check-ico { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); position: relative; }
html body #pane-fountain .fx-checks li.is-ok { color: var(--cream); }
html body #pane-fountain .fx-checks li.is-ok .fx-check-ico { background: rgba(90, 154, 110, 0.18); border-color: rgba(90, 154, 110, 0.6); }
html body #pane-fountain .fx-checks li.is-ok .fx-check-ico::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--green, #5a9a6e); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
html body #pane-fountain .fx-checks li.is-no .fx-check-ico { background: rgba(232, 93, 4, 0.12); border-color: rgba(232, 93, 4, 0.55); }
html body #pane-fountain .fx-checks li.is-no .fx-check-ico::after { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 1.6px; background: var(--orange-bright, #ff8a3d); }
html body #pane-fountain .fx-checks li.is-unknown { opacity: 0.7; }
html body #pane-fountain .fx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; background: rgba(0, 0, 0, 0.24); }
html body #pane-fountain .fx-stats > div { padding: 9px 12px; }
html body #pane-fountain .fx-stats > div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06); }
html body #pane-fountain .fx-stats dt { font-size: 0.7rem; color: var(--muted); }
html body #pane-fountain .fx-stats dd { margin: 3px 0 0; font-weight: 600; font-size: 0.86rem; color: var(--cream); font-variant-numeric: tabular-nums; }
html body #pane-fountain .fx-claim-btn { width: 100%; min-height: 46px; margin: 14px 0 0; border-radius: 12px; font-family: var(--display); font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: 0; }
html body #pane-fountain .fx-hint { margin: 8px 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--muted); text-align: left; }
html body #pane-fountain #fountain-msg:empty { display: none; }
html body #pane-fountain .fx-last { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.76rem; flex-wrap: wrap; }
html body #pane-fountain .fx-last[hidden] { display: none; }
html body #pane-fountain .fx-last-k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
html body #pane-fountain .fx-last-v { display: flex; align-items: center; gap: 8px; color: var(--muted); }
html body #pane-fountain .fx-last-v strong { color: var(--cream); }
html body #pane-fountain .fx-last-v em { font-style: normal; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* pool */
html body #pane-fountain .fx-pool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
html body #pane-fountain .fx-pool-grid > div { min-width: 0; }
html body #pane-fountain .fx-pool-grid span { display: block; font-size: 0.7rem; color: var(--muted); }
html body #pane-fountain .fx-pool-grid strong { display: block; margin-top: 3px; font-size: 0.84rem; font-weight: 600; color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #pane-fountain .fx-pool-main { grid-column: 1 / -1; }
html body #pane-fountain .fx-pool-main strong { font-family: var(--display); font-size: 1.5rem; }
html body #pane-fountain .fx-day-bar > span { background: var(--green, #5a9a6e); }

/* recent */
html body #pane-fountain .fx-recent { display: flex; flex-direction: column; gap: 0; }
html body #pane-fountain .fx-recent .fountain-recent-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); background: none; border-radius: 0; margin: 0; }
html body #pane-fountain .fx-recent .fountain-recent-row:first-child { border-top: 0; padding-top: 0; }
html body #pane-fountain .fx-recent .fountain-recent-row > div:first-child { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
html body #pane-fountain .fx-recent .fountain-recent-row strong { font-family: var(--mono); font-size: 0.76rem; font-weight: 500; color: var(--cream); }
html body #pane-fountain .fx-recent .fountain-recent-row span { font-size: 0.76rem; color: var(--orange-bright, #ff8a3d); }
html body #pane-fountain .fx-recent .fountain-recent-time { font-size: 0.72rem; }

/* schedule — a tidy grid on desktop, a swipe strip on phones (only the strip scrolls) */
html body #pane-fountain .fx-schedule { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: none; overflow: visible; }
html body #pane-fountain .fx-schedule .fountain-schedule-item { position: relative; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 3px; margin: 0; }
html body #pane-fountain .fx-schedule .fountain-schedule-item.active { border-color: rgba(232, 93, 4, 0.5); background: linear-gradient(180deg, rgba(232, 93, 4, 0.12), rgba(0, 0, 0, 0.2)); }
html body #pane-fountain .fx-schedule .fountain-sched-month { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
html body #pane-fountain .fx-schedule strong { font-size: 0.82rem; color: var(--cream); }
html body #pane-fountain .fx-schedule .fountain-sched-cap { font-size: 0.68rem; line-height: 1.35; color: var(--muted); margin: 0; }
html body #pane-fountain .fx-schedule .fountain-sched-badge { position: absolute; top: 9px; right: 10px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-bright, #ff8a3d); }

/* off state */
html body #pane-fountain .fx-off { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; padding: 22px; }
html body #pane-fountain .fx-off.hidden { display: none; }
html body #pane-fountain .fx-off-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--orange-bright, #ff8a3d); background: rgba(232, 93, 4, 0.1); border: 1px solid rgba(232, 93, 4, 0.3); }
html body #pane-fountain .fx-off-text .fx-chip { display: inline-block; margin: 0 0 8px; }
html body #pane-fountain .fx-off-text h3 { font-size: 1.05rem; }
html body #pane-fountain .fx-off-text p { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--muted); max-width: 64ch; }
html body #pane-fountain .fx-steps { grid-column: 1 / -1; list-style: none; counter-reset: fx; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body #pane-fountain .fx-steps li { counter-increment: fx; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 4px; }
html body #pane-fountain .fx-steps li::before { content: counter(fx); font-family: var(--mono); font-size: 0.7rem; color: var(--orange-bright, #ff8a3d); }
html body #pane-fountain .fx-steps strong { font-size: 0.84rem; color: var(--cream); }
html body #pane-fountain .fx-steps span { font-size: 0.74rem; line-height: 1.45; color: var(--muted); }
html body .fountain-dual-grid.hidden { display: none; }

/* nav: an offline fountain reads quieter, but is still there */
html body .nav-btn-fountain.is-offline .nav-faucet-badge { opacity: 0.45; filter: grayscale(1); animation: none; }

@media (max-width: 720px) {
  html body #pane-fountain .fx-card { padding: 12px 13px; border-radius: 14px; }
  html body #pane-fountain .fx-head .rewards-title { font-size: 1.15rem; }
  html body #pane-fountain .fx-amt strong { font-size: 2rem; }
  html body #pane-fountain .fx-checks { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  html body #pane-fountain :is(.fx-checks li, .fx-hint, .fx-desc, .fx-sub, .fx-steps span, .fx-off-text p, .fx-head .fountain-lead) { font-size: 12px; }
  html body #pane-fountain :is(.fx-label, .fx-last-k, .fx-stats dt, .fx-pool-grid span, .fx-chip, .fx-schedule .fountain-sched-month) { font-size: 10.5px; }
  html body #pane-fountain .fx-pool-main strong { font-size: 1.25rem; }
  html body #pane-fountain .fx-schedule { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -13px; padding-inline: 13px; scroll-padding-inline: 13px; overscroll-behavior-x: contain; }
  html body #pane-fountain .fx-schedule::-webkit-scrollbar { display: none; }
  html body #pane-fountain .fx-schedule .fountain-schedule-item { flex: 0 0 62%; scroll-snap-align: start; }
  html body #pane-fountain .fx-schedule .fountain-sched-cap { font-size: 11px; }
  html body #pane-fountain .fx-off { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  html body #pane-fountain .fx-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html body #pane-fountain .fx-steps li { padding: 9px 11px; }
}

/* Desktop nav density: with Free TLB always listed, the pill nav must still fit at 1440
   (connected: 9 entries). Steps tighten padding/tracking before anything clips. */
@media (min-width: 721px) and (max-width: 1599.98px) {
  html body .header .nav { column-gap: 4px; gap: 4px; }
  html body .header .nav > :is(button, a) { padding-inline: 11px; letter-spacing: 0.02em; }
}
@media (min-width: 721px) and (max-width: 1439.98px) {
  html body .header .nav > :is(button, a) { padding-inline: 9px; font-size: 13px; }
}
/* More sheet: the faucet mark sits beside its label, not mid-row */
html body .more-nav-item .nav-faucet-badge--inline { margin-left: 8px; margin-right: auto; }
html body #pane-fountain .fx-head .rewards-kicker { display: none; }
html body #pane-fountain .fx-head .rewards-title { font-family: var(--display); font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--cream); }
/* badge sits in the pill's top-right corner — give the label room so they never touch */
@media (min-width: 721px) and (max-width: 1599.98px) {
  html body .header .nav > .nav-btn-fountain { padding-right: 17px; }
  html body .header .nav > :is(button, a):not(.nav-btn-fountain) { padding-inline: 10px; }
}
@media (min-width: 721px) and (max-width: 1439.98px) {
  html body .header .nav > :is(button, a):not(.nav-btn-fountain) { padding-inline: 8.5px; }
}
/* cooling down: the live timer replaces the "Next claim" cell */
html body #pane-fountain .fx-claim:has(.fx-cooldown:not([hidden])) .fx-stats { grid-template-columns: minmax(0, 1fr); }
html body #pane-fountain .fx-claim:has(.fx-cooldown:not([hidden])) .fx-stats > div:first-child { display: none; }
html body #pane-fountain .fx-claim:has(.fx-cooldown:not([hidden])) .fx-stats > div + div { box-shadow: none; }
html body #pane-fountain .fx-pool-grid { align-items: end; }
@media (max-width: 720px) {
  html body #pane-fountain .fx-pool-grid span { line-height: 1.2; }
  html body #pane-fountain .fx-off-icon { display: none; }
  html body #pane-fountain .fx-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; }
  html body #pane-fountain .fx-steps li::before { grid-row: 1 / span 2; padding-top: 1px; }
}

/* ===================================================================
   fix-4 · Free TLB with both programs: Daily claim / Ordinal holders
   switch; Pool 2 (collection holder rewards) restyled to the fx cards;
   long recent-claim lists clamp to 6 with Show all.
   =================================================================== */
html body #pane-fountain .fx-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.07); align-self: flex-start; }
html body #pane-fountain .fx-seg.hidden { display: none; }
html body #pane-fountain .fx-seg-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
html body #pane-fountain .fx-seg-btn:hover { color: var(--cream); }
html body #pane-fountain .fx-seg-btn.active { color: var(--cream); background: linear-gradient(180deg, rgba(232, 93, 4, 0.28), rgba(232, 93, 4, 0.14)); box-shadow: inset 0 0 0 1px rgba(232, 93, 4, 0.45); }
html body #pane-fountain .fx-seg-badge { font-size: 0.62rem; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px; color: #0b0b0b; background: var(--green, #5a9a6e); text-transform: none; }
html body #pane-fountain .fx-seg-badge[hidden] { display: none; }
html body #pane-fountain .fountain-dual-grid.fx-both { grid-template-columns: minmax(0, 1fr); }
html body #pane-fountain .fountain-dual-grid.fx-both.fx-show-community > #fountain-col-holder,
html body #pane-fountain .fountain-dual-grid.fx-both.fx-show-holders > #fountain-col-community { display: none; }
@media (min-width: 900px) {
  html body #pane-fountain .fountain-dual-grid.fx-both .fx-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
  html body #pane-fountain .fountain-dual-grid.fx-both .fx-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}

/* recent lists clamp */
html body #pane-fountain .fx-clamped > .fountain-recent-row:nth-child(n+7) { display: none !important; }
html body #pane-fountain .fx-more { display: block; width: 100%; margin-top: 8px; min-height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; cursor: pointer; }
html body #pane-fountain .fx-more:hover { color: var(--cream); border-color: rgba(232, 93, 4, 0.35); }

/* Pool 2 shell → fx card */
html body #pane-fountain #holder-pool-shell { padding: 18px 20px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset; overflow: visible; }
html body #pane-fountain #holder-pool-shell .holder-pool-glow { display: none; }
html body #pane-fountain #holder-pool-shell::before, html body #pane-fountain #holder-pool-shell::after { display: none; }
html body #pane-fountain .holder-pool-head { margin-bottom: 12px; gap: 12px; }
html body #pane-fountain .holder-pool-head .rewards-kicker { margin: 0 0 4px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
html body #pane-fountain .holder-pool-title-row { gap: 8px; align-items: center; }
html body #pane-fountain .holder-pool-title-row h3 { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--cream); }
html body #pane-fountain .holder-info-btn { position: relative; width: 28px; height: 28px; color: var(--muted); }
html body #pane-fountain .holder-info-btn::after { content: ""; position: absolute; inset: -8px; }
html body #pane-fountain .holder-pool-lead { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); max-width: 62ch; text-align: left; }
html body #pane-fountain #btn-holder-pool-rescan { min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 0.74rem; white-space: nowrap; }
html body #pane-fountain .holder-pool-shared-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; background: rgba(0, 0, 0, 0.24); }
html body #pane-fountain .holder-pool-stat { padding: 10px 12px; background: none; border: 0; border-radius: 0; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); min-width: 0; }
html body #pane-fountain .holder-pool-stat:last-child { box-shadow: none; }
html body #pane-fountain .holder-pool-stat span { display: block; font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #pane-fountain .holder-pool-stat strong { display: block; margin-top: 3px; font-size: 0.9rem; font-weight: 600; color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #pane-fountain .holder-pool-addr-block { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
html body #pane-fountain .holder-pool-addr-block.hidden { display: none; }
html body #pane-fountain .holder-pool-addr-block .fountain-addr-label { flex: 0 0 auto; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
html body #pane-fountain #holder-pool-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: var(--cream); user-select: all; }
html body #pane-fountain .holder-pool-panels { margin-top: 14px; gap: 12px; }
html body #pane-fountain .holder-coll-panel { padding: 12px 14px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: none; position: relative; }
html body #pane-fountain .holder-coll-panel::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fx-acc, var(--orange)); }
html body #pane-fountain .holder-coll-panel.accent-violet { --fx-acc: #9b7bff; }
html body #pane-fountain .holder-coll-panel.accent-cyan { --fx-acc: #5fd3f0; }
html body #pane-fountain .holder-coll-panel.accent-lime { --fx-acc: #a6d65a; }
html body #pane-fountain .holder-coll-panel-head { align-items: flex-start; gap: 10px; margin-bottom: 10px; }
html body #pane-fountain .holder-coll-panel-head h4 { margin: 0; font-family: var(--display); font-size: 0.95rem; font-weight: 650; color: var(--cream); }
html body #pane-fountain .holder-coll-sub { margin: 3px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--muted); text-align: left; }
html body #pane-fountain .holder-coll-stats { flex-direction: row; gap: 6px; flex-wrap: nowrap; }
html body #pane-fountain .holder-coll-stats span { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.74rem; color: var(--cream); white-space: nowrap; }
html body #pane-fountain .holder-coll-stats em { font-style: normal; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
html body #pane-fountain .pixel-cats-claim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
html body #pane-fountain .pixel-cat-claim-card { border-radius: 12px; background: rgba(0, 0, 0, 0.28); border-color: rgba(255, 255, 255, 0.07); box-shadow: none; }
html body #pane-fountain .pixel-cat-claim-card.can-claim { border-color: rgba(90, 154, 110, 0.5); }
html body #pane-fountain .pixel-cat-thumb-wrap { aspect-ratio: 1 / 1; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
html body #pane-fountain .pixel-cat-thumb { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
html body #pane-fountain .pixel-cat-claim-body { padding: 8px 10px 10px; gap: 4px; }
html body #pane-fountain .pixel-cat-name { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #pane-fountain .pixel-cat-claim-amt { font-size: 0.9rem; font-weight: 650; color: var(--orange-bright, #ff8a3d); font-variant-numeric: tabular-nums; }
html body #pane-fountain .pixel-cat-claim-status { font-size: 0.7rem; min-height: 0; color: var(--muted); }
html body #pane-fountain .pixel-cat-claim-card.can-claim .pixel-cat-claim-status { color: var(--green, #5a9a6e); }
html body #pane-fountain .pixel-cat-claim-btn { margin-top: 4px; min-height: 34px; padding: 0 8px; border-radius: 9px; font-family: var(--display); font-size: 0.8rem; font-weight: 650; text-transform: none; letter-spacing: 0; }
html body #pane-fountain .pixel-cat-claim-btn:disabled { background: rgba(255, 255, 255, 0.06); color: var(--muted); box-shadow: none; }
html body #pane-fountain .pixel-cats-empty { padding: 14px 6px; font-size: 0.78rem; text-align: left; }
html body #pane-fountain .holder-pool-hint { margin: 12px 0 0; font-size: 0.7rem; color: var(--muted); text-align: left; }
html body #pane-fountain .holder-recent-card { margin-top: 14px; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; background: none; box-shadow: none; }
html body #pane-fountain .holder-recent-card h4 { margin: 0 0 8px; font-family: var(--display); font-size: 0.85rem; font-weight: 650; color: var(--cream); text-transform: none; letter-spacing: 0; }
html body #pane-fountain #holder-pool-recent-list .fountain-recent-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); background: none; border-radius: 0; margin: 0; }
html body #pane-fountain #holder-pool-recent-list .fountain-recent-row:first-child { border-top: 0; padding-top: 0; }
html body #pane-fountain #holder-pool-recent-list .fountain-recent-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body #pane-fountain #holder-pool-recent-list .fountain-recent-main > div:first-child { display: flex; gap: 10px; align-items: baseline; }
html body #pane-fountain #holder-pool-recent-list strong { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: var(--cream); }
html body #pane-fountain #holder-pool-recent-list .fountain-recent-main > div:first-child span { font-size: 0.74rem; color: var(--orange-bright, #ff8a3d); }
html body #pane-fountain #holder-pool-recent-list .fountain-recent-meta { gap: 6px; font-size: 0.68rem; color: var(--muted); }
html body #pane-fountain #holder-pool-recent-list .fountain-recent-time { font-size: 0.7rem; flex-shrink: 0; color: var(--muted); }

/* holder ordinals portfolio (Portfolio tab) gets the same thumb treatment */
html body #pane-portfolio .pixel-cat-thumb { image-rendering: pixelated; }

@media (max-width: 720px) {
  html body #pane-fountain .fx-seg { display: flex; width: 100%; }
  html body #pane-fountain .fx-seg.hidden { display: none; }
  html body #pane-fountain .fx-seg-btn { flex: 1 1 0; justify-content: center; min-height: 32px; padding: 0 8px; font-size: 10.5px; }
  html body #pane-fountain .fx-seg-btn::after { content: ""; position: absolute; inset: -6px 0; }
  html body #pane-fountain #holder-pool-shell { padding: 12px 13px; border-radius: 14px; }
  html body #pane-fountain .holder-pool-head { flex-wrap: nowrap; }
  html body #pane-fountain .holder-pool-title-row h3 { font-size: 1rem; }
  html body #pane-fountain .holder-pool-head .rewards-kicker, html body #pane-fountain .holder-pool-stat span, html body #pane-fountain .holder-coll-stats em, html body #pane-fountain .holder-pool-addr-block .fountain-addr-label { font-size: 10.5px; }
  html body #pane-fountain :is(.holder-pool-lead, .holder-coll-sub, .pixel-cats-empty, .holder-pool-hint) { font-size: 12px; }
  html body #pane-fountain #btn-holder-pool-rescan { position: relative; min-height: 30px; padding: 0 10px; font-size: 11px; }
  html body #pane-fountain #btn-holder-pool-rescan::after { content: ""; position: absolute; inset: -7px -4px; }
  html body #pane-fountain .holder-pool-stat { padding: 8px 9px; }
  html body #pane-fountain .holder-pool-stat strong { font-size: 12.5px; }
  html body #pane-fountain .holder-coll-panel { padding: 10px 11px 11px; }
  html body #pane-fountain .holder-coll-panel-head { flex-direction: column; gap: 6px; }
  html body #pane-fountain .pixel-cats-claim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html body #pane-fountain .pixel-cat-claim-body { padding: 6px 7px 8px; gap: 2px; }
  html body #pane-fountain .pixel-cat-name, html body #pane-fountain .pixel-cat-claim-status { font-size: 10.5px; }
  html body #pane-fountain .pixel-cat-claim-amt { font-size: 12px; }
  html body #pane-fountain .pixel-cat-claim-btn { position: relative; min-height: 30px; font-size: 12px; }
  html body #pane-fountain .pixel-cat-claim-btn::after { content: ""; position: absolute; inset: -6px -2px; }
  html body #pane-fountain :is(#holder-pool-recent-list strong, #holder-pool-recent-list .fountain-recent-main > div:first-child span) { font-size: 12px; }
  html body #pane-fountain :is(#holder-pool-recent-list .fountain-recent-meta, #holder-pool-recent-list .fountain-recent-time) { font-size: 10.5px; }
  html body #pane-fountain .fx-more { min-height: 32px; font-size: 11px; }
  html body #pane-fountain .pixel-cat-claim-status { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
  html body #pane-fountain .pixel-cat-claim-btn { white-space: nowrap; padding: 0 4px; }
}
@media (max-width: 374px) {
  html body #pane-fountain .pixel-cats-claim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body #pane-fountain .fx-chip[data-state="unreachable"] { color: #e07a6a; border-color: rgba(224, 122, 106, 0.4); background: rgba(224, 122, 106, 0.08); }
html body #pane-fountain .holder-pool-head { display: flex; justify-content: space-between; align-items: flex-start; }
html body #pane-fountain .holder-pool-head > div:first-child { min-width: 0; flex: 1 1 auto; }
html body #pane-fountain .holder-pool-title-row { display: flex; flex-wrap: nowrap; }
html body #pane-fountain .holder-pool-title-row h3 { min-width: 0; }
html body #pane-fountain .holder-pool-head-actions { flex: 0 0 auto; }
@media (max-width: 720px) {
  html body #pane-fountain .holder-pool-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html body #pane-fountain .holder-pool-head-actions { justify-self: start; }
  html body #pane-fountain .holder-pool-lead { max-width: none; }
}
@media (max-width: 720px) {
  html body #pane-fountain .holder-pool-shared-stats { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  html body #pane-fountain .holder-pool-stat { padding: 8px 8px; }
}

/* fix-4b: holder detail — no truncated labels/states, short address + copy */
html body #pane-fountain .holder-pool-stat span.hp-lbl-short { display: none; }
html body #pane-fountain .holder-pool-stat span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
html body #pane-fountain .holder-pool-stat strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
html body #pane-fountain .pixel-cat-name { overflow: visible; text-overflow: clip; }
html body #pane-fountain .pixel-cat-claim-status { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; line-height: 1.35; }
html body #pane-fountain .pixel-cat-claim-status[data-card-state="cooldown"] { color: var(--orange-bright, #ff8a3d); }
html body #pane-fountain .pixel-cat-claim-status[data-card-state="ready"] { color: var(--green, #5a9a6e); }
html body #pane-fountain .holder-pool-addr-block { flex-wrap: wrap; align-items: center; row-gap: 4px; }
html body #pane-fountain .hp-addr-box { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
html body #pane-fountain #holder-pool-addr { overflow: visible; text-overflow: clip; white-space: nowrap; user-select: text; }
html body #pane-fountain .hp-copy-btn { position: relative; width: 24px; height: 24px; min-width: 0; min-height: 0; padding: 0; display: inline-grid; place-items: center; border-radius: 7px; font-size: 13px; line-height: 1; }
html body #pane-fountain .hp-copy-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
html body #pane-fountain .hp-copy-btn.copied { color: var(--green, #5a9a6e); border-color: rgba(90, 154, 110, 0.5); }
@media (max-width: 720px) {
  html body #pane-fountain .holder-pool-stat span.hp-lbl-full { display: none; }
  html body #pane-fountain .holder-pool-stat span.hp-lbl-short { display: block; }
  html body #pane-fountain .pixel-cat-claim-status { display: block; -webkit-line-clamp: unset; }
}
html body #pane-fountain .fx-pool-grid strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 400px) {
  html body #pane-fountain .fx-pool-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 10px 10px; }
}