/* =====================================================================
   tool-suite-theme.css
   Shared magenta / black theme for the 12 tool pages.

   Loaded AFTER ip-dashboard.css. Presentation only: no layout
   restructuring, no content changes, no DOM assumptions beyond the
   markup that already exists.

   Visual reference: the IP Intelligence dashboard (#page-ip).
     background    #0a090b
     panels        #151316 / #1a171b
     accent        #ff3d8d
     typography    white / gray

   Semantic colours (success green, warning amber, error red, and
   informational blue where it encodes data rather than brand) are
   deliberately left alone. See section 3 for the protected list.

   Contents
     1.  Tokens + page shell
     2.  Shared tool chrome (panels, headers, inputs, buttons, tabs,
         tables, terminals, toolbars, charts)
     3.  Semantic colour protection
     4.  #page-dns
     5.  #page-browser-ping
     6.  #page-http-headers
     7.  #page-traceroute
     8.  #page-internet-working
     9.  #page-cdn-simulator
     10. #page-ssl-enterprise-plus
     11. #page-media-gallery
     12. #page-customer-media-gallery
     13. #page-website-builder
     14. #page-live-chat
     15. #page-visitor-locations
     16. Reduced motion
     17. Explicit runtime chrome, overlays, and SSL UI
   ===================================================================== */


/* =====================================================================
   1. TOKENS + PAGE SHELL
   ===================================================================== */

/* The token block is attached to each themed section so that nothing
   leaks into pages outside this pass. Values mirror #page-ip. */
#page-dns,
#page-browser-ping,
#page-http-headers,
#page-traceroute,
#page-internet-working,
#page-cdn-simulator,
#page-ssl-enterprise-plus,
#page-media-gallery,
#page-customer-media-gallery,
#page-website-builder,
#page-live-chat,
#page-visitor-locations {
  --ts-bg: #0a090b;
  --ts-surface: #151316;
  --ts-surface-2: #1a171b;
  --ts-surface-3: #1c181c;
  --ts-inset: #0d0c0e;
  --ts-ink: #f4f1f3;
  --ts-muted: #aaa2a8;
  --ts-dim: #7d757b;
  --ts-magenta: #ff3d8d;
  --ts-magenta-soft: #ff9cc8;
  --ts-magenta-deep: #c4246a;
  --ts-line: rgba(255, 61, 141, 0.22);
  --ts-line-strong: rgba(255, 61, 141, 0.45);
  --ts-hairline: rgba(255, 255, 255, 0.07);
  --ts-glow: 0 0 20px rgba(255, 61, 141, 0.14);
  --ts-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  --ts-radius: 14px;
  --ts-radius-sm: 10px;
  --ts-mono: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);

  background:
    radial-gradient(circle at 80% 0%, rgba(255, 61, 141, 0.1), transparent 32%),
    var(--ts-bg);
  color: var(--ts-ink);
}

/* The global .page::before / ::after ambient orbs are indigo + cyan.
   Retint them magenta for these pages only. */
#page-dns::before,
#page-browser-ping::before,
#page-http-headers::before,
#page-traceroute::before,
#page-internet-working::before,
#page-cdn-simulator::before,
#page-ssl-enterprise-plus::before,
#page-media-gallery::before,
#page-customer-media-gallery::before,
#page-website-builder::before,
#page-live-chat::before,
#page-visitor-locations::before {
  background: rgba(255, 61, 141, 0.05);
}

#page-dns::after,
#page-browser-ping::after,
#page-http-headers::after,
#page-traceroute::after,
#page-internet-working::after,
#page-cdn-simulator::after,
#page-ssl-enterprise-plus::after,
#page-media-gallery::after,
#page-customer-media-gallery::after,
#page-website-builder::after,
#page-live-chat::after,
#page-visitor-locations::after {
  background: rgba(255, 61, 141, 0.025);
}

/* The decorative blur orbs inside the markup are indigo/cyan tinted
   divs. Retint rather than hide: they are part of the composition. */
#page-dns > div[class*="blur-"],
#page-browser-ping > div[class*="blur-"],
#page-http-headers > div[class*="blur-"],
#page-traceroute > div[class*="blur-"],
#page-internet-working > div[class*="blur-"],
#page-cdn-simulator > div[class*="blur-"],
#page-ssl-enterprise-plus > div[class*="blur-"] {
  background-color: rgba(255, 61, 141, 0.05) !important;
}

/* #page-ssl-enterprise-plus carries a slate gradient on the section
   itself via utility classes; neutralise it to the shared shell. */
#page-ssl-enterprise-plus.page {
  background-image:
    radial-gradient(circle at 80% 0%, rgba(255, 61, 141, 0.1), transparent 32%) !important;
  background-color: var(--ts-bg) !important;
}


/* =====================================================================
   2. SHARED TOOL CHROME

   Everything in this section is written as a selector list over the 12
   page IDs. The ID + descendant combination outranks Tailwind utility
   classes; !important is used only where a utility sets the same
   property with equal-or-higher weight, or where a page-level inline
   <style> block already won.
   ===================================================================== */

/* --------------------------------------------------------- 2.1 panels

   Tool panels are authored as .bg-slate-900/40, .bg-slate-800/..., and
   the malformed variants (bg-slate-950/60/40 etc). Rather than
   normalising those class names in the HTML — out of scope for a
   presentation pass — the descendant attribute selectors below match
   them where they sit inside a themed page. */
#page-dns [class*="bg-slate-9"],
#page-dns [class*="bg-slate-8"],
#page-browser-ping [class*="bg-slate-9"],
#page-browser-ping [class*="bg-slate-8"],
#page-http-headers [class*="bg-slate-9"],
#page-http-headers [class*="bg-slate-8"],
#page-traceroute [class*="bg-slate-9"],
#page-traceroute [class*="bg-slate-8"],
#page-internet-working [class*="bg-slate-9"],
#page-internet-working [class*="bg-slate-8"],
#page-cdn-simulator [class*="bg-slate-9"],
#page-cdn-simulator [class*="bg-slate-8"],
#page-ssl-enterprise-plus [class*="bg-slate-9"],
#page-ssl-enterprise-plus [class*="bg-slate-8"],
#page-media-gallery [class*="bg-slate-9"],
#page-media-gallery [class*="bg-slate-8"],
#page-customer-media-gallery [class*="bg-slate-9"],
#page-customer-media-gallery [class*="bg-slate-8"] {
  background-color: var(--ts-surface) !important;
  background-image: none !important;
}

/* Bordered surfaces pick up the magenta hairline. */
#page-dns [class*="border-slate-"],
#page-browser-ping [class*="border-slate-"],
#page-http-headers [class*="border-slate-"],
#page-traceroute [class*="border-slate-"],
#page-internet-working [class*="border-slate-"],
#page-cdn-simulator [class*="border-slate-"],
#page-ssl-enterprise-plus [class*="border-slate-"],
#page-media-gallery [class*="border-slate-"],
#page-customer-media-gallery [class*="border-slate-"],
#page-live-chat [class*="border-slate-"] {
  border-color: var(--ts-line) !important;
}

/* Card lift: the global theme hovers these to indigo. Make it magenta. */
#page-dns .rounded-xl:hover,
#page-dns .rounded-lg:hover,
#page-browser-ping .rounded-xl:hover,
#page-browser-ping .rounded-lg:hover,
#page-http-headers .rounded-xl:hover,
#page-http-headers .rounded-lg:hover,
#page-traceroute .rounded-xl:hover,
#page-traceroute .rounded-lg:hover,
#page-internet-working .rounded-xl:hover,
#page-internet-working .rounded-lg:hover,
#page-cdn-simulator .rounded-xl:hover,
#page-cdn-simulator .rounded-lg:hover,
#page-ssl-enterprise-plus .rounded-xl:hover,
#page-ssl-enterprise-plus .rounded-lg:hover,
#page-media-gallery .rounded-xl:hover,
#page-customer-media-gallery .rounded-xl:hover {
  border-color: var(--ts-line-strong) !important;
}

/* --------------------------------------------------- 2.2 typography */

