/*
 * Dashmon public Demo + Tools visual alignment
 * Matches the established Solutions/Pricing product-page language without
 * changing either page's functional JavaScript, forms, charts, or APIs.
 */

body.product-page-aligned {
  --product-bg: #080d1a;
  --product-bg-2: #0d1525;
  --product-bg-3: #111c30;
  --product-panel: rgba(13, 21, 37, 0.84);
  --product-panel-strong: rgba(17, 28, 48, 0.92);
  --product-panel-soft: rgba(255, 255, 255, 0.038);
  --product-border: rgba(255, 255, 255, 0.075);
  --product-border-strong: rgba(255, 255, 255, 0.13);
  --product-text: #e2e8f0;
  --product-soft: #94a3b8;
  --product-muted: #64748b;
  --product-cyan: #00d4ff;
  --product-blue: #3b82f6;
  --product-violet: #8b5cf6;
  --product-emerald: #10d98c;
  --product-amber: #f59e0b;
  --product-rose: #f43f5e;
  --product-radius: 16px;
  --product-radius-large: 24px;
  --product-shadow: 0 30px 90px rgba(1, 4, 15, 0.34);
  color-scheme: dark;
  margin: 0;
  background:
    radial-gradient(ellipse 620px 430px at 8% 16%, rgba(0, 212, 255, 0.065) 0%, transparent 70%),
    radial-gradient(ellipse 560px 520px at 92% 74%, rgba(139, 92, 246, 0.075) 0%, transparent 72%),
    radial-gradient(ellipse 420px 320px at 52% 45%, rgba(16, 217, 140, 0.035) 0%, transparent 72%),
    var(--product-bg) !important;
  color: var(--product-text) !important;
  min-height: 100vh;
}

body.product-page-aligned::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.013) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 72%);
  z-index: 0;
}

body.product-page-aligned main,
body.product-page-aligned footer,
body.product-page-aligned .page-wrap {
  position: relative;
  z-index: 1;
}

body.product-page-aligned .page-wrap {
  width: min(1200px, calc(100% - 48px));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

body.product-page-aligned a { text-decoration: none; }

body.product-page-aligned :focus-visible {
  outline: 3px solid rgba(0, 212, 255, 0.42);
  outline-offset: 3px;
}

/* Shared page typography and controls */
body.product-page-aligned .eyebrow,
body.product-page-aligned .pane-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid rgba(0, 212, 255, 0.24) !important;
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.09) !important;
  color: var(--product-cyan) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  box-shadow: none !important;
}

body.product-page-aligned .eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--product-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, .7) !important;
}

body.product-page-aligned h1 {
  color: #fff !important;
  font-size: clamp(32px, 4.6vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

body.product-page-aligned .gradient-text {
  background: linear-gradient(135deg, #ffffff 4%, var(--product-cyan) 48%, #a78bfa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.product-page-aligned .lead,
body.product-page-aligned .section-head p,
body.product-page-aligned .pane-head p,
body.product-page-aligned .cta-card p,
body.product-page-aligned .muted,
body.product-page-aligned .helper-text,
body.product-page-aligned .field small {
  color: var(--product-soft) !important;
}

body.product-page-aligned .button-primary,
body.product-page-aligned .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 21px;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--product-cyan), #0099cc) !important;
  color: #03111a !important;
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 0 22px rgba(0, 212, 255, .22) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

body.product-page-aligned .button-primary:hover,
body.product-page-aligned .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 30px rgba(0, 212, 255, .36) !important;
}

body.product-page-aligned .button-secondary,
body.product-page-aligned .btn-secondary,
body.product-page-aligned .button-ghost,
body.product-page-aligned .btn-ghost,
body.product-page-aligned .tool-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--product-border-strong) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--product-text) !important;
  font-size: 14px;
  font-weight: 650;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

body.product-page-aligned .button-secondary:hover,
body.product-page-aligned .btn-secondary:hover,
body.product-page-aligned .button-ghost:hover,
body.product-page-aligned .btn-ghost:hover,
body.product-page-aligned .tool-copy-btn:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(0,212,255,.28) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Demo page
   -------------------------------------------------------------------------- */
