/* ==========================================================================
   ToolHub — "instrument panel" design system
   Dense, light, hairline catalog. Near-black ink, one cobalt accent,
   category colour reduced to a 6px dot. No gradients, no orbs, no card kit.
   ========================================================================== */

/* ---------- fonts (self-hosted, OFL) ---------- */

@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/instrument-sans-var.woff2') format('woff2-variations');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/jetbrains-mono-var.woff2') format('woff2-variations');
}

/* ---------- tokens ---------- */

:root{
  /* paper + surface */
  --paper:#fbfbfa;
  --surface:#ffffff;
  --surface-2:#f5f5f2;
  --surface-3:#ecece7;
  --surface-sunk:#f0f0ec;

  /* ink — every tier is AA-passing on --surface-2 */
  --ink:#111312;
  --ink-2:#2f3335;
  --muted:#4f554e;
  --dim:#5f665f;
  --faint:#6b716a;

  /* lines */
  --line:#e3e3dc;
  --line-2:#d2d2ca;
  --line-strong:#b3b3aa;

  /* brand — the only chromatic accent in the whole system */
  --brand:#1b4dd8;
  --brand-ink:#12369e;
  --brand-soft:#eef2fe;
  --brand-line:#c7d4f7;

  /* status */
  --ok:#0d7a4f;
  --ok-soft:#e9f6ef;
  --ok-line:#bde3ce;
  --warn:#8a5200;
  --warn-soft:#fdf4e6;
  --warn-line:#ecd8b0;
  --danger:#a51f26;
  --danger-soft:#fdecec;
  --danger-line:#f3c9c9;

  /* dark band */
  --dark:#14160f;
  --dark-2:#1d2018;
  --dark-line:#2f342a;
  --dark-ink:#f1f2ed;
  --dark-muted:#9ba196;

  /* type */
  --font-sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-10:0.6875rem;
  --t-11:0.71875rem;
  --t-12:0.75rem;
  --t-13:0.8125rem;
  --t-14:0.875rem;
  --t-15:0.9375rem;
  --t-16:1rem;
  --t-18:1.125rem;
  --t-20:1.25rem;
  --t-24:1.5rem;
  --t-30:1.875rem;
  --t-38:2.375rem;
  --t-46:2.875rem;
  --t-display:clamp(2rem,1.25rem + 2.9vw,3.25rem);
  --t-display-2:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);

  /* space — 4px rhythm */
  --s-1:.25rem;
  --s-2:.5rem;
  --s-3:.75rem;
  --s-4:1rem;
  --s-5:1.25rem;
  --s-6:1.5rem;
  --s-8:2rem;
  --s-10:2.5rem;
  --s-12:3rem;
  --s-16:4rem;
  --s-20:5rem;

  /* geometry */
  --r-xs:3px;
  --r-sm:5px;
  --r-md:8px;
  --r-lg:12px;
  --r-pill:999px;

  /* elevation — barely there */
  --shadow-1:0 1px 2px rgba(17,19,18,.05);
  --shadow-2:0 12px 32px -22px rgba(17,19,18,.45);
  --shadow-pop:0 24px 60px -28px rgba(17,19,18,.55);

  /* layers */
  --z-sticky:100;
  --z-modal:600;

  /* metrics */
  --shell:1200px;
  --gutter:1.5rem;
  --header-h:58px;
}

/* ---------- reset ---------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-15);
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
h1,h2,h3,h4,h5{font-weight:600;line-height:1.16;letter-spacing:-0.022em}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg,canvas,video{max-width:100%;display:block}
svg.uiIcon{width:1em;height:1em;flex:0 0 auto}
code{font-family:var(--font-mono);font-size:.92em}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.hidden{display:none!important}
.skipLink{
  position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-modal);
  background:var(--ink);color:#fff;padding:var(--s-2) var(--s-4);
  border-radius:var(--r-sm);font-size:var(--t-13);
}
.skipLink:focus{top:var(--s-4)}

.shell{width:min(100% - var(--gutter) * 2,var(--shell));margin-inline:auto}
@media (max-width:640px){:root{--gutter:1rem}}

/* ==========================================================================
   1. HEADER
   ========================================================================== */

.siteHeader{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(251,251,250,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.headerInner{
  height:var(--header-h);
  display:flex;align-items:center;gap:var(--s-6);
}
.brand{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.brandMark{
  display:grid;place-items:center;
  width:25px;height:25px;flex:0 0 auto;
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-sm);
  font-size:var(--t-13);font-weight:700;letter-spacing:-0.03em;
}
.brandName{font-weight:600;font-size:var(--t-15);letter-spacing:-0.02em;white-space:nowrap}
.brandMeta{
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);
  padding-left:var(--s-2);margin-left:var(--s-1);
  border-left:1px solid var(--line);white-space:nowrap;
}
.topNav{display:flex;align-items:center;gap:var(--s-1);margin-left:var(--s-2)}
.topNav a{
  padding:6px 9px;border-radius:var(--r-sm);
  font-size:var(--t-13);color:var(--muted);
  transition:background-color .13s ease-out,color .13s ease-out;
}
.topNav a:hover{background:var(--surface-2);color:var(--ink)}
.topNav a[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--surface-2)}
.navSearch{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--dim);font-size:var(--t-13);
  transition:border-color .13s ease-out,color .13s ease-out,background-color .13s ease-out;
}
.navSearch:hover{border-color:var(--line-2);color:var(--ink);background:var(--surface)}
.navSearch kbd{
  font-family:var(--font-mono);font-size:var(--t-10);
  border:1px solid var(--line-2);border-radius:var(--r-xs);
  padding:0 4px;color:var(--muted);background:var(--surface);
}
@media (max-width:900px){.brandMeta{display:none}}
@media (max-width:700px){
  .headerInner{gap:var(--s-3)}
  .topNav{margin-left:auto;overflow-x:auto;scrollbar-width:none}
  .topNav::-webkit-scrollbar{display:none}
  .topNav a{white-space:nowrap;padding:6px 7px;font-size:var(--t-12)}
  .navSearch kbd{display:none}
  .navSearch{width:32px;padding:0;justify-content:center}
}
@media (max-width:520px){
  .topNav a:nth-of-type(n+4){display:none}
}

/* ==========================================================================
   2. FOOTER
   ========================================================================== */

.footer{border-top:1px solid var(--line);background:var(--surface);margin-top:var(--s-20)}
.footerInner{
  display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.55fr));
  gap:var(--s-8);padding:var(--s-10) 0 var(--s-8);
}
.footerBrandCol p{color:var(--muted);font-size:var(--t-13);margin-top:var(--s-3);max-width:40ch;line-height:1.6}
.brandFooter .brandMark{width:22px;height:22px;font-size:var(--t-12)}
.footerCol{display:flex;flex-direction:column;gap:var(--s-1)}
.footerCol strong{
  font-size:var(--t-11);text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:600;margin-bottom:var(--s-2);
}
.footerCol a{font-size:var(--t-13);color:var(--muted);padding:3px 0;transition:color .13s ease-out}
.footerCol a:hover{color:var(--ink)}
.footerBase{
  display:flex;align-items:center;gap:var(--s-3);
  border-top:1px solid var(--line);padding:var(--s-4) 0 var(--s-6);
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--dim);
}
.footerDot{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
@media (max-width:820px){
  .footerInner{grid-template-columns:1fr 1fr;gap:var(--s-6)}
  .footerBrandCol{grid-column:1/-1}
}

/* ==========================================================================
   3. SHARED PRIMITIVES
   ========================================================================== */

.section{padding:var(--s-12) 0}
.section.softV10{background:var(--surface);border-block:1px solid var(--line)}
.sectionHeadV10{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-6);margin-bottom:var(--s-6);flex-wrap:wrap;
}
.sectionHeadV10 h2{font-size:var(--t-24);letter-spacing:-0.028em}
.sectionHeadV10 p{color:var(--muted);font-size:var(--t-14);margin-top:6px;max-width:62ch}
.sectionKicker{
  display:block;font-family:var(--font-mono);font-size:var(--t-11);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s-2);
}
.sectionKicker.inverse{color:#9ba196}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--t-11);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}
.kicker{
  display:inline-block;font-family:var(--font-mono);font-size:var(--t-11);
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand);
  border:1px solid var(--brand-line);background:var(--brand-soft);
  padding:3px 8px;border-radius:var(--r-pill);margin-bottom:var(--s-3);
}
.softLink{
  font-size:var(--t-13);color:var(--muted);white-space:nowrap;
  border-bottom:1px solid var(--line-2);padding-bottom:1px;
  transition:color .13s ease-out,border-color .13s ease-out;
}
.softLink:hover{color:var(--ink);border-color:var(--ink)}
.textLink{color:var(--brand);border-bottom:1px solid var(--brand-line)}
.textLink:hover{border-color:var(--brand)}
.breadcrumbs{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:var(--t-12);color:var(--dim);margin-bottom:var(--s-3);
}
.breadcrumbs a{color:var(--muted);transition:color .13s ease-out}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs strong{color:var(--ink);font-weight:500}
.socialBreadcrumbsV11 a,.socialBreadcrumbsV12 a{color:var(--muted)}
.toolBreadcrumbsV11{margin-bottom:var(--s-4)}
.stat{font-family:var(--font-mono);font-size:var(--t-30);letter-spacing:-0.04em;font-variant-numeric:tabular-nums}

