/* Rule 171 / separation plan P3 (2026-10-25, Mother): every style rule here carries :where(:not(#th-tool[data-own] *)) on the element it styles,
   so it never reaches inside a separated tool box (#th-tool[data-own]); :where adds no weight. New rules MUST carry it too (claude/tools/wall.js). */
/* self-hosted fonts (no Google request = faster + GDPR friendly) */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:optional;src:url(../fonts/instrument-serif-italic.woff2) format('woff2')}
/* ToolHa design system — v2 (modern / AI-era). Light + dark via CSS variables. */
:root:where(:not(#th-tool[data-own] *)){
  --bg:#FAFAFC; --surface:#FFFFFF; --surface-2:#F2F3F8; --ink:#0B1020; --muted:#5B6275; --line:#E4E6EE;
  --brand:#4338CA; --brand-2:#4F46E5; --brand-ink:#3730A3; --brand-soft:#EEF0FF; --on-brand:#FFFFFF;
  --ai:#7C3AED; --ai-ink:#6D28D9; --ai-soft:#F4EFFF; --blue:#2563EB;
  --grad:linear-gradient(135deg,#2563EB 0%,#4F46E5 45%,#7C3AED 100%);
  --warn:#9A4A07; --ok:#1B6B3A;
  --shadow:0 1px 2px rgba(11,16,32,.04),0 4px 16px rgba(11,16,32,.05);
  --shadow-lg:0 2px 4px rgba(11,16,32,.04),0 24px 60px rgba(11,16,32,.10);
  --radius:16px; --radius-sm:10px;
  --font:'Geist','Geist Variable',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --mono:'Geist Mono','Geist Mono Variable',ui-monospace,SFMono-Regular,Menlo,monospace;
  --dot:rgba(11,16,32,.06); --glow-a:rgba(37,99,235,.14); --glow-b:rgba(124,58,237,.14);
  --stripe:rgba(11,16,32,.035);
  color-scheme:light;
}
:root[data-theme="dark"]:where(:not(#th-tool[data-own] *)){
  --bg:#07090F; --surface:#0E121B; --surface-2:#161B27; --ink:#EEF0F6; --muted:#9AA3B8; --line:#212738;
  --brand:#6366F1; --brand-2:#4F46E5; --brand-ink:#A5B4FC; --brand-soft:#171A36; --on-brand:#FFFFFF;
  --ai:#8B5CF6; --ai-ink:#C4B5FD; --ai-soft:#1C1733; --blue:#60A5FA;
  --grad:linear-gradient(135deg,#60A5FA 0%,#818CF8 45%,#C084FC 100%);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px rgba(0,0,0,.55);
  --dot:rgba(255,255,255,.045); --glow-a:rgba(59,130,246,.22); --glow-b:rgba(139,92,246,.24);
  --stripe:rgba(255,255,255,.035);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):where(:not(#th-tool[data-own] *)){
  --bg:#07090F; --surface:#0E121B; --surface-2:#161B27; --ink:#EEF0F6; --muted:#9AA3B8; --line:#212738;
  --brand:#6366F1; --brand-2:#4F46E5; --brand-ink:#A5B4FC; --brand-soft:#171A36; --on-brand:#FFFFFF;
  --ai:#8B5CF6; --ai-ink:#C4B5FD; --ai-soft:#1C1733; --blue:#60A5FA;
  --grad:linear-gradient(135deg,#60A5FA 0%,#818CF8 45%,#C084FC 100%);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px rgba(0,0,0,.55);
  --dot:rgba(255,255,255,.045); --glow-a:rgba(59,130,246,.22); --glow-b:rgba(139,92,246,.24);
  --stripe:rgba(255,255,255,.035);
  color-scheme:dark;
  }}
/* ===== v1.33 ToolHa layout standard: one spacing + type scale for the whole site (owner rule 2026-09-30).
   Every tool and page uses these tokens (or the .t-* building blocks in tool.css) instead of its own numbers,
   so nothing is crowded and nothing is bigger than the standard. Phones get a slightly tighter set. ===== */
:root:where(:not(#th-tool[data-own] *)){
  /* spacing scale (4 px steps) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  /* what the spacing is for */
  --gap-label:6px;      /* label → its box, box → its hint line */
  --gap-msg:12px;       /* v1.40: a box → the message or hint under it — the smallest space between two different things */
  --gap-min:8px;        /* v1.40: the absolute minimum between any two boxes, buttons or messages (the spacing check fails below it) */
  --gap-item:12px;      /* items in a list, choice cards in a box */
  --gap-grid:16px;      /* boxes/cards side by side */
  --gap-block:20px;     /* blocks inside one part of a tool (input → result → check) */
  --gap-section:22px;   /* main parts of a tool card */
  --sec-pad:26px;       /* space above a new part that starts with a divider line */
  --pad-box:16px;       /* inside a bordered box */
  --pad-card:12px 14px; /* inside a small choice card */
  --pad-result:24px 26px; /* inside the big result panel */
  --r-box:16px; --r-card:12px; --r-btn:12px; --r-pill:999px;
  --tap:44px;           /* smallest thing a finger has to hit */
  --h-btn:44px;         /* v1.39.1 THE button height (owner rule: every normal button is this tall — never set a custom height) */
  --h-btn-sm:36px;      /* small buttons in tool toolbars (.btn.sm) */
  --pad-field:14px 16px; /* inside every text box and output panel: text never touches a border */
  /* type scale = the Word Counter / Case Converter / KM to Miles standard; never bigger */
  --fs-meta:12.5px;     /* counts, small notes */
  --fs-label:13px;      /* field labels, box titles, hints */
  --fs-sm:14px;         /* checklist lines, choice text */
  --fs-body:15px;       /* sentences, buttons, part titles */
  --fs-input:20px;      /* the main text box */
  --fs-slug:22px;       /* one-line mono result */
  --fs-result:clamp(30px,3vw,36px); /* big number result (v1.37: was up to 48 px — owner: too big) */
  /* v1.37 ToolHa type standard (owner 2026-09-30): nothing bigger than these, no text smaller than --fs-min */
  --fs-hero:clamp(36px,5vw,60px);  /* ONE big hero title per landing page (home, All tools, A–Z, company pages) */
  --fs-h1:clamp(30px,3.4vw,42px);  /* page / tool title */
  --fs-h2:clamp(22px,2.2vw,28px);  /* section titles */
  --fs-h3:clamp(17px,1.5vw,19px);  /* v1.41.3: a smaller title for an optional part inside a tool (between --fs-h2 and a box title) */
  --fs-min:12.5px;                 /* smallest normal text (notes, units, counts) */
  --fs-tag:12px;                   /* only UPPERCASE labels, badges and number pins */
  --lh-tight:1.35; --lh-text:1.5;
}
@media (width <= 768px){
  :root:where(:not(#th-tool[data-own] *)){--pad-field:12px 14px;--gap-grid:14px;--gap-block:16px;--gap-section:18px;--sec-pad:22px;--pad-box:14px;--pad-result:20px;--fs-slug:19px}}
*:where(:not(#th-tool[data-own] *)){box-sizing:border-box}
html:where(:not(#th-tool[data-own] *)){-webkit-text-size-adjust:100%}
body:where(:not(#th-tool[data-own] *)){margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);text-decoration:none}
a:hover:where(:not(#th-tool[data-own] *)){text-decoration:underline;text-underline-offset:3px}
h1:where(:not(#th-tool[data-own] *)),h2:where(:not(#th-tool[data-own] *)),h3:where(:not(#th-tool[data-own] *)){line-height:1.1;letter-spacing:-.02em;margin:0}
p:where(:not(#th-tool[data-own] *)){margin:0}
button:where(:not(#th-tool[data-own] *)),input:where(:not(#th-tool[data-own] *)),select:where(:not(#th-tool[data-own] *)),textarea:where(:not(#th-tool[data-own] *)){font:inherit;color:inherit}
:focus-visible:where(:not(#th-tool[data-own] *)){outline:3px solid color-mix(in srgb,var(--ai) 55%,transparent);outline-offset:2px;border-radius:6px}
.sr:where(:not(#th-tool[data-own] *)){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap:where(:not(#th-tool[data-own] *)){max-width:1280px;margin:0 auto;padding:0 32px}
.serif:where(:not(#th-tool[data-own] *)){font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

.muted:where(:not(#th-tool[data-own] *)){color:var(--muted)}

/* header */
.hdr:where(:not(#th-tool[data-own] *)){position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.hdr .wrap:where(:not(#th-tool[data-own] *)){height:68px;display:flex;align-items:center;gap:28px}
.logo:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:750;font-size:21px;letter-spacing:-.03em}
.logo:hover:where(:not(#th-tool[data-own] *)){text-decoration:none}
.mark:where(:not(#th-tool[data-own] *)){width:32px;height:32px;display:block;flex-shrink:0}
.nav:where(:not(#th-tool[data-own] *)){display:flex;gap:4px;font-size:15px;font-weight:550}
.nav a:where(:not(#th-tool[data-own] *)),.nav button:where(:not(#th-tool[data-own] *)){color:var(--ink);padding:8px 12px;border-radius:10px;background:none;border:0;cursor:pointer}
.nav a:hover:where(:not(#th-tool[data-own] *)),.nav button:hover:where(:not(#th-tool[data-own] *)){background:var(--surface-2);text-decoration:none}
.hdr .sp:where(:not(#th-tool[data-own] *)){flex:1}
.kbtn:where(:not(#th-tool[data-own] *)){height:40px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;cursor:pointer}
.kbd:where(:not(#th-tool[data-own] *)){font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted)}

.mega:where(:not(#th-tool[data-own] *)){position:absolute;left:0;right:0;top:68px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);display:none}
.mega.open:where(:not(#th-tool[data-own] *)){display:block}
.mega .wrap:where(:not(#th-tool[data-own] *)){height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px 36px;align-items:start;padding-top:26px;padding-bottom:22px}
.mega h3:where(:not(#th-tool[data-own] *)){font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:700}
.mega h3 a:hover:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)!important;text-decoration:none}
.mega a:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:10px;color:var(--ink);font-size:15px;font-weight:550;transition:background .15s}
.mega a:hover:where(:not(#th-tool[data-own] *)){background:var(--surface-2);text-decoration:none}
.mega a>span:where(:not(#th-tool[data-own] *)){min-width:26px;height:22px;padding:0 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.mega h3 a:where(:not(#th-tool[data-own] *)){margin:0;border-radius:0}.mega h3 a:hover:where(:not(#th-tool[data-own] *)){background:none}

/* buttons, chips, badges */
.btn:where(:not(#th-tool[data-own] *)){height:var(--h-btn);padding:0 18px;border-radius:12px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;font-weight:650;cursor:pointer;font-size:15px}
/* v1.34 button style "E · Glow gradient" for the whole site (owner approved on the Slug Generator, 2026-09-30).
   Rules: nothing moves on hover (no lift, no scale); both round ends always look the same.
   Main button: the gradient fills the button exactly (border ring included). Hover = a second, slightly lighter
   gradient of the same shape fades in (::before) + a stronger soft glow below. Never use a sliding gradient
   (background-size > 100 % + background-position): it showed a blue strip and a square-looking right end.
   Second button: surface + light brand border; hover = stronger border, faint brand tint, soft shade below. */
:root:where(:not(#th-tool[data-own] *)){
  --btn-grad:linear-gradient(120deg,var(--brand-2) 0%,var(--ai) 100%);
  /* v1.35 main typing box (see tool.css "v1.35"): same height as the homepage search box (76 px, 72 px on phones) */
  --h-main:76px;--r-main:20px;
  --field-ring:linear-gradient(120deg,var(--brand-2) 0%,var(--ai) 100%);
  --field-glow:0 6px 22px -10px color-mix(in srgb,var(--ai) 45%,transparent);
  --field-glow-hover:0 8px 28px -10px color-mix(in srgb,var(--ai) 60%,transparent);
  --btn-grad-hover:linear-gradient(120deg,color-mix(in srgb,var(--brand-2) 40%,var(--ai)) 0%,color-mix(in srgb,var(--ai) 88%,#fff) 100%);
  --btn-glow:0 6px 18px -9px color-mix(in srgb,var(--ai) 60%,transparent);
  --btn-glow-hover:0 10px 26px -9px color-mix(in srgb,var(--ai) 85%,transparent);
  --btn-glow-press:0 3px 10px -6px color-mix(in srgb,var(--ai) 70%,transparent);
  --btn2-border:color-mix(in srgb,var(--brand) 24%,var(--line));
  --btn2-border-hover:color-mix(in srgb,var(--brand) 55%,var(--line));
  --btn2-bg-hover:color-mix(in srgb,var(--brand) 5%,var(--surface));
  --btn2-shade:0 8px 20px -12px color-mix(in srgb,var(--brand) 60%,transparent);
}
.btn:where(:not(#th-tool[data-own] *)){transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease,color .2s ease}
.btn-brand:where(:not(#th-tool[data-own] *)),.cc-acts .btn-brand:where(:not(#th-tool[data-own] *)){position:relative;isolation:isolate;border-color:transparent;color:#fff;background:var(--btn-grad) border-box;box-shadow:var(--btn-glow);filter:none}
.btn-brand:where(:not(#th-tool[data-own] *))::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--btn-grad-hover);opacity:0;transition:opacity .35s ease}
.btn-brand:hover:where(:not(#th-tool[data-own] *)),.cc-acts .btn-brand:hover:where(:not(#th-tool[data-own] *)){text-decoration:none;filter:none;box-shadow:var(--btn-glow-hover)}
.btn-brand:hover:where(:not(#th-tool[data-own] *))::before{opacity:1}
.btn-brand:active:where(:not(#th-tool[data-own] *)),.cc-acts .btn-brand:active:where(:not(#th-tool[data-own] *)){box-shadow:var(--btn-glow-press)}
.btn.done:where(:not(#th-tool[data-own] *))::before{opacity:0}
.btn-ghost:where(:not(#th-tool[data-own] *)),.cc-acts .btn-ghost:where(:not(#th-tool[data-own] *)){background:var(--surface);border-color:var(--btn2-border);color:var(--ink);box-shadow:0 1px 2px rgba(11,16,32,.04)}
.btn-ghost:hover:where(:not(#th-tool[data-own] *)),.cc-acts .btn-ghost:hover:where(:not(#th-tool[data-own] *)){text-decoration:none;background:var(--btn2-bg-hover);border-color:var(--btn2-border-hover);box-shadow:var(--btn2-shade)}
.btn[disabled]:where(:not(#th-tool[data-own] *))::before{display:none}
@media (prefers-reduced-motion:reduce){.btn:where(:not(#th-tool[data-own] *)),.btn:where(:not(#th-tool[data-own] *))::before{transition:none}}
.chip:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;white-space:nowrap}
.chip:hover:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--brand) 45%,var(--line));text-decoration:none}
.badge:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:650}

.b-ai:where(:not(#th-tool[data-own] *)){background:var(--ai-soft);color:var(--ai-ink)}
.b-plain:where(:not(#th-tool[data-own] *)){background:var(--surface-2);color:var(--muted)}
.spark:where(:not(#th-tool[data-own] *)){display:inline-block;width:14px;height:14px}

/* smart search */
.ss:where(:not(#th-tool[data-own] *)){position:relative;width:100%;max-width:780px}
.ss-ring:where(:not(#th-tool[data-own] *)){position:relative;border-radius:20px;padding:2px;background:linear-gradient(var(--line),var(--line))}
.ss-ring.live:where(:not(#th-tool[data-own] *)){background:conic-gradient(from var(--ang,0deg),#2563EB,#4F46E5,#7C3AED,#C084FC,#60A5FA,#2563EB);animation:spin 6s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
@media (prefers-reduced-motion:reduce){.ss-ring.live:where(:not(#th-tool[data-own] *)){animation:none}}
.ss-box:where(:not(#th-tool[data-own] *)){background:var(--surface);border-radius:18px;padding:10px 10px 10px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg)}
.ss-box input:where(:not(#th-tool[data-own] *)){flex:1;border:0;outline:none;background:transparent;font-size:18px;height:52px;min-width:0}
.ss-modes:where(:not(#th-tool[data-own] *)){display:flex;gap:6px;margin-bottom:12px;justify-content:center}
.mode:where(:not(#th-tool[data-own] *)){height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.mode[aria-pressed="true"]:where(:not(#th-tool[data-own] *)){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ss-pop:where(:not(#th-tool[data-own] *)){position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:30;text-align:left}
.ss-pop.open:where(:not(#th-tool[data-own] *)){display:block}
.ss-item:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--ink);font-weight:600}
.ss-item:hover:where(:not(#th-tool[data-own] *)),.ss-item.act:where(:not(#th-tool[data-own] *)){background:var(--surface-2);text-decoration:none}
.ss-item small:where(:not(#th-tool[data-own] *)){color:var(--muted);font-weight:500;font-size:13px}
.ss-answer:where(:not(#th-tool[data-own] *)){margin:4px 4px 8px;padding:14px 16px;border-radius:14px;background:var(--ai-soft);color:var(--ink);display:flex;flex-direction:column;gap:4px}
.ss-answer b:where(:not(#th-tool[data-own] *)){font-size:22px;letter-spacing:-.01em}
.ss-answer .lbl:where(:not(#th-tool[data-own] *)){font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ai-ink);display:flex;gap:6px;align-items:center}

/* hero */
.hero:where(:not(#th-tool[data-own] *)){position:relative;overflow:hidden;padding:84px 0 56px}
/* Rule 131 (owner 2026-10-16): ONE background grid for every page, drawn only here, never per template. A 56 px line grid
   behind the top of the page (header, page title, start of the content) that fades out downward and to the sides, so the
   homepage, tool pages, All tools, categories, countries, pages, posts, My Tools, search, 404 and every new template share
   the same look. Page heads may add their own glow or tint on top; they never draw a second grid. Pages without the site
   header (tool embeds) and print get no grid. */
body:has(>.hdr):where(:not(#th-tool[data-own] *))::before{content:"";position:absolute;left:0;right:0;top:0;height:760px;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--dot) 1px,transparent 1px),linear-gradient(90deg,var(--dot) 1px,transparent 1px);background-size:56px 56px;background-position:50% -1px;-webkit-mask-image:radial-gradient(ellipse 75% 100% at 50% 0%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 75% 100% at 50% 0%,#000 35%,transparent 80%)}
@media (width <= 768px){body:has(>.hdr):where(:not(#th-tool[data-own] *))::before{height:560px;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}}
@media print{body:where(:not(#th-tool[data-own] *))::before{display:none!important;content:none!important}}
.hero:where(:not(#th-tool[data-own] *))::after{content:"";position:absolute;left:50%;top:170px;width:1000px;height:420px;transform:translateX(-50%);background:radial-gradient(closest-side at 35% 50%,var(--glow-a),transparent 70%),radial-gradient(closest-side at 65% 50%,var(--glow-b),transparent 70%);filter:blur(20px);pointer-events:none;z-index:0}
.hero .wrap:where(:not(#th-tool[data-own] *)){position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}


.h1:where(:not(#th-tool[data-own] *)){font-size:clamp(40px,6.2vw,76px);font-weight:720;letter-spacing:-.04em;max-width:980px}
.h1 .serif:where(:not(#th-tool[data-own] *)){font-size:1.08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lead:where(:not(#th-tool[data-own] *)){font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:680px}
.trust:where(:not(#th-tool[data-own] *)){display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--muted)}
.trust span:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px}
.trust svg:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}

/* sections & cards */
.sec:where(:not(#th-tool[data-own] *)){padding-top:56px}
.sec-h:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}
.sec-h h2:where(:not(#th-tool[data-own] *)){font-size:clamp(26px,2.6vw,34px);font-weight:700}
.sec-h p:where(:not(#th-tool[data-own] *)){color:var(--muted);margin-top:6px}
.card:where(:not(#th-tool[data-own] *)){background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.tcard:where(:not(#th-tool[data-own] *)){position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:20px;color:var(--ink);overflow:hidden;isolation:isolate;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tcard:where(:not(#th-tool[data-own] *))::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px 170px at 100% 0%,color-mix(in srgb,var(--ai) 13%,transparent),transparent 70%);opacity:0;transition:opacity .25s}
.tcard:hover:where(:not(#th-tool[data-own] *)){transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));text-decoration:none}
.tcard:hover:where(:not(#th-tool[data-own] *))::before{opacity:1}
.tc-top:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.tcard .ti:where(:not(#th-tool[data-own] *)){width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-soft),var(--ai-soft));color:var(--brand-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 16%,transparent);transition:transform .25s}
.tcard:hover .ti:where(:not(#th-tool[data-own] *)){transform:scale(1.06) rotate(-4deg)}
.tc-t:where(:not(#th-tool[data-own] *)){font-size:17px;font-weight:680;letter-spacing:-.015em;line-height:1.3;margin-top:4px}
.tc-d:where(:not(#th-tool[data-own] *)){font-size:14.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-foot:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
.tc-meta:where(:not(#th-tool[data-own] *)){display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0}
.tc-cat:where(:not(#th-tool[data-own] *)){font-size:12px;font-weight:650;color:var(--muted);padding:3px 9px;border-radius:999px;background:var(--surface-2);white-space:nowrap}
.tc-rate:where(:not(#th-tool[data-own] *)){font-size:12.5px;font-weight:700;color:#D97706}
.tc-go:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:650;color:var(--brand-ink);white-space:nowrap;transition:gap .2s}
.tcard:hover .tc-go:where(:not(#th-tool[data-own] *)){gap:8px}
.grid:where(:not(#th-tool[data-own] *)){display:grid;gap:14px}
.g2:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(2,minmax(0,1fr))}.g3:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(3,minmax(0,1fr))}.g4:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(4,minmax(0,1fr))}

/* bento */







.drop:where(:not(#th-tool[data-own] *)){flex:1;border:1.5px dashed color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:color-mix(in srgb,var(--brand-soft) 55%,transparent);cursor:pointer;transition:background .2s}
.drop.over:where(:not(#th-tool[data-own] *)){background:var(--brand-soft)}
.field:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:6px}
.field label:where(:not(#th-tool[data-own] *)){font-size:13px;font-weight:650;color:var(--muted)}
.inp:where(:not(#th-tool[data-own] *)){height:46px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--surface);font-size:16px;width:100%}
textarea.inp:where(:not(#th-tool[data-own] *)){height:auto;padding:var(--pad-field);line-height:var(--lh-text)} /* v1.33.4: multi-line boxes get room on every side (a list box had its text on the top border) */
.inp:focus:where(:not(#th-tool[data-own] *)){outline:none;border-color:var(--ai);box-shadow:0 0 0 4px color-mix(in srgb,var(--ai) 18%,transparent)}
select.inp:where(:not(#th-tool[data-own] *)){appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}



@keyframes mq{to{transform:translateX(-50%)}}


/* ads & sponsor */
.ad:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;justify-content:center;border:1px dashed color-mix(in srgb,var(--muted) 40%,transparent);border-radius:12px;color:var(--muted);font-size:12.5px;background:repeating-linear-gradient(45deg,transparent 0 10px,var(--stripe) 10px 20px);text-align:center;padding:8px}




/* footer */
.ftr:where(:not(#th-tool[data-own] *)){margin-top:80px;border-top:1px solid var(--line);background:var(--surface)}
.ftr .wrap:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-top:48px;padding-bottom:48px;font-size:14.5px}
.ftr h4:where(:not(#th-tool[data-own] *)),.ftr .fh:where(:not(#th-tool[data-own] *)){margin:0 0 12px;font-weight:700;line-height:1.3;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ftr a:where(:not(#th-tool[data-own] *)){display:block;color:var(--ink);padding:4px 0}
.ftr .base:where(:not(#th-tool[data-own] *)){border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.ftr .base .wrap:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;padding-top:18px;padding-bottom:18px;grid-template-columns:none}

/* page bits */
.crumb:where(:not(#th-tool[data-own] *)){font-size:14px;color:var(--muted);padding-top:22px}
.crumb a:where(:not(#th-tool[data-own] *)){color:var(--muted)}
.layout:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.rail:where(:not(#th-tool[data-own] *)){position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}



details.faq:where(:not(#th-tool[data-own] *)){background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
details.faq+details.faq:where(:not(#th-tool[data-own] *)){margin-top:10px}
details.faq summary:where(:not(#th-tool[data-own] *)){cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary:where(:not(#th-tool[data-own] *))::after{content:"+";color:var(--muted);font-size:20px;line-height:1}
details.faq[open] summary:where(:not(#th-tool[data-own] *))::after{content:"–"}
details.faq p:where(:not(#th-tool[data-own] *)){margin-top:10px;color:var(--muted)}
table.t:where(:not(#th-tool[data-own] *)){width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-variant-numeric:tabular-nums}
table.t th:where(:not(#th-tool[data-own] *)),table.t td:where(:not(#th-tool[data-own] *)){padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15.5px}
table.t th:where(:not(#th-tool[data-own] *)){background:var(--surface-2);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
table.t tr:last-child td:where(:not(#th-tool[data-own] *)){border-bottom:0}
.toast:where(:not(#th-tool[data-own] *)){position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:.25s;z-index:60;pointer-events:none}
.toast.show:where(:not(#th-tool[data-own] *)){opacity:1;transform:translateX(-50%) translateY(0)}
.mnav:where(:not(#th-tool[data-own] *)){display:none}

/* responsive */

@media (width <= 1024px){
  .wrap:where(:not(#th-tool[data-own] *)){padding:0 18px}
  .kbtn:where(:not(#th-tool[data-own] *)){display:none}
  .g3:where(:not(#th-tool[data-own] *)),.g4:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(2,minmax(0,1fr))}
  
  
  .layout:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}
  .rail:where(:not(#th-tool[data-own] *)){position:static}
  
  .ftr .wrap:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr 1fr}
  .hero:where(:not(#th-tool[data-own] *)){padding:48px 0 36px}
  }
@media (width <= 768px){
  .nav:where(:not(#th-tool[data-own] *)){display:none}
  body:where(:not(#th-tool[data-own] *)){padding-bottom:68px}
  .mnav:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;height:64px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:50}
  .mnav a:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11.5px;font-weight:650;color:var(--muted)}
  .mnav a.on:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}}
@media (width <= 576px){:root:where(:not(#th-tool[data-own] *)){--h-main:72px}.g2:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}.ss-box input:where(:not(#th-tool[data-own] *)){font-size:16px;height:48px}.ss-box .btn span:where(:not(#th-tool[data-own] *)){display:none}}

.logo .mark:where(:not(#th-tool[data-own] *)){width:32px;height:32px}
.logo .lh:where(:not(#th-tool[data-own] *)){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tseg:where(:not(#th-tool[data-own] *)){display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tseg button:where(:not(#th-tool[data-own] *)){width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.tseg button:hover:where(:not(#th-tool[data-own] *)){color:var(--ink);background:var(--surface-2)}
.tseg button[aria-pressed="true"]:where(:not(#th-tool[data-own] *)){background:var(--ink);color:var(--bg)}
.nav button:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:4px}
.nav .nav-mine:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px}.nav-mine svg:where(:not(#th-tool[data-own] *)){color:#E11D48}.nav a.on:where(:not(#th-tool[data-own] *)){background:var(--surface-2)}
.mega-foot:where(:not(#th-tool[data-own] *)){display:flex!important;gap:28px;padding-top:0!important;padding-bottom:22px!important;border-top:1px solid var(--line);padding-top:16px!important}
.mega-foot a:where(:not(#th-tool[data-own] *)){display:inline-flex!important;gap:6px;align-items:center;color:var(--brand-ink)!important;font-weight:650}
.mega-foot a:where(:not(#th-tool[data-own] *)){margin:0!important;padding:4px 0!important;display:inline-block!important}.mega-foot a:hover:where(:not(#th-tool[data-own] *)){background:none!important}.mega-foot a svg:where(:not(#th-tool[data-own] *)){vertical-align:-3px;margin-left:4px}
.mega-foot a>span:where(:not(#th-tool[data-own] *)){min-width:0;height:auto;padding:0;background:none;color:inherit;font:inherit;display:inline}
.fbrand .sponsor:where(:not(#th-tool[data-own] *)){margin-top:18px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;gap:2px;max-width:300px}
.fbrand .sponsor .k:where(:not(#th-tool[data-own] *)){font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.fbrand .sponsor a:where(:not(#th-tool[data-own] *)){padding:0;font-weight:650}
.grad-text:where(:not(#th-tool[data-own] *)){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em}
.pill-ai:where(:not(#th-tool[data-own] *)){white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--ai-soft);color:var(--ai-ink);font-size:12.5px;font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ai) 18%,transparent)}
.hero:where(:not(#th-tool[data-own] *)){overflow:visible;overflow-x:clip;z-index:5}
.badge:where(:not(#th-tool[data-own] *)),.chip:where(:not(#th-tool[data-own] *)){white-space:nowrap}
@media (width <= 1024px){.wrap.sec:where(:not(#th-tool[data-own] *)){padding-top:44px}}
.sec-h .btn:where(:not(#th-tool[data-own] *)){flex-shrink:0;white-space:nowrap}
@media (width <= 576px){.g4:where(:not(#th-tool[data-own] *)),.g3:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}.sec-h:where(:not(#th-tool[data-own] *)){align-items:flex-start}.sec-h .btn:where(:not(#th-tool[data-own] *)){height:38px;padding:0 12px;font-size:14px}}
[hidden]:where(:not(#th-tool[data-own] *)){display:none!important}
.row:where(:not(#th-tool[data-own] *)){display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:12px}
/* ad slots — reserved height = no layout shift */
.ss-pop:where(:not(#th-tool[data-own] *)){max-height:min(560px,70vh);overflow:auto}
.ss-sec:where(:not(#th-tool[data-own] *)){font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 14px 4px}
.ss-chips:where(:not(#th-tool[data-own] *)){display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px 10px}.ss-chips .chip:where(:not(#th-tool[data-own] *)){cursor:pointer;font-size:13.5px}
.ss-item mark:where(:not(#th-tool[data-own] *)),.r mark:where(:not(#th-tool[data-own] *)){background:color-mix(in srgb,var(--brand) 16%,transparent);color:inherit;border-radius:4px;padding:0 1px}
.ss-cat:where(:not(#th-tool[data-own] *)){background:var(--brand-soft)}.ss-cat b:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}.ss-ic:where(:not(#th-tool[data-own] *)){display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--surface);margin-right:8px;font-size:12px;color:var(--brand-ink)}
.ss-all:where(:not(#th-tool[data-own] *)){border-top:1px solid var(--line);border-radius:0 0 12px 12px;margin-top:4px;color:var(--muted)!important;font-weight:550}
.ss-empty:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;color:var(--muted)}
.ads:where(:not(#th-tool[data-own] *)){position:relative;min-height:var(--h);border-radius:14px;border:1px dashed color-mix(in srgb,var(--brand) 35%,var(--line));background:repeating-linear-gradient(135deg,transparent 0 12px,var(--stripe) 12px 24px),color-mix(in srgb,var(--brand-soft) 45%,transparent);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 14px 12px}
.ads-tag:where(:not(#th-tool[data-own] *)){position:absolute;left:10px;top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--brand-ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.ads-in:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:3px}.ads-in b:where(:not(#th-tool[data-own] *)){font-size:13.5px;font-weight:650;color:var(--ink)}.ads-in small:where(:not(#th-tool[data-own] *)){font-size:12px;color:var(--muted)}
.ads code:where(:not(#th-tool[data-own] *)){font-family:var(--mono);font-size:11.5px;color:var(--brand-ink)}
.ad-top:where(:not(#th-tool[data-own] *)){padding-top:10px;padding-bottom:10px}.ad-top .ads:where(:not(#th-tool[data-own] *)){max-width:728px;margin:0 auto}
.ad-below-hdr:where(:not(#th-tool[data-own] *)){padding-top:14px}.ad-below-hdr .ads:where(:not(#th-tool[data-own] *)){max-width:970px;margin:0 auto}
.ads.lb:where(:not(#th-tool[data-own] *)){max-width:970px;margin:0 auto}
.rail:has(.ads.sky):where(:not(#th-tool[data-own] *)){position:static}.ads.sky:where(:not(#th-tool[data-own] *)){position:sticky;top:88px}
@media (width <= 1024px){.rail .ads.sky:where(:not(#th-tool[data-own] *)){display:none}}
.ads.anchor:where(:not(#th-tool[data-own] *)){display:none}
@media (width <= 1024px){.tseg button:where(:not(#th-tool[data-own] *)){width:28px;height:28px}.ad-top .ads:where(:not(#th-tool[data-own] *)){min-height:50px}.ads.lb:where(:not(#th-tool[data-own] *)){max-width:none}}
@media (width <= 768px){.ads.anchor:where(:not(#th-tool[data-own] *)){display:flex;position:fixed;left:8px;right:8px;bottom:72px;z-index:45;min-height:58px;padding:14px 10px 8px;background-color:var(--surface);box-shadow:var(--shadow-lg)}
  .ads.anchor .ads-in small:where(:not(#th-tool[data-own] *)){display:none}}

/* ---- WordPress additions ---- */
.ads-live:where(:not(#th-tool[data-own] *)){display:flex;justify-content:center;margin:0 auto;max-width:100%;overflow:hidden}
.ad-top:empty:where(:not(#th-tool[data-own] *)),.ad-below-hdr:empty:where(:not(#th-tool[data-own] *)){display:none}
/* the loading placeholder is printed by the frame INTO the tool box before the tool starts, so it reaches separated (data-own) boxes too: without it the box was 34 px high while loading and the page jumped (CLS 0.6, owner speed test 2026-10-25) */
.tool-skel{height:var(--sk,220px);border-radius:18px;background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (width <= 1024px){.tool-skel{height:var(--skm,var(--sk,220px))}}






.entry:where(:not(#th-tool[data-own] *)){font-size:17px;color:color-mix(in srgb,var(--ink) 84%,var(--muted))}
.entry>*+*:where(:not(#th-tool[data-own] *)){margin-top:14px}
.entry h2:where(:not(#th-tool[data-own] *)){font-size:26px;margin-top:34px;color:var(--ink)}.entry h3:where(:not(#th-tool[data-own] *)){font-size:20px;margin-top:24px;color:var(--ink)}
.entry ul:where(:not(#th-tool[data-own] *)),.entry ol:where(:not(#th-tool[data-own] *)){padding-left:22px}.entry li+li:where(:not(#th-tool[data-own] *)){margin-top:6px}
.entry a:where(:not(#th-tool[data-own] *)){text-decoration:underline;text-underline-offset:3px}




.entry figure:where(:not(#th-tool[data-own] *)){margin:0}.entry img:where(:not(#th-tool[data-own] *)){max-width:100%;height:auto;border-radius:12px}


.page-wrap:where(:not(#th-tool[data-own] *)){max-width:820px;margin:0 auto;padding:30px 0 20px}
.page-wrap h1:where(:not(#th-tool[data-own] *)){font-size:clamp(32px,4vw,48px);font-weight:720;letter-spacing:-.03em;margin-bottom:18px}
.empty-state:where(:not(#th-tool[data-own] *)){padding:44px 24px;text-align:center;border:1px dashed var(--line);border-radius:22px;color:var(--muted);background:var(--surface)}
.empty-state b:where(:not(#th-tool[data-own] *)){display:block;color:var(--ink);font-size:20px;margin-bottom:6px}
.pager:where(:not(#th-tool[data-own] *)){display:flex;gap:6px;justify-content:center;margin-top:28px}
.pager .current:where(:not(#th-tool[data-own] *)){background:var(--ink);color:var(--bg)}
.sr-focus:focus:where(:not(#th-tool[data-own] *)){position:static!important;width:auto;height:auto;clip:auto;margin:0}
.ad-foot:where(:not(#th-tool[data-own] *)){margin-top:64px}.ad-foot:empty:where(:not(#th-tool[data-own] *)){display:none}
a.ss-answer:where(:not(#th-tool[data-own] *)){color:var(--ink);text-decoration:none}

/* ===== content tables (v1.2) ===== */
.entry figure.wp-block-table:where(:not(#th-tool[data-own] *)),.entry .tbl-wrap:where(:not(#th-tool[data-own] *)){margin:18px 0 0;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.entry table:where(:not(#th-tool[data-own] *)){width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;font-size:15.5px;min-width:360px}
.entry thead th:where(:not(#th-tool[data-own] *)){position:sticky;top:0;background:linear-gradient(180deg,var(--brand-soft),color-mix(in srgb,var(--brand-soft) 60%,var(--surface)));color:var(--brand-ink);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:13px 18px;border-bottom:1px solid color-mix(in srgb,var(--brand) 25%,var(--line))}
.entry tbody td:where(:not(#th-tool[data-own] *)){padding:12px 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.entry tbody tr:last-child td:where(:not(#th-tool[data-own] *)){border-bottom:0}
.entry tbody tr:nth-child(even) td:where(:not(#th-tool[data-own] *)){background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.entry tbody tr:hover td:where(:not(#th-tool[data-own] *)){background:var(--brand-soft)}
.entry tbody td:first-child:where(:not(#th-tool[data-own] *)){font-weight:650}
.entry figure.wp-block-table figcaption:where(:not(#th-tool[data-own] *)){padding:10px 18px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.entry table.tbl-click tbody tr:where(:not(#th-tool[data-own] *)){cursor:pointer}
.entry table.tbl-click tbody tr:focus-visible td:where(:not(#th-tool[data-own] *)){background:var(--brand-soft)}
.entry .tbl-hint:where(:not(#th-tool[data-own] *)){font-size:13px;color:var(--muted);margin-top:8px}

/* ===== FAQ cards (v1.2): the whole card opens and closes ===== */
.entry details:where(:not(#th-tool[data-own] *)){margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.entry details:hover:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.entry details[open]:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow)}
.entry details summary:where(:not(#th-tool[data-own] *)){list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;font-weight:650;font-size:16.5px;color:var(--ink)}
.entry details summary:where(:not(#th-tool[data-own] *))::-webkit-details-marker{display:none}
.entry details summary:where(:not(#th-tool[data-own] *))::after{content:"";flex-shrink:0;width:28px;height:28px;border-radius:9px;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234338CA' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s}
.entry details[open] summary:where(:not(#th-tool[data-own] *))::after{transform:rotate(45deg);background-color:var(--brand-soft)}
.entry details>*:not(summary):where(:not(#th-tool[data-own] *)){padding:0 18px;color:var(--muted);cursor:auto}
.entry details>*:last-child:not(summary):where(:not(#th-tool[data-own] *)){padding-bottom:16px}
.entry details p:where(:not(#th-tool[data-own] *)){margin:0}
.entry h2+details:where(:not(#th-tool[data-own] *)){margin-top:14px}
/* v1.6 tables: clean rounded corners in every browser (no sticky header bleeding past the radius) */
.entry figure.wp-block-table:where(:not(#th-tool[data-own] *)),.entry .tbl-wrap:where(:not(#th-tool[data-own] *)){overflow:hidden;isolation:isolate;border-radius:18px}
.entry thead th:where(:not(#th-tool[data-own] *)){position:static}
.entry thead tr:first-child th:first-child:where(:not(#th-tool[data-own] *)){border-top-left-radius:17px}.entry thead tr:first-child th:last-child:where(:not(#th-tool[data-own] *)){border-top-right-radius:17px}
.entry tbody tr:last-child td:first-child:where(:not(#th-tool[data-own] *)){border-bottom-left-radius:17px}.entry tbody tr:last-child td:last-child:where(:not(#th-tool[data-own] *)){border-bottom-right-radius:17px}
.entry tbody tr:where(:not(#th-tool[data-own] *)){transition:background .15s}
@media (width <= 768px){.entry figure.wp-block-table:where(:not(#th-tool[data-own] *)),.entry .tbl-wrap:where(:not(#th-tool[data-own] *)){overflow-x:auto}}
/* v1.8 feedback dialog (all pages) */
.fb-dlg:where(:not(#th-tool[data-own] *)){width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.fb-dlg:where(:not(#th-tool[data-own] *))::backdrop{background:rgba(7,9,15,.55);backdrop-filter:blur(4px)}
.fb-dlg[open]:where(:not(#th-tool[data-own] *)){animation:fb-in .22s cubic-bezier(.2,.7,.2,1)}
@keyframes fb-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.fb-form:where(:not(#th-tool[data-own] *)){position:relative}
.fb-body:where(:not(#th-tool[data-own] *)),.fb-done:where(:not(#th-tool[data-own] *)){padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px}
.fb-body[hidden]:where(:not(#th-tool[data-own] *)),.fb-done[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.fb-x:where(:not(#th-tool[data-own] *)){position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.fb-k:where(:not(#th-tool[data-own] *)){font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-ink)}
.fb-dlg h2:where(:not(#th-tool[data-own] *)){font-size:24px;font-weight:720;letter-spacing:-.02em}
.fb-kinds:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fb-kinds label:where(:not(#th-tool[data-own] *)){cursor:pointer}
.fb-kinds input:where(:not(#th-tool[data-own] *)){position:absolute;opacity:0;pointer-events:none}
.fb-kinds span:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;justify-content:center;text-align:center;height:100%;min-height:52px;padding:8px 10px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);font-size:13.5px;font-weight:650;line-height:1.25;transition:.15s}
.fb-kinds input:checked+span:where(:not(#th-tool[data-own] *)){border-color:transparent;background:var(--grad);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 30%,transparent)}
.fb-kinds input:focus-visible+span:where(:not(#th-tool[data-own] *)){outline:2px solid var(--brand);outline-offset:2px}
.fb-about:where(:not(#th-tool[data-own] *)){font-size:13.5px;color:var(--muted)}
.fb-dlg textarea:where(:not(#th-tool[data-own] *)){width:100%;min-height:120px;padding:12px 14px;resize:vertical;font:inherit;line-height:1.5}
.fb-mail:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}.fb-mail small:where(:not(#th-tool[data-own] *)){font-weight:500;color:var(--muted)}
.fb-who:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
.fb-hp:where(:not(#th-tool[data-own] *)){position:absolute!important;left:-9999px!important;width:1px;height:1px}
.fb-foot:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.fb-done:where(:not(#th-tool[data-own] *)){align-items:center;text-align:center;padding:40px 26px 30px}
.fb-tick:where(:not(#th-tool[data-own] *)){width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;background:linear-gradient(135deg,#16A34A,#22C55E);box-shadow:0 10px 30px rgba(34,197,94,.35)}
@media (width <= 576px){.fb-who:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}.fb-kinds:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}.fb-kinds span:where(:not(#th-tool[data-own] *)){min-height:44px;justify-content:flex-start}.fb-body:where(:not(#th-tool[data-own] *)){padding:22px 18px 18px}.fb-foot:where(:not(#th-tool[data-own] *)){flex-direction:column-reverse;align-items:stretch}.fb-foot .btn:where(:not(#th-tool[data-own] *)){width:100%;justify-content:center}}
/* v1.8 guide callouts: answer box, key facts, tip */
.entry .th-answer:where(:not(#th-tool[data-own] *)){padding:18px 20px;border-radius:18px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;font-size:18px;line-height:1.55;color:var(--ink)}
.entry .th-answer strong:where(:not(#th-tool[data-own] *)){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.entry ul.th-facts:where(:not(#th-tool[data-own] *)){list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.entry ul.th-facts li:where(:not(#th-tool[data-own] *)){margin:0;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.4}
.entry ul.th-facts li strong:where(:not(#th-tool[data-own] *)){display:block;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.entry .th-tip:where(:not(#th-tool[data-own] *)){padding:14px 16px 14px 44px;border-radius:14px;background:var(--brand-soft);color:var(--ink);position:relative;font-size:15.5px}
.entry .th-tip:where(:not(#th-tool[data-own] *))::before{content:"💡";position:absolute;left:14px;top:13px}
.entry .th-sources:where(:not(#th-tool[data-own] *)){font-size:14px;color:var(--muted)}
/* v1.9 install button, category FAQ */
.pwa-install:where(:not(#th-tool[data-own] *)){margin-top:14px;height:38px;font-size:14px}
.pwa-install[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.cat-faq:where(:not(#th-tool[data-own] *)){max-width:860px}
.cat-faq h2:where(:not(#th-tool[data-own] *)){font-size:clamp(22px,2.4vw,28px);margin-bottom:6px}

/* ===== v1.14 shaded tool cards (same soft corner glow as "Built for people") ===== */
:root:where(:not(#th-tool[data-own] *)){--acc0:#7C3AED;--acc1:#2563EB;--acc2:#0D9488;--acc3:#D97706;--acc4:#DB2777;--acc5:#059669}
:root[data-theme="dark"]:where(:not(#th-tool[data-own] *)){--acc0:#8B5CF6;--acc1:#60A5FA;--acc2:#2DD4BF;--acc3:#FBBF24;--acc4:#F472B6;--acc5:#34D399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):where(:not(#th-tool[data-own] *)){--acc0:#8B5CF6;--acc1:#60A5FA;--acc2:#2DD4BF;--acc3:#FBBF24;--acc4:#F472B6;--acc5:#34D399}}
.tcard:where(:not(#th-tool[data-own] *)),.tc2:where(:not(#th-tool[data-own] *)),.rz-card:where(:not(#th-tool[data-own] *)),.az-card:where(:not(#th-tool[data-own] *)){--tc:var(--acc0)}
body .tcard:where(:not(#th-tool[data-own] *)),body .tc2:where(:not(#th-tool[data-own] *)),body .rel-zone .rz-card:where(:not(#th-tool[data-own] *)),body .az-card:where(:not(#th-tool[data-own] *)){border-radius:22px;border:1px solid var(--line);background:radial-gradient(420px 220px at 100% 0%,color-mix(in srgb,var(--tc) 16%,transparent),transparent 70%),var(--surface)}
.tcard:nth-child(6n+2):where(:not(#th-tool[data-own] *)),.tc2:nth-child(6n+2):where(:not(#th-tool[data-own] *)),.rz-card:nth-child(6n+2):where(:not(#th-tool[data-own] *)),.az-card.acc-1:where(:not(#th-tool[data-own] *)){--tc:var(--acc1)}
.tcard:nth-child(6n+3):where(:not(#th-tool[data-own] *)),.tc2:nth-child(6n+3):where(:not(#th-tool[data-own] *)),.rz-card:nth-child(6n+3):where(:not(#th-tool[data-own] *)),.az-card.acc-2:where(:not(#th-tool[data-own] *)){--tc:var(--acc2)}
.tcard:nth-child(6n+4):where(:not(#th-tool[data-own] *)),.tc2:nth-child(6n+4):where(:not(#th-tool[data-own] *)),.rz-card:nth-child(6n+4):where(:not(#th-tool[data-own] *)),.az-card.acc-3:where(:not(#th-tool[data-own] *)){--tc:var(--acc3)}
.tcard:nth-child(6n+5):where(:not(#th-tool[data-own] *)),.tc2:nth-child(6n+5):where(:not(#th-tool[data-own] *)),.rz-card:nth-child(6n+5):where(:not(#th-tool[data-own] *)),.az-card.acc-4:where(:not(#th-tool[data-own] *)){--tc:var(--acc4)}
.tcard:nth-child(6n+6):where(:not(#th-tool[data-own] *)),.tc2:nth-child(6n+6):where(:not(#th-tool[data-own] *)),.rz-card:nth-child(6n+6):where(:not(#th-tool[data-own] *)),.az-card.acc-5:where(:not(#th-tool[data-own] *)){--tc:var(--acc5)}
body .tcard:where(:not(#th-tool[data-own] *))::before,body .rel-zone .rz-card:where(:not(#th-tool[data-own] *))::before{display:none}
body .tcard:hover:where(:not(#th-tool[data-own] *)),body .tc2:hover:where(:not(#th-tool[data-own] *)),body .rel-zone .rz-card:hover:where(:not(#th-tool[data-own] *)),body .az-card:hover:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--tc) 45%,var(--line));box-shadow:var(--shadow-lg)}
body .tcard .ti:where(:not(#th-tool[data-own] *)),body .rel-zone .rz-card .ti:where(:not(#th-tool[data-own] *)),body .az-ic:where(:not(#th-tool[data-own] *)){background:color-mix(in srgb,var(--tc) 13%,var(--surface));color:color-mix(in srgb,var(--tc) 78%,var(--ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 24%,transparent)}
.tcard .tc-go:where(:not(#th-tool[data-own] *)){color:color-mix(in srgb,var(--tc) 78%,var(--ink))}
.tcard .tc-foot:where(:not(#th-tool[data-own] *)){border-top-color:color-mix(in srgb,var(--tc) 18%,var(--line))}
.tcard .tc-cat:where(:not(#th-tool[data-own] *)){background:color-mix(in srgb,var(--tc) 10%,var(--surface-2))}

/* ===== v1.15 social profile icons (footer + Contact page) ===== */
.ftr .fsoc:where(:not(#th-tool[data-own] *)){border-top:1px solid var(--line)}
.ftr .fsoc .wrap:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;grid-template-columns:none}
.ftr .fsoc .fh:where(:not(#th-tool[data-own] *)){margin:0;flex-shrink:0}
.soc:where(:not(#th-tool[data-own] *)){list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.soc li:where(:not(#th-tool[data-own] *)){margin:0}
.ftr .soc a:where(:not(#th-tool[data-own] *)),.soc a:where(:not(#th-tool[data-own] *)),.soc .soc-a:where(:not(#th-tool[data-own] *)){display:grid;cursor:pointer;font:inherit;place-items:center;width:38px;height:38px;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:background .18s,color .18s,border-color .18s,transform .18s}
.soc svg:where(:not(#th-tool[data-own] *)){width:18px;height:18px;fill:currentColor}
.soc a:hover:where(:not(#th-tool[data-own] *)),.soc a:focus-visible:where(:not(#th-tool[data-own] *)),.soc .soc-a:hover:where(:not(#th-tool[data-own] *)),.soc .soc-a:focus-visible:where(:not(#th-tool[data-own] *)){background:var(--c);border-color:var(--c);color:#fff;transform:translateY(-2px);text-decoration:none}
.soc a.light:hover:where(:not(#th-tool[data-own] *)),.soc a.light:focus-visible:where(:not(#th-tool[data-own] *)),.soc .soc-a.light:hover:where(:not(#th-tool[data-own] *)),.soc .soc-a.light:focus-visible:where(:not(#th-tool[data-own] *)){color:#111}
.ct-soc .soc:where(:not(#th-tool[data-own] *)){margin-top:12px}
@media (width <= 576px){.ftr .fsoc .wrap:where(:not(#th-tool[data-own] *)){flex-direction:column;align-items:flex-start}.soc:where(:not(#th-tool[data-own] *)){gap:6px}.ftr .soc a:where(:not(#th-tool[data-own] *)),.soc a:where(:not(#th-tool[data-own] *)),.soc .soc-a:where(:not(#th-tool[data-own] *)){width:36px;height:36px}}

/* promoted places (ads) — a small, honest "Sponsored" label (v1.37) */
.ad-tag:where(:not(#th-tool[data-own] *)){display:inline-block;margin-left:auto;padding:1px 7px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 10.5px/1.6 var(--font,inherit);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.rz-card .rz-t .ad-tag:where(:not(#th-tool[data-own] *)){margin:4px 0 0;align-self:flex-start}

/* ===== v1.29.16 smart tooltips (every title="" — see common.js): always inside the window ===== */
.th-tt:where(:not(#th-tool[data-own] *)){position:fixed;z-index:9999;left:0;top:0;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--bg);font:500 12.5px/1.45 var(--font,system-ui,sans-serif);box-shadow:0 6px 24px rgba(11,16,32,.22);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;white-space:normal;overflow-wrap:anywhere}
.th-tt.on:where(:not(#th-tool[data-own] *)){opacity:1;transform:none}
.th-tt:where(:not(#th-tool[data-own] *))::after{content:"";position:absolute;left:var(--ax,50%);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.th-tt.below:where(:not(#th-tool[data-own] *))::after{bottom:auto;top:-5px}
@media (prefers-reduced-motion:reduce){.th-tt:where(:not(#th-tool[data-own] *)){transition:none}}

/* cookie consent banner (common.js) */
.cc-box:where(:not(#th-tool[data-own] *)){position:fixed;z-index:70;left:16px;right:16px;bottom:16px;max-width:1080px;margin:0 auto;display:flex;gap:28px;align-items:center;padding:16px 18px 16px 24px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(11,16,32,.12);font-size:14px;line-height:1.55;color:var(--muted)}
.cc-box[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.cc-box p:where(:not(#th-tool[data-own] *)){margin:0;flex:1}.cc-box b:where(:not(#th-tool[data-own] *)){display:block;margin-bottom:2px;font-size:15px;font-weight:650;color:var(--ink)}.cc-box a:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cc-acts:where(:not(#th-tool[data-own] *)){display:flex;gap:10px;flex-shrink:0}
.cc-acts .btn:where(:not(#th-tool[data-own] *)){height:40px;min-width:108px;padding:0 20px;border-radius:10px;font-size:14px;font-weight:600;justify-content:center;white-space:nowrap} /* colours: the site button style above */
.cc-acts .btn:focus-visible:where(:not(#th-tool[data-own] *)){outline:2px solid var(--brand);outline-offset:2px}
.cc-link:where(:not(#th-tool[data-own] *)){background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cc-link:hover:where(:not(#th-tool[data-own] *)){color:var(--ink)}
@media (width <= 768px){.cc-box:where(:not(#th-tool[data-own] *)){bottom:78px}}
@media (width <= 768px){.cc-box:where(:not(#th-tool[data-own] *)){flex-direction:column;align-items:stretch;gap:14px;padding:16px 16px 14px}.cc-acts .btn:where(:not(#th-tool[data-own] *)){flex:1;height:44px}}
@media print{.cc-box:where(:not(#th-tool[data-own] *)){display:none!important}}

/* v1.37 ToolHa type standard (owner 2026-09-30): "some text is far too big, some far too small — set one standard".
   Sizes come from the tokens in :root (--fs-hero, --fs-h1, --fs-h2, --fs-result, --fs-body …, --fs-min, --fs-tag). */
small:where(:not(#th-tool[data-own] *)){font-size:max(var(--fs-min),.85em)}
.h1:where(:not(#th-tool[data-own] *)){font-size:var(--fs-hero)}
.sec-h h2:where(:not(#th-tool[data-own] *)){font-size:var(--fs-h2)}
.page-wrap h1:where(:not(#th-tool[data-own] *)){font-size:var(--fs-h1)}

.kbd:where(:not(#th-tool[data-own] *)),.ads code:where(:not(#th-tool[data-own] *)){font-size:12px}
.mnav a:where(:not(#th-tool[data-own] *)){font-size:12px}
.fbrand .sponsor .k:where(:not(#th-tool[data-own] *)),.ss-sec:where(:not(#th-tool[data-own] *)),.ads-tag:where(:not(#th-tool[data-own] *)),.ad-tag:where(:not(#th-tool[data-own] *)){font-size:var(--fs-tag)}

/* ===== v1.41 GLOBAL STANDARD — one rule for the whole website (owner rule 2026-09-30: "full website e global rule").
   Buttons: every .btn is at least 44 px (--h-btn) and every .btn.sm at least 36 px (--h-btn-sm) on every page and in every tool (v1.45.20: a label that wraps to 2 lines makes the button taller, with padding). This
   layer is last and wins over any page or tool stylesheet, so no module can make a 32, 34, 38, 40, 42 or 50 px button again.
   Only exception: the action bar under a tool (.tool-actions — the pill on computers, icon tiles on phones, v1.36).
   The rest of the standard (type scale, spacing tokens, .t-* blocks, .t-msg, .t-table) is in the layout standard doc and
   is checked with claude/tools/thspace.js before any page or tool is called done. ===== */
/* v1.45.20 GLOBAL: 44 / 36 px is the MINIMUM height, not a fixed one. A one-line label stays exactly 44 / 36 px; a label that wraps to two lines makes the button taller and keeps the same vertical padding (8 / 6 px), so wrapped text never touches the edges. Do not set a height on a button anywhere else. */
.btn:not(.tool-actions .btn):where(:not(#th-tool[data-own] *)){height:auto!important;min-height:var(--h-btn);padding-top:8px;padding-bottom:8px;line-height:1.25}
.btn.sm:not(.tool-actions .btn):where(:not(#th-tool[data-own] *)){height:auto!important;min-height:var(--h-btn-sm);padding-top:6px;padding-bottom:6px}
/* v1.41.5 GLOBAL: the page itself never scrolls sideways — if anything is ever too wide on a phone it is clipped instead of
   pushing the whole page (header, cards, "Back to the tool") off the screen. `clip` (not `hidden`) keeps sticky parts working. */
html:where(:not(#th-tool[data-own] *)),body:where(:not(#th-tool[data-own] *)){overflow-x:clip}
/* v1.41.6 responsive audit (320–1280 px, every page): search boxes may shrink (the ⌘K hint hides on the smallest phones) and
   long code / links in articles wrap instead of sticking out of the screen */
.fsearch:where(:not(#th-tool[data-own] *)),.az-search:where(:not(#th-tool[data-own] *)){min-width:0}
@media (width <= 576px){.fsearch .kbd:where(:not(#th-tool[data-own] *)),.az-search .kbd:where(:not(#th-tool[data-own] *)){display:none}}
.entry code:where(:not(#th-tool[data-own] *)),.entry a:where(:not(#th-tool[data-own] *)){overflow-wrap:anywhere}
/* v1.41.7: on phones the last footer line stays clear of the floating "Back to the tool" button */
@media (width <= 768px){.ftr .base .wrap:where(:not(#th-tool[data-own] *)){padding-bottom:72px}}

/* v1.46 phone safety net for all pages (owner 2026-10-05, chat 2.3): see the same block at the end of tool.css.
   - the /tools/ category filter wraps onto a second line instead of hiding "Date & Time" off the screen;
   - content tables (legal pages, guides) use less padding on phones, so less of them has to be swiped. */
@media (width <= 576px){
  body .az-cats:where(:not(#th-tool[data-own] *)){flex-wrap:wrap;overflow:visible}
  .entry thead th:where(:not(#th-tool[data-own] *)),.entry tbody td:where(:not(#th-tool[data-own] *)){padding:10px 12px}}

/* v1.47 universal responsive system (owner 2026-10-05, chat 2.3): content tables never scroll sideways on phones.
   A table that fits stays a table (no forced 360 px width on phones); one that still does not fit gets .t-fit-cards from
   common.js and becomes one card per row: the first cell is the card title, every other cell shows its column name. */
@media (width <= 576px){.entry table:where(:not(#th-tool[data-own] *)){min-width:0}.entry figcaption:where(:not(#th-tool[data-own] *)){overflow-wrap:anywhere}}
@media (width <= 768px){
  .entry table.t-fit-cards thead:where(:not(#th-tool[data-own] *)){display:none}
  .entry table.t-fit-cards:where(:not(#th-tool[data-own] *)),.entry table.t-fit-cards tbody:where(:not(#th-tool[data-own] *)),.entry table.t-fit-cards tr:where(:not(#th-tool[data-own] *)){display:block}
  .entry table.t-fit-cards tbody tr:where(:not(#th-tool[data-own] *)){padding:12px 16px;border-bottom:1px solid var(--line)}
  .entry table.t-fit-cards tbody tr:last-child:where(:not(#th-tool[data-own] *)){border-bottom:0}
  .entry table.t-fit-cards tbody tr:nth-child(even):where(:not(#th-tool[data-own] *)){background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
  .entry table.t-fit-cards tbody td:where(:not(#th-tool[data-own] *)){display:block;padding:2px 0;border:0;border-radius:0;background:none;overflow-wrap:anywhere}
  .entry table.t-fit-cards tbody td:first-child:where(:not(#th-tool[data-own] *)){padding-bottom:4px}
  .entry table.t-fit-cards tbody td+td[data-label]:where(:not(#th-tool[data-own] *))::before{content:attr(data-label) ": ";font-weight:650;color:var(--muted)}}

/* Search palette (rule 141): the smart search in a dialog, opened from the header button, the phone bar's Search, Ctrl/Cmd+K and "/" */
.cmdk:where(:not(#th-tool[data-own] *)){padding:0;border:0;background:transparent;width:min(680px,calc(100vw - 32px));max-width:none;max-height:none;margin:min(12vh,110px) auto auto;overflow:visible;color:var(--ink)}
.cmdk:where(:not(#th-tool[data-own] *))::backdrop{background:rgba(7,9,15,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cmdk-box:where(:not(#th-tool[data-own] *)){display:block;margin:0}
.cmdk .ss:where(:not(#th-tool[data-own] *)){position:relative}
.cmdk .ss-pop:where(:not(#th-tool[data-own] *)){position:static;margin-top:10px;max-height:min(62vh,540px)}
.cmdk-x:where(:not(#th-tool[data-own] *)){flex:none;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.cmdk-x:hover:where(:not(#th-tool[data-own] *)){color:var(--ink)}
html.cmdk-on:where(:not(#th-tool[data-own] *)){overflow:hidden}
@media (width <= 768px){.cmdk:where(:not(#th-tool[data-own] *)){width:100vw;margin:0;min-height:100dvh;background:var(--bg)}.cmdk:where(:not(#th-tool[data-own] *))::backdrop{background:var(--bg)}.cmdk-box:where(:not(#th-tool[data-own] *)){padding:12px 16px}.cmdk .ss-pop:where(:not(#th-tool[data-own] *)){max-height:none;box-shadow:none}}
@media print{.cmdk:where(:not(#th-tool[data-own] *)){display:none!important}}
/* rule 151 (m) 2026-10-19: the header (logo + theme switch) fits 264-360 px screens */
@media (width <= 360px){.hdr>.wrap:where(:not(#th-tool[data-own] *)){gap:10px}.tseg:where(:not(#th-tool[data-own] *)){padding:2px}.tseg button:where(:not(#th-tool[data-own] *)){width:26px;height:26px}}
/* ===== Drop-down open list fits the screen (rule 154 (i), 2026-10-19; full standard: claude/toolha-layout-system.md) =====
   Browsers that can draw a drop-down list themselves (appearance: base-select, Chrome / Edge 135+)
   get OUR list: never wider than the screen, long option words wrap, site colours, light + dark;
   it opens below when it fits, else above, else below with its own scroll (never over the label for no reason).
   Other browsers keep their own list (phones: the system picker, always on screen). The closed
   drop-down keeps its look and size; the select stays the real control (keyboard, screen readers). */
@position-try --th-pick-fit{position-area:block-end span-all;max-block-size:calc(100% - 8px)}
@supports (appearance:base-select){
  html select:not([multiple]):not([size]):where(:not(#th-tool[data-own] *)),html select:not([multiple]):not([size]):where(:not(#th-tool[data-own] *))::picker(select){appearance:base-select}
  html select:not([multiple]):not([size]):where(:not(#th-tool[data-own] *)){align-items:center}
  html select:not([multiple]):not([size]):where(:not(#th-tool[data-own] *))::picker-icon{display:none}
  html select:not([multiple]):not([size]):where(:not(#th-tool[data-own] *))::picker(select){
    box-sizing:border-box;min-inline-size:anchor-size(self-inline);
    max-inline-size:min(calc(100% - 16px),max(anchor-size(self-inline),20rem));
    max-block-size:min(24rem,calc(100dvh - 16px));overflow:auto;overscroll-behavior:contain;
    position-area:var(--th-pick-area,block-end span-all);justify-self:anchor-center;margin:4px 8px;padding:4px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);color:var(--ink);box-shadow:0 12px 32px rgba(15,23,42,.18);
    position-try-order:normal;position-try-fallbacks:flip-block,--th-pick-fit}
  html select:not([multiple]):not([size]) option:where(:not(#th-tool[data-own] *)){
    padding:8px 10px;border-radius:8px;white-space:normal;overflow-wrap:anywhere;line-height:1.35;gap:8px;min-block-size:36px}
  html select:not([multiple]):not([size]) option:is(:hover,:focus-visible):where(:not(#th-tool[data-own] *)){background:color-mix(in srgb,var(--brand) 10%,transparent);outline:none}
  html select:not([multiple]):not([size]) option:checked:where(:not(#th-tool[data-own] *)){background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand-ink);font-weight:600}
  html select:not([multiple]):not([size]) option:disabled:where(:not(#th-tool[data-own] *)){opacity:.5}
  html select:not([multiple]):not([size]) optgroup:where(:not(#th-tool[data-own] *)){font-weight:700;padding-block:4px}
  html select:not([multiple]):not([size]) option:where(:not(#th-tool[data-own] *))::checkmark{color:var(--brand-ink)}}

/* ToolHa header modes (rule 154 §12, owner 2026-10-21): > 1024 px full menu + search box; 769–1024 px the same menu + a search icon (the box needs room); <= 768 px Menu button (Categories panel) + the bottom bar (Home · All Tools · Search · My Tools) */
.h-ic:where(:not(#th-tool[data-own] *)){display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:none;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.h-ic svg:where(:not(#th-tool[data-own] *)){width:20px;height:20px}
.h-ic:hover:where(:not(#th-tool[data-own] *)){background:var(--surface-2)}
.h-ic[aria-expanded="true"]:where(:not(#th-tool[data-own] *)){background:var(--brand-soft);color:var(--brand-ink);border-color:transparent}
.mega-theme:where(:not(#th-tool[data-own] *)){display:none}
@media (width <= 1024px){.h-search:where(:not(#th-tool[data-own] *)){display:inline-flex}.mega .wrap:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}}
@media (width <= 768px){.h-search:where(:not(#th-tool[data-own] *)){display:none}.h-menu:where(:not(#th-tool[data-own] *)){display:inline-flex}.mega.open:where(:not(#th-tool[data-own] *)){max-height:calc(100dvh - 68px - 64px);overflow-y:auto;overscroll-behavior:contain}}
@media (width <= 360px){.hdr>.wrap>.tseg:where(:not(#th-tool[data-own] *)){display:none}.mega-theme:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;font-weight:650;color:var(--muted)}}