body.product-page-demo .ambient { display: none !important; }

body.product-page-demo .hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 42px;
  align-items: center;
  margin: 38px 0 20px;
  padding: 48px;
  overflow: hidden;
  border: 1px solid var(--product-border-strong);
  border-radius: var(--product-radius-large);
  background: linear-gradient(135deg, rgba(13,21,37,.92), rgba(17,28,48,.9));
  box-shadow: var(--product-shadow);
}

body.product-page-demo .hero::before,
body.product-page-tools .hero-grid::before,
body.product-page-tools .workspace-wrap::before,
body.product-page-demo .section::before,
body.product-page-demo .cta-panel::before,
body.product-page-tools .cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--product-cyan), var(--product-violet), transparent);
  pointer-events: none;
}

body.product-page-demo .hero::after,
body.product-page-tools .hero-grid::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  top: -150px;
  right: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,.10), transparent 68%);
  pointer-events: none;
}

body.product-page-demo .hero > * { position: relative; z-index: 1; }
body.product-page-demo .hero .eyebrow { margin-bottom: 20px; }
body.product-page-demo .hero h1 { margin: 0 0 20px !important; max-width: 650px; }
body.product-page-demo .lead { font-size: 15px !important; line-height: 1.8 !important; }
body.product-page-demo .hero-actions { margin: 28px 0 24px !important; }

body.product-page-demo .chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
body.product-page-demo .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--product-border) !important;
  border-radius: 999px;
  background: rgba(255,255,255,.045) !important;
  color: var(--product-muted) !important;
  font-size: 12px;
  font-weight: 600;
}
body.product-page-demo .chip::before { background: var(--product-emerald) !important; }

body.product-page-demo .demo-window {
  border: 1px solid var(--product-border-strong) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(8,13,26,.98), rgba(22,34,56,.96)) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.product-page-demo .window-bar { border-color: var(--product-border) !important; }
