/* tools-v1/tools.css: /tools/ hub and tool pages (fragments from design/tools-v1/render.cjs), EN/PT/ES. Light only, scoped to
 * #visu-tools. Same shell as 59-alternatives.css: bands painted full-bleed with box-shadow + clip-path because the fragment
 * sits inside the theme's content column. The tool itself is the first thing under the H1; text content comes after.
 * Primary buttons reuse .v9-btn-primary (09-buttons.css). Embed mode (html.vt-embed) hides the page around the tool.
 * Loaded ONLY on tool pages: the mu-plugin adds it in <head> next to the site-v5 CSS (no FOUC); the preview does the same. */
#visu-tools { --vt-ink: var(--vl-ink, #0a1324); --vt-text: var(--vl-ink-2, #33415a); --vt-muted: var(--vl-muted, #5d6a7e);
  --vt-line: var(--vl-line, rgba(10, 19, 36, .08)); --vt-line-2: var(--vl-line-2, rgba(10, 19, 36, .14)); --vt-surface: var(--vl-surface, #fff);
  --vt-bg: var(--vl-bg, #f7fafd); --vt-tint: var(--vl-tint, #eef6fc); --vt-accent: var(--vl-accent, #19b4ef); --vt-accent-text: var(--vl-accent-text, #0670a6);
  --vt-ok: #047857; --vt-warn: #a15c07; --vt-err: #b42318; --vt-radius: 18px;
  color: var(--vt-text); color-scheme: only light; font-family: Inter, "Inter Fallback", "Inter Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
#visu-tools *, #visu-tools *::before, #visu-tools *::after { box-sizing: border-box; }
#visu-tools :is(h1, h2, h3, h4) { color: var(--vt-ink) !important; text-transform: none !important; margin: 0 !important; font-family: inherit !important; letter-spacing: -0.02em; }
#visu-tools :is(p, ul, ol, dl, dd, figure) { margin: 0 !important; }
#visu-tools :is(ul, ol) { padding: 0 !important; }
#visu-tools li { margin: 0 !important; }
#visu-tools a { color: var(--vt-accent-text); text-decoration-color: rgba(6, 112, 166, .35); text-underline-offset: 3px; }
#visu-tools a:hover { color: var(--vt-ink); }
#visu-tools .vt-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
#visu-tools .vt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#visu-tools :focus-visible { outline: 2px solid var(--vt-accent-text); outline-offset: 2px; }

/* Hero: compact on tool pages so the tool sits above the fold */
#visu-tools .vt-hero { padding: 40px 0 24px; background: var(--vt-bg); box-shadow: 0 0 0 100vmax var(--vt-bg); clip-path: inset(0 -100vmax); }
#visu-tools .vt-hero-hub { padding: 64px 0 36px; }
#visu-tools .vt-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--vt-accent-text) !important; margin-bottom: 14px !important; }
#visu-tools .vt-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vt-accent); }
#visu-tools h1 { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.08 !important; font-weight: 750 !important; letter-spacing: -0.035em !important; text-wrap: balance; }
#visu-tools .vt-hero-hub h1 { font-size: clamp(32px, 4.2vw, 54px) !important; max-width: 20ch; }
#visu-tools .vt-lead { margin-top: 12px !important; max-width: 70ch; font-size: 17px; line-height: 1.6; }
#visu-tools .vt-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--vt-muted); margin-bottom: 12px; }
#visu-tools .vt-crumb a { font-weight: 600; }
#visu-tools .vt-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px !important; font-size: 14px; color: var(--vt-muted); }
#visu-tools .vt-facts li { display: inline-flex; align-items: center; gap: 6px; }
#visu-tools .vt-facts svg { color: var(--vt-ok); }

/* App band */
#visu-tools .vt-app-band { padding: 8px 0 48px; background: var(--vt-bg); box-shadow: 0 0 0 100vmax var(--vt-bg); clip-path: inset(0 -100vmax); }
#visu-tools .vt-app { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#visu-tools .vt-og { grid-template-columns: minmax(0, 1fr); }
#visu-tools .vt-panel { background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: var(--vt-radius); box-shadow: var(--vl-shadow-sm); padding: 22px; min-width: 0; }
/* The result follows the form on desktop. The site header scrolls away, so it sticks near the top of the window. */
#visu-tools .vt-out { position: sticky; top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#visu-tools .vt-out-label { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--vt-muted) !important; }
#visu-tools .vt-out-sub { font-size: 13px; font-weight: 650; color: var(--vt-muted); }
#visu-tools .vt-powered { display: none; }

/* Fields */
#visu-tools .vt-field { display: grid; gap: 6px; min-width: 0; }
#visu-tools .vt-wide { grid-column: 1 / -1; }
#visu-tools .vt-label { font-size: 14px; font-weight: 600; color: var(--vt-ink); }
#visu-tools .vt-label small { font-weight: 400; color: var(--vt-muted); font-size: 12.5px; margin-left: 4px; }
/* The UiCore theme paints every input/select/textarea dark with !important (input, textarea, select { background:
   var(--level-bg-light) !important }). Text fields get the full reset below; the other field types only get light
   colours and the hairline border, so each kit keeps its own sizing (more specific kit rules still win). */
#visu-tools :is(input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]) {
  background-color: #fff !important; color: var(--vt-ink) !important; border: 1px solid var(--vt-line-2) !important; color-scheme: light;
  padding: 10px 12px !important; }
#visu-tools :is(input[type=text], input[type=password], input[type=url], input[type=email], input[type=tel], input[type=search], select, textarea) {
  width: 100% !important; min-height: 46px; padding: 10px 14px !important; border-radius: 12px !important; border: 1px solid var(--vt-line-2) !important;
  background: #fff !important; color: var(--vt-ink) !important; font: inherit !important; font-size: 16px !important; line-height: 1.4 !important; box-shadow: none !important; margin: 0 !important; }
#visu-tools textarea { min-height: 84px; resize: vertical; }
/* Shared controls (2026-10-13): one chevron for every dropdown and one button for every file picker, instead of
   whatever each browser draws. */
#visu-tools select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 40px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 18px 18px !important; }
#visu-tools input[type=file] { max-width: 100%; color: var(--vt-muted); font-size: 14px; }
#visu-tools input[type=file]::file-selector-button { margin-right: 12px; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--vt-line-2); background: #fff; color: var(--vt-ink);
  font: 600 14px/1.2 inherit; cursor: pointer; transition: border-color .15s; }
