/* /transfer-bonuses — visual treatment matched to the page mock. */
.tb {
  --brand-50: #eef2ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --accent-500: #f59e0b;
  --hot-50: #fffbeb;
  --hot-100: #fef3c7;
  --hot-600: #d97706;
  --hot-700: #b45309;
  --ink-950: #0f172a;
  --ink-900: #1e293b;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-100: #f1f5f9;
  --ink-50: #f8fafc;
  --border: #e2e8f0;
  --bg-page: #f4f6fb;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  color: var(--ink-900);
  background: var(--bg-page);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}
.tb a { color: inherit; text-decoration: none; }
.tb .container { width: min(100% - 2rem, 1120px); margin-inline: auto; }
.tb .page-hero { background: #fff; border-bottom: 1px solid var(--border); padding: 2rem 0 1.5rem; }
.tb .page-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.tb .freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-500);
  margin-bottom: 0.75rem;
}
.tb .freshness strong { color: var(--ink-700); font-weight: 600; }
.tb .freshness .sep { color: var(--ink-300); }
.tb .page-hero p,
.tb .disclaimer,
.tb .intro,
.tb .intro p { max-width: none; }
.tb .disclaimer { font-size: 0.875rem; color: var(--ink-500); margin: 0; }
.tb .intro { padding: 1.5rem 0 0; color: var(--ink-700); }
.tb .intro p { margin: 0; }
.tb .intro p + p { margin-top: 0.85rem; }
.tb .intro a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tb .intro-more {
  display: none;
  align-items: center;
  min-height: 44px;
  margin-top: 0.15rem;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--brand-700);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.tb .intro-more:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.tb .board { padding: 1.5rem 0 0.5rem; }