/* Gradient-clipped headings resolve to brand cyan/blue. Replace the
   gradient with the magenta ramp, keeping the clip technique. */
#page-dns h2[class*="bg-clip-text"],
#page-dns h2[class*="text-transparent"],
#page-browser-ping h2[class*="bg-clip-text"],
#page-browser-ping h2[class*="text-transparent"],
#page-http-headers h2[class*="bg-clip-text"],
#page-traceroute h2[class*="bg-clip-text"],
#page-traceroute h2[class*="text-transparent"],
#page-internet-working h2[class*="bg-clip-text"],
#page-cdn-simulator h2[class*="bg-clip-text"],
#page-ssl-enterprise-plus h2[class*="bg-clip-text"] {
  background-image: linear-gradient(100deg, var(--ts-ink) 10%, var(--ts-magenta) 95%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Plain headings. */
#page-dns h2, #page-dns h3, #page-dns h4,
#page-browser-ping h2, #page-browser-ping h3, #page-browser-ping h4,
#page-http-headers h2, #page-http-headers h3, #page-http-headers h4,
#page-traceroute h2, #page-traceroute h3, #page-traceroute h4,
#page-internet-working h2, #page-internet-working h3, #page-internet-working h4,
#page-cdn-simulator h2, #page-cdn-simulator h3, #page-cdn-simulator h4,
#page-ssl-enterprise-plus h2, #page-ssl-enterprise-plus h3, #page-ssl-enterprise-plus h4,
#page-media-gallery h2,
#page-customer-media-gallery h2,
#page-live-chat h2,
#page-visitor-locations h2, #page-visitor-locations h3 {
  color: var(--ts-ink);
}

/* Brand-coloured text (cyan / sky / blue / indigo / purple / violet)
   becomes magenta. Semantic hues are untouched — see section 3. */
#page-dns [class*="text-cyan-"], #page-dns [class*="text-sky-"],
#page-dns [class*="text-indigo-"], #page-dns [class*="text-violet-"],
#page-dns [class*="text-purple-"],
#page-browser-ping [class*="text-cyan-"], #page-browser-ping [class*="text-sky-"],
#page-browser-ping [class*="text-indigo-"], #page-browser-ping [class*="text-violet-"],
#page-browser-ping [class*="text-purple-"],
#page-http-headers [class*="text-cyan-"], #page-http-headers [class*="text-sky-"],
#page-http-headers [class*="text-indigo-"], #page-http-headers [class*="text-violet-"],
#page-http-headers [class*="text-purple-"],
#page-traceroute [class*="text-cyan-"], #page-traceroute [class*="text-sky-"],
#page-traceroute [class*="text-indigo-"], #page-traceroute [class*="text-violet-"],
#page-traceroute [class*="text-purple-"],
#page-internet-working [class*="text-cyan-"], #page-internet-working [class*="text-sky-"],
#page-internet-working [class*="text-indigo-"], #page-internet-working [class*="text-violet-"],
#page-internet-working [class*="text-purple-"],
#page-cdn-simulator [class*="text-cyan-"], #page-cdn-simulator [class*="text-sky-"],
#page-cdn-simulator [class*="text-indigo-"], #page-cdn-simulator [class*="text-violet-"],
#page-cdn-simulator [class*="text-purple-"],
#page-ssl-enterprise-plus [class*="text-cyan-"], #page-ssl-enterprise-plus [class*="text-sky-"],
#page-ssl-enterprise-plus [class*="text-indigo-"], #page-ssl-enterprise-plus [class*="text-violet-"],
#page-ssl-enterprise-plus [class*="text-purple-"],
#page-media-gallery [class*="text-cyan-"],
#page-customer-media-gallery [class*="text-cyan-"],
#page-live-chat [class*="text-cyan-"],
#page-visitor-locations [class*="text-cyan-"] {
  color: var(--ts-magenta) !important;
}

/* Muted body copy. */
#page-dns .text-gray-400, #page-dns .text-gray-500, #page-dns .text-slate-400,
#page-browser-ping .text-gray-400, #page-browser-ping .text-gray-500,
#page-http-headers .text-gray-400, #page-http-headers .text-gray-500,
#page-traceroute .text-slate-400, #page-traceroute .text-slate-500,
#page-traceroute .text-gray-400, #page-traceroute .text-gray-500,
#page-internet-working .text-gray-400, #page-internet-working .text-gray-500,
#page-cdn-simulator .text-gray-400, #page-cdn-simulator .text-gray-500,
#page-ssl-enterprise-plus .text-gray-400, #page-ssl-enterprise-plus .text-gray-500,
#page-media-gallery .text-gray-400, #page-media-gallery .text-gray-500,
#page-customer-media-gallery .text-gray-400, #page-customer-media-gallery .text-gray-500,
#page-live-chat .text-gray-400, #page-live-chat .text-gray-500 {
  color: var(--ts-muted);
}

/* Monospace output keeps the dashboard's mono stack. */
#page-dns .font-mono, #page-dns pre, #page-dns code,
#page-browser-ping .font-mono, #page-browser-ping pre, #page-browser-ping code,
#page-http-headers .font-mono, #page-http-headers pre, #page-http-headers code,
#page-traceroute .font-mono, #page-traceroute pre, #page-traceroute code,
#page-internet-working .font-mono, #page-internet-working pre, #page-internet-working code,
#page-cdn-simulator .font-mono, #page-cdn-simulator pre, #page-cdn-simulator code,
#page-ssl-enterprise-plus .font-mono, #page-ssl-enterprise-plus pre, #page-ssl-enterprise-plus code {
  font-family: var(--ts-mono);
}

/* ------------------------------------------------------- 2.3 inputs */

#page-dns input[type="text"], #page-dns input[type="url"],
#page-dns input[type="number"], #page-dns select,
#page-browser-ping input[type="text"], #page-browser-ping input[type="url"],
#page-browser-ping input[type="number"], #page-browser-ping select,
#page-http-headers input[type="text"], #page-http-headers input[type="url"],
#page-traceroute input[type="text"], #page-traceroute input[type="url"],
#page-traceroute input[type="number"], #page-traceroute select,
#page-internet-working input[type="text"], #page-internet-working input[type="url"],
#page-internet-working select,
#page-cdn-simulator input[type="text"], #page-cdn-simulator input[type="number"],
#page-cdn-simulator select,
#page-ssl-enterprise-plus input[type="text"], #page-ssl-enterprise-plus input[type="url"],
#page-ssl-enterprise-plus input[type="number"], #page-ssl-enterprise-plus textarea,
#page-customer-media-gallery input[type="text"],
#page-customer-media-gallery input[type="email"],
#page-customer-media-gallery input[type="password"] {
  background: var(--ts-inset) !important;
  border: 1px solid var(--ts-line) !important;
  border-radius: var(--ts-radius-sm) !important;
  color: var(--ts-ink) !important;
}

#page-dns input::placeholder,
#page-browser-ping input::placeholder,
#page-http-headers input::placeholder,
#page-traceroute input::placeholder,
#page-internet-working input::placeholder,
#page-cdn-simulator input::placeholder,
#page-ssl-enterprise-plus input::placeholder,
#page-ssl-enterprise-plus textarea::placeholder,
#page-customer-media-gallery input::placeholder {
  color: var(--ts-dim) !important;
}

#page-dns input:focus, #page-dns select:focus,
#page-browser-ping input:focus, #page-browser-ping select:focus,
#page-http-headers input:focus,
#page-traceroute input:focus, #page-traceroute select:focus,
#page-internet-working input:focus, #page-internet-working select:focus,
#page-cdn-simulator input:focus, #page-cdn-simulator select:focus,
#page-ssl-enterprise-plus input:focus, #page-ssl-enterprise-plus textarea:focus,
#page-customer-media-gallery input:focus {
  border-color: var(--ts-magenta) !important;
  box-shadow: 0 0 0 3px rgba(255, 61, 141, 0.12) !important;
  outline: none !important;
}

