.hdb-tools {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 0, rgba(20, 90, 242, .18), transparent 29rem),
    linear-gradient(180deg, #f4f8ff 0, #fbfcfe 72%);
}
.hdb-tools::before {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  left: -11rem;
  bottom: 6rem;
  border: 1px solid rgba(20, 90, 242, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(20, 90, 242, .035), 0 0 0 8rem rgba(20, 90, 242, .025);
  pointer-events: none;
}
.tools-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}
.tools-heading h2 { max-width: 14ch; text-wrap: balance; }
.tools-heading > p { max-width: 33rem; margin: 0 0 .6rem; color: #526b82; font-size: clamp(1rem, 1.35vw, 1.2rem); }
.tools-shell {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid #b9c9da;
  border-radius: clamp(1rem, 2vw, 1.6rem);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 30px 90px rgba(16, 42, 67, .1);
}
.tools-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: .45rem;
  border-bottom: 1px solid var(--line);
  background: #edf4ff;
}
.tools-tabs button {
  min-width: 0;
  min-height: 64px;
  padding: .8rem 1rem;
  border: 0;
  border-radius: .85rem;
  color: #34516b;
  background: transparent;
  font: 800 clamp(.8rem, 1vw, .95rem)/1.2 inherit;
  cursor: pointer;
}
.tools-tabs button span { display: block; margin-bottom: .28rem; color: var(--blue); font-size: .68rem; letter-spacing: .12em; }
.tools-tabs button[aria-selected="true"] { color: #fff; background: var(--ink); box-shadow: 0 12px 30px rgba(16, 42, 67, .18); }
.tools-tabs button[aria-selected="true"] span { color: #8fb5ff; }
.tools-tabs button:focus-visible { outline: 3px solid #70a0ff; outline-offset: 2px; }
.tool-panel { padding: clamp(1.25rem, 3.5vw, 3.25rem); }
.tool-panel[hidden] { display: none; }
.tool-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); gap: 2rem; align-items: start; margin-bottom: 2rem; }
.tool-intro h3 { max-width: 19ch; margin-top: 0; font-size: clamp(1.8rem, 3vw, 3rem); text-wrap: balance; }
.tool-intro > p { max-width: 38rem; margin-top: .2rem; color: #526b82; }
.tool-privacy {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .9rem 1rem;
  border: 1px solid #c5d6e8;
  border-radius: .8rem;
  color: #405b73;
  background: #f7faff;
  font-size: .8rem;
}
.tool-privacy::before { content: "✓"; color: var(--blue); font-weight: 900; }
.tool-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.tool-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #f9fbfd;
}
.tool-form label { display: block; min-width: 0; color: #344f68; font-size: .76rem; font-weight: 800; }
.tool-form label.wide, .tool-form .wide { grid-column: 1 / -1; }
.tool-form input, .tool-form select {
  min-height: 50px;
  margin-top: .35rem;
  border-color: #b9c9da;
  color: var(--ink);
  background: #fff;
}
.tool-form input:focus, .tool-form select:focus { outline: 3px solid rgba(20, 90, 242, .18); border-color: var(--blue); }
.tool-form small { display: block; margin-top: .35rem; color: #6b7e90; font-weight: 500; }
.tool-form button { grid-column: 1 / -1; justify-content: center; min-height: 52px; }
.tool-form button:disabled { opacity: .55; cursor: wait; }
.tool-output { min-width: 0; min-height: 260px; }
.tool-result-hero {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(130deg, var(--ink), #174a78);
  box-shadow: 0 22px 55px rgba(16, 42, 67, .16);
}
.tool-result-hero span { display: block; color: #b9cce0; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.tool-result-hero strong { display: block; margin: .25rem 0; color: #fff; font-size: clamp(2.3rem, 5vw, 4.9rem); line-height: 1; letter-spacing: -.055em; }
.tool-result-hero p { margin: .5rem 0 0; color: #dbe8f5; }
.tool-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.tool-result-grid article { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; }
.tool-result-grid article span, .tool-result-grid article small { display: block; color: #6a8094; font-size: .7rem; }
.tool-result-grid article strong { display: block; margin: .25rem 0; overflow-wrap: anywhere; font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.15; letter-spacing: -.02em; }
.tool-result-grid--transactions { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 1rem; }
.tool-ratios { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.tool-ratios span { padding: .55rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.tool-ratios .pass { color: #166534; background: #dcfce7; }
.tool-ratios .review { color: #92400e; background: #fef3c7; }
.tool-alert, .tool-result-note, .tool-loading, .tool-empty {
  padding: 1rem;
  border-radius: .8rem;
  color: #526b82;
  background: #f2f6fa;
  font-size: .8rem;
}
.tool-alert { color: #7c3f00; background: #fff5df; }
.tool-empty { min-height: 220px; display: grid; place-content: center; text-align: center; }
.tool-empty strong { color: var(--ink); font-size: 1.2rem; }
.tool-empty a { color: var(--blue); font-weight: 800; }
.transaction-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: .85rem; background: #fff; -webkit-overflow-scrolling: touch; }
.transaction-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .78rem; }
.transaction-table th { position: sticky; top: 0; padding: .8rem; color: #526b82; background: #f2f6fa; text-align: left; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; }
.transaction-table td { padding: .8rem; border-top: 1px solid #e5ecf2; vertical-align: top; }
.transaction-table td span { display: block; color: #6a8094; font-size: .7rem; }
.tools-sources { position: relative; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: 1rem 0 0; color: #5f7589; font-size: .72rem; }
.tools-sources strong { color: var(--ink); }
.tools-sources a { color: var(--blue); font-weight: 750; text-decoration: underline; text-underline-offset: .15em; }

@media (max-width: 1000px) {
  .tools-heading, .tool-intro, .tool-layout { grid-template-columns: 1fr; }
  .tools-heading h2 { max-width: 18ch; }
  .tool-result-grid--transactions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hdb-tools::before { display: none; }
  .tools-tabs { grid-template-columns: 1fr; gap: .25rem; }
  .tools-tabs button { min-height: 52px; text-align: left; }
  .tools-tabs button span { display: inline; margin-right: .55rem; }
  .tool-form, .tool-result-grid, .tool-result-grid--transactions { grid-template-columns: 1fr; }
  .tool-result-hero strong { font-size: clamp(2rem, 12vw, 3.4rem); }
  .transaction-table-wrap { margin-inline: -.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tools-tabs button, .tool-result-hero { transition: none !important; }
}