/* buttons */
button,.runner button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 var(--s-4);
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:var(--r-sm);
  font-size:var(--t-13);font-weight:500;letter-spacing:-0.005em;
  transition:background-color .13s ease-out,border-color .13s ease-out,transform .08s ease-out;
}
button:hover,.runner button:hover{background:#000;border-color:#000}
button:active,.runner button:active{transform:translateY(1px)}
button:disabled{background:var(--surface-3);border-color:var(--line);color:var(--muted);cursor:not-allowed;transform:none}
button.secondary,.runner button.secondary{
  background:var(--surface);color:var(--ink);border-color:var(--line-2);
}
button.secondary:hover,.runner button.secondary:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
button.copyBtn{height:28px;padding:0 10px;font-size:var(--t-12);background:var(--surface);border-color:var(--line-2);color:var(--ink)}
button.copyBtn:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.statusBadge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px 9px;background:var(--surface);
}
.statusBadge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.statusBadge.backend{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.statusBadge.backend::before{background:var(--warn)}
.privacyPill{
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 9px;background:var(--surface-2);white-space:nowrap;
}
.goodPill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:var(--t-11);
  color:var(--ok);background:var(--ok-soft);
  border:1px solid var(--ok-line);border-radius:var(--r-pill);padding:2px 9px;
}
.goodPill::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ok)}
.toolCap{font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted)}
.notice,.noticeCard{
  border:1px solid var(--warn-line);border-left:3px solid var(--warn);
  background:var(--warn-soft);border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);font-size:var(--t-13);color:#5e3a00;line-height:1.55;
}
.notice strong{color:#4a2e00}
.warningBox{
  border:1px solid var(--warn-line);background:var(--warn-soft);
  color:#5e3a00;border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);
  font-size:var(--t-12);line-height:1.55;
}
.empty{
  border:1px dashed var(--line-2);border-radius:var(--r-md);
  padding:var(--s-10) var(--s-6);text-align:center;color:var(--muted);font-size:var(--t-14);
}
.empty b{display:block;color:var(--ink);font-size:var(--t-16);margin-bottom:4px}
.helper{font-size:var(--t-12);color:var(--muted);margin-top:var(--s-2);line-height:1.5}
.fileMeta{font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);margin-top:6px}
.loadingCard{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-mono);font-size:var(--t-12);color:var(--muted);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
}
.loadingSpinner{
  width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--line-2);border-top-color:var(--brand);
  animation:thSpin .7s linear infinite;
}
@keyframes thSpin{to{transform:rotate(360deg)}}

/* ==========================================================================
   4. HOME
   ========================================================================== */