#visu-tools input[type=file]::file-selector-button:hover { border-color: var(--vt-ink); }
#visu-tools :is(input, select, textarea):focus { border-color: var(--vt-accent-text) !important; outline: 2px solid rgba(25, 180, 239, .25); outline-offset: 0; }
#visu-tools .vt-hint { font-size: 13px; color: var(--vt-muted); line-height: 1.5; }
#visu-tools .vt-group, #visu-tools .vt-fields:not([hidden]), #visu-tools .vt-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#visu-tools .vt-group { display: block; margin-top: 18px; }
#visu-tools [hidden] { display: none !important; }
#visu-tools .vt-check { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; align-self: end; min-height: 46px; }
#visu-tools .vt-check input { width: 18px; height: 18px; accent-color: var(--vt-accent-text); }
#visu-tools .vt-fieldset { border: 0 !important; padding: 0 !important; margin: 18px 0 0 !important; min-width: 0; }
#visu-tools .vt-fieldset > legend { margin-bottom: 10px; padding: 0; }
#visu-tools .vt-num { position: relative; display: block; }
#visu-tools .vt-unit:not(:empty) { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--vt-muted); font-size: 15px; pointer-events: none; }
#visu-tools .vt-unit:not(:empty) + input { padding-left: 46px !important; }
#visu-tools .vt-unit:is(:empty) + input { padding-left: 14px !important; }
#visu-tools .vt-ad-fields .vt-unit:not([data-unit="money"]):not(:empty) { left: auto; right: 14px; }
#visu-tools .vt-ad-fields .vt-unit:not([data-unit="money"]):not(:empty) + input { padding-left: 14px !important; padding-right: 36px !important; }
#visu-tools .vt-row-between { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-top: 16px; }
#visu-tools .vt-row-between .vt-field { width: 140px; }

/* Segmented choice (types, modes, platforms): wraps on small screens, keyboard via native radios */
#visu-tools .vt-seg { border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0; }
#visu-tools .vt-seg > legend { padding: 0; margin-bottom: 10px; }
#visu-tools .vt-seg-items { display: flex; flex-wrap: wrap; gap: 8px; }
#visu-tools .vt-seg-item { position: relative; }
#visu-tools .vt-seg-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* Selected pill switches in one frame, like the hub chips: easing only the background turned the label white on a still-white
   pill for ~150ms (a blink on every mouse click). */
#visu-tools .vt-seg-item span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--vt-line-2);
  background: #fff; color: var(--vt-ink); font-size: 14.5px; font-weight: 550; transition: border-color .15s; white-space: nowrap; }
#visu-tools .vt-seg-item input:hover + span { border-color: var(--vt-ink); }
#visu-tools .vt-seg-item input:checked + span { background: var(--vt-ink); border-color: var(--vt-ink); color: #fff; }
#visu-tools .vt-seg-item input:focus-visible + span { outline: 2px solid var(--vt-accent-text); outline-offset: 2px; }

/* Buttons */
#visu-tools .vt-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#visu-tools .vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border-radius: 12px;
  font: 600 15.5px/1.2 inherit; text-decoration: none !important; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
#visu-tools .vt-btn.v9-btn-primary { background: #19b4ef; color: #03121d; }
#visu-tools .vt-btn-ghost { background: #fff !important; color: var(--vt-ink) !important; border-color: var(--vt-line-2) !important; }
#visu-tools .vt-btn-ghost:hover { border-color: var(--vt-ink) !important; }
#visu-tools .vt-btn:disabled, #visu-tools .vt-off { opacity: .45; cursor: not-allowed; }
#visu-tools .vt-link-btn { background: none !important; border: 0 !important; padding: 4px 0 !important; color: var(--vt-accent-text) !important; font: 600 14.5px/1.4 inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(6, 112, 166, .35); text-underline-offset: 3px; justify-self: start; }
#visu-tools .vt-more { display: inline-flex; gap: 6px; font-weight: 600; font-size: 15px; }
#visu-tools .vt-status { min-height: 1.4em; font-size: 14px; color: var(--vt-ok); }
#visu-tools .vt-status[data-kind="error"] { color: var(--vt-err); }
#visu-tools .vt-status[data-kind="busy"] { color: var(--vt-muted); }
#visu-tools .vt-warn, #visu-tools .vt-error { padding: 10px 14px; border-radius: 12px; font-size: 14px; background: #fff7e8; color: #6b3d04; border: 1px solid #f3d9a8; }
#visu-tools .vt-error { background: #fef1f0; color: var(--vt-err); border-color: #f7cdc8; }
#visu-tools .vt-muted { color: var(--vt-muted); }
#visu-tools .vt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
#visu-tools .vt-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; background: var(--vt-tint); color: var(--vt-accent-text); font-size: 12px; font-weight: 650; white-space: nowrap; }
#visu-tools .vt-badge-new { background: #e7f7ef; color: var(--vt-ok); }

/* QR generator */
#visu-tools .vt-style { margin-top: 20px; border-top: 1px solid var(--vt-line); padding-top: 14px; }
#visu-tools .vt-style > summary { cursor: pointer; font-weight: 650; color: var(--vt-ink); list-style: none; display: flex; align-items: center; gap: 8px; }
#visu-tools .vt-style > summary::-webkit-details-marker { display: none; }
#visu-tools .vt-style > summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
#visu-tools .vt-style[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
#visu-tools .vt-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
#visu-tools .vt-color-row { display: flex; gap: 8px; }
#visu-tools .vt-color-row input[type=color] { width: 46px; height: 46px; padding: 3px; border-radius: 12px; border: 1px solid var(--vt-line-2); background: #fff; flex: none; cursor: pointer; }
#visu-tools input[type=range] { width: 100%; accent-color: var(--vt-accent-text); min-height: 46px; }
#visu-tools .vt-logo { grid-column: 1 / -1; }
#visu-tools .vt-logo input[type=file] { font-size: 14px; }
#visu-tools .vt-qr-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 360px; width: 100%; margin: 0 auto;
  border-radius: 16px; background: repeating-conic-gradient(#f1f4f8 0 25%, #fff 0 50%) 50% / 20px 20px; border: 1px solid var(--vt-line); padding: 14px; }
#visu-tools .vt-qr { width: 100%; height: 100%; display: grid; place-items: center; }
#visu-tools .vt-qr svg { width: 100%; height: 100%; display: block; border-radius: 6px; }
#visu-tools .vt-qr-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--vt-muted); font-size: 15px; }
#visu-tools .vt-encodes { display: grid; gap: 4px; padding: 12px 14px; background: var(--vt-bg); border-radius: 12px; }
#visu-tools .vt-encodes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--vt-ink); white-space: pre-wrap; word-break: break-all; background: none; padding: 0; }

/* QR paths */
#visu-tools .vt-paths { padding: 56px 0; background: var(--vt-surface); box-shadow: 0 0 0 100vmax var(--vt-surface); clip-path: inset(0 -100vmax); }
#visu-tools .vt-paths h2 { font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 720 !important; margin-bottom: 22px !important; }
#visu-tools .vt-path-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#visu-tools .vt-path { display: grid; align-content: start; gap: 12px; padding: 22px; border-radius: var(--vt-radius); border: 1px solid var(--vt-line); background: var(--vt-surface); }
#visu-tools .vt-path-on { background: var(--vt-bg); }
#visu-tools .vt-path-visu { border: 1px solid var(--vt-line-2); border-top: 3px solid var(--vt-accent); box-shadow: var(--vl-shadow-md); }
#visu-tools .vt-path-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
#visu-tools .vt-path h3 { font-size: 19px !important; font-weight: 700 !important; }
#visu-tools .vt-path p { font-size: 15.5px; }
#visu-tools .vt-path .vt-btn { justify-self: start; }

/* Scanner */
#visu-tools .vt-mode-pane { margin-top: 18px; display: grid; gap: 10px; }
#visu-tools .vt-drop { display: grid; justify-items: center; gap: 12px; padding: 36px 20px; border: 2px dashed var(--vt-line-2); border-radius: 16px; background: var(--vt-bg);
  text-align: center; color: var(--vt-muted); cursor: pointer; transition: border-color .15s, background-color .15s; }
