.page-tools {
  --tools-accent: #087b77;
  --tools-accent-dark: #075d5a;
  --tools-blue: #0b5f9a;
  --tools-soft: #eef8f7;
  background: #f7f9fb;
}

.page-tools .bit-tag { width: fit-content; max-width: 100%; justify-self: start; }

.tools-search-strip { padding: 1.2rem 0; color: #fff; background: linear-gradient(120deg, #063b62, #087b77); }
.tools-search-strip__inner { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(420px, 1.25fr); gap: 2rem; align-items: center; }
.tools-search-strip .bit-eyebrow { margin: 0 0 .2rem; color: #9fe1d9; }
.tools-search-strip h1 { margin: 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2rem); }
.tools-search-strip p { margin: .35rem 0 0; color: rgba(255,255,255,.76); }
.tools-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 52px; padding-left: 1rem; overflow: hidden; color: #476172; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,25,46,.2); }
.tools-search input { min-width: 0; padding: .8rem; border: 0; outline: 0; }
.tools-search button { align-self: stretch; min-width: 84px; color: #fff; background: var(--tools-accent); border: 0; font-weight: 700; }
.tools-search button:hover, .tools-search button:focus-visible { background: var(--tools-accent-dark); }

.page-tools .bit-breadcrumb-wrap { background: #fff; border-bottom: 1px solid #e3e9ee; }
.tools-main-section { padding: 1.5rem 0 4rem; }
.tools-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tools-side-nav { position: sticky; top: 1rem; overflow: hidden; background: #fff; border: 1px solid #dce5eb; border-radius: 14px; box-shadow: 0 8px 22px rgba(7,42,68,.06); }
.tools-side-nav__heading { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem; border-bottom: 1px solid #e5ebef; }
.tools-side-nav__heading strong { color: #17384f; }
.tools-side-nav__heading span { color: #78909f; font-size: .78rem; }
.tools-side-nav__item > a { display: grid; grid-template-columns: 22px 1fr auto; gap: .55rem; align-items: center; padding: .72rem 1rem; color: #36556a; border-left: 3px solid transparent; text-decoration: none; }
.tools-side-nav__item > a:hover { color: var(--tools-accent-dark); background: var(--tools-soft); }
.tools-side-nav__item.is-current > a { color: var(--tools-accent-dark); background: var(--tools-soft); border-left-color: var(--tools-accent); font-weight: 750; }
.tools-side-nav__groups { display: grid; padding: .15rem .75rem .65rem 2.75rem; gap: .15rem; background: var(--tools-soft); }
.tools-side-nav__groups a { padding: .35rem .45rem; color: #597482; font-size: .85rem; text-decoration: none; }
.tools-side-nav__groups a:hover { color: var(--tools-accent-dark); }
.tools-side-nav__note { display: grid; grid-template-columns: auto 1fr; gap: .6rem; margin: .75rem; padding: .75rem; color: #496572; background: #f5f8fa; border-radius: 10px; font-size: .82rem; }
.tools-side-nav__note i { color: var(--tools-accent); font-size: 1.2rem; }
.tools-side-nav__note p { margin: 0; }
.tools-side-nav__note strong { display: block; color: #17384f; }

.tools-content { min-width: 0; }
.tools-content__heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.tools-content__heading h2 { margin-bottom: .3rem; }
.tools-content__heading p { margin: 0; color: #607784; }
.tools-content__heading > a { flex: 0 0 auto; color: var(--tools-accent-dark); font-weight: 700; text-decoration: none; }
.tools-content__heading > a i { margin-left: .4rem; }
.tools-filter { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1rem; padding: .75rem; background: #fff; border: 1px solid #dfe7ec; border-radius: 12px; }
.tools-filter > span:first-child { margin-right: .25rem; color: #4c6878; font-weight: 700; }
.tools-filter button { padding: .4rem .75rem; color: #486372; background: #f4f7f9; border: 1px solid transparent; border-radius: 999px; font-size: .88rem; }
.tools-filter button:hover, .tools-filter button.is-active { color: #fff; background: var(--tools-accent); }
.tools-filter__result { margin-left: auto; color: #718894; font-size: .82rem; }
.tools-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.tool-card { display: flex; min-width: 0; min-height: 245px; padding: 1rem; flex-direction: column; background: #fff; border: 1px solid #dce5ea; border-radius: 13px; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.tool-card:hover { transform: translateY(-2px); border-color: #91c8c4; box-shadow: 0 12px 28px rgba(7,59,103,.09); }
.tool-card.is-selected { border-color: var(--tools-accent); box-shadow: 0 0 0 2px rgba(8,123,119,.12); }
.tool-card[hidden] { display: none; }
.tool-card__top { display: flex; justify-content: space-between; gap: .75rem; }
.tool-card__icon { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; color: var(--tools-accent-dark); background: var(--tools-soft); border: 1px solid #cce7e3; border-radius: 11px; place-items: center; font-size: 1.25rem; }
.tool-card__flags { display: flex; gap: .3rem; align-items: flex-start; }
.tool-badge { display: inline-flex; width: fit-content; padding: .22rem .5rem; color: #4c6573; background: #eef2f5; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.tool-badge--hot { color: #8f3f08; background: #fff0df; }
.tool-badge--local { color: #08625e; background: #e4f6f3; }
.tool-card h3 { margin: .85rem 0 .35rem; font-size: 1.04rem; }
.tool-card h3 a { color: #17384f; text-decoration: none; }
.tool-card p { margin: 0 0 .75rem; color: #627986; font-size: .9rem; }
.tool-card__meta { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin-top: auto; color: #6c818d; font-size: .78rem; }
.tool-card__meta i { margin-right: .28rem; color: var(--tools-accent); }
.tool-card__action { display: flex; justify-content: space-between; margin-top: .85rem; padding-top: .7rem; color: var(--tools-accent-dark); border-top: 1px solid #edf1f3; font-size: .86rem; font-weight: 700; text-decoration: none; }
.tools-empty { padding: 2rem; text-align: center; color: #6a808c; background: #fff; border: 1px dashed #b8c7cf; border-radius: 12px; }

.tools-feature-band { display: grid; grid-template-columns: 1fr minmax(260px, .75fr); gap: 1.5rem; align-items: center; margin-top: 1.5rem; padding: clamp(1.4rem, 4vw, 2.5rem); overflow: hidden; color: #fff; background: linear-gradient(125deg, #064c5f, #087b77); border-radius: 16px; }
.tools-feature-band h2 { margin: .8rem 0; color: #fff; }
.tools-feature-band p { color: rgba(255,255,255,.78); }
.tools-feature-band img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.tools-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin: 1.5rem 0; }
.tools-trust-grid article { padding: 1.15rem; background: #fff; border: 1px solid #dde6eb; border-radius: 13px; }
.tools-trust-grid i { color: var(--tools-accent); font-size: 1.4rem; }
.tools-trust-grid h3 { margin: .6rem 0 .3rem; font-size: 1rem; }
.tools-trust-grid p { margin: 0; color: #667d89; font-size: .88rem; }

.tools-category-intro { display: grid; grid-template-columns: 1.1fr minmax(240px, .65fr); gap: 1.25rem; align-items: center; margin-bottom: 1rem; padding: 1.25rem; background: #fff; border: 1px solid #dce5ea; border-radius: 14px; }
.tools-category-intro h2 { margin: .6rem 0 .4rem; }
.tools-category-intro p { color: #607784; }
.tools-category-intro img { width: 100%; height: 170px; object-fit: cover; border-radius: 10px; }
.tools-category-intro__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.tools-category-intro__links a { padding: .42rem .7rem; color: var(--tools-accent-dark); background: var(--tools-soft); border-radius: 999px; text-decoration: none; font-size: .86rem; font-weight: 700; }
.tools-group { margin-top: 1.25rem; scroll-margin-top: 1rem; }
.tools-group > header { display: flex; justify-content: space-between; align-items: end; margin-bottom: .7rem; }
.tools-group > header h2 { margin: 0; font-size: 1.25rem; }
.tools-group > header p { margin-bottom: .15rem; }
.tools-group > header > span { color: #78909b; font-size: .82rem; }
.tools-group .tools-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tool-selected { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 1.4rem; margin-top: 1.5rem; padding: 1.25rem; background: #fff; border: 1px solid #cfdde4; border-radius: 14px; }
.tool-selected__visual img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 11px; }
.tool-selected__title { display: flex; gap: .8rem; align-items: center; }
.tool-selected__title h2 { margin: .25rem 0 0; }
.tool-selected > div > p { color: #607784; }
.tool-selected dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.tool-selected dl div { padding: .65rem; background: #f5f8fa; border-radius: 8px; }
.tool-selected dt { color: #718693; font-size: .76rem; }
.tool-selected dd { margin: .15rem 0 0; color: #294a5e; font-size: .88rem; font-weight: 650; }
.tool-selected__notice { padding: .7rem; color: #5b500d !important; background: #fff9df; border-radius: 8px; font-size: .84rem; }
.tool-selected__notice i { margin-right: .4rem; }

.tool-workspace { margin-top: 1.5rem; padding: 1.25rem; background: #fff; border: 1px solid #cfdde4; border-radius: 14px; }
.tool-workspace__heading { display: flex; justify-content: space-between; gap: 1rem; }
.tool-workspace__heading h2 { margin: .5rem 0 .3rem; }
.tool-workspace__heading p { margin: 0; color: #627986; }
.tool-workspace__status { align-self: start; padding: .45rem .65rem; color: #08625e; background: #e4f6f3; border-radius: 8px; white-space: nowrap; font-size: .82rem; font-weight: 700; }
.tool-workspace__controls { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 1rem 0 .65rem; }
.tool-workspace__controls [role="status"] { margin-left: auto; color: #667e8a; font-size: .82rem; }
.tool-workspace__panes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.tool-workspace__panes > div { position: relative; }
.tool-workspace label { display: block; margin-bottom: .4rem; color: #294b5d; font-size: .86rem; font-weight: 700; }
.tool-workspace textarea { width: 100%; min-height: 300px; padding: 1rem; color: #d8f3ef; background: #102b3a; border: 1px solid #294b5c; border-radius: 9px; font: .88rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; }
.tool-workspace__copy { position: absolute; right: .65rem; bottom: .65rem; padding: .35rem .55rem; color: #d6ece9; background: #294a59; border: 0; border-radius: 6px; font-size: .78rem; }
.tool-workspace--planned { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 1.4rem; align-items: center; }
.tool-workspace--planned img { width: 100%; height: auto; border-radius: 10px; }

.tool-instructions { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1rem; margin-top: 1.5rem; }
.tool-instructions > div { padding: 1.25rem; background: #fff; border: 1px solid #dce5ea; border-radius: 14px; }
.tool-instructions ol { display: grid; margin: 1rem 0 0; padding: 0; gap: .7rem; list-style: none; counter-reset: instruction; }
.tool-instructions li { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; counter-increment: instruction; }
.tool-instructions li::before { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; color: #fff; background: var(--tools-accent); border-radius: 50%; content: counter(instruction); place-items: center; font-size: .78rem; }
.tool-instructions li span { color: #667d89; font-size: .88rem; }
.tool-instructions aside { display: flex; padding: 1.25rem; color: #fff; background: #073b67; border-radius: 14px; flex-direction: column; }
.tool-instructions aside h3 { color: #fff; }
.tool-instructions aside p { color: rgba(255,255,255,.76); }
.tool-instructions aside > a:last-child { margin-top: .7rem; color: #bce7e2; text-align: center; }
.page-tools .bit-cta { margin-top: 1.5rem; }

@media (max-width: 1199.98px) {
  .tools-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .tools-search-strip__inner, .tools-layout { grid-template-columns: 1fr; }
  .tools-side-nav { position: static; }
  .tools-side-nav nav { display: grid; grid-template-columns: repeat(3, 1fr); padding: .5rem; }
  .tools-side-nav__item > a { padding: .6rem; border-left: 0; border-bottom: 2px solid transparent; }
  .tools-side-nav__item.is-current > a { border-bottom-color: var(--tools-accent); }
  .tools-side-nav__groups, .tools-side-nav__note { display: none; }
  .tools-feature-band, .tool-selected, .tool-instructions { grid-template-columns: 1fr; }
  .tool-selected__visual img { min-height: 220px; }
}

@media (max-width: 767.98px) {
  .tools-search-strip { padding: 1rem 0; }
  .tools-search-strip__inner { gap: .85rem; }
  .tools-side-nav nav { grid-template-columns: repeat(2, 1fr); }
  .tools-card-grid, .tools-group .tools-card-grid, .tools-trust-grid, .tools-category-intro, .tool-workspace__panes, .tool-workspace--planned { grid-template-columns: 1fr; }
  .tools-category-intro img { height: 150px; }
  .tool-selected dl { grid-template-columns: 1fr; }
  .tool-workspace__heading { display: grid; }
  .tool-workspace__controls [role="status"] { width: 100%; margin-left: 0; }
}

@media (max-width: 575.98px) {
  .tools-search { grid-template-columns: auto 1fr; }
  .tools-search button { grid-column: 1 / -1; min-height: 42px; }
  .tools-content__heading { display: grid; align-items: start; }
  .tools-filter__result { width: 100%; margin-left: 0; }
  .tools-side-nav nav { grid-template-columns: 1fr; }
  .tool-card { min-height: 225px; }
}