.hero{
  border-bottom:1px solid var(--line);
  padding:var(--s-12) 0 var(--s-10);
  background:var(--paper);
  position:relative;overflow:hidden;
}
.heroMesh,.heroOrb,.socialGlowV12,.socialHeroNoise,.socialFloat,
.toolAmbientV11,.ambientOne,.ambientTwo,.heroCenterV11 > .floatA,.heroCenterV11 > .floatB{
  display:none!important;
}
.heroGrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:var(--s-10);align-items:start}
.heroLeadCol{min-width:0}
.heroIndex{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;
}
.heroIndexHead{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.heroIndexHead span{
  font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.heroIndexHead a{font-size:var(--t-12);color:var(--muted);transition:color .13s ease-out}
.heroIndexHead a:hover{color:var(--ink)}
.heroIndex ul{display:block}
.heroIndex li{border-bottom:1px solid var(--line)}
.heroIndex li:last-child{border-bottom:0}
.heroIndex li a{
  display:flex;align-items:center;gap:10px;
  padding:11px var(--s-4);
  transition:background-color .13s ease-out;
}
.heroIndex li a:hover{background:var(--surface-2)}
.heroIndex .dot{width:6px;height:6px;border-radius:50%;background:var(--accent,var(--brand));flex:0 0 auto}
.heroIndex b{
  flex:1;min-width:0;font-size:var(--t-13);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.heroIndex i{
  font-style:normal;font-family:var(--font-mono);font-size:var(--t-10);
  color:var(--muted);flex:0 0 auto;
}
.heroEyebrow{
  display:block;font-family:var(--font-mono);font-size:var(--t-11);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s-4);
}
.hero h1{
  font-size:var(--t-display);line-height:1.04;letter-spacing:-0.035em;
  max-width:18ch;font-weight:600;
}
.hero h1 span{color:var(--muted)}
.hero p{
  font-size:var(--t-16);color:var(--muted);max-width:58ch;
  margin:var(--s-4) 0 0;line-height:1.6;
}
.heroQuickLinks{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  margin-top:var(--s-5);font-size:var(--t-12);color:var(--muted);
}
.heroQuickLinks > span{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.heroQuickLinks a{color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:color .13s ease-out,border-color .13s ease-out}
.heroQuickLinks a:hover{color:var(--ink);border-color:var(--ink)}

/* search bar */
.searchBar{
  display:flex;align-items:center;gap:var(--s-2);
  width:min(100%,620px);margin-top:var(--s-6);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:5px 5px 5px var(--s-3);
  transition:border-color .13s ease-out,box-shadow .13s ease-out;
}
.searchBar:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.searchBar .searchIconV10{color:var(--muted);font-size:var(--t-16);display:grid;place-items:center}
.searchBar input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  height:38px;font-size:var(--t-15);color:var(--ink);
}
.searchBar input::placeholder{color:var(--dim)}
.searchBar button{
  height:34px;padding:0 var(--s-4);background:var(--ink);border-color:var(--ink);
  font-size:var(--t-13);
}
.searchBar button:hover{background:#000}
.classicSearchV11{margin-top:var(--s-6)}
.searchStandalone{width:min(100%,640px);margin-top:var(--s-5)}

/* category band */
.classicCategoryBand{border-bottom:1px solid var(--line);background:var(--surface)}
.classicCategoryHeader{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-6) 0 var(--s-4);flex-wrap:wrap;
}
.classicCategoryHeader h2{font-size:var(--t-20);letter-spacing:-0.025em}
.classicCategoryHeader p{font-size:var(--t-13);color:var(--muted);margin-top:4px;max-width:52ch}
.classicCategoryHeader .sectionKicker{margin-bottom:5px}
.classicCategoryHeader a{font-size:var(--t-13);color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.classicCategoryHeader a:hover{color:var(--ink);border-color:var(--ink)}
.classicCategoryGrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.classicCategoryChip{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);padding:var(--s-4);
  min-width:0;transition:background-color .13s ease-out;
}
.classicCategoryChip:hover{background:var(--surface-2)}
.classicCatIcon{
  display:grid;place-items:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--muted);font-size:var(--t-14);
  position:relative;
}
.classicCatIcon svg{width:14px;height:14px}
.classicCatIcon::after{
  content:'';position:absolute;top:-3px;right:-3px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
.classicCategoryChip > div{min-width:0}
.classicCategoryChip b{display:block;font-size:var(--t-14);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classicCategoryChip small{display:block;font-family:var(--font-mono);font-size:var(--t-10);color:var(--dim);margin-top:1px}
@media (max-width:1000px){.classicCategoryGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.classicCategoryGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.classicCategoryGrid{grid-template-columns:1fr}}

/* metric band */
.metricBand{border-bottom:1px solid var(--line);background:var(--surface)}
.metricGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.metricGrid > div{padding:var(--s-5) var(--s-4);border-right:1px solid var(--line)}
.metricGrid > div:last-child{border-right:0}
.metricGrid strong{
  display:block;font-family:var(--font-mono);font-size:var(--t-20);
  letter-spacing:-0.035em;font-variant-numeric:tabular-nums;
}
.metricGrid span{display:block;font-size:var(--t-12);color:var(--muted);margin-top:2px}
@media (max-width:760px){
  .metricGrid{grid-template-columns:1fr 1fr}
  .metricGrid > div:nth-child(2n){border-right:0}
  .metricGrid > div{border-bottom:1px solid var(--line)}
  .metricGrid > div:nth-last-child(-n+2){border-bottom:0}
}

/* tool grid */
.toolGrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.toolGridV10{gap:1px}
.toolCard{
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--surface);padding:var(--s-3) var(--s-4);
  min-width:0;transition:background-color .13s ease-out;
}
.toolCard:hover{background:var(--surface-2)}
.toolCard > div:not(.toolIcon){min-width:0;flex:1}
.toolCard h3{
  font-size:var(--t-14);font-weight:500;letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toolCard span{
  display:block;font-family:var(--font-mono);font-size:var(--t-10);
  color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toolCard b{color:var(--faint);font-weight:400;flex:0 0 auto;transition:color .13s ease-out}
.toolCard:hover b{color:var(--brand)}
.toolIcon{
  display:grid;place-items:center;flex:0 0 auto;
  width:32px;height:32px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:var(--t-15);
  position:relative;
}
.toolIcon svg{width:15px;height:15px}
.toolIcon::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:6px;height:6px;border-radius:50%;background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
@media (max-width:1000px){.toolGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.toolGrid{grid-template-columns:1fr}}

/* social spotlight */
.socialSpotlight{background:var(--paper)}
.socialBrandGrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.socialBrandCard{
  display:flex;align-items:center;gap:var(--s-3);
  background:var(--surface);padding:var(--s-4);
  min-width:0;transition:background-color .13s ease-out;
}
.socialBrandCard:hover{background:var(--surface-2)}
.brandBubble{
  display:grid;place-items:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--muted);font-size:var(--t-16);
}
.brandBubble svg{width:16px;height:16px}
.socialBrandCard > div{min-width:0;flex:1}
.socialBrandCard b{display:block;font-size:var(--t-14);font-weight:500}
.socialBrandCard small{display:block;font-family:var(--font-mono);font-size:var(--t-10);color:var(--dim);margin-top:2px}
.socialBrandCard em{font-style:normal;font-size:var(--t-12);color:var(--muted);flex:0 0 auto;transition:color .13s ease-out}
.socialBrandCard:hover em{color:var(--brand)}
@media (max-width:820px){.socialBrandGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.socialBrandGrid{grid-template-columns:1fr}}

/* stay section (dark band) */
.staySection{background:var(--dark);color:var(--dark-ink)}
.stayPanel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-10);align-items:center}
.stayPanel h2{font-size:var(--t-30);letter-spacing:-0.03em;color:var(--dark-ink);max-width:20ch}
.stayPanel p{color:var(--dark-muted);margin-top:var(--s-3);font-size:var(--t-14);max-width:48ch;line-height:1.65}
.stayFeatures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.stayFeatures > div{border-top:1px solid var(--dark-line);padding-top:var(--s-3)}
.stayFeatures svg{color:#7d8478;margin-bottom:var(--s-2)}
.stayFeatures b{display:block;color:var(--dark-ink);font-size:var(--t-13);font-weight:600;margin-bottom:3px}
.stayFeatures span{display:block;color:var(--dark-muted);font-size:var(--t-12);line-height:1.5}
@media (max-width:900px){
  .stayPanel{grid-template-columns:1fr;gap:var(--s-6)}
  .stayFeatures{grid-template-columns:1fr;gap:var(--s-4)}
  .heroGrid{grid-template-columns:1fr;gap:var(--s-6)}
}

/* ==========================================================================
   5. DIRECTORY PAGES (categories / category / search / new)
   ========================================================================== */

.pageTop{border-bottom:1px solid var(--line);padding:var(--s-10) 0 var(--s-8);background:var(--surface)}
.pageTopV10,.pageTopV11{padding:var(--s-10) 0 var(--s-8)}
.pageTop h1{font-size:var(--t-38);letter-spacing:-0.032em}
.pageTop p{color:var(--muted);margin-top:var(--s-2);max-width:66ch;font-size:var(--t-15);line-height:1.6}
.categoryHeroV10{background:var(--surface)}
.categoryHeroInner{display:flex;align-items:flex-start;gap:var(--s-4);margin-top:var(--s-4)}
.categoryHeroIcon{
  display:grid;place-items:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:var(--r-md);
  border:1px solid var(--line);color:var(--muted);font-size:var(--t-18);
  position:relative;
}
.categoryHeroIcon svg{width:19px;height:19px}
.categoryHeroIcon::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:6px;height:6px;border-radius:50%;background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
.categoryHeroInner h1{font-size:var(--t-30);letter-spacing:-0.03em}
.categoryHeroInner p{color:var(--muted);margin-top:6px;max-width:62ch;font-size:var(--t-14)}
.categoryBodyV10{padding-top:var(--s-8)}
.categoryLayout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s-8);align-items:start}
.sidebar{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden;
  position:sticky;top:calc(var(--header-h) + var(--s-4));
}
.sidebarTitle{
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);
  font-size:var(--t-11);text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:600;background:var(--surface-2);
}
.sidebar a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:8px var(--s-4);border-bottom:1px solid var(--line);
  font-size:var(--t-13);color:var(--muted);
  transition:background-color .13s ease-out,color .13s ease-out;
}
.sidebar a:last-child{border-bottom:0}
.sidebar a:hover{background:var(--surface-2);color:var(--ink)}
.sidebar a.active{color:var(--ink);font-weight:600;background:var(--surface-2)}
.sidebar a b{font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted);font-weight:400}
.catLabel{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.catLabel > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catMiniIcon{
  display:grid;place-items:center;flex:0 0 auto;
  width:20px;height:20px;border-radius:var(--r-xs);
  border:1px solid var(--line);color:var(--muted);font-size:var(--t-11);
  position:relative;
}
.catMiniIcon svg{width:11px;height:11px}
.catMiniIcon::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:5px;height:5px;border-radius:50%;background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
.categoryToolbarV10{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-5);flex-wrap:wrap}
.compactSearch{width:auto;flex:1 1 320px;margin-top:0}
.categoryCountBadge{
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--dim);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;background:var(--surface);
}
@media (max-width:900px){
  .categoryLayout{grid-template-columns:1fr}
  .sidebar{position:static}
}

/* directory grid */
.classicDirectoryGrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.classicDirectoryCard{
  display:flex;align-items:flex-start;gap:var(--s-3);
  background:var(--surface);padding:var(--s-4);
  min-width:0;transition:background-color .13s ease-out;
}
.classicDirectoryCard:hover{background:var(--surface-2)}
.classicDirectoryIcon{
  display:grid;place-items:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--muted);font-size:var(--t-14);
  position:relative;
}
.classicDirectoryIcon svg{width:14px;height:14px}
.classicDirectoryIcon::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:6px;height:6px;border-radius:50%;background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
.classicDirectoryCard > div{min-width:0;flex:1}
.classicDirectoryCard h3{font-size:var(--t-14);font-weight:600;letter-spacing:-0.012em}
.classicDirectoryCard p{font-size:var(--t-12);color:var(--muted);margin-top:3px;line-height:1.5}
.classicDirectoryCard small{display:block;font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted);margin-top:6px}
.classicDirectoryCard > b{color:var(--faint);font-weight:400;flex:0 0 auto}
.classicDirectoryCard:hover > b{color:var(--brand)}
@media (max-width:1000px){.classicDirectoryGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.classicDirectoryGrid{grid-template-columns:1fr}}

/* search page */
.searchPage,.searchPageV11{padding:var(--s-8) 0 var(--s-16)}
.searchTitleRow{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.searchTitleRow h1{font-size:var(--t-30);letter-spacing:-0.03em}
.searchTitleRow p{color:var(--muted);font-size:var(--t-14);margin-top:4px}
.searchCountBubble{
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;background:var(--surface);
}
.searchCategoryRail{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s-5) 0 var(--s-6)}
.searchCategoryRail a{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-12);color:var(--muted);background:var(--surface);
  transition:border-color .13s ease-out,color .13s ease-out,background-color .13s ease-out;
}
.searchCategoryRail a:hover{border-color:var(--line-2);color:var(--ink);background:var(--surface-2)}
.searchCategoryRail a span{display:grid;place-items:center;width:13px;height:13px;border-radius:var(--r-xs);border:1px solid var(--line);color:var(--muted);flex:0 0 auto}
.searchCategoryRail a span svg{width:11px;height:11px}
.searchCategoryRail a:hover span{border-color:var(--line-2);color:var(--ink)}
.searchResultsGrid{margin-top:var(--s-2)}