/* Checkboxes, radios and range sliders. */
#page-dns input[type="checkbox"], #page-dns input[type="radio"],
#page-http-headers input[type="checkbox"],
#page-traceroute input[type="checkbox"], #page-traceroute input[type="radio"],
#page-internet-working input[type="checkbox"],
#page-cdn-simulator input[type="checkbox"],
#page-ssl-enterprise-plus input[type="checkbox"], #page-ssl-enterprise-plus input[type="radio"] {
  accent-color: var(--ts-magenta);
}

#page-dns input[type="range"],
#page-browser-ping input[type="range"],
#page-traceroute input[type="range"],
#page-cdn-simulator input[type="range"],
#page-ssl-enterprise-plus input[type="range"] {
  accent-color: var(--ts-magenta);
}

/* ------------------------------------------------------ 2.4 buttons */

/* Primary actions: the brand gradient buttons. */
#page-dns button[class*="from-cyan-"], #page-dns button[class*="from-sky-"],
#page-dns button[class*="bg-sky-"], #page-dns button[class*="bg-blue-"],
#page-dns button[class*="bg-indigo-"],
#page-browser-ping button[class*="from-cyan-"], #page-browser-ping button[class*="from-sky-"],
#page-browser-ping button[class*="bg-sky-"], #page-browser-ping button[class*="bg-blue-"],
#page-http-headers button[class*="from-cyan-"], #page-http-headers button[class*="bg-sky-"],
#page-traceroute button[class*="from-cyan-"], #page-traceroute button[class*="from-sky-"],
#page-traceroute button[class*="bg-sky-"], #page-traceroute button[class*="bg-blue-"],
#page-internet-working button[class*="from-cyan-"], #page-internet-working button[class*="bg-sky-"],
#page-cdn-simulator button[class*="from-cyan-"], #page-cdn-simulator button[class*="from-sky-"],
#page-cdn-simulator button[class*="bg-sky-"],
#page-ssl-enterprise-plus button[class*="from-cyan-"], #page-ssl-enterprise-plus button[class*="from-sky-"],
#page-ssl-enterprise-plus button[class*="bg-sky-"],
#page-media-gallery button[class*="from-cyan-"],
#page-customer-media-gallery button[class*="from-cyan-"] {
  background-image: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #0a090b !important;
  font-weight: 700;
}

#page-dns button[class*="from-cyan-"]:hover, #page-dns button[class*="bg-sky-"]:hover,
#page-browser-ping button[class*="from-cyan-"]:hover,
#page-http-headers button[class*="bg-sky-"]:hover,
#page-traceroute button[class*="from-cyan-"]:hover,
#page-internet-working button[class*="from-cyan-"]:hover,
#page-cdn-simulator button[class*="from-cyan-"]:hover,
#page-ssl-enterprise-plus button[class*="from-cyan-"]:hover,
#page-media-gallery button[class*="from-cyan-"]:hover,
#page-customer-media-gallery button[class*="from-cyan-"]:hover {
  background-image: linear-gradient(135deg, var(--ts-magenta-soft), var(--ts-magenta)) !important;
  box-shadow: var(--ts-glow) !important;
}

/* Secondary / neutral buttons. */
#page-dns button[class*="bg-slate-7"], #page-dns button[class*="bg-slate-8"],
#page-browser-ping button[class*="bg-slate-7"], #page-browser-ping button[class*="bg-slate-8"],
#page-http-headers button[class*="bg-slate-7"],
#page-traceroute button[class*="bg-slate-7"], #page-traceroute button[class*="bg-slate-8"],
#page-internet-working button[class*="bg-slate-7"],
#page-cdn-simulator button[class*="bg-slate-7"],
#page-ssl-enterprise-plus button[class*="bg-slate-7"],
#page-customer-media-gallery button[class*="bg-slate-7"] {
  background-color: var(--ts-surface-3) !important;
  background-image: none !important;
  border: 1px solid var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#page-dns button[class*="bg-slate-7"]:hover,
#page-browser-ping button[class*="bg-slate-7"]:hover,
#page-http-headers button[class*="bg-slate-7"]:hover,
#page-traceroute button[class*="bg-slate-7"]:hover,
#page-internet-working button[class*="bg-slate-7"]:hover,
#page-cdn-simulator button[class*="bg-slate-7"]:hover,
#page-ssl-enterprise-plus button[class*="bg-slate-7"]:hover,
#page-customer-media-gallery button[class*="bg-slate-7"]:hover {
  border-color: var(--ts-line-strong) !important;
  background-color: #241e24 !important;
}

/* Ghost / icon buttons inside toolbars. */
#page-dns button:hover[class*="hover:bg-white"],
#page-browser-ping button:hover[class*="hover:bg-white"],
#page-http-headers button:hover[class*="hover:bg-white"],
#page-traceroute button:hover[class*="hover:bg-white"],
#page-cdn-simulator button:hover[class*="hover:bg-white"],
#page-ssl-enterprise-plus button:hover[class*="hover:bg-white"] {
  background-color: rgba(255, 61, 141, 0.1) !important;
  color: var(--ts-ink) !important;
}

/* Focus ring, matching the dashboard. */
#page-dns :is(button, a, input, select, textarea):focus-visible,
#page-browser-ping :is(button, a, input, select, textarea):focus-visible,
#page-http-headers :is(button, a, input, select, textarea):focus-visible,
#page-traceroute :is(button, a, input, select, textarea):focus-visible,
#page-internet-working :is(button, a, input, select, textarea):focus-visible,
#page-cdn-simulator :is(button, a, input, select, textarea):focus-visible,
#page-ssl-enterprise-plus :is(button, a, input, select, textarea):focus-visible,
#page-media-gallery :is(button, a, input):focus-visible,
#page-customer-media-gallery :is(button, a, input):focus-visible,
#page-live-chat :is(button, a, input):focus-visible,
#page-visitor-locations :is(button, a):focus-visible {
  outline: 2px solid var(--ts-magenta) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------- 2.5 tabs */

/* Toolbar / tab strips sit on an inset bar. */
#page-dns .dns-tab-content,
#page-http-headers .headers-tab-content,
#page-cdn-simulator .cdn-tab-content,
#page-ssl-enterprise-plus .ssl-tab-content {
  color: var(--ts-ink);
}

/* Underline-style tabs: active state becomes magenta. */
#page-http-headers .headers-tab-btn[class*="border-sky-"],
#page-http-headers .headers-tab-btn[class*="text-cyan-"],
#page-ssl-enterprise-plus .ssl-tab-btn.active,
#page-ssl-enterprise-plus .ssl-tab-btn[class*="border-sky-"] {
  color: var(--ts-magenta) !important;
  border-bottom-color: var(--ts-magenta) !important;
  background-color: rgba(255, 61, 141, 0.08) !important;
}

#page-http-headers .headers-tab-btn:hover,
#page-ssl-enterprise-plus .ssl-tab-btn:hover {
  color: var(--ts-ink) !important;
  background-color: rgba(255, 61, 141, 0.06) !important;
}

/* ------------------------------------------------------- 2.6 tables */

#page-dns table, #page-browser-ping table, #page-http-headers table,
#page-traceroute table, #page-internet-working table,
#page-cdn-simulator table, #page-ssl-enterprise-plus table {
  border: 1px solid var(--ts-line);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

#page-dns th, #page-browser-ping th, #page-http-headers th,
#page-traceroute th, #page-internet-working th,
#page-cdn-simulator th, #page-ssl-enterprise-plus th {
  background: var(--ts-inset);
  color: var(--ts-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ts-line);
}

#page-dns td, #page-browser-ping td, #page-http-headers td,
#page-traceroute td, #page-internet-working td,
#page-cdn-simulator td, #page-ssl-enterprise-plus td {
  color: var(--ts-muted);
  border-bottom: 1px solid var(--ts-hairline);
}

#page-dns tbody tr:hover, #page-browser-ping tbody tr:hover,
#page-http-headers tbody tr:hover, #page-traceroute tbody tr:hover,
#page-internet-working tbody tr:hover, #page-cdn-simulator tbody tr:hover,
#page-ssl-enterprise-plus tbody tr:hover {
  background: rgba(255, 61, 141, 0.05);
}

/* ---------------------------------------------------- 2.7 terminals */