#visu-tools .vt-drop:hover, #visu-tools .vt-drop.vt-drag, #visu-tools .vt-drop:focus-within { border-color: var(--vt-accent-text); background: var(--vt-tint); }
#visu-tools .vt-drop-text { font-size: 15.5px; color: var(--vt-ink); max-width: 34ch; }
#visu-tools .vt-cam { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; border-radius: 16px; overflow: hidden; background: #06131f; }
#visu-tools .vt-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
#visu-tools .vt-cam-frame { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(6, 19, 31, .35); opacity: 0; transition: opacity .2s; }
#visu-tools .vt-cam.vt-live .vt-cam-frame { opacity: 1; }
#visu-tools .vt-result-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
#visu-tools .vt-domain { font-size: 15px; color: var(--vt-muted); }
#visu-tools .vt-domain strong { color: var(--vt-ink); font-size: 20px; font-weight: 700; display: block; }
#visu-tools .vt-raw { padding: 12px 14px; border-radius: 12px; background: var(--vt-bg); color: var(--vt-ink); white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; }
#visu-tools .vt-flags { list-style: none; display: grid; gap: 8px; }
#visu-tools .vt-flags li, #visu-tools .vt-flag-strong { padding: 10px 14px 10px 36px; border-radius: 12px; background: #fff7e8; color: #6b3d04; font-size: 14px; position: relative; }
#visu-tools .vt-flags li::before, #visu-tools .vt-flag-strong::before { content: "!"; position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: #d98a1c; color: #fff; font: 700 11px/16px inherit; text-align: center; }
#visu-tools .vt-kvs { display: grid; gap: 8px; }
#visu-tools .vt-kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 15px; }
#visu-tools .vt-kv dt { color: var(--vt-muted); }
#visu-tools .vt-kv dd { color: var(--vt-ink); font-weight: 550; }

/* Results (calculators) */
#visu-tools .vt-big { display: grid; gap: 2px; }
#visu-tools .vt-big-label { font-size: 15px; color: var(--vt-muted); font-weight: 550; }
#visu-tools .vt-big-num { font-size: clamp(40px, 5vw, 58px); line-height: 1.05; font-weight: 760; letter-spacing: -0.035em; color: var(--vt-accent-text); font-variant-numeric: tabular-nums; }
#visu-tools .vt-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#visu-tools .vt-metrics > div { padding: 10px 12px; border-radius: 12px; background: var(--vt-bg); display: grid; gap: 2px; }
#visu-tools .vt-metrics dt { font-size: 13px; color: var(--vt-muted); }
#visu-tools .vt-metrics dd { font-size: 17px; font-weight: 650; color: var(--vt-ink); font-variant-numeric: tabular-nums; }
#visu-tools .vt-ads .vt-seg-item span, #visu-tools .vt-er .vt-seg-item span { min-height: 36px; padding: 6px 12px; font-size: 14px; }
#visu-tools .vt-ad-fields { margin-top: 18px; }

/* UTM */
#visu-tools .vt-utm form > .vt-field { margin-bottom: 16px; }
#visu-tools .vt-url-out { display: block; padding: 14px; border-radius: 12px; background: var(--vt-bg); border: 1px solid var(--vt-line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--vt-ink); word-break: break-all; min-height: 84px; }
#visu-tools .vt-url-out mark { background: #e3f4fc; color: var(--vt-accent-text); border-radius: 4px; padding: 0 1px; }
#visu-tools .vt-url-out .vt-muted { font-family: inherit; }
#visu-tools .vt-warns { list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: #6b3d04; }
#visu-tools .vt-warns li:not(.vt-warn-fix) { padding-left: 16px; position: relative; }
#visu-tools .vt-warns li:not(.vt-warn-fix)::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #d98a1c; }
#visu-tools .vt-visu-box { padding: 16px 18px; border-radius: 14px; background: var(--vt-tint); display: grid; gap: 8px; font-size: 14.5px; }
#visu-tools .vt-visu-wide { padding: 26px 28px; gap: 10px; border: 1px solid var(--vt-line); }
#visu-tools .vt-visu-wide h2 { font-size: 22px !important; font-weight: 700 !important; }
#visu-tools .vt-visu-wide .vt-btn { justify-self: start; margin-top: 4px; }
#visu-tools .vt-inline-cta { padding-top: 40px; padding-bottom: 8px; }
/* Footer calls to action share the same hierarchy even when a view omits vt-visu-wide.
   These rules stay outside the interactive app and preserve each tool's destination and copy. */