/* new tools */
.newToolsIntro{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  margin:var(--s-6) 0 var(--s-8);
}
.newToolsIntro > div{background:var(--surface);padding:var(--s-4) var(--s-5)}
.newToolsIntro strong{
  display:block;font-family:var(--font-mono);font-size:var(--t-20);
  letter-spacing:-0.035em;font-variant-numeric:tabular-nums;
}
.newToolsIntro span{display:block;font-size:var(--t-12);color:var(--muted);margin-top:2px}
.newToolsGroup{margin-bottom:var(--s-10)}
.newToolsGroup .sectionHeadV10{margin-bottom:var(--s-4)}
@media (max-width:700px){.newToolsIntro{grid-template-columns:1fr}}

/* ==========================================================================
   6. TOOL PAGE
   ========================================================================== */

.toolPageV11{padding:var(--s-8) 0 var(--s-16)}
.modernToolHeroV11{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-6);
  padding-bottom:var(--s-5);border-bottom:1px solid var(--line);margin-bottom:var(--s-5);
  flex-wrap:wrap;
}
.modernToolHeroCopyV11{display:flex;gap:var(--s-3);min-width:0;flex:1 1 460px}
.modernToolIconV11{
  display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-size:var(--t-18);position:relative;
}
.modernToolIconV11 svg{width:19px;height:19px}
.modernToolIconV11::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:6px;height:6px;border-radius:50%;background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
.modernToolHeroCopyV11 h1{font-size:var(--t-38);letter-spacing:-0.035em;margin-top:2px;line-height:1.06}
.modernToolHeroCopyV11 p{color:var(--muted);margin-top:var(--s-3);max-width:62ch;font-size:var(--t-15);line-height:1.6}
.toolCapsV11{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s-3)}
.toolCapsV11 span{
  font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px;background:var(--surface);
}
.modernHeroStatusV11{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 11px;background:var(--surface);
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);
  flex:0 0 auto;align-self:flex-start;
}
.pulseOrbV11,.pulseDotV12{
  width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto;
}

.toolJourneyNavV11{
  display:flex;gap:var(--s-1);flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:var(--s-6);padding-bottom:0;
}
.toolJourneyNavV11 a{
  display:flex;align-items:center;gap:7px;
  padding:9px var(--s-3);font-size:var(--t-13);color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .13s ease-out,border-color .13s ease-out;
}
.toolJourneyNavV11 a span{font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted)}
.toolJourneyNavV11 a:hover{color:var(--ink)}
.toolJourneyNavV11 a.active{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}

.modernToolLayoutV11{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:var(--s-8);align-items:start}
.modernToolLayoutV11 > main{min-width:0;display:flex;flex-direction:column;gap:var(--s-6)}

.modernWorkspaceV11{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;
}
.workspaceAccentLineV11{height:1px;background:var(--line-2)}
.modernWorkspaceHeadV11{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);
  background:var(--surface-2);flex-wrap:wrap;
}
.workspaceStep{
  display:grid;place-items:center;flex:0 0 auto;
  width:20px;height:20px;border-radius:var(--r-xs);
  border:1px solid var(--line-2);background:var(--surface);
  font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted);
  margin-bottom:6px;
}
.workspaceStep + div h2{color:var(--ink)}
.modernWorkspaceHeadV11 h2{font-size:var(--t-15);font-weight:600;letter-spacing:-0.015em}
.modernWorkspaceHeadV11 p{font-size:var(--t-12);color:var(--muted);margin-top:3px;max-width:58ch}
.modernWorkspaceBodyV11{
  padding:var(--s-5);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:var(--s-5);align-items:start;
}
.consoleOut{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);padding:var(--s-4);
  position:sticky;top:calc(var(--header-h) + var(--s-4));
  min-width:0;
}
.consoleOutHead{
  font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--s-2);margin-bottom:var(--s-3);
  border-bottom:1px solid var(--line);
}
.consoleOutSlot{min-width:0}
.consoleOutSlot .outputArea{margin-top:0}
.consoleOutSlot .resultBox{background:var(--surface)}
.consoleOutEmpty{
  border:1px dashed var(--line-2);border-radius:var(--r-sm);
  padding:var(--s-6) var(--s-3);text-align:center;
  font-size:var(--t-12);color:var(--muted);
}
@media (max-width:1080px){
  .modernWorkspaceBodyV11{grid-template-columns:1fr}
  .consoleOut{position:static}
}

.modernContentGridV11{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.modernInfoCardV11{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:var(--s-4) var(--s-5);
}
.modernInfoCardV11 > span{color:var(--muted);font-size:var(--t-14);margin-bottom:var(--s-2);display:block}
.modernInfoCardV11 h2{font-size:var(--t-15);letter-spacing:-0.015em;margin-bottom:var(--s-2)}
.modernInfoCardV11 p,.modernInfoCardV11 li{font-size:var(--t-13);color:var(--ink-2);line-height:1.65}
.modernInfoCardV11 ol{display:grid;gap:7px;counter-reset:thStep}
.modernInfoCardV11 ol li{counter-increment:thStep;position:relative;padding-left:24px}
.modernInfoCardV11 ol li::before{
  content:counter(thStep);position:absolute;left:0;top:1px;
  font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted);
}
.modernPrivacyCardV11{
  display:flex;gap:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);padding:var(--s-4) var(--s-5);
}
.modernPrivacyCardV11 > span{color:var(--dim);font-size:var(--t-16);flex:0 0 auto}
.modernPrivacyCardV11 small{display:block;font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.modernPrivacyCardV11 h2{font-size:var(--t-14);margin-bottom:5px}
.modernPrivacyCardV11 p{font-size:var(--t-13);color:var(--muted);line-height:1.6}

.modernToolSideV11{display:flex;flex-direction:column;gap:var(--s-3);position:sticky;top:calc(var(--header-h) + var(--s-4))}
.floatingStatusV11{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:var(--s-4);
}
.floatingStatusIcon{display:none}
.floatingStatusV11 > small{display:block;font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.floatingStatusV11 > strong{display:block;font-size:var(--t-15);font-weight:600}
.floatingStatusV11 > span{display:block;font-size:var(--t-12);color:var(--muted);margin-top:3px}
.miniStatusRowsV11{display:grid;margin-top:var(--s-3);border-top:1px solid var(--line)}
.miniStatusRowsV11 > div{
  display:flex;justify-content:space-between;gap:var(--s-2);
  padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--t-12);
}
.miniStatusRowsV12,.miniStatusRowsV11 > div:last-child{border-bottom:0}
.miniStatusRowsV11 span{color:var(--muted)}
.miniStatusRowsV11 b{font-weight:500;text-align:right}
.floatingCategoryV11{
  display:flex;align-items:center;gap:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:var(--s-3) var(--s-4);
  transition:border-color .13s ease-out,background-color .13s ease-out;
}
.floatingCategoryV11:hover{border-color:var(--line-2);background:var(--surface-2)}
.floatingCategoryV11 span:first-child{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:var(--r-xs);color:var(--muted);font-size:var(--t-12);position:relative}
.floatingCategoryV11 span:first-child::after{content:'';position:absolute;top:-2px;right:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent,var(--brand));box-shadow:0 0 0 2px var(--surface)}
.floatingCategoryV11 span:first-child svg{width:11px;height:11px}
.floatingCategoryV11 div{min-width:0;flex:1}
.floatingCategoryV11 b{display:block;font-size:var(--t-13);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.floatingCategoryV11 small{display:block;font-family:var(--font-mono);font-size:var(--t-10);color:var(--dim);margin-top:1px}
.floatingCategoryV11 em{font-style:normal;color:var(--muted);font-size:var(--t-12);flex:0 0 auto}
.floatingCategoryV11:hover em{color:var(--brand)}

.relatedCarouselV11{border-top:1px solid var(--line);padding-top:var(--s-5)}
.relatedHeadV11{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-3);flex-wrap:wrap}
.relatedHeadV11 h2{font-size:var(--t-16);letter-spacing:-0.018em}
.relatedHeadV11 a{font-size:var(--t-12);color:var(--muted)}
.relatedHeadV11 a:hover{color:var(--ink)}
.relatedScrollerV11{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-6)}
.relatedScrollerV11 a{
  display:flex;align-items:center;gap:var(--s-3);
  padding:9px 0;border-bottom:1px solid var(--line);
  transition:background-color .13s ease-out;
}
.relatedScrollerV11 a:hover{background:var(--surface-2)}
.relatedScrollerV11 a > span:first-child{
  display:grid;place-items:center;flex:0 0 auto;
  width:26px;height:26px;border:1px solid var(--line);border-radius:var(--r-xs);
  color:var(--muted);font-size:var(--t-13);position:relative;
}
.relatedScrollerV11 a > span:first-child::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:5px;height:5px;border-radius:50%;background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
.relatedScrollerV11 a > span:first-child svg{width:12px;height:12px}
.relatedScrollerV11 a div{min-width:0;flex:1}
.relatedScrollerV11 b{display:block;font-size:var(--t-13);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relatedScrollerV11 small{display:block;font-family:var(--font-mono);font-size:var(--t-10);color:var(--dim);margin-top:1px}
.relatedScrollerV11 em{display:none}

@media (max-width:1000px){
  .modernToolLayoutV11{grid-template-columns:1fr}
  .modernToolSideV11{position:static;flex-direction:row;flex-wrap:wrap}
  .modernToolSideV11 > *{flex:1 1 220px}
  .modernContentGridV11{grid-template-columns:1fr}
}
@media (max-width:640px){
  .relatedScrollerV11{grid-template-columns:1fr}
  .modernWorkspaceBodyV11{padding:var(--s-4)}
  .modernToolHeroCopyV11 h1{font-size:var(--t-24)}
}

/* ==========================================================================
   7. RUNNER / TOOL FORMS
   ========================================================================== */

.runner{display:block}
.runner label{
  display:block;font-size:var(--t-12);font-weight:500;color:var(--muted);
  letter-spacing:.005em;
}
.runner input,.runner select,.runner textarea{
  display:block;width:100%;margin-top:6px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);padding:8px 10px;font-size:var(--t-14);
  outline:none;transition:border-color .13s ease-out,box-shadow .13s ease-out;
}
.runner input[type=text],.runner input[type=number],.runner input[type=date],
.runner input[type=url],.runner input[type=email],.runner select{height:36px}
.runner input[type=color]{height:36px;padding:3px}
.runner textarea{line-height:1.6;resize:vertical;min-height:88px}
.runner input:focus,.runner select:focus,.runner textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.runner input::placeholder,.runner textarea::placeholder{color:var(--dim)}
.runner input[type=file]{
  display:block;width:100%;margin-top:6px;font-size:var(--t-13);color:var(--muted);
  border:1px dashed var(--line-2);border-radius:var(--r-sm);
  background:var(--surface-2);padding:10px;
}
.runner input[type=file]::file-selector-button{
  font:inherit;font-size:var(--t-12);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xs);
  padding:4px 9px;margin-right:10px;cursor:pointer;
}
.inputGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.selectRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.fourCols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
.buttonRow{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.buttonRow button{margin-top:0!important}
.toolToolbar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}