/* Terminal shells are authored as .bg-black. Keep them near-black but
   align to the page ink, and give them the magenta hairline. */
#page-dns .bg-black,
#page-browser-ping .bg-black,
#page-http-headers .bg-black {
  background-color: #060507 !important;
  border: 1px solid var(--ts-line);
}

/* --------------------------------------------- 2.8 charts + canvases */

/* Canvas pixels are drawn by JS and are not CSS-addressable. Only the
   frame around them is themed here. */
#page-browser-ping canvas,
#page-cdn-simulator canvas,
#page-ssl-enterprise-plus canvas {
  border-radius: var(--ts-radius-sm);
}

/* ----------------------------------------------- 2.9 scrollbars */

#page-dns *::-webkit-scrollbar-thumb,
#page-browser-ping *::-webkit-scrollbar-thumb,
#page-http-headers *::-webkit-scrollbar-thumb,
#page-traceroute *::-webkit-scrollbar-thumb,
#page-internet-working *::-webkit-scrollbar-thumb,
#page-cdn-simulator *::-webkit-scrollbar-thumb,
#page-ssl-enterprise-plus *::-webkit-scrollbar-thumb,
#page-live-chat *::-webkit-scrollbar-thumb,
#page-visitor-locations *::-webkit-scrollbar-thumb {
  background: rgba(255, 61, 141, 0.3);
}

#page-dns *::-webkit-scrollbar-track,
#page-browser-ping *::-webkit-scrollbar-track,
#page-http-headers *::-webkit-scrollbar-track,
#page-traceroute *::-webkit-scrollbar-track,
#page-cdn-simulator *::-webkit-scrollbar-track,
#page-ssl-enterprise-plus *::-webkit-scrollbar-track,
#page-live-chat *::-webkit-scrollbar-track {
  background: var(--ts-inset);
}


/* =====================================================================
   3. SEMANTIC COLOUR PROTECTION

   Green / amber / red / orange encode state, not brand, and are left
   as authored. This section exists to re-assert them where a broad
   rule in section 2 would otherwise have swept them up, and to keep
   their containers legible on the darker surface.

   Also protected, per the brief:
     - SSL grades
     - CDN cache statuses
     - latency severity bands
   None of these are recoloured to magenta anywhere in this file.
   ===================================================================== */

/* Status text keeps its hue; only the surrounding tint is harmonised. */
#page-dns [class*="bg-green-"], #page-dns [class*="bg-emerald-"],
#page-browser-ping [class*="bg-green-"], #page-browser-ping [class*="bg-emerald-"],
#page-http-headers [class*="bg-green-"], #page-http-headers [class*="bg-emerald-"],
#page-traceroute [class*="bg-green-"], #page-traceroute [class*="bg-emerald-"],
#page-internet-working [class*="bg-green-"], #page-internet-working [class*="bg-emerald-"],
#page-cdn-simulator [class*="bg-green-"], #page-cdn-simulator [class*="bg-emerald-"],
#page-ssl-enterprise-plus [class*="bg-green-"], #page-ssl-enterprise-plus [class*="bg-emerald-"] {
  border-color: rgba(34, 197, 94, 0.3) !important;
}

#page-dns [class*="bg-amber-"], #page-dns [class*="bg-yellow-"], #page-dns [class*="bg-orange-"],
#page-browser-ping [class*="bg-amber-"], #page-browser-ping [class*="bg-yellow-"],
#page-browser-ping [class*="bg-orange-"],
#page-http-headers [class*="bg-amber-"], #page-http-headers [class*="bg-yellow-"],
#page-traceroute [class*="bg-amber-"], #page-traceroute [class*="bg-yellow-"],
#page-traceroute [class*="bg-orange-"],
#page-internet-working [class*="bg-amber-"], #page-internet-working [class*="bg-orange-"],
#page-cdn-simulator [class*="bg-amber-"], #page-cdn-simulator [class*="bg-yellow-"],
#page-cdn-simulator [class*="bg-orange-"],
#page-ssl-enterprise-plus [class*="bg-amber-"], #page-ssl-enterprise-plus [class*="bg-yellow-"],
#page-ssl-enterprise-plus [class*="bg-orange-"] {
  border-color: rgba(245, 158, 11, 0.3) !important;
}

#page-dns [class*="bg-red-"], #page-dns [class*="bg-rose-"],
#page-browser-ping [class*="bg-red-"], #page-browser-ping [class*="bg-rose-"],
#page-http-headers [class*="bg-red-"],
#page-traceroute [class*="bg-red-"], #page-traceroute [class*="bg-rose-"],
#page-internet-working [class*="bg-red-"],
#page-cdn-simulator [class*="bg-red-"], #page-cdn-simulator [class*="bg-rose-"],
#page-ssl-enterprise-plus [class*="bg-red-"], #page-ssl-enterprise-plus [class*="bg-rose-"],
#page-customer-media-gallery [class*="bg-red-"] {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* The section 2.1 panel sweep matches on bg-slate-*. Status chips that
   also carry a slate utility must keep their semantic fill, so restore
   the ones that pair both. */
#page-dns [class*="bg-green-"][class*="bg-slate-"],
#page-traceroute [class*="bg-emerald-"][class*="bg-slate-"],
#page-cdn-simulator [class*="bg-green-"][class*="bg-slate-"] {
  background-color: rgba(34, 197, 94, 0.12) !important;
}

/* Terminal output is conventionally green-on-black. Preserve it. */
#page-dns #terminalOutput,
#page-dns #terminalInput,
#page-dns .text-green-400,
#page-browser-ping #pingTerminal,
#page-browser-ping .text-green-400 {
  color: #4ade80;
}

/* The terminal traffic-light dots (.bg-red-500 / .bg-yellow-500 /
   .bg-green-500) are intentionally not listed anywhere in this file —
   no rule here matches them, so they keep their authored colours. */


/* =====================================================================
   4. #page-dns — DNS Enterprise Suite
   ===================================================================== */

/* Header mark. */
#page-dns [class*="from-sky-400"][class*="to-blue-600"] {
  background-image: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-soft)) !important;
}

/* Quick-action row: slate gradient pills with cyan text. */
#page-dns button[class*="from-slate-800"] {
  background-image: linear-gradient(135deg, var(--ts-surface-2), var(--ts-surface)) !important;
  border-color: var(--ts-line) !important;
}

#page-dns button[class*="from-slate-800"]:hover {
  border-color: var(--ts-line-strong) !important;
  box-shadow: var(--ts-glow) !important;
}

/* Export toolbar strip. */
#page-dns .rounded-lg.p-1[class*="bg-slate-"] {
  background-color: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
}

/* Live query counter chip. */
#page-dns #liveQueryCounter {
  color: var(--ts-magenta) !important;
  font-family: var(--ts-mono);
}

/* Terminal: black shell, magenta chrome, green output (protected in
   section 3). The prompt caret and input inherit that green. */
#page-dns #terminalOutput {
  font-family: var(--ts-mono);
}

#page-dns #terminalInput {
  background: transparent !important;
  border: none !important;
  font-family: var(--ts-mono);
}

#page-dns #terminalInput::placeholder {
  color: #3f4a40 !important;
}

/* Tab panels. */
#page-dns .dns-tab-content,
#page-dns .perf-subtab-panel {
  color: var(--ts-ink);
}

#page-dns .perf-subtab-btn[class*="text-cyan-"],
#page-dns .perf-subtab-btn[class*="border-sky-"] {
  color: var(--ts-magenta) !important;
  border-color: var(--ts-magenta) !important;
}

/* Bulk-mode toggle. The checked fill is set by an inline <style> block
   in the page, so it needs matching specificity to retint. */
#page-dns #bulkModeToggle:checked ~ .toggle-bg {
  background-color: var(--ts-magenta) !important;
}


/* =====================================================================
   5. #page-browser-ping — Network Latency Analyzer
   ===================================================================== */

/* Export toolbar strip. */
#page-browser-ping .rounded-lg.p-1[class*="bg-slate-"],
#page-browser-ping .flex.rounded-lg.p-1 {
  background-color: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
}