#visu-tools .vt-inline-cta .vt-visu-box { padding: 24px 28px; gap: 12px; border: 1px solid var(--vt-line); min-width: 0; }
#visu-tools .vt-inline-cta .vt-visu-box > h2 { margin: 0 !important; max-width: 38ch; color: var(--vt-text); font-size: 22px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -.015em; }
#visu-tools .vt-inline-cta .vt-visu-box > p { margin: 0 !important; max-width: 72ch; color: var(--vt-muted); font-size: 15px; line-height: 1.6; }
#visu-tools .vt-inline-cta .vt-visu-box > .vt-btn { justify-self: start; width: auto !important; max-width: 100%; min-width: 0; min-height: 44px; margin-top: 2px; padding: 11px 18px; white-space: normal; text-align: center; }
#visu-tools .vt-inline-cta .vt-visu-box > .vt-more { justify-self: start; }
@media (max-width: 600px) { #visu-tools .vt-inline-cta .vt-visu-box { padding: 20px; } }

/* OG checker */
#visu-tools .vt-og-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
#visu-tools .vt-og-row .vt-wide { grid-column: auto; }
#visu-tools .vt-og-results { display: grid; gap: 20px; margin-top: 20px; }
#visu-tools .vt-og-results > .vt-panel { display: grid; gap: 16px; }
#visu-tools .vt-og-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; max-width: 860px; }
#visu-tools .vt-pv { display: grid; gap: 8px; }
#visu-tools .vt-pv-app { font-size: 13px; font-weight: 650; color: var(--vt-muted); }
#visu-tools .vt-pv-card { border: 1px solid #dfe3e8; background: #fff; overflow: hidden; display: grid; }
#visu-tools .vt-pv-img { width: 100%; aspect-ratio: 1.91; object-fit: cover; background: #eef1f4; display: block; }
#visu-tools .vt-pv-img.vt-broken, #visu-tools .vt-pv-thumb.vt-broken, #visu-tools .vt-pv-fav.vt-broken { visibility: hidden; }
#visu-tools .vt-pv-body { display: grid; gap: 3px; padding: 10px 12px; min-width: 0; }
#visu-tools .vt-pv-title { color: #050505; font-size: 15px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#visu-tools .vt-pv-desc { color: #65676b; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#visu-tools .vt-pv-host { color: #65676b; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
#visu-tools .vt-pv-fav { width: 14px; height: 14px; }
#visu-tools .vt-pv-whatsapp .vt-pv-card { background: #d9fdd3; border: 0; border-radius: 10px; padding: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
#visu-tools .vt-pv-whatsapp .vt-pv-img { border-radius: 7px 7px 0 0; }
#visu-tools .vt-pv-whatsapp .vt-pv-body { background: #cff3c8; border-radius: 0 0 7px 7px; }
#visu-tools .vt-pv-whatsapp .vt-pv-card:has(.vt-pv-thumb) { grid-template-columns: 84px 1fr; }
#visu-tools .vt-pv-thumb { width: 84px; height: 84px; object-fit: cover; display: block; border-radius: 7px; }
#visu-tools .vt-pv-linkedin .vt-pv-card { border-radius: 8px; }
#visu-tools .vt-pv-linkedin .vt-pv-body { background: #eef3f8; }
#visu-tools .vt-pv-facebook .vt-pv-body { background: #f0f2f5; }
#visu-tools .vt-pv-facebook .vt-pv-host { order: -1; text-transform: uppercase; font-size: 12px; }
#visu-tools .vt-pv-x .vt-pv-card { border-radius: 16px; position: relative; }
#visu-tools .vt-pv-x .vt-pv-card:has(.vt-pv-thumb) { grid-template-columns: 110px 1fr; }
#visu-tools .vt-pv-x .vt-pv-thumb { width: 110px; height: 110px; border-radius: 0; }
#visu-tools .vt-checks { list-style: none; display: grid; gap: 8px; }
#visu-tools .vt-checks li { padding: 10px 14px 10px 38px; border-radius: 12px; font-size: 14.5px; position: relative; background: var(--vt-bg); }
#visu-tools .vt-checks li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--vt-muted); }
#visu-tools .vt-check-error { background: #fef1f0 !important; color: #7a1a12; }
#visu-tools .vt-check-error::before { background: var(--vt-err) !important; }
#visu-tools .vt-check-warn { background: #fff7e8 !important; color: #6b3d04; }
#visu-tools .vt-check-warn::before { background: #d98a1c !important; }
#visu-tools .vt-check-ok { background: #e7f7ef !important; color: #064e3b; }
#visu-tools .vt-check-ok::before { background: var(--vt-ok) !important; }
#visu-tools .vt-table-wrap { overflow-x: auto; border: 1px solid var(--vt-line); border-radius: 12px; }
#visu-tools .vt-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
#visu-tools .vt-table :is(th, td) { text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--vt-line); vertical-align: top; background: none; }
#visu-tools .vt-table th { width: 32%; color: var(--vt-muted); font-weight: 600; white-space: nowrap; }
#visu-tools .vt-table thead th { color: var(--vt-ink); background: var(--vt-bg); }
#visu-tools .vt-missing { color: var(--vt-err); font-weight: 600; }

/* Section nav under the tool (2026-10-13): how to use, examples, questions, related. */
#visu-tools .vt-jump { background: var(--vt-surface); box-shadow: 0 0 0 100vmax var(--vt-surface); clip-path: inset(0 -100vmax); border-bottom: 1px solid var(--vt-line); }
#visu-tools .vt-jump ul { list-style: none; display: flex; gap: 4px 24px; flex-wrap: wrap; padding: 14px 0 !important; }
#visu-tools .vt-jump a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px; font-weight: 600; color: var(--vt-text); text-decoration: none; }
#visu-tools .vt-jump a:hover { color: var(--vt-accent-text); }
#visu-tools :is(#vt-how, #vt-examples, #vt-faq, #vt-rel-h) { scroll-margin-top: 20px; }

/* Content (how-to, examples, FAQ, embed) */
#visu-tools .vt-content { padding: 56px 0 24px; }
#visu-tools .vt-content h2 { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 720 !important; margin-bottom: 16px !important; }
#visu-tools .vt-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
#visu-tools .vt-how ol { list-style: none; counter-reset: s; display: grid; gap: 12px; }
#visu-tools .vt-how li { counter-increment: s; position: relative; padding-left: 40px !important; font-size: 16px; }
#visu-tools .vt-how li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--vt-ink); color: #fff; font-size: 13.5px; font-weight: 700; display: grid; place-items: center; }
#visu-tools .vt-examples ul { list-style: none; display: grid; gap: 12px; }
#visu-tools .vt-examples li { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--vt-line); background: var(--vt-surface); }
#visu-tools .vt-examples h3 { font-size: 16px !important; font-weight: 680 !important; margin-bottom: 4px !important; }
#visu-tools .vt-examples p { font-size: 15px; }
#visu-tools .vt-faq { margin-top: 48px; max-width: 880px; }
#visu-tools .vt-faq details { border-bottom: 1px solid var(--vt-line); }
#visu-tools .vt-faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 650; color: var(--vt-ink); position: relative; font-size: 16.5px; }
#visu-tools .vt-faq summary::-webkit-details-marker { display: none; }
#visu-tools .vt-faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 22px; font-weight: 400; color: var(--vt-muted); }
#visu-tools .vt-faq details[open] summary::after { content: "–"; }
#visu-tools .vt-faq details p { padding-bottom: 16px; font-size: 15.5px; }
#visu-tools .vt-embed-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12.5px !important; }

/* Embed (delivery 1a): quiet button under the tool, section before the FAQ, one panel (dialog). Hairline borders. */
#visu-tools .vt-emb-bar { display: flex; justify-content: flex-end; margin-top: 12px; }
#visu-tools .vt-emb-open { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px !important; border-radius: 999px !important;
  border: 1px solid var(--vt-line-2) !important; background: var(--vt-surface) !important; color: var(--vt-ink) !important; font: 600 14.5px/1.3 inherit !important; cursor: pointer; }
#visu-tools .vt-emb-open svg { color: var(--vt-accent-text); flex: none; }
#visu-tools .vt-emb-open:hover { border-color: var(--vt-ink) !important; }
#visu-tools .vt-emb-sec { margin-top: 48px; max-width: 880px; padding: 20px 22px; border: 1px solid var(--vt-line); border-radius: 16px; background: var(--vt-surface);
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
#visu-tools .vt-emb-sec-text { flex: 1 1 360px; display: grid; gap: 6px; }
#visu-tools .vt-emb-sec h2 { font-size: 20px !important; font-weight: 720 !important; }
#visu-tools .vt-emb-sec p { font-size: 15.5px; }
#visu-tools .vt-emb-sec .vt-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; white-space: normal; text-align: left; }
#visu-tools .vt-emb-sec .vt-btn svg { color: var(--vt-accent-text); }
#visu-tools .vt-emb-dialog { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--vt-line-2); border-radius: 18px;
  background: var(--vt-surface); color: var(--vt-text); box-shadow: 0 24px 64px rgba(10, 19, 36, .22); overflow: auto; }
