body.bf-tool-page {
  background: linear-gradient(180deg, var(--bf-page-bg-top), var(--bf-page-bg-bottom));
  color: var(--bf-text);
}

body.bf-tool-page .site-main {
  width: min(calc(100% - 32px), var(--bf-tool-container));
  max-width: var(--bf-tool-container);
  margin-inline: auto;
  padding-bottom: var(--bf-space-10);
}

body.bf-tool-page .guide-subnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  margin: var(--bf-space-4) 0 var(--bf-space-5);
  padding: 10px 12px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-card);
  background: color-mix(in srgb, var(--bf-surface) 94%, transparent);
  box-shadow: 0 6px 18px rgba(15, 42, 86, 0.05);
}

body.bf-tool-page .guide-subnav .guide-subnav-label {
  color: var(--bf-text-muted);
  font-size: 0.86rem;
  font-weight: 800;
}

body.bf-tool-page .guide-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--bf-radius-pill);
  color: var(--bf-brand-800);
  font-size: 0.9rem;
  font-weight: 800;
}

body.bf-tool-page .guide-subnav a:hover,
body.bf-tool-page .guide-subnav a.active {
  border-color: var(--bf-border-strong);
  background: #eaf2ff;
  color: var(--bf-brand-700);
}

body.dark-mode.bf-tool-page .guide-subnav a {
  color: #bfdbfe;
}

body.dark-mode.bf-tool-page .guide-subnav a:hover,
body.dark-mode.bf-tool-page .guide-subnav a.active {
  background: rgba(37, 99, 235, 0.22);
  color: #ffffff;
}

body.bf-tool-page .site-main > .card-section {
  margin: 0 0 var(--bf-space-5);
}

body.bf-tool-page .site-main > .card-section > .guide-detail-card {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-card);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
  padding: clamp(18px, 3vw, 28px);
}

body.bf-tool-page .site-main > .card-section:first-of-type > .guide-detail-card {
  border-radius: var(--bf-radius-hero);
  border-color: var(--bf-border-strong);
  box-shadow: var(--bf-shadow-raised);
}

body.bf-tool-page .site-main > .card-section:first-of-type h1 {
  margin: 0 0 var(--bf-space-3);
  color: var(--bf-brand-900);
  font-size: var(--bf-title-tool);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

body.dark-mode.bf-tool-page .site-main > .card-section:first-of-type h1 {
  color: #f8fbff;
}

body.bf-tool-page .site-main h2 {
  color: var(--bf-brand-900);
  line-height: 1.3;
}

body.dark-mode.bf-tool-page .site-main h2 {
  color: #eaf2ff;
}

body.bf-tool-page :is(.section-desc, .fv-entry-lead) {
  max-width: 780px;
  margin-bottom: var(--bf-space-4);
  color: var(--bf-text-muted);
  font-size: var(--bf-text-body);
  line-height: var(--bf-line-body);
}

body.bf-tool-page :is(.fv-toolbar, .trade-tool-toolbar, .fruit-picker-toolbar) {
  gap: var(--bf-space-3);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-card);
  background: var(--bf-surface-soft);
  padding: var(--bf-space-4);
}

body.bf-tool-page :is(input[type="text"], input[type="search"], input[type="number"], select, textarea) {
  min-width: 0;
  min-height: var(--bf-control-height);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-control);
  background: var(--bf-surface);
  color: var(--bf-text);
  font: inherit;
}

body.bf-tool-page :is(input[type="text"], input[type="search"], input[type="number"], select, textarea):focus {
  border-color: var(--bf-brand-600);
  outline: 3px solid rgba(37, 99, 235, 0.16);
  outline-offset: 1px;
}

body.bf-tool-page .site-main :is(
  #fv-search,
  #fv-rarity-filter,
  #fv-kind-filter,
  #fv-price-filter,
  #fv-sort,
  #fp-search,
  #fp-rarity,
  #shop-payment-select
) {
  min-height: var(--bf-control-height);
  border-radius: var(--bf-radius-control);
}

body.bf-tool-page :is(
  .fv-entry-action,
  .guide-button,
  .related-button,
  .trade-tool-action,
  .share-btn,
  .shop-tab-btn,
  .shop-cart-toggle,
  #shop-cart-copy-btn,
  #fv-clear-filters,
  .shop-load-more
) {
  min-height: var(--bf-control-height);
  border-radius: var(--bf-radius-control);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.bf-tool-page :is(
  .fv-entry-action,
  .guide-button,
  .related-button,
  .trade-tool-action,
  .share-btn,
  .shop-tab-btn,
  .shop-cart-toggle,
  #shop-cart-copy-btn,
  #fv-clear-filters,
  .shop-load-more
):hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(15, 42, 86, 0.11);
}

body.bf-tool-page :is(
  .filter-btn,
  .fv-chart-btn,
  .fv-chart-tab,
  .fv-quick-btn,
  .fv-compare-toggle,
  .myprices-add-btn,
  .shop-quick-add-btn,
  [data-fv-query]
) {
  min-height: 40px;
  border-radius: var(--bf-radius-control);
}

body.bf-tool-page :is(.highlight-box, .shop-trust-strip, .pm-info, .trade-intro-more, .trade-rule-help) {
  border-radius: var(--bf-radius-card);
}

body.bf-tool-page .trade-result-panel {
  border-radius: var(--bf-radius-card);
  box-shadow: var(--bf-shadow-card);
}

body.bf-tool-page :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--bf-focus);
  outline-offset: 3px;
}

body.bf-tool-page .site-main img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  body.bf-tool-page .site-main {
    width: min(calc(100% - 20px), var(--bf-tool-container));
    padding-bottom: var(--bf-space-8);
  }

  body.bf-tool-page .guide-subnav {
    flex-wrap: nowrap;
    align-items: center;
    margin-top: var(--bf-space-3);
    padding: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  body.bf-tool-page .guide-subnav .guide-subnav-label {
    flex: 0 0 auto;
    padding: 2px 4px;
  }

  body.bf-tool-page .guide-subnav a {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
  }

  body.bf-tool-page .site-main > .card-section > .guide-detail-card {
    padding: var(--bf-space-4);
  }

  body.bf-tool-page :is(.fv-entry-actions, .guide-buttons-grid, .related-buttons-grid, .trade-intro-grid) {
    grid-template-columns: 1fr;
  }

  body.bf-tool-page :is(.fv-toolbar, .trade-tool-toolbar, .fruit-picker-toolbar) {
    padding: var(--bf-space-3);
  }
}

@media (max-width: 420px) {
  body.bf-tool-page .site-main {
    width: calc(100% - 16px);
  }

  body.bf-tool-page .guide-subnav a { padding-inline: 10px; }

  body.bf-tool-page .site-main > .card-section:first-of-type h1 {
    font-size: clamp(1.75rem, 9vw, 2.1rem);
  }

  body.bf-tool-page :is(.fv-entry-action, .guide-button, .related-button) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bf-tool-page :is(
    .fv-entry-action,
    .guide-button,
    .related-button,
    .trade-tool-action,
    .share-btn,
    .shop-tab-btn,
    .shop-cart-toggle,
    #shop-cart-copy-btn,
    #fv-clear-filters,
    .shop-load-more
  ) {
    transition: none;
  }
}