/* Util.Ninja shared site chrome: header, breadcrumbs, intro, FAQ, "more tools", footer.
   Every class is prefixed "un-" so it never collides with the Bootstrap classes the tools use. */
:root{--un-ink:#16202c;--un-muted:#5a6778;--un-line:#e3e7ee;--un-bg:#f6f7fb;--un-brand:#2547d0;--un-brand-d:#1a35a3}
html{scroll-padding-top:120px}
body{background:var(--un-bg)}
.un-wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* header */
.un-top{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--un-line)}
.un-top .un-wrap{display:flex;align-items:center;gap:10px;height:58px}
.un-brand{display:flex;align-items:center;gap:9px;text-decoration:none!important;color:var(--un-ink)!important;font:800 19px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-.01em;margin-right:auto}
.un-brand img{width:28px;height:28px}
.un-brand b{color:var(--un-brand)}
.un-nav{display:flex;gap:4px}
.un-nav a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--un-ink);font:600 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:9px 12px;border-radius:999px}
.un-nav a:hover{background:#eef1fb;color:var(--un-brand)}

/* tool-specific bar under the header (WebP converter actions, Words Finder languages) */
.un-bar{background:#fff;border-bottom:1px solid var(--un-line)}
.un-bar .un-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-top:8px;padding-bottom:8px}
.un-bar a.un-chip{display:inline-block;text-decoration:none;color:#3a4657;background:#f0f2f7;border-radius:999px;padding:5px 11px;font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.un-bar a.un-chip:hover{background:#e3e8f6;color:var(--un-brand)}
.un-bar a.un-chip[aria-current="page"]{background:var(--un-brand);color:#fff}
.un-bar .un-sp{flex:1}
.un-sticky{position:sticky;top:58px;z-index:1020}

/* breadcrumbs */
.un-crumb{font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--un-muted);padding:12px 16px 0}
.un-crumb a{color:var(--un-muted);text-decoration:none}.un-crumb a:hover{color:var(--un-brand);text-decoration:underline}
.un-crumb span[aria-current]{color:var(--un-ink);font-weight:600}

/* page intro */
.un-intro{padding:10px 0 6px}
.un-intro h1{font:800 clamp(26px,3.6vw,36px)/1.15 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.02em;color:var(--un-ink);margin:6px 0 10px}
.un-intro .un-lead{font-size:clamp(16px,1.8vw,18px);line-height:1.55;color:#3a4657;max-width:860px;margin:0 0 10px}
.un-pills{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 0;padding:0;list-style:none;color:var(--un-muted);font-size:14px}
.un-pills li::before{content:"✓ ";color:#1e9e5a;font-weight:800}

/* content blocks added by the redesign */
.un-sec{background:#fff;border:1px solid var(--un-line);border-radius:14px;padding:20px 22px;margin:22px 0}
.un-sec h2{font:800 22px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0 0 12px;color:var(--un-ink)}
.un-sec ol,.un-sec ul{margin:0 0 6px;padding-left:22px}.un-sec li{margin:6px 0}
.un-sec code{background:#f2f4f8;border-radius:5px;padding:1px 5px;color:#1c2a3a}
.un-faq details{border:1px solid var(--un-line);border-radius:10px;margin:8px 0;background:#fbfcfe}
.un-faq summary{cursor:pointer;padding:12px 14px;font-weight:700;color:var(--un-ink)}
.un-faq details p{margin:0;padding:0 14px 12px;color:#3a4657}

/* ads: responsive, clearly labelled, kept away from controls */
.un-ad{margin:32px auto;text-align:center;min-height:100px;max-width:100%;overflow:hidden}
.un-ad::before{content:"Advertisement";display:block;font:11px/1 system-ui,sans-serif;color:#98a2b3;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
ins.adsbygoogle{max-width:100%}

/* more tools */
.un-more{padding:10px 0 4px}
.un-more h2{font:800 22px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0 0 12px;color:var(--un-ink)}
.un-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.un-tile{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--un-line);border-radius:14px;padding:12px;text-decoration:none!important;color:var(--un-ink)!important;transition:transform .15s,box-shadow .15s}
.un-tile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,24,40,.12)}
.un-tile b{display:block;font:700 15px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.un-tile small{display:block;color:var(--un-muted);font-size:13px;line-height:1.35;margin-top:2px}
.un-ti{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.un-ti svg{width:34px;height:34px;display:block}
.un-games{margin:14px 0 0;font-size:15px;color:#3a4657}
.un-games a{font-weight:700;color:var(--un-brand)}

/* footer */
.un-ft{margin:28px 0 0;padding:20px 0 28px;border-top:1px solid var(--un-line);color:var(--un-muted);font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--un-bg)}
.un-ft .un-wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.un-ft a{color:var(--un-muted);text-decoration:none}.un-ft a:hover{color:var(--un-brand)}
.un-ft .un-c{margin-right:auto}

@media (max-width:860px){.un-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .un-top .un-wrap{height:54px}.un-brand{font-size:17px}.un-nav a{padding:8px 9px;font-size:14px}
  .un-sticky{top:54px}
  .un-grid{grid-template-columns:1fr}
  .un-sec{padding:16px}
}

/* small fixes for the existing tool layouts on phones */
.d-flex.justify-content-between{flex-wrap:wrap;row-gap:6px}
#startButton.m-5{margin:24px 0!important}
main pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}
h1.un-wh1{font:800 clamp(24px,3.6vw,34px)/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.01em;margin:8px 0 12px}