.tb .board-toolbar { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1rem; }
.tb .chip-stack { display: flex; flex-direction: column; gap: 0.65rem; flex: 1; min-width: 0; }
.tb .chip-row { display: flex; flex-direction: column; gap: 0.35rem; }
.tb .chip-row-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.tb .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tb .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink-700);
}
.tb .chip:hover { border-color: #a5b4fc; color: var(--brand-700); }
.tb .chip:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.tb .chip[aria-current="true"] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.tb .chip[aria-current="true"]:focus-visible { outline-color: #fff; }
.tb .chip.hot-chip[aria-current="true"] { background: var(--hot-600); border-color: var(--hot-600); color: #fff; }
.tb .sort-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-500); margin: 0; }
.tb .sort-row select {
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 2.75rem;
  padding: 0.35rem 0.55rem;
  background: #fff;
  color: var(--ink-700);
  font: inherit;
}
.tb .results-region { position: relative; }
.tb .tb-loading {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-500);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.tb .tb-loading.htmx-request,
.tb .results-region[aria-busy="true"] .tb-loading { opacity: 1; }
.tb .results-region[aria-busy="true"] .table-wrap { opacity: 0.55; transition: opacity 120ms ease; }
.tb .table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tb .desktop-table { display: none; width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tb .desktop-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--ink-50);
  color: var(--ink-500);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.tb .desktop-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.tb .desktop-table tr:last-child td { border-bottom: none; }
.tb .desktop-table tr.row-hot { background: linear-gradient(90deg, var(--hot-50) 0%, #fff 12%); }
.tb .desktop-table tr.row-hot td:first-child { box-shadow: inset 3px 0 0 var(--accent-500); }
.tb .eco { font-weight: 600; color: var(--ink-900); }
.tb .pair { font-weight: 500; color: var(--ink-900); }
.tb .pair .arrow { color: var(--ink-400); margin: 0 0.25rem; }
.tb .pct { font-weight: 800; font-size: 1.125rem; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.tb .pct.hot { color: var(--hot-700); }
.tb .pct-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.tb .pct-stack-start { align-items: flex-start; }
.tb .pct-cell { white-space: nowrap; }
.tb .dates { color: var(--ink-500); }
.tb .notes { color: var(--ink-500); font-size: 0.75rem; max-width: 22rem; }
.tb .notes a, .tb .bonus-card-notes a { color: var(--brand-600); font-weight: 600; }
.tb .badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tb .badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tb .badge-hot { background: var(--hot-100); color: var(--hot-700); }
.tb .badge-soon { background: #fee2e2; color: #b91c1c; }
.tb .mobile-cards { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; }
.tb .bonus-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: #fff; }
.tb .bonus-card.hot { border-color: #fcd34d; background: var(--hot-50); box-shadow: inset 3px 0 0 var(--accent-500); }
.tb .bonus-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.tb .bonus-card .pct { font-size: 1.5rem; }
.tb .bonus-card-meta { font-size: 0.875rem; color: var(--ink-500); margin-top: 0.35rem; }
.tb .bonus-card-notes { margin-top: 0.5rem; font-size: 0.75rem; color: var(--ink-500); }
.tb .empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-500); }
.tb .empty a { color: var(--brand-600); font-weight: 600; }
.tb .section { padding: 2rem 0; }
.tb .section h2 { font-size: 1.25rem; font-weight: 800; color: var(--ink-950); margin: 0 0 1rem; letter-spacing: -0.01em; }
.tb .how-list { display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0; counter-reset: how; }
.tb .how-list li {
  position: relative;
  padding: 1rem 1rem 1rem 3rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--ink-700);
}
.tb .how-list li::before {
  counter-increment: how;
  content: counter(how);
  position: absolute;
  left: 0.85rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
}
.tb .tips { display: grid; gap: 0.75rem; }
.tb .tip { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; font-size: 0.875rem; color: var(--ink-700); margin: 0; }
.tb .faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; }
.tb .faq-item h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.tb .faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-900);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.tb .faq-toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.tb .faq-chevron { flex-shrink: 0; transition: transform 0.15s ease; }
.tb .faq-toggle[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.tb .faq-panel { padding: 0 1rem 0.9rem; }
.tb .faq-panel p { margin: 0; font-size: 0.875rem; color: var(--ink-700); }
.tb .cta-band {
  margin: 1rem auto 2.5rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--brand-800), var(--brand-500));
  color: #fff;
  text-align: center;
  width: min(100% - 2rem, 1120px);
}
.tb .cta-band h2 { color: #fff; margin: 0; font-size: 1.35rem; font-weight: 800; }
.tb .cta-band p { opacity: 0.9; margin: 0.5rem 0 1rem; font-size: 0.875rem; }
.tb .btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand-700);
  padding: 0.85rem 1.35rem;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 600;
}
.tb .btn-hero:hover { background: var(--brand-50); }
.tb .cta-note { margin-top: 0.75rem; font-size: 0.8125rem; }
.tb .related { font-size: 0.875rem; margin-top: 1rem; opacity: 0.95; }
.tb .related a { text-decoration: underline; text-underline-offset: 2px; }
.tb .after-board { display: flex; flex-direction: column; }
.tb .open-calc {
  position: static;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 0.75rem max(1rem, env(safe-area-inset-right, 0px)) 0.25rem max(1rem, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.tb .open-calc.is-hidden { visibility: hidden; }
.tb .open-calc a {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  background: var(--brand-600);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
}
.tb .open-calc a:hover { background: var(--brand-700); }
.tb .open-calc a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 899px) {
  .tb .page-hero { padding: 1.1rem 0 0.75rem; }
  .tb .page-hero h1 { margin-bottom: 0.35rem; }
  .tb .freshness { margin-bottom: 0.45rem; }
  .tb .intro { padding-top: 0.7rem; }
  .tb .intro:not(.is-open) p:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tb .intro:not(.is-open) p:not(:first-child) { display: none; }
  .tb .intro-more { display: inline-flex; }
  .tb .board { padding-top: 0.75rem; }
  .tb .after-board > .section { order: 1; }
  .tb .open-calc {
    order: 2;
    position: sticky;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  .tb .cta-band { order: 3; align-self: center; }
}
@media (min-width: 720px) {
  .tb .tips { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .tb .desktop-table { display: table; }
  .tb .mobile-cards { display: none; }
  .tb .intro-more { display: none; }
}