/* ==========================================================================
   Free tools: the /tools/ hub and every tool page. Loaded only on those
   pages (via $page_meta['styles']), on top of style.css, using its tokens.
   Tool interfaces are left-aligned, unlike .card, which style.css centres.
   ========================================================================== */

/* [hidden] must win over the display values set below (a.card is flex, the
   grids are grid), or tabs and the hub search would hide nothing. */
.page-tool [hidden], .page-tools [hidden] { display:none !important; }

/* ---- Hero --------------------------------------------------------------- */
.tool-badges { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); font-size:var(--text-sm); color:var(--color-ink-muted); }
.tool-badges li { display:inline-flex; align-items:center; gap:var(--space-2); }
.tool-badges svg { width:18px; height:18px; flex:none; color:var(--color-teal); }
.tool-badges .tick { margin:0; width:18px; height:18px; }
.tool-badges a { color:inherit; text-decoration:underline; }

.tool-search { max-width:440px; }

/* ---- The tool itself ---------------------------------------------------- */
.tool-panel {
  background:var(--color-bg); border:var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:clamp(1.25rem, 3vw, 2.25rem);
  text-align:left;
}
.tool-panel :is(p, li, label, h2, h3, h4) { text-align:left; }
/* Inline links inside a tool or the CTA box read as links, not plain text. */
:is(.tool-panel, .tool-cta) a:not(.btn) { color:var(--color-accent); text-decoration:underline; text-underline-offset:3px; }
:is(.tool-panel, .tool-cta) a:not(.btn):hover { color:var(--color-accent-hover); }
/* minmax(0,…) and min-width:0 stop wide content (a nowrap SERP title, a long
   URL, a row of tabs) from stretching the column past the panel on phones. */
.tool-grid, .tool-grid-wide { grid-template-columns:minmax(0, 1fr); }
.tool-grid > *, .tool-grid-wide > * { min-width:0; }
.tool-grid { display:grid; gap:var(--space-7); }
@media (min-width:960px) { .tool-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; } }
.tool-grid-wide { display:grid; gap:var(--space-7); }
@media (min-width:960px) { .tool-grid-wide { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start; } }

.tool-panel h2.tool-h { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; letter-spacing:-0.01em; }
.tool-sub { font-size:var(--text-sm); color:var(--color-ink-muted); margin-top:var(--space-2); }
.tool-row { display:grid; gap:var(--space-4); }
@media (min-width:560px) { .tool-row-2 { grid-template-columns:1fr 1fr; } .tool-row-3 { grid-template-columns:1fr 1fr 1fr; } }
.tool-row > .field + .field { margin-top:0; }
.tool-panel .field + .field { margin-top:var(--space-4); }
/* ...but not side by side: the stacked rule above is equally specific and later,
   so without this the second column of every row sat lower than the first. */
.tool-panel :is(.tool-row, .tool-form, .tool-form-extra) > .field + .field { margin-top:0; }
.tool-panel .field label { margin-bottom:var(--space-2); }
.tool-panel .field textarea { min-height:120px; resize:vertical; font-family:inherit; }
.tool-panel .field input[type=color] { padding:.3rem; height:48px; cursor:pointer; }
.tool-panel .field input[type=range] { padding:0; border:none; accent-color:var(--color-accent); }
.field-hint { display:block; font-size:var(--text-xs, .8rem); color:var(--color-ink-subtle); margin-top:var(--space-2); }
.field-count { float:right; font-weight:500; color:var(--color-ink-subtle); font-variant-numeric:tabular-nums; }
.field-count.is-warn { color:var(--color-warning); }
.field-count.is-bad  { color:var(--color-error); }

.tool-check { display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm); cursor:pointer; }
.tool-check input { width:18px; height:18px; margin-top:2px; accent-color:var(--color-accent); flex:none; }
.tool-checks { display:grid; gap:var(--space-3); }
@media (min-width:560px) { .tool-checks-2 { grid-template-columns:1fr 1fr; } }
fieldset.tool-fieldset { border:none; padding:0; margin:0; }
fieldset.tool-fieldset legend { font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-3); padding:0; }
.tool-fieldset + .tool-fieldset, .tool-fieldset + .field, .field + .tool-fieldset { margin-top:var(--space-5); }