/* Start / Stop keep green and red: they are state, not brand. The
   Clear button is neutral chrome and is handled by 2.4. */

/* Live ping terminal. */
#page-browser-ping #pingTerminal {
  font-family: var(--ts-mono);
}

/* Idle / running status pill text. */
#page-browser-ping #pingStatus .text-gray-500 {
  color: var(--ts-muted);
}

/* Quick-target chips. */
#page-browser-ping .quick-target {
  border-color: var(--ts-line) !important;
}

#page-browser-ping .quick-target:hover {
  border-color: var(--ts-line-strong) !important;
  background-color: rgba(255, 61, 141, 0.06) !important;
}

#page-browser-ping .quick-latency {
  color: var(--ts-muted);
  font-family: var(--ts-mono);
}

/* Chart frame. */
#page-browser-ping canvas {
  background-color: var(--ts-inset);
}


/* =====================================================================
   6. #page-http-headers — HTTP Header Analyzer
   ===================================================================== */

/* Header mark. */
#page-http-headers [class*="from-sky-400"][class*="to-blue-600"] {
  background-image: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-soft)) !important;
}

/* The analyse button is a flat .bg-sky-400 with black text; the
   gradient in 2.4 already covers it, this only fixes the hover pair. */
#page-http-headers button[class*="hover:bg-sky-300"]:hover {
  background-image: linear-gradient(135deg, var(--ts-magenta-soft), var(--ts-magenta)) !important;
}

/* Main URL input sits in a large panel — give it more presence. */
#page-http-headers #headersUrl {
  font-family: var(--ts-mono);
}

/* Tab strip container. */
#page-http-headers .headers-tab-btn {
  border-bottom-color: transparent;
  color: var(--ts-muted);
}

/* Raw header output block. */
#page-http-headers pre,
#page-http-headers .bg-black {
  color: var(--ts-ink);
  font-family: var(--ts-mono);
}


/* =====================================================================
   7. #page-traceroute — Traceroute / MTR
   ===================================================================== */

/* This page ships a large inline <style> block that includes a theme
   switcher (body.theme-light / midnight / forest / sunset) and a set
   of enterprise card effects. Those rules target body-level classes
   and generic utility names, so the overrides below are scoped to the
   section to win without touching the switcher's behaviour. */

#page-traceroute .glass-panel,
#page-traceroute .enterprise-card {
  background: linear-gradient(145deg, var(--ts-surface-2), #111013) !important;
  border: 1px solid var(--ts-line) !important;
  box-shadow: var(--ts-shadow) !important;
}

#page-traceroute .enterprise-card:hover {
  border-color: var(--ts-line-strong) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), var(--ts-glow) !important;
}

/* Header row hover. */
#page-traceroute .header-row:hover {
  background: rgba(255, 61, 141, 0.06) !important;
}

/* Tooltips. */
#page-traceroute [data-tooltip]::after {
  background: var(--ts-surface-2) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

/* Custom scrollbar declared inline for the headers list. */
#page-traceroute #allHeadersList::-webkit-scrollbar-track {
  background: var(--ts-inset) !important;
}

#page-traceroute #allHeadersList::-webkit-scrollbar-thumb {
  background: rgba(255, 61, 141, 0.3) !important;
}

#page-traceroute #allHeadersList::-webkit-scrollbar-thumb:hover {
  background: var(--ts-line-strong) !important;
}

/* Spinner ring accent. */
#page-traceroute .spinner-ring::before {
  border-top-color: var(--ts-line-strong) !important;
}

/* Hop list rows and location labels. */
#page-traceroute .tr-location {
  color: var(--ts-muted);
}

/* Latency severity (emerald / amber / rose) and grade badges are
   deliberately excluded here — see section 3. */

/* Live ping terminal shared with the DNS tool. */
#page-traceroute #pingTerminal {
  background-color: #060507 !important;
  border: 1px solid var(--ts-line);
  font-family: var(--ts-mono);
}


/* =====================================================================
   8. #page-internet-working — How The Internet Works
   ===================================================================== */

/* OSI stack rows. The .active state is declared !important in the
   page's inline <style>, so the active override below matches that
   weight to swap cyan for magenta without changing the activation
   logic or the opacity transition. */
#page-internet-working .osi-layer {
  background-color: var(--ts-surface) !important;
  border-color: var(--ts-line) !important;
}

#page-internet-working .osi-layer.active {
  border-color: var(--ts-magenta) !important;
  box-shadow: 0 0 20px rgba(255, 61, 141, 0.3) !important;
}

#page-internet-working .osi-layer.active .text-sm {
  color: var(--ts-magenta) !important;
}

/* Packet protocol filter chips. */
#page-internet-working .packet-filter {
  border-color: var(--ts-line) !important;
}

#page-internet-working .packet-filter.active {
  background-color: rgba(255, 61, 141, 0.18) !important;
  border-color: var(--ts-magenta) !important;
}

/* Packet rows are coloured per protocol by JS (DNS green, TCP cyan,
   TLS purple, HTTP orange). Those are data encodings, so only the
   TCP/TLS brand-adjacent pair is nudged; green and orange stay. */
#page-internet-working .packet-item {
  border-color: var(--ts-line);
}

/* Waterfall rows. */
#page-internet-working .waterfall-row:hover {
  background: rgba(255, 61, 141, 0.06) !important;
}

/* TCP handshake diagram: the blue client/SYN-ACK nodes read as brand
   here rather than as data, so they move to the magenta ramp. The
   green SYN/ACK nodes are protocol state and are left alone. */
#page-internet-working .bg-blue-900 {
  background-color: rgba(255, 61, 141, 0.14) !important;
}

#page-internet-working .border-blue-400 {
  border-color: var(--ts-line-strong) !important;
}


/* =====================================================================
   9. #page-cdn-simulator — CDN Simulator
   ===================================================================== */

/* The page's inline <style> defines the cdn-* component set with cyan
   and violet gradients. Each override below mirrors one of those rules
   at section scope. */

#page-cdn-simulator .cdn-enterprise-panel {
  background: linear-gradient(145deg, var(--ts-surface-2) 0%, var(--ts-surface) 50%, #111013 100%) !important;
  border: 1px solid var(--ts-line) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#page-cdn-simulator .cdn-glass-card {
  background: linear-gradient(145deg, rgba(28, 24, 28, 0.6) 0%, rgba(21, 19, 22, 0.75) 100%) !important;
  border: 1px solid var(--ts-line) !important;
}

#page-cdn-simulator .cdn-glass-card:hover {
  border-color: var(--ts-line-strong) !important;
  box-shadow: 0 20px 50px rgba(255, 61, 141, 0.1) !important;
}

#page-cdn-simulator .cdn-metric-card {
  background: linear-gradient(145deg, rgba(26, 23, 27, 0.85) 0%, rgba(13, 12, 14, 0.9) 100%) !important;
  border: 1px solid var(--ts-line) !important;
}

#page-cdn-simulator .cdn-premium-glow {
  box-shadow: 0 0 40px rgba(255, 61, 141, 0.26), 0 0 80px rgba(255, 61, 141, 0.1) !important;
}

/* Tab strip. */
#page-cdn-simulator .cdn-tab-active {
  background: linear-gradient(135deg, rgba(255, 61, 141, 0.2) 0%, rgba(196, 36, 106, 0.15) 100%) !important;
  border: 1px solid var(--ts-line-strong) !important;
  box-shadow: 0 0 20px rgba(255, 61, 141, 0.15) !important;
}

/* Gradient wordmark. */
#page-cdn-simulator .cdn-gradient-text {
  background-image: linear-gradient(135deg, var(--ts-ink) 0%, var(--ts-magenta-soft) 50%, var(--ts-magenta) 100%) !important;
}

/* Toggle switch. */
#page-cdn-simulator .cdn-toggle-switch.active {
  background: linear-gradient(90deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
}

/* Request-rate slider track. The element also carries an inline
   style="background: linear-gradient(...)" so !important is required. */
#page-cdn-simulator .cdn-slider-track {
  background: linear-gradient(90deg, var(--ts-magenta-deep), var(--ts-magenta), var(--ts-magenta-soft)) !important;
}