body.product-page-demo .window-url,
body.product-page-demo .mini-card {
  background: rgba(255,255,255,.035) !important;
  border-color: var(--product-border) !important;
}
body.product-page-demo .mini-card strong { color: #fff !important; }
body.product-page-demo .mini-card span,
body.product-page-demo .window-live { color: var(--product-soft) !important; }

body.product-page-demo .notice-band {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  padding: 15px 18px;
  border: 1px solid rgba(59,130,246,.24) !important;
  border-radius: 14px !important;
  background: rgba(59,130,246,.075) !important;
  color: var(--product-soft) !important;
}

body.product-page-demo .section {
  position: relative;
  margin: 18px 0;
  padding: 42px 46px !important;
  overflow: hidden;
  border: 1px solid var(--product-border-strong) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(13,21,37,.82), rgba(17,28,48,.82)) !important;
}
body.product-page-demo .section-band { margin-inline: 0 !important; }
body.product-page-demo .section-divider { display: none !important; }
body.product-page-demo .section-head { margin-bottom: 28px !important; }
body.product-page-demo .section-head h2,
body.product-page-demo .cta-panel h2 {
  color: #fff !important;
  font-size: clamp(24px, 3vw, 31px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

body.product-page-demo .refresh-tag {
  border: 1px solid rgba(0,212,255,.18) !important;
  background: rgba(0,212,255,.07) !important;
  color: var(--product-cyan) !important;
}

body.product-page-demo .kpi-grid,
body.product-page-demo .demo-grid,
body.product-page-demo .alert-grid,
body.product-page-demo .workflow { gap: 14px !important; }

body.product-page-demo .kpi-card,
body.product-page-demo .panel,
body.product-page-demo .alert-card,
body.product-page-demo .work-card {
  border: 1px solid var(--product-border) !important;
  border-radius: var(--product-radius) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}
body.product-page-demo .kpi-card:hover,
body.product-page-demo .panel:hover,
body.product-page-demo .work-card:hover {
  border-color: var(--product-border-strong) !important;
  background: rgba(255,255,255,.052) !important;
}
body.product-page-demo .kpi-label,
body.product-page-demo .panel-sub,
body.product-page-demo .work-step,
body.product-page-demo .work-card span,
body.product-page-demo .alert-card p { color: var(--product-muted) !important; }
body.product-page-demo .kpi-value,
body.product-page-demo .panel-title,
body.product-page-demo .work-card b,
body.product-page-demo .alert-card h3 { color: #fff !important; }

body.product-page-demo .filters input,
body.product-page-demo .filters select {
  border: 1px solid var(--product-border-strong) !important;
  background: rgba(2,6,23,.42) !important;
  color: var(--product-text) !important;
}
body.product-page-demo .filters option { background: var(--product-bg-2); color: var(--product-text); }

body.product-page-demo .cta-panel {
  position: relative;
  margin: 18px 0 42px !important;
  padding: 40px 46px !important;
  overflow: hidden;
  border: 1px solid var(--product-border-strong) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(13,21,37,.9), rgba(36,22,71,.62)) !important;
}

body.product-page-demo footer {
  margin-top: 22px !important;
  border-top: 1px solid var(--product-border) !important;
  background: rgba(0,0,0,.22) !important;
  color: var(--product-muted) !important;
}
body.product-page-demo footer a { color: var(--product-muted) !important; }
body.product-page-demo footer a:hover { color: var(--product-cyan) !important; }

/* --------------------------------------------------------------------------
   Tools page
   -------------------------------------------------------------------------- */
body.product-page-tools .mobile-nav { display: none !important; }

body.product-page-tools .hero-section { padding: 38px 0 18px !important; }
body.product-page-tools .hero-grid {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important;
  gap: 34px !important;
  align-items: start !important;
  padding: 44px 46px !important;
  overflow: hidden;
  border: 1px solid var(--product-border-strong) !important;
  border-radius: var(--product-radius-large) !important;
  background: linear-gradient(135deg, rgba(13,21,37,.92), rgba(17,28,48,.9)) !important;
  box-shadow: var(--product-shadow) !important;
}
body.product-page-tools .hero-grid > * { position: relative; z-index: 1; }
body.product-page-tools .hero-copy-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 26px !important;
}
body.product-page-tools .hero-text { max-width: 720px; }
body.product-page-tools .hero-text h1 { margin: 18px 0 18px !important; }
body.product-page-tools .hero-actions { margin-top: 25px !important; }

body.product-page-tools .glance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 11px !important;
}
body.product-page-tools .glance-card,
body.product-page-tools .stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--product-border) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--product-text) !important;
  box-shadow: none !important;
}
body.product-page-tools .glance-card { padding: 16px !important; }
body.product-page-tools .glance-card::after { opacity: .35 !important; }
body.product-page-tools .glance-card strong,
body.product-page-tools .stat-card h2,
body.product-page-tools .stat-card h3 { color: #fff !important; }
body.product-page-tools .glance-card p,
body.product-page-tools .stat-card p,
body.product-page-tools .stat-grid span { color: var(--product-muted) !important; }
body.product-page-tools .glance-icon {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--product-border) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
}
body.product-page-tools .hero-aside { display: grid !important; gap: 14px !important; }
body.product-page-tools .stat-card { padding: 22px !important; }
body.product-page-tools .stat-grid div {
  border: 1px solid var(--product-border) !important;
  background: rgba(0,0,0,.22) !important;
}
body.product-page-tools .stat-grid strong { color: var(--product-cyan) !important; }

body.product-page-tools .workspace-section { padding: 18px 0 24px !important; }
body.product-page-tools .workspace-wrap {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(240px, 276px) minmax(0, 1fr) !important;
  gap: 24px !important;
  padding: 24px !important;
  overflow: hidden;
  border: 1px solid var(--product-border-strong) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(13,21,37,.9), rgba(17,28,48,.86)) !important;
  box-shadow: var(--product-shadow) !important;
}
body.product-page-tools .workspace-wrap > * { position: relative; z-index: 1; }
body.product-page-tools .workspace-sidebar { display: grid !important; gap: 12px !important; align-content: start; }
body.product-page-tools .sidebar-group {
  padding: 13px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.026) !important;
  box-shadow: none !important;
}
body.product-page-tools .sidebar-group-head h2 {
  color: var(--product-soft) !important;
  font-size: 12px !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}