.outputArea{margin-top:var(--s-4)}
.resultBox{
  border:1px solid var(--line);border-left:2px solid var(--brand);
  border-radius:var(--r-sm);background:var(--surface-2);
  padding:var(--s-3) var(--s-4);
}
.resultBox small{
  display:block;font-family:var(--font-mono);font-size:var(--t-10);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.resultBox strong{
  display:block;font-size:var(--t-16);font-weight:600;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;font-variant-numeric:tabular-nums;
}
.resultEyebrow{
  font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.resultPre{
  white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);
  font-size:var(--t-12);line-height:1.6;max-height:340px;overflow:auto;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s-3);
}
.codeArea{
  font-family:var(--font-mono)!important;font-size:var(--t-12)!important;
  line-height:1.6;background:var(--surface-2)!important;
  border:1px solid var(--line-2)!important;border-radius:var(--r-sm)!important;
  padding:var(--s-3)!important;min-height:130px;
}
.advancedBox{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);margin-top:var(--s-4);overflow:hidden;
}
.advancedBox summary{
  cursor:pointer;padding:10px var(--s-4);
  font-size:var(--t-12);font-weight:500;color:var(--muted);
  list-style:none;display:flex;align-items:center;gap:var(--s-2);
}
.advancedBox summary::-webkit-details-marker{display:none}
.advancedBox summary::before{content:'+';font-family:var(--font-mono);color:var(--muted)}
.advancedBox[open] summary::before{content:'−'}
.advancedBox[open] summary{border-bottom:1px solid var(--line);background:var(--surface-2)}
.advancedBody{padding:var(--s-4)}
.advancedNotice{font-size:var(--t-12);color:var(--muted);line-height:1.6;margin-bottom:var(--s-3)}
.integrationGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.integrationGrid > div{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-3);background:var(--surface-2)}
.integrationGrid strong{display:block;font-size:var(--t-12);margin-bottom:6px}
.integrationGrid code{display:block;font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);padding:2px 0;word-break:break-all}
.integrationGrid p{font-size:var(--t-12);color:var(--muted);margin-top:6px;line-height:1.5}
.uploadBox{
  border:1px dashed var(--line-2);border-radius:var(--r-md);
  padding:var(--s-5);text-align:center;background:var(--surface-2);margin-bottom:var(--s-4);
}
.uploadBox strong{display:block;font-size:var(--t-13);margin-bottom:var(--s-2)}
.uploadBox p.helper{margin:0 auto var(--s-3);max-width:52ch}
.previewFrame{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);padding:var(--s-4);
  min-height:96px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--t-12);color:var(--muted);
  margin-top:var(--s-3);overflow:auto;text-align:center;
}
.formatGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.formatCard{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px;background:var(--surface);text-align:left;font-size:var(--t-12);
  transition:border-color .13s ease-out,background-color .13s ease-out;
}
.formatCard:hover{border-color:var(--line-2);background:var(--surface-2)}
.formatCard b{display:block;font-size:var(--t-13);font-weight:500}
.formatCard small{color:var(--muted);font-family:var(--font-mono);font-size:var(--t-10)}
.formatGroup{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);background:var(--surface)}
.formatGroup h3{font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2)}
.formatMain{background:var(--surface)}
.qualityPills{display:flex;flex-wrap:wrap;gap:5px}
.smartSplit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.smartPanel{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);background:var(--surface-2)}
.smartTextRunner label{margin-bottom:var(--s-3)}
.emojiBoard{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px;margin-top:var(--s-3)}
.emojiBtn{
  height:36px;border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--surface);font-size:var(--t-16);
  display:grid!important;place-items:center;padding:0!important;
}
.emojiBtn:hover{background:var(--surface-2);border-color:var(--line-2)}
.enhancementRunner .toolToolbar{margin-bottom:var(--s-3)}
.designRunner{display:grid;gap:var(--s-4)}
.designStageWrap{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.designStage{padding:var(--s-4);display:grid;place-items:center;overflow:auto}
.designControls{display:grid;gap:var(--s-3)}
.toolhub-snippet{
  font-family:var(--font-mono);font-size:var(--t-12);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s-3);
}
.imageOnly{background:var(--surface-2)}