#visu-tools .vt-emb-dialog::backdrop { background: rgba(10, 19, 36, .45); }
#visu-tools .vt-emb-dialog:not([open]) { display: none; }
html.vt-emb-lock { overflow: hidden; }
#visu-tools .vt-emb-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--vt-surface); border-bottom: 1px solid var(--vt-line); }
#visu-tools .vt-emb-head h2 { font-size: 18px !important; font-weight: 720 !important; }
#visu-tools .vt-emb-x { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50% !important; border: 0 !important; background: transparent !important;
  color: var(--vt-ink) !important; cursor: pointer; padding: 0 !important; }
#visu-tools .vt-emb-x:hover { background: var(--vt-bg) !important; }
#visu-tools .vt-emb-body { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; padding: 18px; }
#visu-tools .vt-emb-side { display: grid; gap: 14px; align-content: start; }
#visu-tools .vt-emb-text { font-size: 15px; }
#visu-tools .vt-emb-opt { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
#visu-tools .vt-emb-opt legend { font-size: 14px; font-weight: 600; color: var(--vt-ink); padding: 0; margin-bottom: 6px; }
#visu-tools .vt-emb-seg { display: flex; flex-wrap: wrap; gap: 6px; }
#visu-tools .vt-emb-seg label { position: relative; }
#visu-tools .vt-emb-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
#visu-tools .vt-emb-seg span { display: inline-block; padding: 6px 12px; border: 1px solid var(--vt-line-2); border-radius: 999px; font-size: 14px; color: var(--vt-text); background: #fff; }
#visu-tools .vt-emb-seg input:checked + span { border-color: var(--vt-accent-text); color: var(--vt-accent-text); background: var(--vt-tint); font-weight: 600; }
#visu-tools .vt-emb-seg input:focus-visible + span { outline: 2px solid var(--vt-accent-text); outline-offset: 2px; }
#visu-tools .vt-emb-side textarea { min-height: 130px; }
#visu-tools .vt-emb-steps { padding-left: 20px !important; display: grid; gap: 4px; font-size: 14.5px; }
#visu-tools .vt-emb-prev { display: grid; gap: 8px; align-content: start; min-width: 0; }
#visu-tools .vt-emb-host { padding: 14px; border-radius: 14px; background: var(--vt-bg); border: 1px solid var(--vt-line); }
#visu-tools .vt-emb-host[data-credit="dark"] { background: #0f1828; }
#visu-tools .vt-emb-frame { margin: 0 auto; max-width: 960px; }
#visu-tools .vt-emb-frame[data-width="medium"] { max-width: 640px; }
#visu-tools .vt-emb-frame[data-width="narrow"] { max-width: 400px; }
#visu-tools .vt-emb-frame iframe { display: block; width: 100%; height: 520px; border: 0; background: #fff; }
#visu-tools .vt-emb-frame[data-frame="line"] iframe { border: 1px solid #dfe6ee; border-radius: 12px; }
#visu-tools .vt-emb-credit { margin: 6px auto 0 !important; max-width: 960px; font: 13px/1.4 system-ui, sans-serif; color: #5d6a7e; }
#visu-tools .vt-emb-host[data-credit="dark"] .vt-emb-credit { color: #c3ccd8; }
#visu-tools .vt-emb-host[data-credit="dark"] .vt-emb-credit a { color: #7fd3f7; }
#visu-tools .vt-emb-frame[data-width="medium"] + .vt-emb-credit { max-width: 640px; }
#visu-tools .vt-emb-frame[data-width="narrow"] + .vt-emb-credit { max-width: 400px; }
@media (max-width: 860px) {
  #visu-tools .vt-emb-body { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  #visu-tools .vt-emb-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; margin: 0; }
  #visu-tools .vt-emb-prev { order: -1; }
  #visu-tools .vt-emb-frame iframe { height: 380px; }
  #visu-tools .vt-emb-bar { justify-content: flex-start; }
}

/* Recipient of a shared result (#s= / #r=): who sent it is not known; the page says what it is and offers "Create your own". */
#visu-tools .vt-recv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 14px; padding: 14px 18px;
  border: 1px solid var(--vt-line-2); border-radius: 14px; background: var(--vt-tint); }
#visu-tools .vt-recv[hidden] { display: none; }
#visu-tools .vt-recv-text { flex: 1 1 320px; font-size: 15px; color: var(--vt-text); }
#visu-tools .vt-recv-text strong { color: var(--vt-ink); font-weight: 680; }
#visu-tools .vt-recv-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Related + hub cards */
#visu-tools .vt-related { padding: 48px 0 72px; }
#visu-tools .vt-related-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 18px; }
#visu-tools .vt-related h2 { font-size: 24px !important; font-weight: 720 !important; }
#visu-tools .vt-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#visu-tools .vt-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; height: 100%; padding: 18px; border-radius: 16px; border: 1px solid var(--vt-line);
  background: var(--vt-surface); color: var(--vt-text) !important; text-decoration: none !important; box-shadow: var(--vl-shadow-sm); transition: border-color .15s, transform .15s; }
#visu-tools .vt-card:hover { border-color: var(--vt-accent-text); transform: translateY(-1px); }
#visu-tools .vt-card-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--vt-tint); color: var(--vt-accent-text); }
#visu-tools .vt-card-body { display: grid; gap: 4px; }
#visu-tools .vt-card-name { font-weight: 700; color: var(--vt-ink); font-size: 16.5px; line-height: 1.3; }
#visu-tools .vt-card-text { font-size: 14.5px; line-height: 1.5; }
#visu-tools .vt-card-badges { grid-column: 2; display: flex; gap: 6px; }
#visu-tools .vt-search { position: relative; max-width: 560px; margin-top: 26px; }
#visu-tools .vt-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--vt-muted); pointer-events: none; }
#visu-tools .vt-search input { padding-left: 46px !important; min-height: 54px; border-radius: 14px !important; box-shadow: var(--vl-shadow-sm) !important; }
#visu-tools .vt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#visu-tools .vt-chip { min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--vt-line-2); background: #fff; color: var(--vt-ink); font: 550 14.5px/1 inherit; cursor: pointer; }
#visu-tools .vt-chip[aria-pressed="true"] { background: var(--vt-ink); color: #fff; border-color: var(--vt-ink); }
#visu-tools .vt-hub-body { padding-top: 36px; padding-bottom: 24px; display: grid; gap: 40px; }
#visu-tools .vt-cat h2 { display: flex; align-items: center; gap: 10px; font-size: 22px !important; font-weight: 720 !important; margin-bottom: 14px !important; }
#visu-tools .vt-cat-icon { color: var(--vt-accent-text); display: inline-flex; }
#visu-tools .vt-cat-note { font-size: 14.5px; color: var(--vt-muted); margin: -6px 0 14px !important; }
#visu-tools .vt-empty { font-size: 16px; color: var(--vt-muted); }
#visu-tools .vt-hub-about { padding-top: 32px; padding-bottom: 80px; }
#visu-tools .vt-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--vt-line); padding-top: 32px; }
#visu-tools .vt-about-grid h2 { font-size: 18px !important; font-weight: 700 !important; margin-bottom: 6px !important; }
#visu-tools .vt-about-grid p { font-size: 15px; }
/* Hub (2026-10-13): discovery page for 100+ tools. Hero with search, category chips that stay under the header,
   a featured strip, then every category with every card in the HTML. */