body.product-page-tools .sidebar-heading-icon,
body.product-page-tools .sidebar-tool-icon {
  filter: saturate(.72) brightness(1.05);
}
body.product-page-tools .tool-list { gap: 7px !important; }
body.product-page-tools .tool-link {
  min-height: 43px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--product-soft) !important;
  box-shadow: none !important;
}
body.product-page-tools .tool-link:hover {
  border-color: var(--product-border) !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
}
body.product-page-tools .tool-link.is-active {
  border-color: rgba(0,212,255,.22) !important;
  background: rgba(0,212,255,.09) !important;
  color: var(--product-cyan) !important;
}

body.product-page-tools .pane-card {
  overflow: hidden;
  border: 1px solid var(--product-border) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.026) !important;
  box-shadow: none !important;
}
body.product-page-tools .pane-head {
  position: relative;
  padding: 24px 24px 20px !important;
  border-bottom: 1px solid var(--product-border) !important;
  background: linear-gradient(135deg, rgba(0,212,255,.045), rgba(139,92,246,.04)) !important;
}
body.product-page-tools .pane-head::after { opacity: .18 !important; }
body.product-page-tools .pane-head h3 {
  margin: 14px 0 8px !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
body.product-page-tools .pane-body { padding: 20px !important; }
body.product-page-tools .tool-panel {
  border: 1px solid var(--product-border) !important;
  border-radius: 15px !important;
  background: rgba(2,6,23,.28) !important;
  box-shadow: none !important;
}
body.product-page-tools .tool-panel:first-child::before { opacity: .22 !important; }

body.product-page-tools .field label { color: var(--product-soft) !important; }
body.product-page-tools .field input,
body.product-page-tools .field select,
body.product-page-tools .field textarea,
body.product-page-tools .sidebar-search {
  border: 1px solid var(--product-border-strong) !important;
  background: rgba(2,6,23,.52) !important;
  color: var(--product-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.product-page-tools .field input::placeholder,
body.product-page-tools .field textarea::placeholder,
body.product-page-tools .sidebar-search::placeholder { color: var(--product-muted) !important; }
body.product-page-tools .field input:focus,
body.product-page-tools .field select:focus,
body.product-page-tools .field textarea:focus,
body.product-page-tools .sidebar-search:focus {
  border-color: rgba(0,212,255,.42) !important;
  outline: 3px solid rgba(0,212,255,.10) !important;
}
body.product-page-tools .field option { background: var(--product-bg-2); color: var(--product-text); }

body.product-page-tools .result-shell,
body.product-page-tools .result-card,
body.product-page-tools .summary-block,
body.product-page-tools .metric-tile,
body.product-page-tools .monitor-cta-card,
body.product-page-tools .monitor-setup-preview,
body.product-page-tools .result-table,
body.product-page-tools .status-banner {
  border-color: var(--product-border) !important;
  background: rgba(2,6,23,.36) !important;
  color: var(--product-text) !important;
  box-shadow: none !important;
}
body.product-page-tools .result-placeholder,
body.product-page-tools .result-placeholder-text,
body.product-page-tools .result-list,
body.product-page-tools .result-card p,
body.product-page-tools .result-card li,
body.product-page-tools .summary-block > span,
body.product-page-tools .metric-tile span,
body.product-page-tools .info-row span,
body.product-page-tools .monitor-handoff-note { color: var(--product-soft) !important; }
body.product-page-tools .result-card h3,
body.product-page-tools .result-card h4,
body.product-page-tools .metric-tile strong,
body.product-page-tools .info-row strong,
body.product-page-tools .monitor-setup-preview__title { color: #fff !important; }
body.product-page-tools .result-code,
body.product-page-tools .copy-chip,
body.product-page-tools .badge-pill {
  border-color: var(--product-border) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--product-soft) !important;
}
body.product-page-tools .result-table th {
  border-color: var(--product-border) !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--product-soft) !important;
}
body.product-page-tools .result-table td {
  border-color: var(--product-border) !important;
  color: var(--product-text) !important;
}

body.product-page-tools .cta-section { padding: 0 0 42px !important; }
body.product-page-tools .cta-card {
  position: relative;
  overflow: hidden;
  padding: 40px 44px !important;
  border: 1px solid var(--product-border-strong) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(13,21,37,.9), rgba(36,22,71,.62)) !important;
  box-shadow: none !important;
}
body.product-page-tools .cta-card h2 { color: #fff !important; }
body.product-page-tools footer {
  border-top: 1px solid var(--product-border) !important;
  background: rgba(0,0,0,.22) !important;
  color: var(--product-muted) !important;
}
body.product-page-tools .footer-brand span { color: #fff !important; }
body.product-page-tools .footer-brand-mark {
  border: 1px solid rgba(96,165,250,.24) !important;
  background: linear-gradient(135deg,#eef5ff,#dbeafe) !important;
}
body.product-page-tools .footer-desc,
body.product-page-tools .footer-meta,
body.product-page-tools footer a { color: var(--product-muted) !important; }
body.product-page-tools footer a:hover { color: var(--product-cyan) !important; }
body.product-page-tools .footer-social a {
  border-color: var(--product-border) !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--product-soft) !important;
}

/* Responsive alignment */
@media (max-width: 980px) {
  body.product-page-aligned .page-wrap { width: min(100% - 32px, 1200px); }
  body.product-page-demo .hero,
  body.product-page-tools .hero-grid { grid-template-columns: 1fr !important; padding: 34px !important; }
  body.product-page-tools .workspace-wrap { grid-template-columns: 1fr !important; }
  body.product-page-tools .workspace-sidebar { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
}

@media (max-width: 720px) {
  body.product-page-aligned .page-wrap { width: min(100% - 24px, 1200px); }
  body.product-page-demo .hero,
  body.product-page-demo .section,
  body.product-page-demo .cta-panel,
  body.product-page-tools .hero-grid,
  body.product-page-tools .cta-card { padding: 28px 22px !important; }
  body.product-page-demo .hero { gap: 30px; }
  body.product-page-demo .section { margin: 14px 0; }
  body.product-page-tools .glance-grid,
  body.product-page-tools .workspace-sidebar { grid-template-columns: 1fr !important; }
  body.product-page-tools .workspace-wrap { padding: 14px !important; }
  body.product-page-tools .pane-head { padding: 21px 18px 18px !important; }
  body.product-page-tools .pane-body { padding: 14px !important; }
  body.product-page-tools .form-grid,
  body.product-page-tools .tool-layout { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.product-page-aligned *,
  body.product-page-aligned *::before,
  body.product-page-aligned *::after { transition: none !important; animation: none !important; }
}

/* Reset the legacy Tools hero's explicit second-column placement. */
body.product-page-tools .hero-text,
body.product-page-tools .hero-glance {
  grid-column: 1 !important;
  grid-row: auto !important;
}

body.product-page-tools .workspace-main {
  min-width: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: 18px !important;
  background: rgba(2,6,23,.30) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.product-page-tools .sidebar-group-head {
  margin: -13px -13px 10px !important;
  padding: 12px 13px 10px !important;
  border-bottom: 1px solid var(--product-border) !important;
  background: rgba(255,255,255,.025) !important;
}
body.product-page-tools .sidebar-group--dns,
body.product-page-tools .sidebar-group--seo,
body.product-page-tools .sidebar-group--net { border-top-color: rgba(0,212,255,.35) !important; }

/* Tools workspace v3: wide results, stable categories, and bounded technical output. */
body.product-page-aligned.product-page-tools .page-wrap {
  width: min(1760px, calc(100% - 24px));
  max-width: 1760px;
}

body.product-page-tools .workspace-wrap {
  grid-template-columns: minmax(204px, 224px) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 16px !important;
  overflow: visible;
}

body.product-page-tools .workspace-sidebar {
  position: sticky !important;
  top: 84px;
  max-height: none;
  min-width: 0;
  overflow: visible !important;
  padding-right: 0;
}

body.product-page-tools .workspace-sidebar .tool-list {
  gap: 4px !important;
}

body.product-page-tools .workspace-sidebar .tool-link {
  min-height: 36px !important;
  padding: 7px 8px !important;
}

body.product-page-tools .workspace-main {
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
}

body.product-page-tools .tool-pane,
body.product-page-tools .pane-card,
body.product-page-tools .pane-body,
body.product-page-tools .tool-panel,
body.product-page-tools .result-shell,
body.product-page-tools [data-tool-result] {
  min-width: 0;
  max-width: 100%;
}

body.product-page-tools .pane-body {
  display: grid !important;
  grid-template-columns: minmax(286px, 330px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start;
  padding: 16px !important;
}

body.product-page-tools .tool-panel {
  overflow: hidden;
  padding: 18px !important;
}

body.product-page-tools .tool-panel:first-child {
  border-right: 0 !important;
}

body.product-page-tools .metric-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px !important;
}

body.product-page-tools .metric-tile {
  min-width: 0;
}

body.product-page-tools .metric-tile strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.product-page-tools .result-table-scroll {
  width: 100%;
  max-width: 100%;
  max-height: min(62vh, 560px);
  overflow: auto !important;
  border: 1px solid var(--product-border);
  border-radius: 12px;
  background: rgba(2, 6, 23, .22);
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

body.product-page-tools .result-table-scroll:focus-visible {
  outline: 3px solid rgba(0, 212, 255, .22);
  outline-offset: 2px;
}

body.product-page-tools .result-table-scroll .result-table {
  width: max(100%, 760px) !important;
  min-width: 760px !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  table-layout: auto !important;
}

body.product-page-tools .result-table-scroll .result-table th,
body.product-page-tools .result-table-scroll .result-table td {
  min-width: 110px;
  vertical-align: top;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.product-page-tools .result-table-scroll .result-table th:first-child,
body.product-page-tools .result-table-scroll .result-table td:first-child {
  min-width: 150px;
}

body.product-page-tools .result-table-scroll .result-table td[data-wrap='true'] {
  min-width: 280px;
  max-width: 760px;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

body.product-page-tools .result-value,
body.product-page-tools .info-row code,
body.product-page-tools .info-row strong,
body.product-page-tools .copy-chip code,
body.product-page-tools .monitor-setup-preview__row code {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.product-page-tools .result-value {
  display: inline-block;
  max-width: 100%;
  color: #dbeafe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

body.product-page-tools .info-row {
  grid-template-columns: minmax(108px, 180px) minmax(0, 1fr) !important;
}

body.product-page-tools .result-code {
  max-height: 380px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.product-page-tools .result-notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: 12px;
  background: rgba(59, 130, 246, .08);
  color: var(--product-soft);
  line-height: 1.6;
}

body.product-page-tools .result-notice[data-kind='warning'] {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
}

body.product-page-tools .result-notice[data-kind='error'] {
  border-color: rgba(244, 63, 94, .30);
  background: rgba(244, 63, 94, .08);
}

@container (max-width: 900px) {
  body.product-page-tools .pane-body {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  body.product-page-tools .workspace-wrap {
    grid-template-columns: 1fr !important;
  }

  body.product-page-tools .workspace-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: none;
    overflow: visible !important;
  }
}

@media (max-width: 980px) {
  body.product-page-tools .pane-body {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  body.product-page-tools .result-table-scroll .result-table {
    width: max(100%, 680px) !important;
    min-width: 680px !important;
  }
}

@media (max-width: 720px) {
  body.product-page-aligned.product-page-tools .page-wrap {
    width: min(100% - 16px, 1760px);
  }

  body.product-page-tools .workspace-wrap {
    padding: 10px !important;
  }

  body.product-page-tools .workspace-sidebar {
    grid-template-columns: 1fr !important;
  }

  body.product-page-tools .workspace-main,
  body.product-page-tools .pane-body,
  body.product-page-tools .tool-panel {
    padding: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   Tools workspace v4: readable dark results + modern category navigation
   -------------------------------------------------------------------------- */
body.product-page-tools .workspace-sidebar {
  gap: 14px !important;
}

body.product-page-tools .sidebar-group {
  --tools-accent: 0, 212, 255;
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(var(--tools-accent), .20) !important;
  border-top: 1px solid rgba(var(--tools-accent), .34) !important;
  background:
    linear-gradient(145deg, rgba(var(--tools-accent), .075), rgba(255,255,255,.018) 42%, rgba(2,6,23,.42)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 15px 34px rgba(0,0,0,.16) !important;
}
body.product-page-tools .sidebar-group::before {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  right: -54px;
  top: -62px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--tools-accent), .19), transparent 68%);
  pointer-events: none;
  z-index: -1;
}
body.product-page-tools .sidebar-group--dns { --tools-accent: 0, 212, 255; }
body.product-page-tools .sidebar-group--seo { --tools-accent: 167, 139, 250; }
body.product-page-tools .sidebar-group--net { --tools-accent: 52, 211, 153; }

body.product-page-tools .sidebar-group-head {
  margin: 0 !important;
  padding: 12px 12px 10px !important;
  background: linear-gradient(90deg, rgba(var(--tools-accent), .10), rgba(255,255,255,.018)) !important;
  border-bottom: 1px solid rgba(var(--tools-accent), .15) !important;
}
body.product-page-tools .sidebar-group-head h2 {
  color: rgb(var(--tools-accent)) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 20px rgba(var(--tools-accent), .18);
}
body.product-page-tools .sidebar-heading-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(var(--tools-accent), .22) !important;
  background: rgba(var(--tools-accent), .10) !important;
  box-shadow: 0 0 18px rgba(var(--tools-accent), .10) !important;
  filter: none !important;
}
body.product-page-tools .workspace-sidebar .tool-list {
  padding: 7px !important;
  gap: 5px !important;
}
body.product-page-tools .workspace-sidebar .tool-link {
  --tool-icon-rgb: 148, 163, 184;
  min-height: 42px !important;
  padding: 7px 9px !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #b8c5d8 !important;
  background: rgba(2,6,23,.14) !important;
  font-weight: 650 !important;
}
body.product-page-tools .workspace-sidebar .tool-link:hover {
  color: #fff !important;
  border-color: rgba(var(--tool-icon-rgb), .24) !important;
  background: linear-gradient(90deg, rgba(var(--tool-icon-rgb), .10), rgba(255,255,255,.035)) !important;
  transform: translateX(2px);
}
body.product-page-tools .workspace-sidebar .tool-link.is-active {
  color: #fff !important;
  border-color: rgba(var(--tools-accent), .34) !important;
  background: linear-gradient(90deg, rgba(var(--tools-accent), .17), rgba(var(--tools-accent), .055)) !important;
  box-shadow: inset 3px 0 0 rgb(var(--tools-accent)), 0 8px 22px rgba(var(--tools-accent), .08) !important;
}
body.product-page-tools .sidebar-tool-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(var(--tool-icon-rgb), .25) !important;
  background: rgba(var(--tool-icon-rgb), .12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px rgba(var(--tool-icon-rgb), .08) !important;
  filter: none !important;
  font-size: .82rem !important;
}
body.product-page-tools .sidebar-tool-icon--dns { --tool-icon-rgb: 34, 211, 238; }
body.product-page-tools .sidebar-tool-icon--ssl { --tool-icon-rgb: 167, 139, 250; }
body.product-page-tools .sidebar-tool-icon--email { --tool-icon-rgb: 56, 189, 248; }
body.product-page-tools .sidebar-tool-icon--domain { --tool-icon-rgb: 251, 146, 60; }
body.product-page-tools .sidebar-tool-icon--ip { --tool-icon-rgb: 52, 211, 153; }
body.product-page-tools .sidebar-tool-icon--redirect { --tool-icon-rgb: 244, 114, 182; }
body.product-page-tools .sidebar-tool-icon--headers { --tool-icon-rgb: 148, 163, 184; }
body.product-page-tools .sidebar-tool-icon--robots { --tool-icon-rgb: 250, 204, 21; }
body.product-page-tools .sidebar-tool-icon--sitemap { --tool-icon-rgb: 45, 212, 191; }
body.product-page-tools .sidebar-tool-icon--performance { --tool-icon-rgb: 251, 113, 133; }
body.product-page-tools .sidebar-tool-icon--network { --tool-icon-rgb: 52, 211, 153; }

/* Legacy Tools CSS applies a light background to every code element. Override it
   at the product layer so technical values remain readable in the dark workspace. */
body.product-page-tools code,
body.product-page-tools .result-value,
body.product-page-tools .result-code,
body.product-page-tools .copy-chip code,
body.product-page-tools .info-row code,
body.product-page-tools .monitor-setup-preview__row code {
  background: rgba(15, 23, 42, .82) !important;
  border: 1px solid rgba(56, 189, 248, .18) !important;
  color: #dbeafe !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.product-page-tools .result-value {
  padding: 3px 7px !important;
  border-radius: 7px !important;
}
body.product-page-tools .result-table-scroll {
  border-color: rgba(56,189,248,.22) !important;
  background: rgba(2,6,23,.48) !important;
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.035) !important;
}
body.product-page-tools .result-table-scroll .result-table,
body.product-page-tools .result-table-scroll .result-table td {
  background: rgba(2,6,23,.26) !important;
}
body.product-page-tools .result-table-scroll .result-table tr:hover td {
  background: rgba(56,189,248,.045) !important;
}
body.product-page-tools .tool-policy {
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(59,130,246,.055)) !important;
  border: 1px solid rgba(56,189,248,.20) !important;
  color: #a9bdd4 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.product-page-tools .summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body.product-page-tools .summary-block {
  min-width: 0;
  background: linear-gradient(145deg, rgba(15,23,42,.88), rgba(2,6,23,.58)) !important;
  border-color: rgba(148,163,184,.15) !important;
}
body.product-page-tools .summary-block:nth-child(1) { border-top-color: rgba(245,158,11,.42) !important; }
body.product-page-tools .summary-block:nth-child(2) { border-top-color: rgba(52,211,153,.42) !important; }
body.product-page-tools .summary-block:nth-child(3) { border-top-color: rgba(167,139,250,.42) !important; }
body.product-page-tools .badge-pill--status {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}
body.product-page-tools .badge-pill--present,
body.product-page-tools .badge-pill--open,
body.product-page-tools .badge-pill--seen,
body.product-page-tools .badge-pill--success {
  background: rgba(16,185,129,.11) !important;
  border-color: rgba(52,211,153,.26) !important;
  color: #6ee7b7 !important;
}
body.product-page-tools .badge-pill--warning,
body.product-page-tools .badge-pill--mixed {
  background: rgba(245,158,11,.11) !important;
  border-color: rgba(251,191,36,.28) !important;
  color: #fcd34d !important;
}
body.product-page-tools .badge-pill--missing,
body.product-page-tools .badge-pill--not-seen,
body.product-page-tools .badge-pill--error {
  background: rgba(244,63,94,.10) !important;
  border-color: rgba(251,113,133,.26) !important;
  color: #fda4af !important;
}
body.product-page-tools .badge-pill--not-checked,
body.product-page-tools .badge-pill--neutral {
  background: rgba(148,163,184,.09) !important;
  border-color: rgba(148,163,184,.18) !important;
  color: #cbd5e1 !important;
}

@container (max-width: 760px) {
  body.product-page-tools .summary-grid {
    grid-template-columns: 1fr !important;
  }
}