@media (max-width:700px){
  .inputGrid,.selectRow,.smartSplit,.formatGrid,.integrationGrid{grid-template-columns:1fr}
  .fourCols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* suite runner */
.suiteRunner{display:block}
.suiteHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-3)}
.suiteHeader h3{font-size:var(--t-14);font-weight:600;margin-top:5px}
.suiteHeader p{font-size:var(--t-12);color:var(--muted);margin-top:4px;max-width:52ch}
.suiteModeSelect{font-size:var(--t-12);font-weight:500;color:var(--muted);flex:0 0 auto}
.suiteModeSelect select{
  display:block;margin-top:5px;height:32px;padding:0 var(--s-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-13);
}
.suitePills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:var(--s-4)}
.suitePill{
  height:28px;padding:0 11px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--muted);font-size:var(--t-12);
  transition:border-color .13s ease-out,color .13s ease-out,background-color .13s ease-out;
}
.suitePill:hover{border-color:var(--line-2);color:var(--ink)}
.suitePill.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.suiteInner{display:block}
.suiteModeTitle{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.suiteModeTitle small{font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.suiteModeTitle h3{font-size:var(--t-15);font-weight:600;margin-top:2px}

/* ==========================================================================
   8. SOCIAL / SNAPCHAT PAGES
   ========================================================================== */

.socialViewerV12,.socialToolShellV11{padding:var(--s-8) 0 var(--s-16)}
.socialViewerShellV12{width:min(100% - var(--gutter) * 2,var(--shell));margin-inline:auto}
.socialBreadcrumbsV11,.socialBreadcrumbsV12{margin-bottom:var(--s-4)}

.socialBrandHeroV11{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--s-6);margin-bottom:var(--s-6);
}
.socialHeroContentV11{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
.socialHeroCopyV11{min-width:0}
.socialPlatformMark{display:none}
.socialEyebrowV11{
  display:block;font-family:var(--font-mono);font-size:var(--t-11);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2);
}
.socialHeroCopyV11 h1,.socialHeroV12 h1{font-size:var(--t-30);letter-spacing:-0.032em;line-height:1.1}
.socialHeroCopyV11 p,.socialHeroV12 p{color:var(--muted);margin-top:var(--s-3);max-width:56ch;font-size:var(--t-14);line-height:1.6}
.socialHeroPills{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--s-4)}
.socialHeroPills span{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 9px;background:var(--surface-2);
}
.socialHeroVisualV11{display:none}
.deviceMockV11,.deviceTop,.deviceMedia,.deviceAction{display:none}
.socialLogoTileV12{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--muted);font-size:var(--t-18);margin-bottom:var(--s-3);
  position:relative;
}
.socialLogoTileV12 svg{width:19px;height:19px}
.socialLogoTileV12::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:6px;height:6px;border-radius:50%;background:var(--accent,var(--brand));
  box-shadow:0 0 0 2px var(--surface);
}
.socialHeroV12{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--s-6);margin-bottom:var(--s-6);
}
.socialHeroPillV12{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 11px;background:var(--surface-2);margin-bottom:var(--s-3);
}
.socialHeroRunnerV12{margin-top:var(--s-5)}
.socialTrustRowV12{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
}
.socialTrustRowV12 span{
  display:flex;align-items:center;gap:7px;
  font-size:var(--t-12);color:var(--muted);
}
.socialTrustRowV12 svg{color:var(--muted);flex:0 0 auto}
.socialInfoGridV12{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);margin-top:var(--s-8)}
.socialInfoGridV12 article{border-top:1px solid var(--line);padding-top:var(--s-3)}
.socialInfoGridV12 h2{font-size:var(--t-14);letter-spacing:-0.015em;margin-bottom:5px}
.socialInfoGridV12 p{font-size:var(--t-13);color:var(--muted);line-height:1.6}
.infoNumberV12{
  display:block;font-family:var(--font-mono);font-size:var(--t-11);
  color:var(--muted);letter-spacing:.08em;margin-bottom:var(--s-2);
}
.socialAboutV12{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);
  border-top:1px solid var(--line);margin-top:var(--s-10);padding-top:var(--s-6);
}
.socialAboutV12 h2{font-size:var(--t-20);letter-spacing:-0.025em;margin-bottom:var(--s-2)}
.socialAboutV12 p{font-size:var(--t-13);color:var(--muted);line-height:1.65}
.socialAboutV12 ol{display:grid;gap:8px;counter-reset:thStep}
.socialAboutV12 li{
  counter-increment:thStep;position:relative;padding-left:24px;
  font-size:var(--t-13);color:var(--ink-2);line-height:1.6;
}
.socialAboutV12 li::before{
  content:counter(thStep);position:absolute;left:0;top:1px;
  font-family:var(--font-mono);font-size:var(--t-10);color:var(--muted);
}
.socialWorkspaceWrapV11{margin-bottom:var(--s-6)}
.socialWorkspaceV11{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--s-5);
}
.journeyRailV11{
  display:flex;align-items:center;gap:var(--s-2);
  margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--line);
}
.journeyRailV11 > div{display:flex;align-items:center;gap:7px;font-size:var(--t-12);color:var(--muted)}
.journeyRailV11 > div b{
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--line-2);font-family:var(--font-mono);font-size:var(--t-10);font-weight:400;
}
.journeyRailV11 > div.active{color:var(--ink);font-weight:500}
.journeyRailV11 > div.active b{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.journeyRailV11 > i{width:22px;height:1px;background:var(--line)}
.socialWorkspaceHeadV11{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4);flex-wrap:wrap}
.socialWorkspaceHeadV11 h2{font-size:var(--t-16);letter-spacing:-0.018em}
.socialWorkspaceHeadV11 p{font-size:var(--t-12);color:var(--muted);margin-top:4px;max-width:56ch}
.socialRunnerFrameV11{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:var(--s-4)}
.socialBenefitStripV11{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.socialBenefitStripV11 > div{border-top:1px solid var(--line);padding-top:var(--s-3)}
.socialBenefitStripV11 svg{color:var(--muted);margin-bottom:var(--s-2)}
.socialBenefitStripV11 b{display:block;font-size:var(--t-13);font-weight:600;margin-bottom:3px}
.socialBenefitStripV11 span{display:block;font-size:var(--t-12);color:var(--muted);line-height:1.5}

@media (max-width:900px){
  .socialHeroContentV11,.socialAboutV12{grid-template-columns:1fr;gap:var(--s-5)}
  .socialInfoGridV12,.socialBenefitStripV11,.socialTrustRowV12{grid-template-columns:1fr;gap:var(--s-4)}
  .socialBrandHeroV11,.socialHeroV12{padding:var(--s-5)}
}

/* social runner */
.socialRunnerV12,.socialRunner{background:transparent}
.socialStatusRowV12{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}
.socialSearchBoxV12{
  display:flex;align-items:center;gap:var(--s-2);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:var(--surface);padding:5px 5px 5px var(--s-3);
  transition:border-color .13s ease-out,box-shadow .13s ease-out;
}
.socialSearchBoxV12:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.socialSearchIconV12{color:var(--muted);font-size:var(--t-16);display:grid;place-items:center;flex:0 0 auto}
.socialSearchInputV12{
  flex:1;min-width:0;border:0;background:none;outline:none;
  height:36px;font-size:var(--t-14);
}
.socialSearchInputV12::placeholder{color:var(--dim)}
.socialPasteV12{
  height:32px;padding:0 10px!important;background:var(--surface-2)!important;
  border:1px solid var(--line)!important;color:var(--muted)!important;font-size:var(--t-12)!important;
}
.socialPasteV12:hover{background:var(--surface-3)!important;color:var(--ink)!important;border-color:var(--line-2)!important}
.socialFetchV12{
  height:34px;padding:0 var(--s-4)!important;
  background:var(--ink)!important;border-color:var(--ink)!important;font-size:var(--t-13)!important;
}
.socialFetchV12:hover{background:#000!important;border-color:#000!important}
.socialQuickHelpV12{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:var(--t-12);color:var(--muted);margin-top:var(--s-3);
}
.socialQuickHelpV12 b{color:var(--ink-2);font-weight:500}
.socialOptionDeckV12{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.socialOptionDeckV12 label{font-size:var(--t-12);font-weight:500;color:var(--muted)}
.socialOptionDeckV12 select{
  display:block;width:100%;margin-top:6px;height:36px;padding:0 var(--s-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-13);
}
.socialSwitchV12{
  display:flex;gap:var(--s-3);align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);margin-top:var(--s-4);background:var(--surface-2);
}
.socialSwitchV12 input{width:16px;height:16px;margin-top:2px;accent-color:var(--brand);flex:0 0 auto}
.socialSwitchV12 strong{display:block;font-size:var(--t-13);font-weight:500}
.socialSwitchV12 small{display:block;font-size:var(--t-12);color:var(--muted);margin-top:2px;line-height:1.5}
.socialPermissionV12{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-12);color:var(--muted);margin-top:var(--s-4);
  border-top:1px solid var(--line);padding-top:var(--s-3);
}
.socialPermissionV12 svg{color:var(--muted);flex:0 0 auto}
.fetchedResultWrap{margin-top:var(--s-4)}
.fetchedMediaPreview{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);padding:var(--s-3);margin-bottom:var(--s-3);
}
.fetchedMediaPreview video,.fetchedMediaPreview img{width:100%;border-radius:var(--r-sm);display:block}
.fetchedMediaPreview small{display:block;font-size:var(--t-11);color:var(--muted);margin-top:var(--s-2)}
.socialResultCard{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:var(--s-4);
}
.socialResultCard h3{font-size:var(--t-16);letter-spacing:-0.018em;margin-top:2px}
.socialResultCard p{font-size:var(--t-12);color:var(--muted);margin-top:3px}
.socialResultBody > div{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.socialThumb{
  width:100%;max-height:220px;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
}
.placeholderThumb{
  width:100%;height:120px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--muted);font-size:var(--t-20);
}
.resolvedSection{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-3);background:var(--surface-2);margin-top:var(--s-3);
}
.resolvedSection h4{font-size:var(--t-12);font-weight:600;margin-bottom:var(--s-2)}
.mediaPicker{display:grid;gap:var(--s-2)}
.mediaItem,.mediaChoice{
  display:flex;align-items:center;gap:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px var(--s-3);background:var(--surface);font-size:var(--t-13);
}
.mediaItem img,.mediaChoice img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-xs);flex:0 0 auto}
.mediaTypeIcon{
  display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-xs);color:var(--muted);font-size:var(--t-13);
}
.mediaChoiceActions{margin-left:auto;display:flex;gap:6px}
.mediaChoiceActions button{height:28px;padding:0 10px;font-size:var(--t-12);background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.mediaChoiceActions button:hover{background:var(--surface-2);border-color:var(--line-strong)}
.bigDownload,.primaryDownload{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 var(--s-5);
  background:var(--brand);border:1px solid var(--brand);color:#fff;
  border-radius:var(--r-sm);font-size:var(--t-13);font-weight:500;
  transition:background-color .13s ease-out,border-color .13s ease-out;
}
.bigDownload:hover,.primaryDownload:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.bigAudioDownload,.secondaryDownload{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 var(--s-4);
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
  border-radius:var(--r-sm);font-size:var(--t-13);
}
.bigAudioDownload:hover,.secondaryDownload:hover{background:var(--surface-2);border-color:var(--line-strong)}
.heroDownloadActions,.heroDownloadActionsVisible{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.downloadLink{font-size:var(--t-13);color:var(--brand);border-bottom:1px solid var(--brand-line);padding-bottom:1px;align-self:center}
.downloadLink:hover{border-color:var(--brand)}
@media (max-width:700px){.socialOptionDeckV12{grid-template-columns:1fr}}

/* snapchat */
.snapchatViewerV12{padding-top:var(--s-8)}
.snapHeroV12{margin-bottom:var(--s-6)}
.snapLogoV12{margin-bottom:var(--s-3)}
.snapSearchBoxV12{display:flex;align-items:center;gap:var(--s-2);border-color:var(--line-2);padding:5px 5px 5px var(--s-3)}
.snapSearchBoxV12 input{
  flex:1;min-width:0;border:0;background:none;outline:none;height:38px;font-size:var(--t-14);
}
.snapSearchBoxV12 input::placeholder{color:var(--dim)}
.snapSearchBoxV12 button.socialFetchV12{height:36px}
.snapSearchLabelV12{font-size:var(--t-13)}
.snapHintRowV12{
  display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;
  font-family:var(--fontono);font-size:var(--t-10);color:var(--muted);margin-top:var(--s-3);
}
.snapHintRowV12 button{
  height:24px;padding:0 8px;font-size:var(--t-10)!important;font-family:var(--font-mono);
  background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--muted)!important;
}
.snapHintRowV12 button:hover{background:var(--surface-3)!important;color:var(--ink)!important}
.snapProfileCardV12{
  display:flex;align-items:center;gap:var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);
  flex-wrap:wrap;
}
.snapAvatarWrapV12{
  position:relative;width:56px;height:56px;flex:0 0 auto;
  border-radius:50%;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;
}
.snapAvatarWrapV12 img{width:100%;height:100%;object-fit:cover}
.snapStoryRingV12{display:none}
.snapProfileBodyV12{min-width:0;flex:1}
.snapProfileTitleV12{display:flex;align-items:center;gap:6px}
.snapProfileTitleV12 h2{font-size:var(--t-16);letter-spacing:-0.018em}
.snapVerifiedV12{color:var(--brand);font-size:var(--t-12)}
.snapHandleV12{font-family:var(--font-mono);font-size:var(--t-12);color:var(--muted);margin-top:2px}
.snapStatsV12{display:flex;gap:var(--s-4);margin-top:var(--s-2);font-size:var(--t-12);color:var(--muted)}
.snapStatsV12 b{color:var(--ink);font-variant-numeric:tabular-nums}
.snapTabsV12{display:flex;gap:var(--s-1);border-bottom:1px solid var(--line);margin-bottom:var(--s-4)}
.snapTabsV12 button{
  height:36px;padding:0 var(--s-3);background:none!important;border:0!important;
  border-bottom:2px solid transparent!important;color:var(--muted)!important;
  font-size:var(--t-13);border-radius:0!important;margin-bottom:-1px;
}
.snapTabsV12 button:hover{color:var(--ink)!important}
.snapTabsV12 button.active,.snapTabsV12 button[aria-selected="true"]{
  color:var(--ink)!important;border-bottom-color:var(--ink)!important;font-weight:600;
}
.snapTabTopV12{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4);flex-wrap:wrap}
.snapHighlightFiltersV12{display:flex;gap:5px;flex-wrap:wrap}
.snapHighlightFiltersV12 button{
  height:28px;padding:0 11px;font-size:var(--t-12)!important;
  background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--muted)!important;
  border-radius:var(--r-pill)!important;
}
.snapHighlightFiltersV12 button.active{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
.snapGridV12{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-3)}
.snapCardV12{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden;display:flex;flex-direction:column;
}
.snapCardMediaV12{
  position:relative;aspect-ratio:9/14;background:var(--surface-2);
  display:grid;place-items:center;overflow:hidden;
}
.snapCardMediaV12 img{width:100%;height:100%;object-fit:cover}
.snapNoThumbV12{color:var(--line-2);font-size:var(--t-30)}
.snapCardBadgesV12{position:absolute;left:6px;right:6px;top:6px;display:flex;justify-content:space-between;gap:4px;pointer-events:none}
.snapCardBadgesV12 span,.snapCardBadgesV12 time{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;
  background:rgba(17,19,18,.82);color:#fff;border-radius:var(--r-xs);padding:2px 5px;
}
.snapPreviewBtnV12{
  position:absolute;left:6px;right:6px;bottom:6px;height:30px;
  background:rgba(17,19,18,.86);color:#fff;border:0!important;border-radius:var(--r-xs);
  font-size:var(--t-12)!important;opacity:0;
  transition:opacity .14s ease-out;
  display:flex!important;align-items:center;justify-content:center;gap:5px;
}
.snapCardMediaV12:hover .snapPreviewBtnV12,.snapPreviewBtnV12:focus-visible{opacity:1}
.snapCardFooterV12{display:flex;align-items:center;gap:var(--s-2);padding:9px 10px;border-top:1px solid var(--line)}
.snapCardFooterV12 > div{min-width:0;flex:1}
.snapCardFooterV12 b{display:block;font-size:var(--t-12);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snapCardFooterV12 small{font-family:var(--font-mono);font-size:9px;color:var(--dim)}
.snapCardDownloadV12{
  height:28px;padding:0 9px;background:var(--surface)!important;
  border:1px solid var(--line-2)!important;color:var(--ink)!important;
  border-radius:var(--r-xs)!important;font-size:var(--t-11)!important;
  display:inline-flex!important;align-items:center;gap:4px;
}
.snapCardDownloadV12:hover{background:var(--surface-2)!important}
.snapLoadingV12,.snapEmptyV12{
  border:1px dashed var(--line-2);border-radius:var(--r-md);
  padding:var(--s-8) var(--s-6);text-align:center;color:var(--muted);
}
.snapEmptyV12 h3{font-size:var(--t-15);color:var(--ink);margin:var(--s-2) 0 4px}
.snapAlertV12{
  border:1px solid var(--danger-line);border-left:3px solid var(--danger);
  background:var(--danger-soft);color:#7a161b;border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);font-size:var(--t-13);margin-bottom:var(--s-4);
}
.snapSkeletonGridV12{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-3);margin-top:var(--s-3)}
.snapSkeletonProfileV12{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-3)}
.snapSkeletonGridV12 i,.snapSkeletonProfileV12 i{
  display:block;background:var(--surface-2);border-radius:var(--r-sm);
  height:120px;animation:thPulse 1.4s ease-in-out infinite;
}
.snapSkeletonProfileV12 i{width:56px;height:56px;border-radius:50%;flex:0 0 auto}
.snapSkeletonProfileV12 div{display:grid;gap:6px;flex:1}
.snapSkeletonProfileV12 b,.snapSkeletonProfileV12 span{
  display:block;height:10px;background:var(--surface-2);border-radius:var(--r-xs);
  animation:thPulse 1.4s ease-in-out infinite;
}
.snapSkeletonProfileV12 b{width:140px}
.snapSkeletonProfileV12 span{width:90px}
@keyframes thPulse{0%,100%{opacity:1}50%{opacity:.45}}
.snapDownloadAllV12{
  height:34px;padding:0 var(--s-4);background:var(--ink)!important;
  border:1px solid var(--ink)!important;color:var(--paper)!important;
  border-radius:var(--r-sm)!important;font-size:var(--t-12)!important;
  display:inline-flex!important;align-items:center;gap:6px;
}
.snapContentPanelV12{margin-top:var(--s-4)}
.snapResultsV12{margin-top:var(--s-5)}
.snapInfoGridV12{margin-top:var(--s-10)}
.snapModalV12{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(17,19,18,.86);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:var(--s-4);
}
.snapModalCardV12{
  position:relative;width:min(880px,100%);max-height:92vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);
}
.snapModalTopV12{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);
}
.snapModalTopV12 img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.snapModalTopV12 b{font-size:var(--t-13);font-weight:500}
.snapModalMediaV12{background:#000;display:grid;place-items:center;max-height:60vh;overflow:hidden}
.snapModalMediaV12 img,.snapModalMediaV12 video{max-width:100%;max-height:60vh;object-fit:contain}
.snapModalBottomV12{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);flex-wrap:wrap;
}
.snapModalNavV12,.snapModalCloseV12{
  height:32px;padding:0 var(--s-3);background:var(--surface)!important;
  border:1px solid var(--line-2)!important;color:var(--ink)!important;
  border-radius:var(--r-sm)!important;font-size:var(--t-12)!important;
}
.snapModalCloseV12{
  position:absolute;top:8px;right:8px;width:32px;padding:0!important;
  display:grid!important;place-items:center;font-size:var(--t-16)!important;z-index:2;
}
.snapModalNavV12:hover,.snapModalCloseV12:hover{background:var(--surface-2)!important}

