html.payload-surface,
html.payload-surface body { background-color: #07111f; }
html.tile-surface,
html.tile-surface body { background-color: #eef3f9; }

.tool-page .shell { width: min(calc(100% - 32px), 1544px); }
.tool-page .privacy-point a { margin-left: .55rem; color: #cbd4e2; }
.tile-tool-page { color-scheme: light; background-color: #eef3f9; }

.tool-surface-strip {
  width: 100%; margin-top: 1rem; padding: .9rem 1rem; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid #d9e0e9; border-radius: 14px; background: rgba(255,255,255,.88);
  color: #102039;
}
.tool-surface-trust p { margin: 0 0 .2rem; font-size: .78rem; line-height: 1.45; }
.tool-surface-trust a { color: #0c5df6; font-size: .76rem; font-weight: 750; }
.tool-surface-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.surface-button, .surface-support-link, .surface-header-support, .share-nudge button,
.share-dialog button {
  min-height: 2.35rem; padding: .55rem .8rem; border: 1px solid #cbd5e1;
  border-radius: 9px; color: #17345f; background: transparent;
  font: 750 .75rem/1.1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
}
.surface-button:hover { border-color: #0c5df6; color: #0c5df6; }
.surface-support-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .48rem;
  border-color: #0c5df6; color: #fff; background: #0c5df6;
  box-shadow: 0 8px 22px rgba(12,93,246,.22);
}
.surface-support-link:hover { border-color: #0848bd; color: #fff; background: #0848bd; }
.surface-header-support {
  min-height: 2.1rem; padding: .42rem .65rem; display: inline-flex; align-items: center;
  justify-content: center; gap: .38rem; border-color: #b9c9e6; color: #0c5df6;
  background: rgba(255,255,255,.78); white-space: nowrap;
}
.surface-header-support:hover { border-color: #0c5df6; color: #0848bd; background: #fff; }
.support-mark { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }
.surface-header-support .support-mark { width: 15px; height: 15px; flex-basis: 15px; }
.tool-header-meta { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; }
.tool-page .tool-surface-strip {
  border-color: #22304a; color: #f5f7fb; background: #0d1728;
}
.tool-page .surface-button {
  border-color: #34445e; color: #cbd4e2;
}
.tool-page .surface-button:hover {
  border-color: #3478f6; color: #fff;
}
.tool-page .surface-support-link { border-color: #3478f6; color: #fff; background: #0c5df6; }
.tool-page .surface-support-link:hover { border-color: #5b91f8; color: #fff; background: #3478f6; }
.tool-page .surface-header-support {
  border-color: #34445e; color: #d9e5fb; background: #111d31;
}
.tool-page .surface-header-support:hover { border-color: #3478f6; color: #fff; background: #102a55; }
.surface-button:focus-visible, .surface-support-link:focus-visible,
.surface-header-support:focus-visible, .share-nudge button:focus-visible,
.share-dialog button:focus-visible {
  outline: 3px solid rgba(12,93,246,.38); outline-offset: 3px;
}
.share-nudge {
  margin-top: .65rem; padding: .65rem .8rem; display: flex; align-items: center;
  justify-content: flex-end; gap: .65rem; border-left: 3px solid #0c5df6;
  color: #42516a; background: rgba(238,245,255,.8); font-size: .78rem;
}
.tool-page .share-nudge { color: #a4aec0; background: #0d1728; }
.share-nudge .nudge-dismiss { min-height: auto; padding: .35rem; border: 0; }
.share-nudge[hidden] { display: none !important; }
.share-dialog {
  width: min(calc(100% - 2rem), 34rem); max-width: 34rem; padding: 0;
  border: 1px solid #d9e0e9; border-radius: 18px; color: #102039; background: #fff;
  box-shadow: 0 28px 80px rgba(16,32,57,.24); overflow: hidden;
}
.share-dialog:not([open]) { display: none; }
.share-dialog::backdrop { background: rgba(7,18,47,.68); backdrop-filter: blur(3px); }
.share-dialog-panel { padding: 1.2rem; }
.share-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.share-dialog-head h2 { margin: 0; color: inherit; font-size: 1.25rem; letter-spacing: -.02em; }
.share-dialog-close {
  width: 2.25rem; min-height: 2.25rem; padding: 0; flex: 0 0 2.25rem;
  color: #5e6b7d; background: #f4f7fb; border-color: transparent; font-size: 1.35rem;
}
.share-dialog-close:hover { color: #102039; border-color: #cbd5e1; }
.share-dialog-message { margin: .85rem 0 1rem; color: #5e6b7d; font-size: .9rem; }
.share-link-row { display: flex; align-items: stretch; gap: .55rem; }
.share-link-preview {
  min-width: 0; padding: .72rem .78rem; flex: 1 1 auto; border: 1px solid #d9e0e9;
  border-radius: 10px; color: #42516a; background: #f7f9fc; overflow: hidden;
  font: 650 .75rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis; white-space: nowrap;
}
.share-dialog .share-copy-button {
  min-width: 6.8rem; border-color: #0c5df6; color: #fff; background: #0c5df6;
}
.share-dialog .share-copy-button:hover { border-color: #0848bd; background: #0848bd; }
.share-native-button { width: 100%; margin-top: .65rem; }
.share-native-button[hidden] { display: none !important; }
.share-status { min-height: 1.25rem; margin: .65rem 0 0; color: #08765a; font-size: .78rem; font-weight: 750; }
.tool-page .share-dialog { border-color: #34445e; color: #f5f7fb; background: #111d31; }
.tool-page .share-dialog-close { color: #a4aec0; background: #0d1728; }
.tool-page .share-dialog-close:hover { color: #fff; border-color: #34445e; }
.tool-page .share-dialog-message { color: #a4aec0; }
.tool-page .share-link-preview { border-color: #34445e; color: #cbd4e2; background: #0d1728; }
.tool-page .share-native-button { border-color: #34445e; color: #d9e5fb; }
.tool-page .share-native-button:hover { border-color: #3478f6; color: #fff; }
.tool-page .share-status { color: #7ee2b8; }
.future-ad-slot {
  min-height: 5.1rem; margin-top: .75rem; padding: .9rem 1rem; display: flex;
  align-items: center; justify-content: center; gap: .55rem; border: 1px dashed #94a3b8;
  border-radius: 12px; color: #64748b; background: rgba(248,250,252,.72);
  font-size: .75rem; text-align: center;
}
.tool-page .future-ad-slot { border-color: #34445e; color: #77839a; background: #0d1728; }
.future-ad-slot[data-ad-review-mode="production-disabled"] {
  display: none !important; min-height: 0; height: 0; margin: 0; padding: 0; border: 0;
}
.surface-footer {
  width: 100%; margin-top: 1rem; padding: .85rem 0 .25rem; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #d9e0e9;
  color: #5e6b7d; font-size: .72rem;
}
.surface-footer p, .surface-footer nav { margin: 0; }
.surface-footer nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.surface-footer a { color: inherit; font-weight: 700; text-decoration: none; }
.surface-footer a:hover { color: #0c5df6; }
.surface-footer-dark { border-color: #22304a; color: #77839a; }
.surface-page { min-height: 100vh; margin: 0; color: #102039; background: #f5f8fc;
  font: 16px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.surface-page header, .surface-page main, .surface-page .surface-footer {
  width: min(calc(100% - 2rem), 920px); margin-inline: auto;
}
.surface-page header { padding: 1.1rem 0; }
.surface-page header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.surface-page header a, .surface-page main a { color: #0c5df6; font-weight: 720; }
.surface-page main { padding: clamp(2rem, 6vw, 4.5rem) 0; }
.surface-page h1 { margin: 0 0 1rem; color: #102039; font-size: clamp(2rem, 6vw, 3.7rem);
  letter-spacing: -.045em; line-height: 1.02; }
.surface-page h2 { margin-top: 2rem; color: #102039; }
.surface-page .lede { color: #5e6b7d; font-size: 1.08rem; }
.surface-page .content-card { margin-top: 1.5rem; padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid #d9e0e9; border-radius: 16px; background: #fff; }
.tools-resources { padding: 1.2rem 0 3rem; background: #f7f9fc; }
.tools-resources-inner { width: min(calc(100% - 44px), 1060px); margin: 0 auto; }
.tools-resources nav { display: flex; flex-wrap: wrap; gap: .75rem 1.1rem; }
.tools-resources a { color: #31558e; font-size: .82rem; font-weight: 720; }

.surface-page main .surface-support-link,
.surface-page main .surface-support-link:hover,
.surface-page main .surface-support-link:focus-visible {
  border-color: #0c5df6; color: #fff; background: #0c5df6;
}
.surface-page main .surface-support-link:hover { border-color: #0848bd; background: #0848bd; }
.surface-page main .surface-support-link:focus-visible {
  outline: 3px solid rgba(12,93,246,.38); outline-offset: 3px;
}

@media (max-width: 700px) {
  .tool-page .shell { width: min(calc(100% - 20px), 1544px); }
  .tool-header-meta { width: 100%; align-items: flex-start; justify-content: space-between; }
  .tile-tool-page .masthead .surface-header-support { margin-top: .9rem; }
  .tool-surface-strip, .surface-footer, .share-nudge { align-items: flex-start; flex-direction: column; }
  .tool-surface-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .surface-button, .surface-support-link { justify-content: center; text-align: center; }
  .share-link-row { flex-direction: column; }
  .share-dialog .share-copy-button { width: 100%; }
  .future-ad-slot { align-items: center; flex-direction: column; }
}