#visu-tools .vt-hero-hub h1 { max-width: 22ch; }
#visu-tools .vt-hero-hub .vt-lead { max-width: 62ch; }
#visu-tools .vt-hero-hub .vt-facts { margin-top: 16px !important; }
/* The site header scrolls away with the page, so the bar sticks to the top of the viewport. The theme hides overflow
   on the page's <main>, which makes it the scroll container and stops anything inside from sticking: clip cuts the
   same pixels without doing that. */
main.entry-content:has(#visu-tools) { overflow: clip !important; }
#visu-tools .vt-chipbar { position: sticky; top: 0; z-index: 5; padding: 12px 0; background: var(--vt-bg); box-shadow: 0 0 0 100vmax var(--vt-bg); clip-path: inset(0 -100vmax);
  border-bottom: 1px solid var(--vt-line); }
#visu-tools .vt-chipbar .vt-chips { margin-top: 0; }
#visu-tools.vt-hub .vt-cat { scroll-margin-top: 84px; }
#visu-tools .vt-featured h2 { font-size: 22px !important; font-weight: 720 !important; margin-bottom: 14px !important; }
#visu-tools .vt-cards-featured .vt-card { padding: 20px; border-color: var(--vt-line-2); box-shadow: var(--vl-shadow-md, var(--vl-shadow-sm)); }
#visu-tools .vt-cards-featured .vt-card-icon { width: 48px; height: 48px; border-radius: 13px; }
/* Tool cards (hub, featured strip, related): one fixed size whatever the filter. Before, a card grew with a two-line name
   or a "New" badge row and stretched its grid row, so each category filter regrouped the rows into other heights.
   Now the body always reserves two lines of name and two of description, and the badge sits in the top corner. */
#visu-tools .vt-cards .vt-card { position: relative; align-content: start; }
#visu-tools .vt-cards .vt-card-body { align-content: start; min-height: calc(2 * 1.3 * 16.5px + 4px + 2 * 1.5 * 14.5px); }
#visu-tools .vt-cards .vt-card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#visu-tools .vt-cards .vt-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#visu-tools .vt-cards .vt-card-badges { position: absolute; top: 12px; right: 12px; }
#visu-tools .vt-cards .vt-card:has(.vt-card-badges) .vt-card-name { padding-right: 56px; }
@media (max-width: 860px) {
  /* One scrolling row of chips: the bar keeps one height, so nothing jumps when it sticks. */
  #visu-tools .vt-chipbar { padding: 10px 0; }
  #visu-tools .vt-chipbar .vt-wrap { padding: 0; }
  #visu-tools .vt-chipbar .vt-chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #visu-tools .vt-chipbar .vt-chips::-webkit-scrollbar { display: none; }
  #visu-tools .vt-chipbar .vt-chip { flex: none; white-space: nowrap; }
  #visu-tools.vt-hub .vt-hub-body { padding-top: 24px; }
}

/* Responsive */
@media (max-width: 1024px) {
  #visu-tools .vt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #visu-tools .vt-path-list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #visu-tools .vt-app { grid-template-columns: minmax(0, 1fr); }
  #visu-tools .vt-out { position: static; }
  #visu-tools .vt-content-grid, #visu-tools .vt-about-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  #visu-tools .vt-wrap { padding: 0 16px; }
  #visu-tools .vt-hero { padding: 16px 0 12px; }
  #visu-tools .vt-hero-hub { padding: 40px 0 24px; }
  #visu-tools .vt-lead { font-size: 16px; }
  /* Tool pages on a phone: a short hero, so the tool starts in the first screen. */
  #visu-tools.vt-tool .vt-crumb { font-size: 13px; margin-bottom: 14px; }
  /* The last crumb repeats the title right below it and made the trail wrap: the phone shows Tools / Category. */
  #visu-tools.vt-tool .vt-crumb > span:last-child, #visu-tools.vt-tool .vt-crumb > span[aria-hidden]:nth-last-child(2) { display: none; }
  #visu-tools.vt-tool h1 { font-size: 27px !important; }
  #visu-tools.vt-tool .vt-lead { margin-top: 8px !important; font-size: 15px; line-height: 1.5; }
  #visu-tools.vt-tool .vt-hero .vt-lead:not(.vt-lead-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #visu-tools.vt-tool .vt-facts { margin-top: 10px !important; gap: 4px 14px; font-size: 13px; }
  #visu-tools.vt-tool .vt-app-band { padding-top: 4px; }
  /* Narrow dropdowns keep a few more characters of a long option (time zones) before cutting it. */
  #visu-tools select:not([multiple]):not([size]) { padding-left: 12px !important; padding-right: 32px !important; background-position: right 9px center !important; background-size: 16px 16px !important; text-overflow: ellipsis; }
  #visu-tools .vt-jump ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 20px; }
  #visu-tools .vt-jump ul::-webkit-scrollbar { display: none; }
  #visu-tools .vt-jump a { white-space: nowrap; }
  #visu-tools .vt-panel { padding: 16px; border-radius: 16px; }
  #visu-tools .vt-cards, #visu-tools .vt-og-previews { grid-template-columns: 1fr; }
  #visu-tools .vt-group, #visu-tools .vt-fields:not([hidden]), #visu-tools .vt-grid-2, #visu-tools .vt-style-grid { grid-template-columns: 1fr; }
  #visu-tools .vt-ad-fields, #visu-tools .vt-er .vt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #visu-tools .vt-og-row { grid-template-columns: 1fr; }
  #visu-tools .vt-actions .vt-btn { flex: 1 1 auto; }
  /* Segmented switches wrap on phones (no sideways scroll strip: its last option looked cut off by the card). A pill wider
     than the row breaks its text into two lines instead of overflowing. */
  #visu-tools .vt-seg-items { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; }
  #visu-tools .vt-seg-item { min-width: 0; max-width: 100%; }
  #visu-tools .vt-seg-item span { white-space: normal; overflow-wrap: break-word; max-width: 100%; }
  /* Tables fit the card: cells wrap (a tool's nowrap columns included) and get a tighter padding. */
  #visu-tools :is(.vt-table-wrap, .vt-ik-table-wrap):not([data-vt-scroll-ok]) table :is(th, td) { white-space: normal !important; min-width: 0 !important; overflow-wrap: anywhere; hyphens: auto; padding: 8px 9px; }
  /* Tables that are wide by design (a reference grid, a score sheet) keep scrolling sideways, marked data-vt-scroll-ok,
     with a shadow on the side that has more to show. */
  #visu-tools [data-vt-scroll-ok] { background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), transparent) right / 10px 100% no-repeat scroll; }
  #visu-tools .vt-kv { grid-template-columns: 90px 1fr; }
}