/* ==========================================================================
   9. AFT CONTENT BLOCKS / MISC PAGES
   ========================================================================== */

.aftContentAFT > section,.aftOverviewAFT,.aftHowAFT,.aftFeatureSectionAFT,.aftFaqAFT,.aftNoSignupAFT{
  border-top:1px solid var(--line);padding-top:var(--s-5);margin-top:var(--s-5);
}
.aftContentAFT h2,.aftContentAFT h3{font-size:var(--t-15);letter-spacing:-0.018em;margin-bottom:var(--s-2)}
.aftContentAFT p,.aftContentAFT li{font-size:var(--t-13);color:var(--ink-2);line-height:1.65}
.aftContentAFT ul,.aftContentAFT ol{display:grid;gap:7px;margin-top:var(--s-2)}
.aftContentAFT ul li{position:relative;padding-left:18px}
.aftContentAFT ul li::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.aftFeatureGridAFT,.aftStepGridAFT{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-3)}
.aftFeatureGridAFT > div,.aftStepGridAFT > div{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s-3);background:var(--surface-2);
}
.aftFeatureGridAFT strong,.aftStepGridAFT strong{display:block;font-size:var(--t-13);margin-bottom:4px}
.aftFeatureGridAFT p,.aftStepGridAFT p{font-size:var(--t-12);color:var(--muted);line-height:1.55}
.aftFaqAFT details{border-bottom:1px solid var(--line);padding:10px 0}
.aftFaqAFT summary{cursor:pointer;font-size:var(--t-13);font-weight:500;list-style:none}
.aftFaqAFT summary::-webkit-details-marker{display:none}
.aftFaqAFT p{margin-top:6px}
.graphCanvasAFT{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);min-height:160px;padding:var(--s-4);
  font-family:var(--font-mono);font-size:var(--t-11);color:var(--dim);
}
.invoicePreviewAFT,.invoiceRunnerAFT,.invoiceBillAFT{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:var(--s-4);
}
.invoiceTopAFT{
  display:flex;justify-content:space-between;gap:var(--s-4);
  border-bottom:1px solid var(--line);padding-bottom:var(--s-3);margin-bottom:var(--s-3);
}
.invoiceTotalsAFT{border-top:1px solid var(--line);margin-top:var(--s-3);padding-top:var(--s-2);display:grid;gap:5px;font-size:var(--t-13)}
.invoiceTotalsAFT > div{display:flex;justify-content:space-between;gap:var(--s-3)}
.invoiceTotalsAFT > div:last-child{font-weight:600;padding-top:5px;border-top:1px solid var(--line)}
.resumePreview{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-4)}
@media (max-width:760px){
  .aftFeatureGridAFT,.aftStepGridAFT{grid-template-columns:1fr}
  .integrationGrid{grid-template-columns:1fr}
}