/* World map backdrop and its ambient wash. */
#page-cdn-simulator .cdn-world-map {
  background: radial-gradient(ellipse at center, var(--ts-surface) 0%, #060507 100%) !important;
}

#page-cdn-simulator .cdn-world-map::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 61, 141, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(255, 61, 141, 0.07) 0%, transparent 30%),
    radial-gradient(circle at 60% 70%, rgba(255, 156, 200, 0.06) 0%, transparent 35%) !important;
}

/* Chart drop shadow. */
#page-cdn-simulator .cdn-chart-container canvas {
  filter: drop-shadow(0 4px 20px rgba(255, 61, 141, 0.1)) !important;
}

/* Odometer counters. */
#page-cdn-simulator .cdn-counter-odometer {
  font-family: var(--ts-mono);
}

/* The enterprise badge shimmer, network-speed badges (3g/4g/5g/offline)
   and cache status colours encode data, not brand — left as authored.
   The pulse-ring and ping-dot animations are functional feedback and
   are not overridden. */


/* =====================================================================
   10. #page-ssl-enterprise-plus — SSL Enterprise+
   ===================================================================== */

/* Tab strip background. */
#page-ssl-enterprise-plus .ssl-tab-btn {
  color: var(--ts-muted);
  border-bottom-color: transparent;
}

#page-ssl-enterprise-plus [class*="bg-slate-700/30"] {
  background-color: rgba(255, 61, 141, 0.07) !important;
}

/* Panels declared with the slate/50 pairs. */
#page-ssl-enterprise-plus [class*="bg-slate-800"][class*="/50"] {
  background-color: var(--ts-surface) !important;
}

/* Scan input + textarea. */
#page-ssl-enterprise-plus textarea {
  font-family: var(--ts-mono);
}

/* Destructive actions keep red. SSL grade badges (A+ through F) are
   produced by the UI scripts and carry their own colour scale; no rule
   in this file recolours them. */


/* =====================================================================
   11. #page-media-gallery — Media Gallery (SPA page)

   Note: the standalone password gate for this route is rendered by the
   Worker, not by this SPA section. It is out of scope for this pass
   and is not touched here.
   ===================================================================== */

#page-media-gallery .r2-media-card {
  background: var(--ts-surface) !important;
  border: 1px solid var(--ts-line) !important;
}

#page-media-gallery .r2-media-card:hover {
  border-color: var(--ts-magenta) !important;
  box-shadow: var(--ts-glow) !important;
}

#page-media-gallery .r2-media-thumb {
  background: var(--ts-inset) !important;
}

#page-media-gallery .r2-media-name {
  color: var(--ts-ink) !important;
}

#page-media-gallery .r2-media-meta {
  color: var(--ts-muted) !important;
}

#page-media-gallery .r2-media-actions button {
  border: 1px solid var(--ts-line);
}


/* =====================================================================
   12. #page-customer-media-gallery — My Media Gallery
   ===================================================================== */

#page-customer-media-gallery .mg-card {
  background: var(--ts-surface) !important;
  border: 1px solid var(--ts-line) !important;
}

#page-customer-media-gallery .mg-card:hover {
  border-color: var(--ts-magenta) !important;
  box-shadow: var(--ts-glow) !important;
}

#page-customer-media-gallery .mg-thumb {
  background: var(--ts-inset) !important;
}

#page-customer-media-gallery .mg-name {
  color: var(--ts-ink) !important;
}

#page-customer-media-gallery .mg-meta {
  color: var(--ts-muted) !important;
}

#page-customer-media-gallery .mg-actions button {
  border: 1px solid var(--ts-line);
}

/* Auth card: login / register tab pair. */
#page-customer-media-gallery #mgLoginTab[class*="text-cyan-"],
#page-customer-media-gallery #mgRegisterTab[class*="text-cyan-"] {
  color: var(--ts-magenta) !important;
  border-bottom-color: var(--ts-magenta) !important;
}

/* Storage meter: media-gallery-client.js assigns exactly one of these
   runtime classes. Only the normal sky state is brand chrome; warning
   yellow and critical red remain their semantic states. */
#page-customer-media-gallery #mgStorageBar.bg-sky-500 {
  background-color: var(--ts-magenta) !important;
  background-image: linear-gradient(90deg, var(--ts-magenta-deep), var(--ts-magenta)) !important;
}

#page-customer-media-gallery #mgStorageBar.bg-yellow-500,
#page-customer-media-gallery #mgStorageBar.bg-red-500 {
  background-image: none !important;
}

/* Error text stays red — it is semantic. */


/* =====================================================================
   13. #page-website-builder — Website Builder

   Only the application chrome is themed. The canvas, the user's own
   components, and the functional selection outlines (hover dashed /
   selected solid) are left intact so the editor keeps reading the way
   the user expects.
   ===================================================================== */

/* Website Builder chrome is defined narrowly in section 17. The broad
   shared rules above intentionally do not include this page so the
   canvas and user-authored content retain their original presentation. */


/* =====================================================================
   14. #page-live-chat — Live Chat

   The connected / disconnected status colours are preserved exactly:
   .lc-status-dot stays green and .lc-status-dot.disconnected stays red,
   along with the pulse animation that signals a live socket.
   ===================================================================== */

#page-live-chat .lc-header h2 {
  color: var(--ts-ink) !important;
}

#page-live-chat .lc-header p {
  color: var(--ts-muted) !important;
}

#page-live-chat .lc-chat-wrap {
  background: var(--ts-surface) !important;
  border-color: var(--ts-line) !important;
}

#page-live-chat .lc-chat-header {
  background: var(--ts-surface-2) !important;
  border-bottom-color: var(--ts-line) !important;
}

#page-live-chat .lc-chat-title {
  color: var(--ts-ink) !important;
}

/* Own messages take the magenta ramp; received messages stay on the
   neutral panel so the two remain easy to tell apart. */
#page-live-chat .lc-msg-me .lc-msg-bubble {
  background: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
  color: #0a090b !important;
}

#page-live-chat .lc-msg-them .lc-msg-bubble {
  background: var(--ts-surface-2) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#page-live-chat .lc-input-row {
  background: var(--ts-surface-2) !important;
  border-top-color: var(--ts-line) !important;
}

#page-live-chat .lc-input {
  background: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#page-live-chat .lc-input:focus {
  border-color: var(--ts-magenta) !important;
}

#page-live-chat .lc-send-btn {
  background: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
  color: #0a090b !important;
}

#page-live-chat .lc-empty {
  color: var(--ts-dim) !important;
}

/* PRESERVED: .lc-status-dot (green #22c55e), .lc-status-dot.disconnected
   (red #ef4444), and the lc-pulse animation. No rule above matches
   them. */


/* =====================================================================
   15. #page-visitor-locations — Visitor Locations

   The WebGL globe renders into #vl-globe-container via Three.js. Its
   canvas, geometry, materials and interaction are untouched; only the
   surrounding cards and the frame around the globe are themed.
   ===================================================================== */

#page-visitor-locations .vl-header h2 {
  color: var(--ts-ink) !important;
}

#page-visitor-locations .vl-header p {
  color: var(--ts-muted) !important;
}

/* Stat cards. */
#page-visitor-locations .vl-stat-card {
  background: linear-gradient(145deg, var(--ts-surface-2), #111013) !important;
  border-color: var(--ts-line) !important;
}

#page-visitor-locations .vl-stat-value {
  color: var(--ts-magenta) !important;
}

#page-visitor-locations .vl-stat-label {
  color: var(--ts-muted) !important;
}

/* Globe frame only — the container itself keeps its own backdrop so
   the WebGL scene is not visually altered. */
#page-visitor-locations .vl-globe-wrap {
  background: #060507 !important;
  border-color: var(--ts-line) !important;
}

#page-visitor-locations .vl-globe-label {
  color: var(--ts-muted) !important;
}

#page-visitor-locations .vl-globe-label span {
  color: var(--ts-magenta) !important;
}

/* Side panels. */
#page-visitor-locations .vl-panel {
  background: linear-gradient(145deg, var(--ts-surface-2), #111013) !important;
  border-color: var(--ts-line) !important;
}