/* Embed mode: only the tool, no theme chrome (the bare template also omits header/footer; this covers the preview) */
html.vt-embed body { background: #fff !important; }
html.vt-embed :is(header.uicore-header, .elementor-location-header, .elementor-location-footer, footer, #wpadminbar) { display: none !important; }
html.vt-embed #visu-tools :is(.vt-hero, .vt-paths, .vt-content, .vt-related, .vt-inline-cta) { display: none !important; }
html.vt-embed #visu-tools .vt-app-band { padding: 12px 0; background: #fff; box-shadow: none; }
html.vt-embed #visu-tools .vt-wrap { padding: 0 12px; }
html.vt-embed #visu-tools .vt-powered { display: block; margin-top: 10px !important; text-align: right; font-size: 12.5px; }
html.vt-embed #visu-tools .vt-out { position: static; }
html.vt-embed #visu-tools :is(.vt-emb-bar, .vt-emb-dialog, .vt-recv) { display: none !important; }
@media (prefers-reduced-motion: reduce) { #visu-tools * { transition: none !important; scroll-behavior: auto !important; } }
#visu-tools .vt-compare { margin-top: 22px !important; font-size: 15px; color: var(--vt-muted); }
#visu-tools .vt-compare a { font-weight: 600; }
#visu-tools .vt-compare { margin-top: 22px !important; font-size: 15px; color: var(--vt-muted); }
#visu-tools .vt-compare a { font-weight: 600; }

/* Google review QR */
#visu-tools .vt-rq-combo { position: relative; }
#visu-tools .vt-rq-list { list-style: none; margin: 4px 0 0 !important; padding: 6px !important; border: 1px solid var(--vt-line-2); border-radius: 12px; background: #fff;
  box-shadow: var(--vl-shadow-md, 0 8px 24px rgba(10, 19, 36, .08)); max-height: 320px; overflow-y: auto; }
#visu-tools .vt-rq-opt { display: grid; gap: 2px; padding: 10px 12px; border-radius: 9px; cursor: pointer; font-size: 14.5px; }
#visu-tools .vt-rq-opt strong { color: var(--vt-ink); font-weight: 600; }
#visu-tools .vt-rq-opt span { color: var(--vt-muted); font-size: 13px; }
#visu-tools .vt-rq-opt:hover, #visu-tools .vt-rq-opt[aria-selected="true"] { background: var(--vt-tint); }
#visu-tools .vt-rq-place { font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
#visu-tools .vt-rq-place strong { color: var(--vt-ink); }
#visu-tools .vt-rq-link { min-height: 0; }
#visu-tools .vt-rq-dyn .vt-btn { justify-self: start; }
#visu-tools .vt-rq-paths .vt-path-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { #visu-tools .vt-rq-paths .vt-path-list { grid-template-columns: 1fr; } }

/* WiFi QR */
#visu-tools .vt-pw { display: flex; gap: 8px; align-items: center; }
#visu-tools .vt-pw input { flex: 1 1 auto; min-width: 0; }
#visu-tools .vt-pw-toggle { flex: none; }
#visu-tools .vt-wf-privacy { margin-top: 14px !important; }
#visu-tools .vt-wf-sec { list-style: disc; padding-left: 22px !important; display: grid; gap: 8px; max-width: 78ch; margin-top: 14px !important; }
#visu-tools .vt-wf-second { margin-top: 28px; }
#visu-tools .vt-wf-second h3 { font-size: 20px !important; font-weight: 700 !important; }
#visu-tools .vt-wf-second .vt-field { max-width: 520px; }
#visu-tools .vt-wf-second .vt-actions { align-items: center; }
/* "Made with VISU" toggle (delivery 1a, views/_print-kit.cjs brandField): on by default, one tick removes the line from
   preview, print and PNG. Base sheet, not the print kit's: tools that print on their own (WiFi card, calendars, checklists,
   calculator tables) use it too. */
#visu-tools .vt-pk-brand { display: grid; gap: 2px; }
#visu-tools .vt-pk-brand .vt-check { min-height: 0; align-self: start; font-size: 14.5px; }
@media screen { #visu-tools .vt-print-card { display: none !important; } }
@media print {
  html.vt-printing body * { visibility: hidden !important; }
  /* One sheet: the hidden page around the card keeps its height otherwise, and the print ran to several blank pages. */
  html.vt-printing, html.vt-printing body { height: 100vh !important; overflow: hidden !important; }
  /* The band around the tool is clipped on screen: the card inside it would print cut at the top (calc kit has the same rule). */
  html.vt-printing #visu-tools .vt-app-band { clip-path: none !important; box-shadow: none !important; }
  html.vt-printing #visu-tools .vt-print-card, html.vt-printing #visu-tools .vt-print-card * { visibility: visible !important; }
  html.vt-printing #visu-tools .vt-print-card { display: grid !important; position: fixed; left: 0; top: 0; width: 105mm; padding: 9mm; gap: 3.5mm; justify-items: center;
    text-align: center; color: #0a1324; background: #fff; border: .4mm solid #0a1324; border-radius: 4mm; }
  html.vt-printing #visu-tools .vt-print-title { font-size: 22pt; font-weight: 750; }
  html.vt-printing #visu-tools .vt-print-qr { width: 62mm; height: 62mm; }
  html.vt-printing #visu-tools .vt-print-qr svg { width: 100%; height: 100%; display: block; }
  html.vt-printing #visu-tools .vt-print-row { font-size: 13pt; }
  html.vt-printing #visu-tools .vt-print-row span { color: #5d6a7e; }
  html.vt-printing #visu-tools .vt-print-how { font-size: 10pt; color: #33415a; max-width: 80mm; }
  html.vt-printing #visu-tools .vt-print-brand { font-size: 7pt; color: #6b7280; margin-top: 1mm; }
}

/* QR size calculator */
#visu-tools .vt-sz-grid { margin-top: 18px; }
#visu-tools .vt-sz-logo { align-self: end; padding-bottom: 10px; }
#visu-tools .vt-qrsize .vt-big-num { font-size: clamp(34px, 4.2vw, 48px); }
#visu-tools .vt-sz-short .vt-btn { justify-self: start; }
#visu-tools .vt-sz-explain { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
#visu-tools .vt-sz-explain h2 { font-size: 22px !important; margin-bottom: 12px !important; }
#visu-tools .vt-sz-how { padding-left: 22px !important; display: grid; gap: 8px; }
#visu-tools .vt-sz-table th { width: auto; }
#visu-tools .vt-sz-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
#visu-tools .vt-sz-explain .vt-hint { margin-top: 10px !important; }
@media (max-width: 1024px) { #visu-tools .vt-sz-explain { grid-template-columns: 1fr; } }

/* WhatsApp link */
#visu-tools .vt-wa-link { min-height: 0; }
#visu-tools .vt-walink .vt-rq-dyn .vt-btn { justify-self: start; }
#visu-tools .vt-wa-tm { font-size: 12.5px; }

/* Giveaway picker (W2) */
#visu-tools .vt-gp-count { margin-top: 8px !important; font-size: 14px; color: var(--vt-muted); }
#visu-tools .vt-gp-places { margin-top: 16px; }
#visu-tools .vt-gp .vt-check { min-height: 0; margin-top: 14px; align-items: flex-start; }
#visu-tools .vt-gp-rules .vt-group { margin-top: 14px; }
#visu-tools .vt-gp .vt-in > .vt-actions { margin-top: 18px; }
#visu-tools .vt-gp-stage { min-height: 92px; display: grid; place-items: center; text-align: center; padding: 16px; border: 1px solid var(--vt-line); border-radius: 14px; background: var(--vt-bg); }
#visu-tools .vt-gp-stage-name { font-size: clamp(26px, 3.4vw, 38px); font-weight: 760; letter-spacing: -0.02em; line-height: 1.15; color: var(--vt-accent-text); overflow-wrap: anywhere; }
#visu-tools .vt-gp-idle .vt-gp-stage-name { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--vt-muted); }
#visu-tools .vt-gp-rolling .vt-gp-stage-name { color: var(--vt-ink); opacity: .7; }
#visu-tools #vt-gp-out:not([hidden]) { display: grid; gap: 10px; }
#visu-tools .vt-gp-list { padding-left: 22px !important; display: grid; gap: 4px; font-size: 17px; }
#visu-tools .vt-gp-list strong { overflow-wrap: anywhere; }
#visu-tools .vt-gp-alt { font-size: 15px; }
#visu-tools .vt-gp-proof .vt-kv { grid-template-columns: 130px minmax(0, 1fr); }
#visu-tools .vt-gp-proof dd { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  #visu-tools .vt-gp-stage:not(.vt-gp-rolling):not(.vt-gp-idle) .vt-gp-stage-name { animation: vt-gp-pop .35s ease-out; }
}
@keyframes vt-gp-pop { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }

/* Tools W2 QR (2026-10-09): vCard QR + YouTube QR. Borders stay 1px hairline. */
#visu-tools .vt-vcard .vt-fieldset:first-child { margin-top: 0 !important; }
#visu-tools .vt-vc-more-grid { margin-top: 14px; }
#visu-tools .vt-vc-paths .vt-path-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#visu-tools .vt-ytqr .vt-yt-kind { margin-top: 10px; font-weight: 600; color: var(--vt-ink); }
#visu-tools .vt-ytqr .vt-error { margin-top: 10px; }
#visu-tools .vt-yt-opts { margin-top: 16px; align-items: start; }
#visu-tools .vt-yt-sub { display: grid; gap: 4px; align-content: start; padding-top: 22px; }
#visu-tools .vt-yt-sub .vt-check { min-height: 0; align-self: start; }
#visu-tools .vt-ytqr input:disabled { opacity: .55; cursor: not-allowed; }
#visu-tools .vt-yt-link { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  #visu-tools .vt-vc-paths .vt-path-list { grid-template-columns: 1fr; }
  #visu-tools .vt-yt-sub { padding-top: 0; }
}

/* Tools W3 (2026-10-10): Event QR. Date and time inputs follow the text fields (1px hairline). */
#visu-tools .vt-evqr :is(input[type=date], input[type=time]) {
  width: 100% !important; min-height: 46px; padding: 10px 14px !important; border-radius: 12px !important; border: 1px solid var(--vt-line-2) !important;
  background: #fff !important; color: var(--vt-ink) !important; font: inherit !important; font-size: 16px !important; line-height: 1.4 !important; box-shadow: none !important; margin: 0 !important; }
#visu-tools .vt-evqr .vt-check { min-height: 0; margin-bottom: 12px; }
#visu-tools .vt-evqr .vt-error { margin-top: 14px; }
#visu-tools .vt-ev-sum { margin-bottom: 10px; font-weight: 600; color: var(--vt-ink); }
#visu-tools .vt-ev-paths .vt-path-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) {
  #visu-tools .vt-ev-paths .vt-path-list { grid-template-columns: 1fr; }
}

/* Tools W3 (2026-10-10): YouTube money calculator (creator earnings engine). Borders stay 1px hairline. */
#visu-tools .vt-ce-period, #visu-tools .vt-ce-views, #visu-tools .vt-ce-rpm { margin-top: 16px !important; }
#visu-tools .vt-ce .vt-in > .vt-hint { margin-top: 10px !important; }
#visu-tools .vt-ce .vt-seg-item span { min-height: 36px; padding: 6px 12px; font-size: 14px; }
#visu-tools .vt-ce .vt-big-num { font-size: clamp(30px, 3.6vw, 44px); overflow-wrap: anywhere; }
#visu-tools .vt-ce .vt-metrics dd { overflow-wrap: anywhere; }
#visu-tools .vt-ce input[aria-invalid="true"] { border-color: var(--vt-err) !important; }
#visu-tools .vt-ce-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
#visu-tools .vt-ce-method h3 { font-size: 17px !important; font-weight: 680 !important; margin-bottom: 6px !important; }
#visu-tools .vt-ce-method p { font-size: 15.5px; }
#visu-tools .vt-ce-sources { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--vt-line); }
#visu-tools .vt-ce-sources ul { margin-top: 10px !important; padding-left: 20px !important; display: grid; gap: 6px; font-size: 15px; }
@media (max-width: 860px) {
  #visu-tools .vt-ce-method-grid { grid-template-columns: 1fr; }
}

/* Hub as a directory + category collection pages (2026-10-21, growth audit onda 0). */
#visu-tools .vt-cat h2 a { color: inherit; text-decoration: none; }
#visu-tools .vt-cat h2 a:hover { color: var(--vt-accent-text); text-decoration: underline; }
#visu-tools .vt-cat-more { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; margin: 14px 0 0 !important; font-size: 14.5px; font-weight: 560; text-align: right; }
#visu-tools .vt-cat-more a { text-decoration: none; }
#visu-tools .vt-cat-more a:hover { text-decoration: underline; }
#visu-tools .vt-card-plain { grid-template-columns: 1fr; }
#visu-tools .vt-results { margin-bottom: 28px; }
#visu-tools .vt-coll-h { font-size: 22px; margin: 0 0 14px !important; letter-spacing: -0.01em; }