:root {
  --tool-ink: #071a3a;
  --tool-muted: #5d6f8d;
  --tool-line: #d9e4f5;
  --tool-blue: #1467ff;
  --tool-blue-dark: #0848ba;
  --tool-surface: #f5f8fd;
  --tool-success: #087f5b;
  --tool-warning: #a85d00;
  --tool-danger: #c92a2a;
}

.toolbox-page {
  background: #fff;
  color: var(--tool-ink);
}

.toolbox-hero {
  padding: 148px 0 72px;
  background: #061a3a;
  color: #fff;
}

.toolbox-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 48px;
  align-items: center;
}

.toolbox-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

.toolbox-breadcrumb a { color: inherit; }
.toolbox-breadcrumb a:hover { color: #fff; }
.toolbox-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #73a5ff;
  font-size: 14px;
  font-weight: 700;
}

.toolbox-hero h1,
.tool-page-hero h1 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.15;
  letter-spacing: 0;
}

.toolbox-hero p,
.tool-page-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.75;
}

.toolbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.toolbox-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid #c9d7ec;
  border-radius: 7px;
  background: #fff;
  color: var(--tool-ink);
  font-weight: 700;
  cursor: pointer;
}

.toolbox-button:hover { border-color: #8eb5ff; color: var(--tool-blue); }
.toolbox-button:focus-visible,
.diagnostic-card:focus-visible,
.issue-grid a:focus-visible {
  outline: 3px solid rgba(20, 103, 255, .35);
  outline-offset: 3px;
}

.toolbox-button--primary {
  border-color: var(--tool-blue);
  background: var(--tool-blue);
  color: #fff;
}

.toolbox-button--primary:hover {
  border-color: var(--tool-blue-dark);
  background: var(--tool-blue-dark);
  color: #fff;
}

.toolbox-privacy {
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.toolbox-privacy strong { display: block; margin-bottom: 14px; font-size: 18px; }
.toolbox-privacy ul { margin: 0; padding-left: 20px; color: rgba(255,255,255,.78); }
.toolbox-privacy li + li { margin-top: 8px; }
.toolbox-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 330px;
  margin: 0;
}
.toolbox-hero__visual img {
  display: block;
  width: min(100%, 390px);
  height: auto;
  filter: drop-shadow(0 24px 28px rgba(0, 8, 28, .34));
}
.toolbox-section { padding: 76px 0; }
.toolbox-section--muted { background: var(--tool-surface); }
.toolbox-section__heading { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.toolbox-section__heading > span { color: var(--tool-blue); font-size: 14px; font-weight: 700; }
.toolbox-section__heading h2 { margin: 8px 0 10px; color: var(--tool-ink); font-size: 34px; letter-spacing: 0; }
.toolbox-section__heading p { margin: 0; color: var(--tool-muted); }

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.diagnostic-card {
  min-height: 174px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--tool-line);
  border-radius: 8px;
  background: #fff;
  color: var(--tool-ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.diagnostic-card:hover {
  border-color: #a8c6ff;
  box-shadow: 0 14px 28px rgba(17, 55, 117, .09);
  transform: translateY(-2px);
}

.diagnostic-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #edf4ff;
  color: var(--tool-blue);
  font-size: 22px;
}

.diagnostic-card__body { min-width: 0; display: flex; flex-direction: column; }
.diagnostic-card small { margin-bottom: 5px; color: var(--tool-blue); font-weight: 700; }
.diagnostic-card strong { margin-bottom: 8px; font-size: 18px; }
.diagnostic-card__body > span { color: var(--tool-muted); line-height: 1.65; }
.diagnostic-card > .lni { align-self: center; color: #7f91ad; }

.issue-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.issue-grid a {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--tool-line);
  border-radius: 7px;
  background: #fff;
  color: var(--tool-ink);
  font-weight: 700;
}

.tool-page-hero {
  padding: 138px 0 54px;
  background: #061a3a;
}

.tool-page-hero h1 { font-size: clamp(32px, 4vw, 48px); }
.tool-workspace-section { padding: 48px 0 80px; background: var(--tool-surface); }
.tool-workspace-section > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: 24px;
  align-items: start;
}

.tool-workspace,
.tool-guidance {
  border: 1px solid var(--tool-line);
  border-radius: 8px;
  background: #fff;
}

.tool-workspace { overflow: hidden; }
.tool-workspace__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid var(--tool-line);
}

.tool-workspace__header > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; }
.tool-workspace__header strong { color: var(--tool-ink); }
.tool-workspace__header p { grid-column: 2; margin: 4px 0 0; color: var(--tool-muted); font-size: 14px; }
.status-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: #94a3b8; }
.status-dot.is-running { background: var(--tool-blue); }
.status-dot.is-complete { background: var(--tool-success); }

.tool-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 24px 0;
}

.tool-form:empty { display: none; }
.tool-field { display: flex; flex-direction: column; gap: 7px; }
.tool-field--wide { grid-column: 1 / -1; }
.tool-field label { color: var(--tool-ink); font-size: 14px; font-weight: 700; }
.tool-field input,
.tool-field select,
.tool-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #cbd8ea;
  border-radius: 6px;
  background: #fff;
  color: var(--tool-ink);
}