#page-visitor-locations .vl-panel h3 {
  color: var(--ts-ink) !important;
}

/* Recent visitor rows. */
#page-visitor-locations .vl-visitor-item {
  border-bottom-color: var(--ts-hairline) !important;
}

#page-visitor-locations .vl-visitor-city {
  color: var(--ts-ink) !important;
}

#page-visitor-locations .vl-visitor-time {
  color: var(--ts-dim) !important;
}

#page-visitor-locations .vl-visitor-ip {
  color: var(--ts-magenta) !important;
  font-family: var(--ts-mono);
}

/* Top-cities bars. */
#page-visitor-locations .vl-city-name {
  color: var(--ts-ink) !important;
}

#page-visitor-locations .vl-city-bar-bg {
  background: var(--ts-inset) !important;
}

#page-visitor-locations .vl-city-bar {
  background: linear-gradient(90deg, var(--ts-magenta-deep), var(--ts-magenta)) !important;
}

#page-visitor-locations .vl-city-count {
  color: var(--ts-muted) !important;
}

/* PRESERVED: #vl-globe-container and everything Three.js draws inside
   it, plus .vl-visitor-dot (green "live" indicator) and the vl-pulse
   animation. */


/* =====================================================================
   16. REDUCED MOTION

   Only the decorative transitions added by this file are suppressed.
   Functional animations (live-chat pulse, visitor "active" dot, CDN
   ping rings, packet flow) are left to the page's own rules so that
   state feedback is not lost.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  #page-dns .rounded-xl,
  #page-dns .rounded-lg,
  #page-browser-ping .rounded-xl,
  #page-http-headers .rounded-xl,
  #page-traceroute .enterprise-card,
  #page-cdn-simulator .cdn-glass-card,
  #page-media-gallery .r2-media-card,
  #page-customer-media-gallery .mg-card,
  #page-website-builder .wb-sidebar-btn {
    transition: none !important;
    transform: none !important;
  }
}


/* =====================================================================
   17. REVIEW FIXES — EXPLICIT RUNTIME CHROME ONLY

   All selectors below are scoped to one of the 12 tool page IDs, or to
   the three body-mounted overlay IDs created by their existing scripts.
   No Website Builder selector in this section enters #wb-mainCanvas,
   #wb-canvasWrapper, #wb-canvasContent, or a user-authored component.
   ===================================================================== */

/* ------------------------------------------------ Website Builder */

/* The broad shared descendants deliberately exclude #page-website-builder.
   Style only its known application-chrome nodes and direct editor panes. */
#page-website-builder #websiteBuilderRoot {
  background: var(--ts-surface) !important;
  border-color: var(--ts-line) !important;
}

#page-website-builder #websiteBuilderRoot > div:first-child {
  background: var(--ts-surface-2) !important;
  border-color: var(--ts-line) !important;
}

#page-website-builder #websiteBuilderRoot > div:first-child > div:first-child > div:first-child {
  background-image: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-soft)) !important;
}

#page-website-builder #websiteBuilderRoot > div:first-child > div:first-child > span {
  color: var(--ts-magenta) !important;
}

#page-website-builder #websiteBuilderRoot > div:first-child .wb-device-btn[class*="bg-slate-7"] {
  background-color: rgba(255, 61, 141, 0.16) !important;
  color: var(--ts-ink) !important;
}

#page-website-builder #wb-previewBtn,
#page-website-builder #websiteBuilderRoot > div:first-child .wb-preview-mode-show button {
  background-color: var(--ts-surface-3) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#page-website-builder #websiteBuilderRoot > div:first-child button[onclick="wbExport()"] {
  background-image: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
  color: #0a090b !important;
}

#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside {
  background: var(--ts-surface) !important;
  border-color: var(--ts-line) !important;
}

#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside > div[class*="border-"] {
  border-color: var(--ts-line) !important;
}

#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside h2,
#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside .text-slate-500,
#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside .text-slate-600 {
  color: var(--ts-muted) !important;
}

#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside .wb-sidebar-btn {
  background: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
}

#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside .wb-sidebar-btn:hover {
  background: var(--ts-surface-3) !important;
  border-color: var(--ts-line-strong) !important;
  box-shadow: var(--ts-glow) !important;
}

#page-website-builder #wb-selectedTypeLabel {
  background-image: linear-gradient(90deg, rgba(255, 61, 141, 0.2), rgba(196, 36, 106, 0.08)) !important;
  color: var(--ts-magenta) !important;
}

#page-website-builder #wb-propertiesContent .wb-input {
  background: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#page-website-builder #wb-propertiesContent .wb-input:focus {
  border-color: var(--ts-magenta) !important;
  box-shadow: 0 0 0 2px rgba(255, 61, 141, 0.2) !important;
}

#page-website-builder #wb-propertiesContent .wb-prop-group {
  border-bottom-color: var(--ts-hairline) !important;
}

#page-website-builder #wb-propertiesContent .wb-prop-label {
  color: var(--ts-muted) !important;
}

#page-website-builder #wb-propertiesPanel > div:last-child button:not([onclick="wbDelete()"]) {
  background: var(--ts-surface-3) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#page-website-builder #wb-propertiesPanel > div:last-child button[onclick="wbDelete()"] {
  /* Destructive control retains its authored red semantic treatment. */
  color: #f87171 !important;
}

#page-website-builder #websiteBuilderRoot > div:first-child :is(button, input, select):focus-visible,
#page-website-builder #websiteBuilderRoot > div:nth-child(2) > aside :is(button, input, select):focus-visible {
  outline: 2px solid var(--ts-magenta) !important;
  outline-offset: 2px !important;
}

/* Explicitly not matched above: #wb-mainCanvas, #wb-canvasWrapper,
   #wb-canvasContent, .wb-component-wrapper, .wb-component-badge,
   .wb-action-btn, selection outlines, and all user-authored content. */

/* ---------------------------------------- Dynamic gallery buttons */

/* Cards are inserted at runtime. Target only the known download handlers;
   delete buttons retain their runtime red classes and are never selected. */
#page-media-gallery #r2GalleryGrid button[onclick^="downloadR2File("] {
  background-color: rgba(255, 61, 141, 0.16) !important;
  color: var(--ts-magenta) !important;
  border: 1px solid var(--ts-line) !important;
}

#page-media-gallery #r2GalleryGrid button[onclick^="downloadR2File("]:hover {
  background-color: rgba(255, 61, 141, 0.26) !important;
  color: var(--ts-ink) !important;
}

#page-customer-media-gallery #mgCustomerGrid button[onclick^="mgDownloadFile("] {
  background-color: rgba(255, 61, 141, 0.16) !important;
  color: var(--ts-magenta) !important;
  border: 1px solid var(--ts-line) !important;
}

#page-customer-media-gallery #mgCustomerGrid button[onclick^="mgDownloadFile("]:hover {
  background-color: rgba(255, 61, 141, 0.26) !important;
  color: var(--ts-ink) !important;
}

/* ----------------------------------------- Live Chat name overlay */

/* These overlays are mounted under body, outside their page sections, so
   they receive a local copy of the shared tokens rather than inheriting
   from a page ID. */
#lc-name-modal,
#galleryPasswordOverlay {
  --ts-surface: #151316;
  --ts-surface-2: #1a171b;
  --ts-surface-3: #1c181c;
  --ts-inset: #0d0c0e;
  --ts-ink: #f4f1f3;
  --ts-muted: #aaa2a8;
  --ts-dim: #7d757b;
  --ts-magenta: #ff3d8d;
  --ts-magenta-deep: #c4246a;
  --ts-magenta-soft: #ff9cc8;
  --ts-line: rgba(255, 61, 141, 0.22);
  --ts-line-strong: rgba(255, 61, 141, 0.45);
}

/* This is mounted under body by live-chat.js, outside #page-live-chat. */
#lc-name-modal,
#lc-name-modal-overlay {
  color: var(--ts-ink) !important;
}

#lc-name-modal-overlay {
  background: rgba(10, 9, 11, 0.82) !important;
  backdrop-filter: blur(8px) !important;
}