/* Segmented control: a row of radio-like buttons. */
.tool-tabs { display:flex; flex-wrap:wrap; gap:var(--space-2); padding:4px; background:var(--color-surface); border-radius:var(--radius-full); width:max-content; max-width:100%; }
.tool-tabs button {
  border:0; background:transparent; color:var(--color-ink-muted); font:inherit; font-size:var(--text-sm); font-weight:600;
  padding:.5rem 1rem; border-radius:var(--radius-full); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tool-tabs button:hover { color:var(--color-ink); }
.tool-tabs button[aria-selected="true"], .tool-tabs button[aria-pressed="true"] { background:var(--color-bg); color:var(--color-accent); box-shadow:var(--shadow-xs); }
.tool-tabs button:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.tool-tabs-wrap { overflow-x:auto; max-width:100%; }

/* Buttons inside a tool are compact. */
.tool-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }
.tool-actions .btn { padding:.7rem 1.2rem; font-size:var(--text-sm); }
.btn-sm { padding:.5rem .95rem !important; font-size:var(--text-sm); }
.tool-btn-link { background:none; border:0; padding:0; font:inherit; font-size:var(--text-sm); color:var(--color-accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* ---- Output ------------------------------------------------------------- */
.tool-output-box { background:var(--color-bg-alt); border:var(--border); border-radius:var(--radius); padding:var(--space-5); }
.tool-code {
  display:block; width:100%; font-family:var(--font-mono); font-size:.82rem; line-height:1.6;
  background:var(--color-dark); color:#E2E8F0; border-radius:var(--radius); padding:var(--space-5);
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; max-height:440px; overflow:auto; border:0; resize:vertical; min-height:120px;
}
.tool-linkbox { display:flex; gap:var(--space-2); align-items:stretch; }
.tool-linkbox input { flex:1; min-width:0; font-family:var(--font-mono); font-size:.85rem; padding:.75rem 1rem; border:var(--border); border-radius:var(--radius); background:var(--color-bg-alt); color:var(--color-ink); }
.tool-linkbox .btn { flex:none; }

.tool-stats { display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width:520px) { .tool-stat { padding:var(--space-3) var(--space-4); } .tool-stat-value { font-size:var(--text-xl); } }
.tool-stat { background:var(--color-bg-alt); border:var(--border); border-radius:var(--radius); padding:var(--space-4) var(--space-5); }
.tool-stat-label { display:block; font-size:var(--text-xs, .8rem); font-weight:600; letter-spacing:.02em; color:var(--color-ink-muted); text-transform:uppercase; }
.tool-stat-value { display:block; font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; color:var(--color-ink); margin-top:var(--space-1); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tool-stat-note { display:block; font-size:var(--text-xs, .8rem); color:var(--color-ink-subtle); margin-top:var(--space-1); }
.tool-stat.is-primary { background:var(--color-accent-tint); border-color:#BFDBFE; }
.tool-stat.is-primary .tool-stat-value { color:var(--color-accent); }

.tool-verdict { border-radius:var(--radius); padding:var(--space-4) var(--space-5); font-size:var(--text-sm); border:1px solid; }
.tool-verdict.is-good { background:var(--color-teal-tint); border-color:#A7F3D0; color:#065F46; }
.tool-verdict.is-warn { background:var(--color-warm-tint); border-color:#FDE68A; color:#78350F; }
.tool-verdict.is-bad  { background:#FEF2F2; border-color:#FECACA; color:#991B1B; }
.tool-verdict strong { color:inherit; }

.tool-note { font-size:var(--text-sm); color:var(--color-ink-muted); background:var(--color-bg-alt); border:var(--border); border-radius:var(--radius); padding:var(--space-4) var(--space-5); }
.tool-error { font-size:var(--text-sm); color:var(--color-error); margin-top:var(--space-2); }
.tool-empty { color:var(--color-ink-subtle); font-size:var(--text-sm); text-align:center; padding:var(--space-7) var(--space-4); border:1px dashed var(--color-line-strong); border-radius:var(--radius); }

/* Checks list (analyzer results). */
.tool-checklist { display:grid; gap:var(--space-2); }
.tool-checklist li { display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:start; font-size:var(--text-sm); padding:var(--space-3) 0; border-bottom:var(--border); }
.tool-checklist li:last-child { border-bottom:0; }
.tool-dot { width:10px; height:10px; border-radius:50%; margin-top:6px; background:var(--color-line-strong); }
.tool-dot.is-good { background:var(--color-teal); }
.tool-dot.is-warn { background:var(--color-warm-bright); }
.tool-dot.is-bad  { background:var(--color-error); }
.tool-checklist strong { display:block; color:var(--color-ink); }
.tool-checklist .tool-val { display:block; color:var(--color-ink-muted); overflow-wrap:anywhere; margin-top:2px; }

/* Length meter (SERP, meta tags). */
.tool-meter { height:6px; border-radius:var(--radius-full); background:var(--color-surface); overflow:hidden; margin-top:var(--space-2); }
.tool-meter span { display:block; height:100%; width:0; background:var(--color-teal); border-radius:inherit; transition:width var(--dur) var(--ease), background var(--dur) var(--ease); }
.tool-meter.is-warn span { background:var(--color-warm-bright); }
.tool-meter.is-bad span  { background:var(--color-error); }

/* QR preview. */
.tool-qr { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.tool-qr-frame { background:#fff; border:var(--border); border-radius:var(--radius); padding:var(--space-4); width:min(100%, 300px); aspect-ratio:1; display:grid; place-items:center; }
.tool-qr-frame svg, .tool-qr-frame canvas, .tool-qr-frame img { width:100%; height:auto; display:block; }
.tool-qr-frame .tool-empty { border:0; padding:var(--space-4); }

/* Repeatable rows (schema FAQ items, breadcrumb items). */
.tool-repeat { display:grid; gap:var(--space-4); }
.tool-repeat-item { border:var(--border); border-radius:var(--radius); padding:var(--space-4); background:var(--color-bg-alt); position:relative; }
.tool-repeat-item .tool-remove { position:absolute; top:var(--space-3); right:var(--space-3); }

/* ---- Server tools: input row, spinner, score, tables -------------------- */
.tool-form { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end; }
.tool-form .field { flex:1 1 280px; margin:0; }
.tool-form .btn { flex:none; min-height:52px; }
.tool-form-extra { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-4); }
.tool-form-extra .field { flex:1 1 200px; margin:0; }
.tool-spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:tool-spin .8s linear infinite; display:inline-block; }
@keyframes tool-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .tool-spinner { animation-duration:2.4s; } }
[data-result] { margin-top:var(--space-7); scroll-margin-top:100px; }
[data-result]:empty { display:none; }

.tool-score { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6); padding:var(--space-5); background:var(--color-bg-alt); border:var(--border); border-radius:var(--radius-lg); }
.tool-ring {
  --c:var(--color-teal); width:112px; height:112px; border-radius:50%; flex:none; position:relative;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--color-line) 0);
  display:grid; place-items:center; align-content:center;
}
.tool-ring::before { content:''; position:absolute; inset:10px; border-radius:50%; background:var(--color-bg); }
.tool-ring > * { position:relative; line-height:1; text-align:center; }
.tool-ring span { font-family:var(--font-display); font-size:2rem; font-weight:600; }
.tool-ring small { font-size:.75rem; color:var(--color-ink-subtle); margin-top:2px; }
.tool-ring.is-warn { --c:var(--color-warm-bright); }
.tool-ring.is-bad { --c:var(--color-error); }
.tool-score-counts { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-3); font-size:var(--text-sm); }
.tool-score-counts li { display:inline-flex; align-items:center; gap:var(--space-2); }
.tool-score-counts .tool-dot { margin:0; }
.tool-grade { font-family:var(--font-display); font-size:3rem; font-weight:700; line-height:1; }

.tool-table-wrap { overflow-x:auto; border:var(--border); border-radius:var(--radius); }
.tool-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.tool-table th, .tool-table td { text-align:left; padding:.65rem .9rem; border-bottom:var(--border); vertical-align:top; }
.tool-table th { background:var(--color-bg-alt); font-weight:600; white-space:nowrap; }
.tool-table tr:last-child td { border-bottom:0; }
.tool-table td.mono, .tool-table .mono { font-family:var(--font-mono); font-size:.8rem; overflow-wrap:anywhere; word-break:break-word; }
.tool-table .tool-val { display:block; margin-top:2px; color:var(--color-ink-muted); }
.tool-panel code, .tool-verdict code { font-family:var(--font-mono); font-size:.85em; background:rgba(15,23,42,.06); padding:.1em .35em; border-radius:4px; overflow-wrap:anywhere; }
.tool-table td.nowrap { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
.tool-pill { display:inline-block; font-size:.75rem; font-weight:600; padding:.15rem .6rem; border-radius:var(--radius-full); white-space:nowrap; }
.tool-pill.is-good { background:var(--color-teal-tint); color:#065F46; }
.tool-pill.is-warn { background:var(--color-warm-tint); color:#78350F; }
.tool-pill.is-bad  { background:#FEF2F2; color:#991B1B; }
.tool-pill.is-muted { background:var(--color-surface); color:var(--color-ink-muted); }
.tool-pre { font-family:var(--font-mono); font-size:.8rem; line-height:1.6; background:var(--color-bg-alt); border:var(--border); border-radius:var(--radius); padding:var(--space-4); max-height:360px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.tool-kv { display:grid; grid-template-columns:minmax(110px, max-content) 1fr; gap:var(--space-2) var(--space-5); font-size:var(--text-sm); }
.tool-kv dt { color:var(--color-ink-muted); font-weight:600; }
.tool-kv dd { margin:0; overflow-wrap:anywhere; }
.tool-chain { display:grid; gap:var(--space-2); counter-reset:hop; }
.tool-chain li { display:grid; grid-template-columns:auto auto 1fr; gap:var(--space-3); align-items:center; font-size:var(--text-sm); padding:var(--space-3) var(--space-4); background:var(--color-bg-alt); border:var(--border); border-radius:var(--radius); }
.tool-chain li .mono { font-family:var(--font-mono); font-size:.8rem; overflow-wrap:anywhere; min-width:0; }
.tool-chain li::before { counter-increment:hop; content:counter(hop); width:24px; height:24px; border-radius:50%; background:var(--color-accent); color:#fff; display:grid; place-items:center; font-size:.75rem; font-weight:600; }

/* ---- Heading outline, size bars ------------------------------------------ */
.tool-outline { display:grid; gap:4px; font-size:var(--text-sm); }
.tool-outline li { padding:6px 10px; padding-left:calc(10px + var(--lvl, 0) * 22px); border-left:2px solid var(--color-line); overflow-wrap:anywhere; }
.tool-outline li.is-skip { border-left-color:var(--color-warm-bright); background:var(--color-warm-tint); }
.tool-bars { display:grid; gap:var(--space-2); font-size:var(--text-sm); }
.tool-bars li { display:grid; grid-template-columns:90px 1fr 80px; gap:var(--space-3); align-items:center; }
.tool-bars .tool-meter { margin:0; height:10px; }
.tool-bars .mono { text-align:right; font-size:.8rem; }

/* ---- File drop zone, image results ---------------------------------------- */
.tool-drop { display:grid; justify-items:center; gap:6px; text-align:center; padding:var(--space-7) var(--space-5); border:2px dashed var(--color-line-strong); border-radius:var(--radius-lg); background:var(--color-bg-alt); cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.tool-drop:hover, .tool-drop.is-over, .tool-drop:focus-within { border-color:var(--color-accent); background:var(--color-accent-tint); }
.tool-drop-icon { width:44px; height:44px; color:var(--color-accent); }
.tool-drop-icon svg { width:100%; height:100%; }
.tool-drop strong { color:var(--color-accent); }
.tool-files { display:grid; gap:var(--space-4); }
.tool-file { display:grid; grid-template-columns:72px minmax(0, 1fr) auto; gap:var(--space-4); align-items:center; padding:var(--space-3); border:var(--border); border-radius:var(--radius); background:var(--color-bg); }
.tool-file img { width:72px; height:72px; object-fit:cover; border-radius:var(--radius-sm); background:repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.tool-file-name { font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere; }
.tool-file-meta { font-size:var(--text-xs, .8rem); color:var(--color-ink-muted); margin-top:2px; }
@media (max-width:560px) { .tool-file { grid-template-columns:56px minmax(0, 1fr); } .tool-file img { width:56px; height:56px; } .tool-file > :last-child { grid-column:1 / -1; } }
.fv-previews { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-5); padding:var(--space-5); border:var(--border); border-radius:var(--radius); background:repeating-conic-gradient(#eef2f7 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.fv-prev { margin:0; display:grid; justify-items:center; gap:6px; }
.fv-prev canvas { image-rendering:pixelated; display:block; }
.fv-prev figcaption { font-size:var(--text-xs, .8rem); color:var(--color-ink-muted); }
.fv-tab { display:inline-flex; align-items:center; gap:8px; background:#DEE1E6; border-radius:8px 8px 0 0; padding:8px 14px; font:13px system-ui, sans-serif; color:#202124; min-width:200px; }
.fv-tab canvas { display:block; }
/* Contrast checker */
.cc-pair { display:grid; grid-template-columns:56px minmax(0, 1fr); gap:var(--space-2); }
.tool-panel .field .cc-pair input[type=color] { height:100%; min-height:48px; }
.cc-preview { border:var(--border); border-radius:var(--radius); padding:var(--space-5); display:grid; gap:var(--space-3); }
.cc-preview p { color:inherit; }
.cc-large { font-size:1.5rem; font-weight:600; line-height:1.3; }
.cc-btn { justify-self:start; padding:.55rem 1.1rem; border-radius:var(--radius-full); font-weight:600; font-size:var(--text-sm); }
.cc-sugs { display:grid; gap:var(--space-2); }
.cc-sug { display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left; padding:10px 12px; border:var(--border); border-radius:var(--radius); background:var(--color-bg); color:var(--color-ink); font:inherit; font-size:var(--text-sm); cursor:pointer; }
.cc-sug:hover { border-color:var(--color-accent); }
.cc-swatch { width:32px; height:32px; border-radius:var(--radius-sm); flex:none; border:var(--border); }

/* Palette generator */
.cp-row { display:grid; gap:var(--space-2); grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
.cp-sw { display:grid; gap:2px; text-align:left; min-height:96px; align-content:end; padding:10px 12px; border:1px solid rgba(15,23,42,.12); border-radius:var(--radius); font:inherit; font-size:var(--text-xs, .8rem); cursor:pointer; }
.cp-sw strong { font-size:var(--text-sm); }
.cp-sw:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.cp-canvas { display:block; max-width:100%; height:auto; border-radius:var(--radius); cursor:crosshair; }

/* Gradient and SVG previews */
.cg-preview { min-height:260px; border:var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; }
#cg-preview { height:300px; }
#sv-prev { padding:var(--space-4); }

/* Domain ideas */
.dn-grid { display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.dn-card { border:var(--border); border-radius:var(--radius); padding:var(--space-3) var(--space-4); }
.dn-name { display:flex; justify-content:space-between; gap:var(--space-2); align-items:center; font-weight:600; overflow-wrap:anywhere; }
.dn-score { flex:none; }
.dn-tlds { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; }
.dn-tlds .tool-btn-link { font-size:var(--text-xs, .8rem); overflow-wrap:anywhere; text-align:left; }

/* YouTube thumbnails */
.yt-grid { display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.yt-card { margin:0; border:var(--border); border-radius:var(--radius); overflow:hidden; background:var(--color-bg-alt); }
.yt-card img { display:block; width:100%; height:auto; }
.yt-card figcaption { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3); font-size:var(--text-sm); }
.yt-card figcaption .btn { margin-left:auto; }

/* Business card previews */
.bc-frame { border:var(--border); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); line-height:0; }
.bc-frame canvas { display:block; width:100%; height:auto; }

.tool-checker { background:repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 0 0 / 16px 16px; }

/* ---- Urdu and Arabic text ------------------------------------------------- */
/* System fonts only (no font download): Nastaliq where the device has it, then Naskh. */
.rtl-text { font-family:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', sans-serif; line-height:2; font-size:1.1rem; }
textarea.rtl-text { text-align:right; }
input.rtl-text { line-height:1.6; }
.serp-rtl { text-align:right; }
.serp-rtl .serp-title, .serp-rtl .serp-desc { font-family:Arial, 'Segoe UI', Tahoma, sans-serif; }
.serp-rtl .serp-url { direction:ltr; text-align:right; unicode-bidi:plaintext; }

/* ---- GBP category finder -------------------------------------------------- */
.gc-list { display:grid; gap:6px; }
@media (min-width:560px) { .gc-list { grid-template-columns:1fr 1fr; } }
.gc-item { width:100%; text-align:left; display:grid; gap:2px; padding:10px 12px; border:var(--border); border-radius:var(--radius); background:var(--color-bg); cursor:pointer; font:inherit; color:var(--color-ink); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.gc-item span { font-size:var(--text-xs, .8rem); color:var(--color-ink-subtle); }
.gc-item:hover { border-color:var(--color-accent); }
.gc-item.is-on { background:var(--color-accent-tint); border-color:var(--color-accent); }
.gc-picked { display:grid; gap:8px; font-size:var(--text-sm); }
.gc-picked li { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#gc-groups button[aria-pressed="true"] { background:var(--color-bg); color:var(--color-accent); box-shadow:var(--shadow-xs); }

/* ---- Readability highlights ------------------------------------------------ */
.rd-text { font-size:var(--text-base); line-height:1.9; background:var(--color-bg-alt); border:var(--border); border-radius:var(--radius); padding:var(--space-5); max-height:520px; overflow:auto; overflow-wrap:anywhere; }
.rd-long { background:#FEF3C7; box-decoration-break:clone; -webkit-box-decoration-break:clone; border-radius:3px; }
mark.rd-passive { background:#DBEAFE; color:inherit; border-radius:3px; padding:0 2px; }
mark.rd-adverb { background:#EDE9FE; color:inherit; border-radius:3px; padding:0 2px; }
.rd-legend { display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:var(--text-sm); }
.rd-legend > * { padding:2px 8px; }

/* ---- Share previews (Open Graph checker) --------------------------------- */
.og-grid { display:grid; gap:var(--space-6); grid-template-columns:minmax(0, 1fr); align-items:start; }
@media (min-width:900px) { .og-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.og-card { font-family:-apple-system, 'Segoe UI', Roboto, Arial, sans-serif; overflow:hidden; background:#fff; }
.og-card img, .og-noimg { display:block; width:100%; aspect-ratio:1.91 / 1; object-fit:cover; background:#E4E6EB; }
.og-noimg { display:grid; place-items:center; color:#65676B; font-size:13px; }
.og-body { display:grid; gap:3px; padding:10px 12px; }
.og-body strong { font-size:15px; line-height:1.3; color:#050505; }
.og-body span { font-size:13px; line-height:1.35; color:#65676B; overflow-wrap:anywhere; }
.og-fb { border:1px solid #DADDE1; border-radius:8px; }
.og-fb .og-body { background:#F0F2F5; }
.og-fb .og-host { font-size:12px; letter-spacing:.02em; }
.og-wa { background:#D9FDD3; border-radius:10px; padding:4px; }
.og-wa-inner { background:rgba(0,0,0,.05); border-radius:8px; overflow:hidden; }
.og-wa .og-body strong { font-size:14px; }
.og-wa-link { display:block; padding:6px 8px 4px; font-size:13px; color:#027EB5; overflow-wrap:anywhere; }
.og-x { border:1px solid #CFD9DE; border-radius:16px; position:relative; }
.og-x-host { position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 6px; border-radius:4px; }
.og-x-under { font-family:-apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size:13px; color:#536471; margin-top:6px; }

/* ---- SERP preview ------------------------------------------------------- */
.serp { font-family:Arial, Helvetica, sans-serif; background:#fff; border:var(--border); border-radius:var(--radius); padding:var(--space-5); }
.serp-site { display:flex; align-items:center; gap:12px; }
.serp-fav { width:28px; height:28px; border-radius:50%; background:#F1F3F4; border:1px solid #DADCE0; display:grid; place-items:center; flex:none; font-size:12px; color:#5F6368; font-weight:700; }
.serp-name { font-size:14px; color:#202124; line-height:20px; }
.serp-url { font-size:12px; color:#4D5156; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.serp-title { display:block; font-size:20px; line-height:26px; color:#1A0DAB; margin-top:6px; font-weight:400; overflow:hidden; white-space:nowrap; text-overflow:clip; }
.serp-desc { font-size:14px; line-height:22px; color:#4D5156; margin-top:4px; overflow-wrap:anywhere; }
.serp-desc b { color:#5F6368; font-weight:700; }
.serp-date { color:#70757A; }
.serp-mobile { max-width:412px; }
.serp-mobile .serp-title { font-size:18px; line-height:24px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.serp-frame-label { font-size:var(--text-xs, .8rem); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--color-ink-subtle); margin-bottom:var(--space-3); }

/* ---- Review card preview (Google review tool) --------------------------- */
.review-card { background:#fff; border:var(--border); border-radius:var(--radius-lg); padding:var(--space-6); text-align:center; width:min(100%, 340px); margin-inline:auto; box-shadow:var(--shadow-sm); }
.review-card .tool-qr-frame { margin:var(--space-4) auto 0; border:0; padding:0; width:200px; }

/* ---- Service CTA after the tool ---------------------------------------- */
.tool-cta {
  display:grid; gap:var(--space-5); align-items:center;
  background:linear-gradient(135deg, var(--color-accent-tint), #fff 60%, var(--color-warm-tint));
  border:1px solid #BFDBFE; border-radius:var(--radius-lg); padding:clamp(1.25rem, 3vw, 2rem);
  text-align:left;
}
.tool-cta :is(h2, p) { text-align:left; }
@media (min-width:900px) { .tool-cta { grid-template-columns:auto 1fr auto; } }
.tool-cta-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.tool-cta-actions .btn svg { width:18px; height:18px; }

/* ---- How-to, guide ------------------------------------------------------ */
.tool-content { max-width:var(--container-prose, 720px); margin-inline:auto; }
.tool-content > h2 { text-align:left; }
.tool-steps { display:grid; gap:var(--space-4); counter-reset:none; }
.tool-steps li { display:flex; gap:var(--space-4); align-items:flex-start; }
.tool-step-num {
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--color-accent); color:#fff; font-weight:600; font-size:var(--text-sm);
}
.tool-steps li > span:last-child { padding-top:5px; }
.tool-guide h2 { margin-top:var(--space-8); text-align:left; }
.tool-guide h2:first-child { margin-top:0; }
.tool-guide p { margin-top:var(--space-4); line-height:1.75; color:var(--color-ink); text-align:left; }
.tool-guide .check-list { margin-top:var(--space-4); }
.tool-guide .check-list li span { text-align:left; }

/* ---- Hub ---------------------------------------------------------------- */
.tool-group + .tool-group { margin-top:var(--space-10); }
.tool-card { text-decoration:none; color:inherit; }
.tool-card .icon-chip { margin-inline:auto; }