.tool-field textarea { min-height: 120px; resize: vertical; }
.tool-field small { color: var(--tool-muted); }
.tool-progress { height: 4px; margin: 24px 24px 0; overflow: hidden; background: #e7eef9; }
.tool-progress span { display: block; width: 35%; height: 100%; background: var(--tool-blue); animation: tool-progress 1s ease-in-out infinite alternate; }
@keyframes tool-progress { to { transform: translateX(185%); } }

.tool-results { min-height: 280px; padding: 24px; }
.tool-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--tool-muted); text-align: center; }
.tool-empty i { color: #91a9cf; font-size: 34px; }
.tool-empty strong { color: var(--tool-ink); font-size: 18px; }
.result-intro {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: var(--tool-muted);
}
.result-intro strong { color: var(--tool-ink); }

.result-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.result-summary div { padding: 14px; border: 1px solid var(--tool-line); border-radius: 6px; }
.result-summary strong { display: block; margin-top: 4px; font-size: 22px; }
.result-list { display: grid; gap: 10px; }
.result-item {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--tool-line);
  border-radius: 7px;
}

.result-status { align-self: start; display: inline-flex; justify-content: center; padding: 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.result-status--normal { background: #e7f7f1; color: var(--tool-success); }
.result-status--risk { background: #fff0f0; color: var(--tool-danger); }
.result-status--review { background: #fff4db; color: var(--tool-warning); }
.result-status--unsupported { background: #edf1f6; color: #5e6d82; }
.result-status--pending { background: #eef4ff; color: #55709a; }
.result-item--pending { background: #fbfcff; }
.result-item--pending h3 { margin-bottom: 0; }
.result-item h3 { margin: 0 0 6px; color: var(--tool-ink); font-size: 16px; }
.result-item p { margin: 0; color: var(--tool-muted); line-height: 1.6; overflow-wrap: anywhere; }
.result-item details { margin-top: 8px; color: var(--tool-muted); }
.result-item code { white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-report-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 24px 24px; }
.tool-guidance {
  position: sticky;
  top: 96px;
  align-self: start;
  padding: 24px;
}
.tool-guidance h2 {
  margin: 0 0 14px !important;
  color: var(--tool-ink);
  font-size: 20px !important;
  line-height: 1.4 !important;
}
.tool-guidance h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px !important;
  color: var(--tool-blue);
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: 0;
}
.tool-guidance h3::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tool-blue);
  content: "";
  flex: 0 0 auto;
}
.tool-guidance p { margin: 0; color: var(--tool-muted); line-height: 1.7; }
.tool-guidance > p:first-of-type,
.tool-guidance h3 + p {
  padding: 13px 14px;
  border-left: 3px solid var(--tool-blue);
  border-radius: 0 6px 6px 0;
  background: #f5f8ff;
}
.tool-guidance h3 + p {
  border-left-color: var(--tool-success);
  background: #f2faf7;
}
.tool-guidance ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--tool-muted);
  counter-reset: guidance-step;
  list-style: none;
}
.tool-guidance li {
  position: relative;
  min-height: 24px;
  padding-left: 34px;
  line-height: 1.65;
  counter-increment: guidance-step;
}
.tool-guidance li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #bfd2ff;
  border-radius: 50%;
  background: #eef4ff;
  color: var(--tool-blue);
  font-size: 12px;
  font-weight: 800;
  content: counter(guidance-step);
}
.tool-guidance__links {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tool-line);
}
.tool-guidance a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--tool-line);
  border-radius: 6px;
  color: var(--tool-blue);
  font-weight: 700;
  line-height: 1.4;
}
.tool-guidance a::after { content: "\2192"; }
.tool-guidance a:hover { border-color: #9ebcff; background: #f5f8ff; }

.third-party-notice {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid #f0d7a4;
  border-radius: 7px;
  background: #fffaf0;
  color: #75510b;
}
.third-party-notice span { color: #6b5b3d; }

@media (max-width: 991px) {
  .toolbox-hero__inner,
  .tool-workspace-section > .container { grid-template-columns: 1fr; }
  .toolbox-hero__visual { min-height: 0; }
  .toolbox-hero__visual img { width: min(76vw, 360px); }
  .diagnostic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .issue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-guidance { position: static; order: -1; }
}

@media (max-width: 575px) {
  .toolbox-hero { padding: 112px 0 50px; }
  .tool-page-hero { padding: 106px 0 42px; }
  .toolbox-section { padding: 52px 0; }
  .toolbox-hero h1, .tool-page-hero h1 { font-size: 34px; }
  .toolbox-hero p, .tool-page-hero p { font-size: 16px; }
  .diagnostic-grid,
  .issue-grid,
  .tool-form,
  .result-summary { grid-template-columns: 1fr; }
  .toolbox-actions .toolbox-button { width: 100%; }
  .tool-workspace__header { align-items: stretch; flex-direction: column; }
  .tool-workspace__header > .toolbox-button { width: 100%; }
  .result-intro { align-items: flex-start; flex-direction: column; }
  .result-item { grid-template-columns: 1fr; gap: 10px; }
  .third-party-notice { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .diagnostic-card { transition: none; }
  .tool-progress span { animation: none; width: 100%; }
}