#lc-name-modal-overlay > div {
  background: linear-gradient(145deg, #1a171b, #111013) !important;
  border: 1px solid rgba(255, 61, 141, 0.28) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 32px rgba(255, 61, 141, 0.1) !important;
}

#lc-name-modal-overlay > div > div:first-child > div:first-child {
  background: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
}

#lc-name-modal-overlay h3 {
  color: var(--ts-ink) !important;
}

#lc-name-modal-overlay p {
  color: var(--ts-muted) !important;
}

#lc-name-modal-overlay #lc-name-input {
  background: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#lc-name-modal-overlay #lc-name-input:focus {
  border-color: var(--ts-magenta) !important;
  box-shadow: 0 0 0 3px rgba(255, 61, 141, 0.12) !important;
}

#lc-name-modal-overlay button[type="submit"] {
  background: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
  color: #0a090b !important;
}

/* -------------------------------------- Gallery password overlay */

/* This fallback prompt is mounted under body by media-gallery.js. */
#galleryPasswordOverlay {
  background: rgba(10, 9, 11, 0.82) !important;
}

#galleryPasswordOverlay > div {
  background: linear-gradient(145deg, #1a171b, #111013) !important;
  border-color: rgba(255, 61, 141, 0.28) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 32px rgba(255, 61, 141, 0.1) !important;
}

#galleryPasswordOverlay > div > div:first-child > div:first-child {
  background-color: rgba(255, 61, 141, 0.16) !important;
}

#galleryPasswordOverlay > div > div:first-child > div:first-child svg {
  color: var(--ts-magenta) !important;
}

#galleryPasswordOverlay h3 {
  color: var(--ts-ink) !important;
}

#galleryPasswordOverlay p:not(#galleryPasswordError) {
  color: var(--ts-muted) !important;
}

#galleryPasswordOverlay #galleryPasswordInput {
  background: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#galleryPasswordOverlay #galleryPasswordInput:focus {
  border-color: var(--ts-magenta) !important;
  box-shadow: 0 0 0 3px rgba(255, 61, 141, 0.12) !important;
}

#galleryPasswordOverlay button[onclick="submitGalleryPassword()"] {
  background: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
  color: #0a090b !important;
}

/* #galleryPasswordError is intentionally excluded so its red error state
   remains meaningful. */

/* -------------------------------- SSL runtime-injected Enterprise UI */

/* ssl-enterprise-plus-ui.js inserts .ssl-enterprise-ui and an embedded
   legacy stylesheet at runtime. These exact component selectors use the
   page ID and !important to win without modifying script logic. Grade,
   certificate-status, vulnerability-severity, score, latency, and cache
   state classes remain intentionally outside this brand-chrome override. */
#page-ssl-enterprise-plus .ssl-enterprise-ui {
  --ssl-bg-primary: #0a090b !important;
  --ssl-bg-secondary: #151316 !important;
  --ssl-bg-tertiary: #1a171b !important;
  --ssl-bg-card: rgba(26, 23, 27, 0.9) !important;
  --ssl-bg-hover: #241e24 !important;
  --ssl-text-primary: #f4f1f3 !important;
  --ssl-text-secondary: #aaa2a8 !important;
  --ssl-text-muted: #7d757b !important;
  --ssl-border: rgba(255, 61, 141, 0.22) !important;
  --ssl-glow-blue: 0 0 20px rgba(255, 61, 141, 0.3) !important;
  --ssl-glow-cyan: 0 0 20px rgba(255, 61, 141, 0.24) !important;
  background: radial-gradient(circle at 80% 0%, rgba(255, 61, 141, 0.1), transparent 32%), #0a090b !important;
  color: var(--ts-ink) !important;
}

#page-ssl-enterprise-plus .ssl-header,
#page-ssl-enterprise-plus .ssl-tabs-container,
#page-ssl-enterprise-plus .ssl-summary-card,
#page-ssl-enterprise-plus .ssl-chart-card,
#page-ssl-enterprise-plus .ssl-compliance-card,
#page-ssl-enterprise-plus .ssl-vuln-card,
#page-ssl-enterprise-plus .ssl-cert-details,
#page-ssl-enterprise-plus .ssl-chain-container,
#page-ssl-enterprise-plus .ssl-footer,
#page-ssl-enterprise-plus .ssl-modal {
  background: linear-gradient(145deg, #1a171b, #111013) !important;
  border-color: var(--ts-line) !important;
}

#page-ssl-enterprise-plus .ssl-summary-card:hover,
#page-ssl-enterprise-plus .ssl-chart-card:hover,
#page-ssl-enterprise-plus .ssl-compliance-card:hover {
  border-color: var(--ts-line-strong) !important;
  box-shadow: var(--ts-glow) !important;
}

#page-ssl-enterprise-plus .ssl-logo {
  background-image: linear-gradient(135deg, var(--ts-ink), var(--ts-magenta)) !important;
}

#page-ssl-enterprise-plus .ssl-logo-icon,
#page-ssl-enterprise-plus .ssl-search-btn,
#page-ssl-enterprise-plus .ssl-loading-progress-bar {
  background: linear-gradient(135deg, var(--ts-magenta), var(--ts-magenta-deep)) !important;
}

#page-ssl-enterprise-plus .ssl-search-input,
#page-ssl-enterprise-plus .ssl-header-btn,
#page-ssl-enterprise-plus .ssl-card-icon,
#page-ssl-enterprise-plus .ssl-score-item,
#page-ssl-enterprise-plus .ssl-cert-detail-item {
  background: var(--ts-inset) !important;
  border-color: var(--ts-line) !important;
  color: var(--ts-ink) !important;
}

#page-ssl-enterprise-plus .ssl-search-input:focus {
  border-color: var(--ts-magenta) !important;
  box-shadow: 0 0 0 3px rgba(255, 61, 141, 0.12) !important;
}

#page-ssl-enterprise-plus .ssl-header-btn:hover {
  background: var(--ts-surface-3) !important;
  border-color: var(--ts-line-strong) !important;
}

#page-ssl-enterprise-plus .ssl-tabs-header {
  border-bottom-color: var(--ts-line) !important;
}

#page-ssl-enterprise-plus .ssl-tab-btn.active {
  color: var(--ts-magenta) !important;
}

#page-ssl-enterprise-plus .ssl-tab-btn.active::after {
  background: linear-gradient(90deg, var(--ts-magenta-deep), var(--ts-magenta)) !important;
}

#page-ssl-enterprise-plus .ssl-grade-display {
  background: linear-gradient(135deg, rgba(255, 61, 141, 0.1), rgba(196, 36, 106, 0.05)) !important;
}

#page-ssl-enterprise-plus .ssl-loading-overlay,
#page-ssl-enterprise-plus .ssl-modal-overlay {
  background: rgba(10, 9, 11, 0.92) !important;
}

#page-ssl-enterprise-plus .ssl-loading-spinner::before {
  border-top-color: var(--ts-magenta) !important;
  border-right-color: var(--ts-magenta-soft) !important;
}

#page-ssl-enterprise-plus .ssl-loading-spinner::after {
  border-bottom-color: var(--ts-magenta-deep) !important;
  border-left-color: var(--ts-magenta) !important;
}

#page-ssl-enterprise-plus .ssl-progress-bg,
#page-ssl-enterprise-plus .ssl-score-bar {
  stroke: var(--ts-surface-3) !important;
  background: var(--ts-surface-3) !important;
}

#page-ssl-enterprise-plus .ssl-line-path,
#page-ssl-enterprise-plus .ssl-radar-area {
  stroke: var(--ts-magenta) !important;
}

#page-ssl-enterprise-plus .ssl-line-area {
  fill: rgba(255, 61, 141, 0.18) !important;
}

#page-ssl-enterprise-plus .ssl-radar-point {
  fill: var(--ts-magenta) !important;
}

/* Intentionally not selected: .ssl-grade-a through .ssl-grade-f,
   .ssl-grade-badge, .ssl-summary-card.grade-*, .ssl-location-grade,
   .ssl-cert-status, runtime green/yellow/orange/red status classes,
   and score/latency severity bars. */