.contentBlock{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);background:var(--surface);margin-top:var(--s-4);max-width:74ch;
}
.contentBlock h2{font-size:var(--t-18);margin-bottom:var(--s-2)}
.contentBlock p{font-size:var(--t-14);color:var(--ink-2);line-height:1.7}

.trustRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);margin-top:var(--s-6)}
.trustItem{border-top:1px solid var(--line);padding-top:var(--s-4);font-size:var(--t-13);color:var(--muted)}
.trustItem strong{display:block;color:var(--ink);font-size:var(--t-14);margin-bottom:5px}
.trustItem .stat{margin-bottom:var(--s-2);color:var(--ink)}
@media (max-width:700px){.trustRow{grid-template-columns:1fr;gap:var(--s-4)}}

.article{max-width:70ch;margin:0 auto;padding:var(--s-10) 0 var(--s-16)}
.article h1{font-size:var(--t-38);letter-spacing:-0.032em;line-height:1.1}
.articleMeta{font-family:var(--font-mono);font-size:var(--t-11);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-3)}
.articleHero{
  height:auto;padding:var(--s-8) 0;margin:var(--s-6) 0;
  border-block:1px solid var(--line);
  background:none;border-radius:0;
  font-family:var(--font-mono);font-size:var(--t-14);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.article h2{font-size:var(--t-20);margin:var(--s-8) 0 var(--s-3);letter-spacing:-0.025em}
.article p,.article li{font-size:var(--t-15);line-height:1.75;color:var(--ink-2);margin-bottom:var(--s-4)}
.article a{color:var(--brand);border-bottom:1px solid var(--brand-line)}

/* ==========================================================================
   9b. LEFTOVER CLASSES (kept in sync with app.js markup)
   ========================================================================== */

/* decorative layers that the old design used — removed, not restyled */
.heroV11 .orbOne,.heroV11 .orbTwo,.heroOrb,.heroMesh{display:none!important}
.grand{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  font-weight:600;font-size:var(--t-15);
  border-top:1px solid var(--line);padding-top:var(--s-2);margin-top:2px;
}
.grand b{font-variant-numeric:tabular-nums}
.snapModalNavV12.next{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
.snapModalNavV12.next:hover{background:#000!important;border-color:#000!important}
.snapModalNavV12.prev{background:var(--surface)!important;border-color:var(--line-2)!important;color:var(--ink)!important}
.targetCompressCard{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--s-4);align-items:end;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3);
}
.targetCompressCard small{
  display:block;font-family:var(--font-mono);font-size:var(--t-10);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
.targetCompressCard strong{font-family:var(--font-mono);font-size:var(--t-16);letter-spacing:-0.03em}
.targetCompressCard label{font-size:var(--t-12);font-weight:500;color:var(--muted)}
.targetCompressCard select{
  display:block;width:100%;margin-top:5px;height:34px;padding:0 var(--s-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-13);
}

/* score meter — a data ring, the one place a gradient encodes a value */
.scoreRing{
  width:104px;height:104px;margin:0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--brand) calc(var(--score,0) * 1%),var(--surface-3) 0);
  position:relative;
}
.scoreRing::before{
  content:'';position:absolute;inset:9px;border-radius:50%;background:var(--surface);
}
.scoreRing strong{
  position:relative;font-family:var(--font-mono);font-size:var(--t-20);
  letter-spacing:-0.04em;font-variant-numeric:tabular-nums;
}
@media (max-width:700px){.targetCompressCard{grid-template-columns:1fr}}

/* ==========================================================================
   10. RESPONSIVE + MOTION + PRINT
   ========================================================================== */

@media (max-width:960px){
  .section{padding:var(--s-8) 0}
  .pageTop,.pageTopV10,.pageTopV11{padding:var(--s-8) 0 var(--s-6)}
  .pageTop h1{font-size:var(--t-30)}
  .hero{padding:var(--s-8) 0 var(--s-6)}
  .article h1{font-size:var(--t-30)}
  .article{padding:var(--s-8) 0 var(--s-12)}
}
@media (max-width:640px){
  :root{--header-h:54px}
  .hero h1{font-size:clamp(1.75rem,1.1rem + 3vw,2.25rem)}
  .pageTop h1,.categoryHeroInner h1,.article h1{font-size:var(--t-24)}
  .modernToolHeroCopyV11 h1{font-size:var(--t-24)}
  .modernToolHeroV11{padding-bottom:var(--s-4)}
  .sectionHeadV10 h2{font-size:var(--t-20)}
  .stayPanel h2{font-size:var(--t-24)}
  .footer{margin-top:var(--s-12)}
  .toolJourneyNavV11 a span{display:none}
  .toolJourneyNavV11 a{padding:9px 10px;font-size:var(--t-12)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

@media print{
  .siteHeader,.footer,.toolJourneyNavV11,.modernToolSideV11,.advancedBox,
  .relatedCarouselV11,.buttonRow,.socialTrustRowV12,.footerBase{display:none!important}
  body{background:#fff;color:#000}
  .modernWorkspaceV11,.contentBlock{border-color:#ccc}
  .shell{width:100%}
}