/* =====================================================================
   YowGames — core stylesheet
   Aesthetic: dark "neon arcade" — deep violet-black canvas, electric
   violet + cyan accents, glassmorphic surfaces, hot-pink alert.
   Fonts: Bricolage Grotesque (display) / Hanken Grotesk (body) / JetBrains Mono (data)
   ===================================================================== */

:root{
  --bg:        #0a0712;
  --bg-2:      #0f0a1c;
  --surface:   rgba(24,18,40,.62);
  --surface-2: rgba(32,24,54,.7);
  --border:    rgba(150,120,255,.14);
  --border-2:  rgba(150,120,255,.28);
  --txt:       #ECE8FB;
  --txt-dim:   #9a90c0;
  --txt-mute:  #6f668f;
  --violet:    #7c5cff;
  --violet-2:  #9d7bff;
  --cyan:      #22d3ee;
  --pink:      #ff2d6f;
  --gold:      #ffcf5c;
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 20px 50px -20px rgba(0,0,0,.7);
  --glow-v:    0 0 0 1px rgba(124,92,255,.4), 0 8px 30px -6px rgba(124,92,255,.55);
  --max:       1240px;
  --font-d: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-b: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font-b); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit; text-decoration:none}
img,video{display:block; max-width:100%}
h1,h2,h3,h4{font-family:var(--font-d); font-weight:700; line-height:1.1; letter-spacing:-.02em; margin:0}
.wrap{width:min(100% - 2.4rem, var(--max)); margin-inline:auto}

/* ---- animated gradient-mesh background ---- */
.bg-mesh{
  position:fixed; inset:-20% -20% auto -20%; height:120vh; z-index:-2;
  background:
    radial-gradient(40% 50% at 18% 12%, rgba(124,92,255,.22), transparent 70%),
    radial-gradient(45% 45% at 85% 8%,  rgba(34,211,238,.16), transparent 70%),
    radial-gradient(50% 55% at 70% 80%, rgba(255,45,111,.10), transparent 70%);
  filter:saturate(1.1);
  animation:drift 26s ease-in-out infinite alternate;
}
body::after{ /* grain */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift{ to{ transform:translate3d(0,-4%,0) scale(1.05) } }

/* =====================================================================
   NAVBAR (glassmorphism)
   ===================================================================== */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px) saturate(1.4);
  background:linear-gradient(180deg, rgba(12,8,22,.86), rgba(12,8,22,.55));
  border-bottom:1px solid var(--border);
  transition:transform .35s ease, box-shadow .35s ease;
}
.navbar.hide{ transform:translateY(-100%) }
.navbar.scrolled{ box-shadow:0 10px 30px -16px rgba(0,0,0,.8) }
.nav-inner{ display:flex; align-items:center; gap:1.2rem; height:66px }
.logo{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-d);
  font-weight:800; font-size:1.32rem; letter-spacing:-.03em }
.logo-mark{ color:var(--violet); filter:drop-shadow(0 0 10px rgba(124,92,255,.8));
  font-size:1.1em; transform:translateY(-1px) }
.nav-links{ display:flex; align-items:center; gap:.25rem; margin-left:auto }
.nav-links > a, .nav-drop-toggle{
  position:relative; font-size:.93rem; font-weight:600; color:var(--txt-dim);
  padding:.5rem .72rem; border-radius:10px; background:none; border:0; cursor:pointer;
  font-family:var(--font-b); display:inline-flex; align-items:center; gap:.35rem;
  transition:color .2s, background .2s;
}
.nav-links > a:hover, .nav-drop-toggle:hover{ color:var(--txt); background:rgba(124,92,255,.1) }
.nav-links a[aria-current="page"]{ color:#fff }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.18rem; height:2px;
  background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:2px;
}
.nav-hot{ color:var(--txt) }
.badge-hot{
  font-family:var(--font-m); font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#fff; background:linear-gradient(90deg,var(--pink),#ff7a45);
  padding:.12rem .4rem; border-radius:6px; box-shadow:0 0 14px -2px var(--pink);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 50%{ filter:brightness(1.25) } }
.nav-cta{ color:#fff !important; background:linear-gradient(90deg,var(--violet),var(--violet-2));
  box-shadow:var(--glow-v) }
.nav-cta:hover{ filter:brightness(1.08) }

/* dropdown */
.nav-dropdown{ position:relative }
.nav-drop-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:180px;
  background:rgba(16,11,28,.985); backdrop-filter:blur(20px);
  border:1px solid var(--border-2); border-radius:14px; padding:.4rem;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.2s; display:flex; flex-direction:column;
}
.nav-dropdown:hover .nav-drop-menu, .nav-dropdown.open .nav-drop-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-drop-menu a{ padding:.55rem .75rem; border-radius:9px; font-size:.9rem; color:var(--txt-dim) }
.nav-drop-menu a:hover{ background:rgba(124,92,255,.14); color:#fff }

/* hamburger */
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:.4rem; margin-left:auto }
.nav-toggle span{ width:24px; height:2px; background:var(--txt); border-radius:2px; transition:.3s }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* =====================================================================
   SECTIONS / HEADINGS
   ===================================================================== */
.site-main{ padding-bottom:4rem }
.hero{ padding:3.4rem 0 1.4rem }
.hero-title{ font-size:clamp(2.1rem,5vw,3.6rem); font-weight:800 }
.hero-title .grad{ background:linear-gradient(90deg,var(--violet-2),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-sub{ color:var(--txt-dim); max-width:62ch; margin-top:.8rem; font-size:1.06rem }

.section-head{ margin:2.4rem 0 1.1rem }
.section-head.row{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.section-head h2{ font-size:clamp(1.3rem,2.5vw,1.7rem) }
.section-sub{ color:var(--txt-mute); margin-top:.3rem }
.view-all{ font-family:var(--font-m); font-size:.74rem; font-weight:600; letter-spacing:.04em;
  color:var(--cyan); white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; line-height:1;
  padding:.46rem .9rem; border-radius:999px; border:1px solid transparent;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
             linear-gradient(90deg,var(--violet),var(--cyan)) border-box;
  box-shadow:0 0 0 0 rgba(34,211,238,0);
  transition:transform .2s, box-shadow .25s, color .2s, background .25s }
.view-all::after{ content:"\2192"; font-size:1em; transition:transform .25s }
.view-all:hover{ color:#fff;
  background:linear-gradient(90deg,rgba(124,92,255,.22),rgba(34,211,238,.22)) padding-box,
             linear-gradient(90deg,var(--violet),var(--cyan)) border-box;
  box-shadow:0 0 18px -4px var(--cyan), 0 0 30px -10px var(--violet);
  transform:translateY(-1px) }
.view-all:hover::after{ transform:translateX(4px) }
.view-all:active{ transform:translateY(0) }
.view-all:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }

/* =====================================================================
   INTERACTIVE TOOLS
   ===================================================================== */
.tools-layout{ display:flex; align-items:center; gap:1.5rem }
.tools-mascot{ flex:0 0 300px; max-width:300px; align-self:stretch; display:flex; align-items:flex-end; justify-content:center; pointer-events:none }
.tools-mascot img{ width:100%; height:auto; max-height:400px; object-fit:contain; filter:drop-shadow(0 14px 46px rgba(124,92,255,.45)) }
.tools-layout > .tools-grid{ flex:1 1 auto; min-width:0 }
.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
@media (max-width:860px){ .tools-layout{ flex-direction:column } .tools-mascot{ flex:none; max-width:190px } }
.tool-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem; backdrop-filter:blur(14px); position:relative; overflow:hidden;
}
.tool-box::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(124,92,255,.5),transparent 40%,rgba(34,211,238,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.tool-icon{ font-size:1.8rem; margin-bottom:.5rem }
.tool-box h3{ font-size:1.18rem }
.tool-box > p{ color:var(--txt-dim); font-size:.92rem; margin:.5rem 0 1rem }
.tool-form{ display:flex; flex-direction:column; gap:.7rem }
.tool-input{
  width:100%; padding:.7rem .9rem; background:rgba(10,7,18,.6); color:var(--txt);
  border:1px solid var(--border-2); border-radius:var(--radius-sm); font-family:var(--font-b);
  font-size:.92rem;
}
.tool-input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,92,255,.18) }
.file-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  border:1.5px dashed var(--border-2); border-radius:var(--radius-sm); padding:1.3rem;
  text-align:center; cursor:pointer; color:var(--txt-dim); transition:.2s;
}
.file-drop:hover, .file-drop.drag{ border-color:var(--violet); background:rgba(124,92,255,.08); color:var(--txt) }
.file-drop-text u{ color:var(--cyan) }
.file-drop-name{ font-family:var(--font-m); font-size:.78rem; color:var(--cyan) }
.color-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.color-grid label{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:.85rem; color:var(--txt-dim); background:rgba(10,7,18,.5);
  padding:.45rem .65rem; border-radius:var(--radius-sm); border:1px solid var(--border) }
.color-grid input[type=color]{ width:34px; height:26px; border:0; border-radius:6px; background:none; cursor:pointer }
.tool-result{ font-size:.88rem; padding:.7rem .9rem; border-radius:var(--radius-sm);
  background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.3) }
.tool-result.err{ background:rgba(255,45,111,.1); border-color:rgba(255,45,111,.35); color:#ffb3c9 }
.tool-result a{ color:var(--cyan); font-weight:700 }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-b); font-weight:700; font-size:.95rem; padding:.8rem 1.2rem;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition:transform .15s, filter .2s, box-shadow .2s; width:100% }
.btn:active{ transform:translateY(1px) }
.btn-primary{ color:#fff; background:linear-gradient(90deg,var(--violet),var(--violet-2)); box-shadow:var(--glow-v) }
.btn-primary:hover{ filter:brightness(1.1) }
.btn-primary:disabled{ opacity:.6; cursor:wait; filter:grayscale(.3) }
.btn-ghost{ background:rgba(124,92,255,.08); border-color:var(--border-2); color:var(--txt) }
.btn-ghost:hover{ background:rgba(124,92,255,.16) }
.btn-download{ color:#fff; background:#7c3aed;
  font-size:1.05rem; box-shadow:0 8px 30px -8px rgba(124,58,237,.55) }
.btn-download:hover{ filter:brightness(1.06) }
.btn-download.counting{ background:linear-gradient(90deg,#3a3358,#2c2748); color:var(--txt-dim); cursor:wait; box-shadow:none }
.btn-download.ready{ animation:ready-pop .4s ease }
@keyframes ready-pop{ 0%{transform:scale(.96)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }
.btn-chrome{ color:#fff; background:#7c3aed; box-shadow:0 8px 30px -8px rgba(124,58,237,.55) }

/* =====================================================================
   CARD GRID + HOVER-TO-PLAY
   ===================================================================== */
.card-grid{ display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill, minmax(252px, 1fr)) }
/* Top-10 only: force an even 5-per-row layout (10 items = 2 tidy rows) */
.card-grid--five{ grid-template-columns:repeat(5, 1fr) }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s }
.card:hover{ transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow) }
.card-media{ display:block; position:relative }
.ratio-16x9{ position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden }
.card-thumb,.card-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.card-thumb--empty{ background:linear-gradient(135deg,#1a1330,#0f0a1c) }
.card-video{ opacity:0; transition:opacity .35s }
.card.playing .card-video{ opacity:1 }
.card.playing .card-thumb{ opacity:0; transition:opacity .35s }
.play-pill{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:rgba(10,7,18,.55); backdrop-filter:blur(6px); color:#fff; font-size:.85rem;
  border:1px solid rgba(255,255,255,.25); transition:opacity .3s }
.card.playing .play-pill{ opacity:0 }
.type-pill.type-cat{ top:auto; bottom:.55rem; background:rgba(10,7,18,.78); color:#fff; border:1px solid rgba(255,255,255,.18) }
.type-pill{ position:absolute; top:.55rem; left:.55rem; z-index:2; font-family:var(--font-m);
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.2rem .5rem; border-radius:6px; background:rgba(10,7,18,.6); color:var(--txt-dim);
  backdrop-filter:blur(6px); border:1px solid var(--border) }
.type-pill.type-hybrid{ color:#fff; border-color:rgba(255,207,92,.4) }
.type-pill.type-extension{ color:#7ab0ff; border-color:rgba(66,133,244,.4) }
.type-pill.type-cursor{ color:#fff; border-color:rgba(34,211,238,.4) }
.card-foot{ padding:.75rem .9rem .9rem }
.card-title{ font-weight:600; font-size:.96rem; line-height:1.3; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em }
.card-title:hover{ color:var(--violet-2) }
.card-meta{ display:flex; align-items:center; gap:.7rem; margin-top:.55rem;
  font-family:var(--font-m); font-size:.74rem; color:var(--txt-mute) }
.like-btn{ margin-left:auto; display:inline-flex; align-items:center; gap:.32rem;
  background:none; border:0; color:var(--txt-mute); cursor:pointer; font-family:var(--font-b);
  font-size:.78rem; transition:color .2s, transform .1s }
.like-btn .like-ico{ font-size:1rem; line-height:1 }
.like-btn:hover{ color:var(--pink) }
.like-btn.is-liked{ color:var(--pink) }
.like-btn:active{ transform:scale(.92) }

/* =====================================================================
   POST PAGE
   ===================================================================== */
.post{ padding-top:1.4rem }
.crumbs{ font-size:.82rem; color:var(--txt-mute); display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:1rem }
.crumbs a:hover{ color:var(--cyan) }
.crumb-current{ color:var(--txt-dim) }
.post-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:1.6rem; align-items:start }
.player{ position:relative; border-radius:var(--radius); overflow:hidden; background:#000;
  border:1px solid var(--border-2); box-shadow:var(--shadow); aspect-ratio:16/9 }
.player-video{ width:100%; height:100%; object-fit:cover }
.player-controls{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center;
  gap:.7rem; padding:.7rem .9rem; background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);
  opacity:0; transition:opacity .25s }
.player:hover .player-controls{ opacity:1 }
.pc-btn{ background:none; border:0; color:#fff; cursor:pointer; font-size:.95rem }
.pc-track{ flex:1; height:4px; background:rgba(255,255,255,.25); border-radius:4px; cursor:pointer }
.pc-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:4px }
.cursor-showcase{ border-radius:var(--radius); border:1px solid var(--border-2); overflow:hidden;
  background:var(--bg-2); text-align:center; padding:1rem }
.cursor-hero{ margin-inline:auto; max-height:420px; width:auto }
.cursor-preview-note{ color:var(--txt-mute); font-size:.82rem; margin-top:.6rem }
.post-content{ margin-top:1.4rem; color:var(--txt-dim); line-height:1.75 }
.post-content img{ border-radius:12px; margin:1rem 0 }
.post-content h2{ color:var(--txt); margin:1.4rem 0 .6rem; font-size:1.3rem }
.post-content a{ color:var(--cyan) }

.post-side{ display:flex; flex-direction:column; gap:1.1rem }
.side-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem }
.post-title{ font-size:1.5rem; line-height:1.15 }
.post-stats{ display:flex; gap:1rem; margin:.7rem 0; font-family:var(--font-m); font-size:.78rem; color:var(--txt-mute) }
.post-desc{ color:var(--txt-dim); font-size:.92rem; margin-bottom:1.1rem }
.dl-engine{ margin:.4rem 0 .8rem }
.dl-sub{ text-align:center; font-family:var(--font-m); font-size:.78rem; color:var(--txt-dim); margin-top:.5rem }
.like-btn--lg{ width:100%; justify-content:center; gap:.45rem; font-size:.95rem; padding:.7rem .9rem;
  margin-left:0; border:1px solid var(--border-2); border-radius:12px; color:var(--txt);
  background:rgba(255,255,255,.03) }
.like-btn--lg:hover{ border-color:var(--pink); background:rgba(255,45,111,.08); color:var(--pink) }
.like-btn--lg.is-liked{ border-color:var(--pink); background:rgba(255,45,111,.12); color:var(--pink) }
.like-btn--lg .like-ico{ font-size:1.15rem }
.like-btn--lg .like-count{ opacity:.8; font-size:.85rem }

/* Social share (post sidebar) */
.share-box{ margin-top:1rem; padding:.9rem 1rem; border:1px solid var(--border-2); border-radius:14px; background:var(--surface-2) }
.share-label{ display:block; font-family:var(--font-d); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-mute); margin-bottom:.6rem }
.share-row{ display:flex; gap:.5rem }
.share-btn{ flex:1; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-weight:700; font-size:1rem; color:#fff; text-decoration:none; transition:transform .12s, filter .2s }
.share-btn:hover{ transform:translateY(-2px); filter:brightness(1.12) }
.share-fb{ background:#1877f2 } .share-x{ background:#000; border:1px solid #333 }
.share-pin{ background:#e60023 } .share-rd{ background:#ff4500 }
.chrome-box{ background:var(--surface); border:1px solid rgba(66,133,244,.35); border-radius:var(--radius); padding:1.1rem }
.chrome-box-head{ display:flex; gap:.7rem; align-items:center; margin-bottom:.8rem }
.chrome-glyph{ font-size:1.6rem }
.chrome-box-head small{ display:block; color:var(--txt-mute); font-size:.74rem }
.related{ margin-top:2.6rem }

/* rank ribbons (Top 10) */
.rank-wrap{ position:relative }
.rank-wrap::before{ content:attr(data-rank); position:absolute; z-index:3; top:-8px; left:-8px;
  font-family:var(--font-d); font-weight:800; font-size:1.1rem; color:#fff;
  background:linear-gradient(135deg,var(--pink),#ff7a45); width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; box-shadow:0 6px 18px -4px var(--pink) }

/* =====================================================================
   ADS (CLS-safe)
   ===================================================================== */
.ad-slot{ display:flex; align-items:center; justify-content:center; margin:1.6rem 0;
  background:repeating-linear-gradient(45deg,rgba(124,92,255,.04),rgba(124,92,255,.04) 12px,transparent 12px,transparent 24px);
  border:1px dashed var(--border); border-radius:var(--radius-sm) }
.ad-label{ font-family:var(--font-m); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-mute) }
.ad-anchor{ margin:1.6rem 0 0 }

/* ---------------------------------------------------------------------
   AD SAFETY GUARDS — an ad unit must never dim, cover, or break the page.
   The destructive case was a fixed, opaque, unbounded anchor container that
   ballooned when a tall ad was injected. These rules keep every slot in the
   normal document flow so content stays 100% visible and interactive.
   --------------------------------------------------------------------- */
.ad-slot{ position:static !important; max-width:100%; }
/* Sidebar slot: force a narrow, tall box so Ezoic serves a VERTICAL unit
   (300x600 / 160x600) instead of a wide rectangle. Wide formats (336/728)
   can't fit a 300px box, so the auction picks a vertical fill. */
.ad-slot.ad-sidebar{ width:300px; max-width:300px; min-height:600px;
  margin-left:auto; margin-right:auto; align-items:flex-start; }
.ad-slot.ad-sidebar > div{ width:300px; }
@media (max-width:980px){ .ad-slot.ad-sidebar{ width:100%; max-width:100%; } }
/* If a slot ever gets a tall injected ad, it grows the page (in-flow) —
   it can never overlay content. No opaque full-bleed backgrounds, no blur. */

/* =====================================================================
   FEED / INFINITE SCROLL
   ===================================================================== */
.feed-sentinel{ height:1px }
.feed-loader{ display:flex; align-items:center; justify-content:center; gap:.6rem; padding:2rem;
  color:var(--txt-dim); font-family:var(--font-m); font-size:.85rem }
.spinner{ width:18px; height:18px; border:2px solid var(--border-2); border-top-color:var(--violet);
  border-radius:50%; animation:spin .8s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* =====================================================================
   DOC / STATIC PAGES
   ===================================================================== */
.doc-page{ max-width:760px; padding:2.4rem 0 1rem }
.doc-page h1{ font-size:2rem; margin-bottom:1rem }
.doc-page h2{ font-size:1.3rem; margin:1.8rem 0 .6rem; color:var(--txt) }
.doc-page p,.doc-page li{ color:var(--txt-dim) }
.doc-page ul,.doc-page ol{ padding-left:1.3rem }
.doc-page code{ font-family:var(--font-m); background:rgba(124,92,255,.12); padding:.1rem .4rem; border-radius:6px; color:var(--cyan) }
.contact-form{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.2rem }
.contact-form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.88rem; color:var(--txt-dim) }
.contact-form input,.contact-form textarea{ padding:.7rem .9rem; background:rgba(10,7,18,.6);
  border:1px solid var(--border-2); border-radius:var(--radius-sm); color:var(--txt); font-family:var(--font-b); font-size:.95rem }
.contact-form input:focus,.contact-form textarea:focus{ outline:none; border-color:var(--violet) }
.contact-form .btn{ width:auto; align-self:flex-start; padding-inline:2rem }
.alert{ padding:.8rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.92rem }
.alert-ok{ background:rgba(52,226,164,.12); border:1px solid rgba(52,226,164,.35); color:#9ff0d0 }
.error-page{ text-align:center; padding-top:4rem }
.error-code{ font-family:var(--font-d); font-weight:800; font-size:6rem; line-height:1;
  background:linear-gradient(90deg,var(--violet),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent }
.error-page .btn{ width:auto; display:inline-flex; margin-top:1rem }
.empty-state{ text-align:center; padding:3rem 0; color:var(--txt-dim) }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ border-top:1px solid var(--border); margin-top:3rem; padding-top:2.4rem;
  background:linear-gradient(180deg,transparent,rgba(124,92,255,.04)) }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3.5rem; padding-bottom:2rem; align-items:start }
.foot-brand p{ color:var(--txt-mute); font-size:.9rem; margin-top:.7rem; max-width:none }
.foot-col{ display:flex; flex-direction:column; gap:.6rem; min-width:160px }
.foot-col h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-mute); margin-bottom:.3rem }
.foot-col a{ color:var(--txt-dim); font-size:.92rem }
.foot-col a:hover{ color:var(--cyan) }
.foot-bottom{ border-top:1px solid var(--border); padding:1.2rem 0; color:var(--txt-mute); font-size:.82rem }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .post-layout{ grid-template-columns:1fr }
  .post-side{ position:static }
}
@media (max-width:760px){
  .tools-grid{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr 1fr }
  .nav-toggle{ display:flex }
  .nav-links{
    position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:.2rem; padding:1rem 1.2rem 1.6rem; margin:0;
    background:rgba(12,8,22,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border); transform:translateY(-120%);
    transition:transform .3s ease; max-height:calc(100vh - 66px); overflow:auto;
  }
  .nav-links.open{ transform:translateY(0) }
  .nav-links > a, .nav-drop-toggle{ width:100%; padding:.8rem .6rem }
  .nav-dropdown{ width:100% }
  .nav-drop-menu{ position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:rgba(124,92,255,.05); margin-top:.3rem }
  .ad-anchor{ margin:1.2rem 0 0 }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr }
  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) }
  .card-grid--five{ grid-template-columns:repeat(2,1fr) }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* =====================================================================
   GAME EMBED (cloudarcade_game type)
   ===================================================================== */
.game-frame{ position:relative; width:100%; padding-top:var(--game-ratio,56.25%);
  border-radius:var(--radius); overflow:hidden; background:#000;
  border:1px solid var(--border-2); box-shadow:var(--shadow); max-height:78vh }
.game-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity .3s }
.game-frame iframe.live{ opacity:1 }
.game-cover{ position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:linear-gradient(160deg,#140d28,#0a0712) }
.game-cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5 }
.game-play{ position:relative; z-index:3; width:auto; padding:.9rem 2.2rem; font-size:1.1rem }
.type-pill.type-game{ color:#9d7bff; border-color:rgba(124,92,255,.45) }

/* =====================================================================
   STATIC (4K) IMAGE WALLPAPER
   ===================================================================== */
.image-showcase{ border-radius:var(--radius); border:1px solid var(--border-2); overflow:hidden;
  background:var(--bg-2); box-shadow:var(--shadow) }
.image-hero{ width:100%; height:auto; display:block; max-height:80vh; object-fit:contain; background:#000 }
.image-res-note{ font-family:var(--font-m); font-size:.78rem; color:var(--txt-mute);
  padding:.6rem .9rem; text-align:center; border-top:1px solid var(--border) }
.type-pill.type-image{ color:#7ef0c0; border-color:rgba(52,226,164,.4) }

/* ===== Footer redesign (wide brand + company) ===== */
.footer-grid{ grid-template-columns: minmax(0,1fr) auto; gap: 3rem; }
.foot-brand--wide{ max-width: 760px; }
.foot-brand--wide p{ color: var(--txt-dim); font-size: .9rem; line-height: 1.6; margin:.6rem 0; }
.foot-brand--wide .foot-lede{ color: var(--txt); }
.foot-brand--wide .foot-head{ color: var(--cyan); font-weight:600; font-size:.95rem; margin-top:1rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; gap:1.6rem; } }

/* ===== Category archive breathing room (Section 1.5) ===== */
.cat-head{ padding-top: 3.25rem; padding-bottom: 1.5rem; }
.cat-head h1{ margin-bottom:.35rem; }
.cat-head + .wrap{ margin-top: 1rem; }
.stream{ margin-top: 1.75rem; }

/* ===== Category hub (/category) ===== */
.cat-hub-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.cat-hub-card{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.25rem; color:var(--txt); font-weight:600; transition:.15s; }
.cat-hub-card:hover{ border-color:var(--violet); transform:translateY(-2px); box-shadow:var(--shadow); }
.cat-hub-card .count{ font-family:var(--font-m); font-size:.78rem; color:var(--txt-mute); font-weight:500; }

/* ===== Chrome Web Store icon on Add-to-Chrome button ===== */
.btn .cws-ico{ width:1.05em; height:1.05em; vertical-align:-2px; margin-right:.45rem; }

/* Self-hosted game ad-free badge */
.game-adfree{ display:inline-block; margin-top:.6rem; font-family:var(--font-m); font-size:.74rem;
  color:#7ef0c0; background:rgba(52,226,164,.12); border:1px solid rgba(52,226,164,.4);
  padding:.25rem .6rem; border-radius:999px; }

/* ===== Admin content list / toolbar / pager (#16) ===== */
a.stat-chip{ text-decoration:none; transition:.15s }
a.stat-chip:hover{ border-color:var(--violet); color:var(--txt) }
.stat-chip.is-active{ background:rgba(124,92,255,.18); color:#fff; border-color:var(--violet) }
.admin-toolbar{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:.4rem 0 1rem }
.admin-search{ flex:1; min-width:200px; padding:.6rem .9rem; background:rgba(10,7,18,.6);
  border:1px solid var(--border-2); border-radius:var(--radius-sm); color:var(--txt); font-family:var(--font-b) }
.admin-toolbar select{ padding:.6rem .8rem; background:rgba(10,7,18,.6); border:1px solid var(--border-2);
  border-radius:var(--radius-sm); color:var(--txt) }
.row-act{ font-size:.78rem; padding:.25rem .55rem; border-radius:7px; border:1px solid var(--border-2);
  color:var(--txt-dim); background:none; cursor:pointer; text-decoration:none; margin-right:.25rem }
.row-act:hover{ border-color:var(--cyan); color:var(--cyan) }
.row-del{ color:#ff7a9c } .row-del:hover{ border-color:#ff2d6f; color:#ff2d6f }
.admin-pager{ display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.2rem 0 }
.admin-pager a{ padding:.45rem .9rem; border:1px solid var(--border-2); border-radius:8px; color:var(--txt-dim); text-decoration:none }
.admin-pager a:hover{ border-color:var(--violet); color:var(--txt) }
.admin-pager .is-disabled{ opacity:.4; padding:.45rem .9rem }
.admin-pager-info{ font-family:var(--font-m); font-size:.85rem; color:var(--txt-mute) }

/* ===== YOWGAMES block pagination (#10) ===== */
.yow-pager{ display:flex; align-items:flex-start; justify-content:center; gap:.55rem; margin:2.75rem 0 1.25rem; flex-wrap:wrap }
.yow-letters{ display:flex; gap:.5rem }
.yow-cell{ display:flex; flex-direction:column; align-items:center; gap:.4rem; text-decoration:none }
.yow-letter{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(124,92,255,.45); background:rgba(255,255,255,.02);
  font-family:var(--font-b); font-weight:800; font-size:1.02rem; color:var(--txt-dim);
  transition:transform .18s, border-color .18s, color .18s, box-shadow .18s }
.yow-cell:hover .yow-letter{ border-color:var(--violet); color:#fff; transform:translateY(-2px) }
.yow-num{ font-family:var(--font-m); font-size:.72rem; color:var(--txt-mute) }
.yow-cell.is-active .yow-letter{ border-color:transparent; color:#fff;
  background:radial-gradient(circle at 50% 38%, #c79bff, var(--violet));
  box-shadow:0 0 0 4px rgba(124,92,255,.18), 0 0 22px -2px var(--violet) }
.yow-cell.is-active .yow-num{ color:#fff }
.yow-cell.is-empty{ display:none }
.yow-arrow{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(124,92,255,.45); background:rgba(255,255,255,.02); color:var(--txt-dim);
  font-size:1.25rem; line-height:1; text-decoration:none; transition:border-color .18s, color .18s }
.yow-arrow:hover{ border-color:var(--cyan); color:var(--cyan) }
.yow-arrow.is-disabled{ opacity:.3; pointer-events:none }
.ad-incontent-grid{ grid-column:1 / -1 }

/* Admin Ezoic switches */
.ez-switch{ display:flex; align-items:center; gap:.6rem; padding:.5rem 0; color:var(--txt-dim); cursor:pointer }
.ez-switch input{ width:18px; height:18px; accent-color:var(--violet) }
.ez-switch span{ font-size:.92rem }
.alert{ padding:.7rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.9rem }
.alert-ok{ background:rgba(52,226,164,.12); border:1px solid rgba(52,226,164,.4); color:#7ef0c0 }

/* ===== Dedicated tool pages (#1 / #2) ===== */
.tool-hero{ text-align:center; padding:2.5rem 1rem 1rem; max-width:760px }
.tool-hero-icon{ font-size:2.6rem; margin-bottom:.4rem }
.tool-hero h1{ font-size:2rem; margin:.2rem 0 }
.tool-hero-sub{ color:var(--txt-dim); font-size:1.02rem; line-height:1.6 }
.tool-box--solo{ margin-top:.5rem }
.tool-cta{ display:flex; gap:.7rem; margin-top:1rem; flex-wrap:wrap }
.tool-steps{ margin:1.2rem 0 0; padding-left:1.2rem; color:var(--txt-dim); font-size:.9rem; line-height:1.7 }
.tool-steps code{ background:rgba(124,92,255,.14); padding:.05rem .35rem; border-radius:5px; font-family:var(--font-m); font-size:.82rem }
.explore-section{ margin-top:2.5rem }
.explore-cat{ margin-bottom:2rem }
.explore-cat-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.8rem }
.explore-cat-head h3{ font-size:1.15rem }
.explore-more{ font-family:var(--font-m); font-size:.8rem; color:var(--cyan); text-decoration:none }

/* THEMES featured corner badge (4K static posts) */
.image-showcase{ position:relative }
.featured-badge{ position:absolute; top:12px; right:12px; z-index:3;
  font-family:var(--font-m); font-size:.7rem; font-weight:700; letter-spacing:.08em;
  color:#0a0712; background:linear-gradient(135deg,#ffcf5c,#ff7a45);
  padding:.3rem .7rem; border-radius:999px; box-shadow:0 6px 16px -4px rgba(255,122,69,.6) }

/* Admin edit media fieldset */
.media-fs{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.2rem 1.2rem; margin:0 0 1rem }
.media-fs legend{ padding:0 .5rem; color:var(--txt-dim); font-size:.85rem }
.media-cur{ margin-bottom:.8rem }
.media-thumb{ height:80px; border-radius:8px; border:1px solid var(--border-2) }

/* Top-10 five-column responsive steps */
@media (max-width: 1200px){ .card-grid--five{ grid-template-columns:repeat(4,1fr) } }
@media (max-width: 900px){  .card-grid--five{ grid-template-columns:repeat(3,1fr) } }
@media (max-width: 600px){  .card-grid--five{ grid-template-columns:repeat(2,1fr) } }

/* Uploaded site logo (admin) */
.logo-img{ height:34px; width:auto; display:block; object-fit:contain }
.footer .logo-img{ height:30px }

/* ---- Navbar search (#7) ---------------------------------------------- */
.nav-search{ position:relative; display:flex; align-items:center; margin-right:.3rem }
.nav-search-ico{ position:absolute; left:.6rem; font-size:.85rem; opacity:.7; pointer-events:none }
.nav-search input{ width:170px; max-width:42vw; padding:.5rem .7rem .5rem 2rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--txt);
  font-size:.9rem; transition:border-color .15s, background .15s, width .2s }
.nav-search input::placeholder{ color:var(--txt-mute) }
.nav-search input:focus{ outline:none; width:230px; background:rgba(255,255,255,.09);
  border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,92,255,.18) }
@media (max-width:880px){ .nav-search{ width:100%; margin:.2rem 0 .4rem } .nav-search input{ width:100%; max-width:none } }

/* ---- Search results page form ---------------------------------------- */
.search-page-form{ position:relative; display:flex; gap:.5rem; align-items:center; max-width:560px }
.search-page-form .search-ico{ position:absolute; left:1rem; opacity:.6; pointer-events:none }
.search-page-form input{ flex:1; padding:.85rem 1rem .85rem 2.6rem; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--txt); font-size:1rem }
.search-page-form input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,92,255,.18) }
.search-page-form button{ padding:.85rem 1.3rem; border-radius:12px; border:0; cursor:pointer;
  background:#7c3aed; color:#fff; font-weight:600 }

/* Theme post: graceful placeholder when no featured image */
.image-hero--placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:300px; gap:.4rem; border-radius:14px;
  background:linear-gradient(135deg, rgba(124,92,255,.25), rgba(34,211,238,.12), rgba(255,45,111,.18));
  border:1px solid rgba(255,255,255,.1) }
.image-hero--placeholder span{ font-family:var(--font-d); font-size:1.4rem; font-weight:700; color:#fff }
.image-hero--placeholder small{ color:var(--txt-mute) }

/* =====================================================================
   OWHIT — light "dreamy cloud" theme overlay (owhit.com)
   Playful pastel reskin: lavender-cream canvas, soft rounded cards,
   Fredoka display + Nunito body, sky/violet/pink accents, cloud decor.
   Appended last so it re-themes the whole token-driven stylesheet.
   Toggle the moon for a dark variant ([data-theme="dark"]).
   ===================================================================== */
:root{
  --bg:#f1eefb; --bg-2:#ffffff;
  --surface:#ffffff; --surface-2:#faf8ff;
  --border:rgba(124,92,255,.14); --border-2:rgba(124,92,255,.26);
  --txt:#2c2750; --txt-dim:#6b6390; --txt-mute:#9b93b8;
  --violet:#8b6ff0; --violet-2:#a98bff; --cyan:#5ec8ff; --pink:#ff6faf; --gold:#ffcf5c;
  --radius:22px; --radius-sm:14px;
  --shadow:0 18px 40px -22px rgba(124,92,255,.45);
  --glow-v:0 10px 24px -10px rgba(139,111,240,.55);
  --font-d:"Fredoka", ui-rounded, system-ui, sans-serif;
  --font-b:"Nunito", ui-sans-serif, system-ui, sans-serif;
}
[data-theme="dark"]{
  --bg:#0a0712; --bg-2:#0f0a1c;
  --surface:rgba(24,18,40,.62); --surface-2:rgba(32,24,54,.7);
  --border:rgba(150,120,255,.16); --border-2:rgba(150,120,255,.3);
  --txt:#ECE8FB; --txt-dim:#9a90c0; --txt-mute:#6f668f;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);
}
body{ background:var(--bg); color:var(--txt); }
/* dreamy sky + soft clouds */
.bg-mesh{
  inset:0; height:100%;
  background:
    radial-gradient(60% 40% at 12% 0%, rgba(176,158,255,.30), transparent 60%),
    radial-gradient(50% 36% at 90% 4%, rgba(120,200,255,.26), transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(255,170,210,.18), transparent 60%),
    linear-gradient(180deg, #efeafc 0%, #f6f0fb 40%, #fdf6f3 100%);
  animation:none; filter:none;
}
[data-theme="dark"] .bg-mesh{ background:
  radial-gradient(40% 50% at 18% 12%, rgba(124,92,255,.22), transparent 70%),
  radial-gradient(45% 45% at 85% 8%, rgba(34,211,238,.16), transparent 70%),
  radial-gradient(50% 55% at 70% 80%, rgba(255,45,111,.10), transparent 70%), var(--bg); }
/* floating cloud puffs (decor) */
.bg-mesh::before,.bg-mesh::after{
  content:""; position:absolute; border-radius:100px;
  background:rgba(255,255,255,.85);
  box-shadow:0 30px 60px -30px rgba(124,92,255,.25);
  filter:blur(.3px);
}
.bg-mesh::before{ width:220px; height:70px; left:6%; top:24%;
  box-shadow:60px -18px 0 -6px rgba(255,255,255,.85), 130px 6px 0 -10px rgba(255,255,255,.8), 0 30px 60px -30px rgba(124,92,255,.25); }
.bg-mesh::after{ width:180px; height:60px; right:8%; top:42%;
  box-shadow:-50px -14px 0 -6px rgba(255,255,255,.8), -110px 4px 0 -10px rgba(255,255,255,.75); }
[data-theme="dark"] .bg-mesh::before,[data-theme="dark"] .bg-mesh::after{ display:none }

/* ---------- navbar ---------- */
.navbar{ background:rgba(255,255,255,.78); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(124,92,255,.1); box-shadow:0 8px 30px -22px rgba(124,92,255,.5); }
[data-theme="dark"] .navbar{ background:rgba(15,10,28,.7); }
.logo-text{ font-family:var(--font-d); font-weight:700; color:var(--txt); letter-spacing:-.01em }
.logo-mark{ color:var(--violet); filter:none; text-shadow:0 4px 10px rgba(139,111,240,.4) }
.nav-links > a, .nav-drop-toggle{ color:var(--txt-dim); font-family:var(--font-b); font-weight:700; border-radius:999px }
.nav-links > a:hover, .nav-drop-toggle:hover{ color:var(--violet); background:rgba(139,111,240,.1) }
.nav-links > a[aria-current="page"]{ color:var(--violet); position:relative }
.nav-links > a[aria-current="page"]::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:.18rem; width:18px; height:3px; border-radius:3px; background:var(--violet) }
.nav-search input{ background:#f3f0fb; border:1px solid rgba(124,92,255,.16); color:var(--txt); border-radius:999px }
[data-theme="dark"] .nav-search input{ background:rgba(124,92,255,.1); color:var(--txt) }
.nav-search input::placeholder{ color:var(--txt-mute) }
.nav-drop-menu{ background:#fff; border:1px solid rgba(124,92,255,.14); box-shadow:var(--shadow); border-radius:16px }
[data-theme="dark"] .nav-drop-menu{ background:#15102a }
.nav-drop-menu a{ color:var(--txt-dim) } .nav-drop-menu a:hover{ color:var(--violet); background:rgba(139,111,240,.08) }
.badge-hot{ background:linear-gradient(90deg,#ff6faf,#ff8a5c); box-shadow:0 6px 14px -4px rgba(255,111,175,.6) }
/* theme toggle + avatar */
.nav-extra{ display:flex; align-items:center; gap:.5rem; margin-left:.4rem }
.theme-toggle{ display:inline-flex; align-items:center; gap:.2rem; cursor:pointer; border:1px solid rgba(124,92,255,.18);
  background:#fff; border-radius:999px; padding:.3rem .5rem; color:var(--gold); font-size:.95rem; line-height:1 }
[data-theme="dark"] .theme-toggle{ background:rgba(124,92,255,.12); color:#cdb6ff }
.theme-toggle:hover{ box-shadow:0 6px 16px -6px rgba(139,111,240,.5) }
.theme-toggle .moon{ opacity:.4 } [data-theme="dark"] .theme-toggle .sun{ opacity:.4 } [data-theme="dark"] .theme-toggle .moon{ opacity:1 }
.nav-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 6px 16px -6px rgba(139,111,240,.6); background:linear-gradient(135deg,#b9a3ff,#8b6ff0) }

/* ---------- hero ---------- */
.hero{ padding-top:2.4rem }
.hero-title{ font-family:var(--font-d); font-weight:700; color:var(--txt); letter-spacing:-.01em; line-height:1.04 }
.hero-title .grad, .hero-title .g-violet, .hero-title .g-pink{ -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:initial; color:inherit }
.g-violet{ color:var(--violet) } .g-pink{ color:var(--pink) }
.hero-sub{ color:var(--txt-dim); font-weight:600 }
.hero-cta{ margin-top:1.5rem; display:flex; gap:.8rem; flex-wrap:wrap }
.btn-explore{ font-family:var(--font-d); font-weight:600; font-size:1rem; color:#fff;
  background:linear-gradient(120deg,#a98bff,#8b6ff0); border:0; border-radius:999px;
  padding:.85rem 1.5rem; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(139,111,240,.7); transition:transform .2s, box-shadow .25s }
.btn-explore .arr{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.25); transition:transform .25s }
.btn-explore:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -10px rgba(139,111,240,.8) }
.btn-explore:hover .arr{ transform:translateX(3px) }

/* ---------- feature (tool) cards ---------- */
.tools-mascot img{ filter:drop-shadow(0 24px 40px rgba(139,111,240,.35)) }
.tool-box{ background:#fff; border:1px solid rgba(124,92,255,.12); border-radius:var(--radius);
  box-shadow:0 20px 40px -26px rgba(124,92,255,.5); padding:1.4rem 1.5rem; position:relative; overflow:visible;
  display:grid; grid-template-columns:auto 1fr; gap:1rem 1.1rem; align-items:start }
[data-theme="dark"] .tool-box{ background:var(--surface) }
.tool-box::before{ display:none }
.tool-icon{ grid-row:1 / span 3; width:74px; height:74px; border-radius:18px; display:grid; place-items:center;
  font-size:2rem; margin:0; background:linear-gradient(135deg,rgba(168,139,255,.22),rgba(94,200,255,.18)) }
#themeBuilder .tool-icon{ background:linear-gradient(135deg,rgba(255,111,175,.22),rgba(255,170,120,.18)) }
.tool-box h3{ font-family:var(--font-d); color:var(--txt); font-size:1.18rem; display:flex; align-items:center; gap:.55rem }
.tool-box p{ color:var(--txt-dim); font-weight:600; margin:.15rem 0 0 }
.tool-cta{ margin-top:.9rem; display:flex; gap:.6rem; align-items:center }
.badge-new{ font-family:var(--font-b); font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:linear-gradient(90deg,#ff6faf,#a98bff); padding:.18rem .5rem; border-radius:999px }

/* ---------- buttons ---------- */
.btn{ border-radius:999px; font-family:var(--font-d); font-weight:600 }
.btn-primary{ color:#fff; background:linear-gradient(120deg,#a98bff,#8b6ff0); box-shadow:0 12px 26px -10px rgba(139,111,240,.7); border:0 }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 34px -10px rgba(139,111,240,.85) }
.btn-ghost{ background:#f3f0fb; color:var(--violet); border:1px solid rgba(124,92,255,.18) }
[data-theme="dark"] .btn-ghost{ background:rgba(124,92,255,.1) }
.btn-ghost:hover{ background:#ece6fb }
.btn-download,.btn-chrome{ border-radius:999px; font-family:var(--font-d) }

/* ---------- section headers + view all ---------- */
.section-head h2{ font-family:var(--font-d); color:var(--txt) }
.view-all{ background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#a98bff,#5ec8ff) border-box;
  color:var(--violet); font-family:var(--font-d); font-weight:600 }
[data-theme="dark"] .view-all{ background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, linear-gradient(120deg,#a98bff,#5ec8ff) border-box }
.view-all:hover{ color:var(--violet); background:linear-gradient(120deg,rgba(169,139,255,.16),rgba(94,200,255,.16)) padding-box, linear-gradient(120deg,#a98bff,#5ec8ff) border-box; box-shadow:0 10px 22px -10px rgba(139,111,240,.6) }

/* ---------- cards ---------- */
.card{ background:#fff; border:1px solid rgba(124,92,255,.1); border-radius:var(--radius);
  box-shadow:0 18px 36px -26px rgba(124,92,255,.55) }
[data-theme="dark"] .card{ background:var(--surface) }
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 46px -22px rgba(139,111,240,.6); border-color:rgba(124,92,255,.2) }
.card-title{ font-family:var(--font-b); font-weight:800; color:var(--txt) }
.card-title:hover{ color:var(--violet) }
.card-meta{ color:var(--txt-mute); font-weight:700 }
.card-thumb--empty{ background:linear-gradient(135deg,#efeafc,#fdeef6) }
.play-pill,.card .play-pill{ background:rgba(255,255,255,.85); color:var(--violet) }

/* ---------- trust badges ---------- */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.4rem 0 1rem }
.trust-item{ display:flex; align-items:center; gap:.8rem }
.trust-ico{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:1.3rem; flex:0 0 auto;
  background:linear-gradient(135deg,rgba(168,139,255,.2),rgba(94,200,255,.16)); color:var(--violet) }
.trust-item:nth-child(2) .trust-ico{ background:linear-gradient(135deg,rgba(94,200,255,.2),rgba(139,111,240,.16)) }
.trust-item:nth-child(3) .trust-ico{ background:linear-gradient(135deg,rgba(255,207,92,.28),rgba(255,170,120,.18)); color:#e9a200 }
.trust-item:nth-child(4) .trust-ico{ background:linear-gradient(135deg,rgba(255,111,175,.22),rgba(169,139,255,.16)); color:var(--pink) }
.trust-item b{ font-family:var(--font-d); color:var(--txt); display:block; font-size:.98rem }
.trust-item span{ color:var(--txt-mute); font-size:.82rem; font-weight:600 }
@media (max-width:760px){ .trust{ grid-template-columns:repeat(2,1fr) } }

/* ---------- footer ---------- */
.footer{ background:#fff; border-top:1px solid rgba(124,92,255,.1) }
[data-theme="dark"] .footer{ background:#0c0818 }
.foot-col h4{ font-family:var(--font-d); color:var(--txt) }
.foot-col a{ color:var(--txt-dim) } .foot-col a:hover{ color:var(--violet) }
.foot-brand p,.foot-bottom{ color:var(--txt-mute) }

/* OWHIT — hero two-column + feature grid (reference layout) */
.hero{ display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:1.6rem; padding:2.6rem 0 1rem }
.hero-copy{ max-width:none }
.hero-art{ display:flex; align-items:center; justify-content:center }
.hero-art img{ width:100%; max-width:520px; height:auto; filter:drop-shadow(0 26px 44px rgba(139,111,240,.4)) }
.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:center; gap:1rem }
  .hero-cta{ justify-content:center }
  .hero-art{ order:-1 } .hero-art img{ max-width:340px }
  .tools-grid{ grid-template-columns:1fr }
}

/* =====================================================================
   OWHIT — refinement pass (reference-accurate): colored hero words,
   dreamy cloud+star sky, SVG icons, single-CTA cards, mascot framing.
   ===================================================================== */
/* 1) hero coloured words (fix specificity so they actually colour) */
.hero-title{ font-size:clamp(2.3rem,4.6vw,3.5rem); font-weight:700; letter-spacing:-.015em }
html .hero-title .g-violet{ color:var(--violet); -webkit-text-fill-color:var(--violet) }
html .hero-title .g-pink{ color:var(--pink); -webkit-text-fill-color:var(--pink) }

/* 2) dreamy sky — clouds + scattered stars */
.bg-mesh{
  background:
    radial-gradient(70px 30px at 9% 20%, #fff 0 55%, transparent 72%),
    radial-gradient(95px 38px at 22% 12%, #fff 0 55%, transparent 72%),
    radial-gradient(60px 26px at 38% 26%, #ffffffd0 0 55%, transparent 72%),
    radial-gradient(110px 42px at 73% 10%, #fff 0 55%, transparent 72%),
    radial-gradient(80px 32px at 90% 22%, #ffffffe0 0 55%, transparent 72%),
    radial-gradient(90px 36px at 6% 62%, #ffffffcc 0 55%, transparent 72%),
    radial-gradient(120px 46px at 94% 70%, #fff 0 55%, transparent 72%),
    radial-gradient(70px 28px at 50% 88%, #ffffffcc 0 55%, transparent 72%),
    radial-gradient(2.5px 2.5px at 16% 34%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 30% 60%, var(--violet-2) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 47% 16%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 62% 40%, var(--pink) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 80% 52%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 88% 36%, var(--violet-2) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 12% 78%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 68% 82%, var(--pink) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 40% 72%, var(--gold) 50%, transparent 60%),
    linear-gradient(180deg,#efeafc 0%,#f6f0fb 42%,#fdf6f3 100%);
  background-repeat:no-repeat;
}
[data-theme="dark"] .bg-mesh{ background:
  radial-gradient(40% 50% at 18% 12%, rgba(124,92,255,.22), transparent 70%),
  radial-gradient(45% 45% at 85% 8%, rgba(34,211,238,.16), transparent 70%),
  radial-gradient(50% 55% at 70% 80%, rgba(255,45,111,.10), transparent 70%), var(--bg); }
.bg-mesh::before,.bg-mesh::after{ display:none } /* old single puffs off; gradients handle it */

/* 3) SVG icons (replace emoji) */
.tool-icon{ color:var(--violet) }
#themeBuilder .tool-icon{ color:var(--pink) }
.tool-icon svg{ width:38px; height:38px }
.trust-ico svg{ width:24px; height:24px }

/* 4) single-CTA feature cards (reference: one pill + tiny link) */
.tool-cta{ flex-direction:column; align-items:stretch; gap:.45rem; margin-top:1rem }
.tool-cta .btn-primary{ width:100%; justify-content:center }
.tool-explore{ align-self:center; color:var(--violet); font-family:var(--font-d); font-weight:600; font-size:.9rem; text-decoration:none }
.tool-explore:hover{ text-decoration:underline }
.btn .arr,.btn-primary .arr{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.28); margin-left:.15rem; transition:transform .2s }
.btn-primary:hover .arr{ transform:translateX(3px) }

/* 5) mascot framing — blends whether art is transparent OR has a bg */
.hero-art{ position:relative }
.hero-art::before{ content:""; position:absolute; inset:6% 4%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(168,139,255,.34), rgba(255,170,210,.18) 60%, transparent 78%); z-index:0; filter:blur(6px) }
.hero-art img{ position:relative; z-index:1; width:100%; max-width:500px; height:auto;
  border-radius:28px; filter:drop-shadow(0 26px 44px rgba(139,111,240,.45)) }

/* OWHIT — nav search refinement (icon + Ctrl K badge) */
.nav-search{ position:relative }
.nav-search-ico{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--txt-mute); display:flex }
.nav-search input{ padding:.5rem 1rem .5rem 2.1rem; min-width:230px }
.nav-search-kbd{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-b); font-size:.66rem; font-weight:700; color:var(--txt-mute);
  background:#efeafc; border:1px solid rgba(124,92,255,.16); border-radius:7px; padding:.16rem .42rem; pointer-events:none }
[data-theme="dark"] .nav-search-kbd{ background:rgba(124,92,255,.14) }
@media (max-width:980px){ .nav-search-kbd{ display:none } }

/* =====================================================================
   OWHIT — reference-match pass 2: buttons, icons, hero illustration
   ===================================================================== */
/* Explore All = soft lavender pill + purple text + solid purple arrow */
.btn-explore{ background:#ece7fb; color:var(--violet); box-shadow:0 10px 22px -14px rgba(139,111,240,.6) }
[data-theme="dark"] .btn-explore{ background:rgba(124,92,255,.18); color:#cdb6ff }
.btn-explore:hover{ background:#e4ddfb; transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(139,111,240,.7) }
.btn-explore .arr{ background:var(--violet); color:#fff; width:28px; height:28px }

/* Feature buttons: compact, left-aligned; Theme Creator = pink */
.tool-cta{ flex-direction:row; align-items:center; justify-content:flex-start; gap:.6rem; margin-top:1rem }
.tool-cta .btn-primary{ width:auto; padding:.7rem 1.2rem }
.btn-pink{ background:linear-gradient(120deg,#ff8fc0,#ff5fa6) !important; box-shadow:0 12px 26px -10px rgba(255,95,166,.6) !important; color:#fff }
.btn-pink:hover{ box-shadow:0 18px 34px -10px rgba(255,95,166,.8) !important }

/* clean filled icons */
.tool-icon svg{ width:34px; height:34px }

/* hero illustration = the reference art, edge-faded so it blends seamlessly */
.hero-art::before{ display:none }
.hero-art{ overflow:visible }
.hero-art img{ max-width:580px; width:100%; border-radius:0; filter:none;
  -webkit-mask-image:radial-gradient(135% 118% at 50% 42%, #000 60%, transparent 100%);
          mask-image:radial-gradient(135% 118% at 50% 42%, #000 60%, transparent 100%) }
@media (max-width:900px){ .hero-art img{ max-width:380px } }

/* =====================================================================
   OWHIT — pass 3: image icons (cropped from reference) + full hero
   ===================================================================== */
.tool-icon img{ width:44px; height:44px; object-fit:contain; display:block }
/* hero = transparent reference illustration; large, blends, no rectangle */
.hero{ grid-template-columns:1fr 1.06fr; align-items:center }
.hero-art{ overflow:visible }
.hero-art img{ max-width:none; width:112%; margin-left:-6%; border-radius:0; filter:none;
  -webkit-mask-image:none; mask-image:none }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr }
  .hero-art img{ width:100%; max-width:440px; margin:0 auto }
}

/* =====================================================================
   OWHIT — pass 4: full-size hero banner (1430x520) with text overlaid
   on its transparent left, illustration on the right (reference layout).
   ===================================================================== */
.hero{ position:relative; display:block; grid-template-columns:none; padding:.5rem 0 .25rem; min-height:0 }
.hero-bg{ display:block; width:100%; max-width:1430px; height:auto; margin:0 auto; pointer-events:none; user-select:none }
.hero-copy{ position:absolute; left:2.2%; top:50%; transform:translateY(-50%); z-index:2; width:50%; max-width:600px; padding:0 }
@media (max-width:900px){
  .hero{ display:flex; flex-direction:column; gap:.5rem }
  .hero-copy{ position:static; transform:none; width:100%; max-width:none; text-align:center }
  .hero-cta{ justify-content:center }
  .hero-bg{ width:100%; max-width:480px }
}

/* =====================================================================
   OWHIT — pass 5: bg #fcf8fa, full-tile icons, type pills, section star,
   tighter/taller feature cards, no dark-mode, no avatar.
   ===================================================================== */
:root{ --bg:#fcf8fa; --gold:#ffc24d }
html, body{ background:#fcf8fa }
.bg-mesh{
  background:
    radial-gradient(70px 30px at 9% 20%, #fff 0 55%, transparent 72%),
    radial-gradient(95px 38px at 22% 12%, #fff 0 55%, transparent 72%),
    radial-gradient(60px 26px at 38% 26%, #ffffffd0 0 55%, transparent 72%),
    radial-gradient(110px 42px at 73% 10%, #fff 0 55%, transparent 72%),
    radial-gradient(80px 32px at 90% 22%, #ffffffe0 0 55%, transparent 72%),
    radial-gradient(90px 36px at 6% 62%, #ffffffcc 0 55%, transparent 72%),
    radial-gradient(120px 46px at 94% 70%, #fff 0 55%, transparent 72%),
    radial-gradient(70px 28px at 50% 90%, #ffffffcc 0 55%, transparent 72%),
    radial-gradient(2.5px 2.5px at 16% 34%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 30% 60%, var(--violet-2) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 47% 16%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 62% 40%, var(--pink) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 80% 52%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 88% 36%, var(--violet-2) 50%, transparent 60%),
    radial-gradient(2.5px 2.5px at 12% 78%, var(--gold) 50%, transparent 60%),
    radial-gradient(2px 2px at 68% 82%, var(--pink) 50%, transparent 60%),
    linear-gradient(180deg,#fbf4fa 0%,#fcf8fa 48%,#fff6fb 100%);
  background-repeat:no-repeat;
}

/* full-tile icons (cropped from reference, with their own pastel tile) */
.tool-icon{ width:64px; height:64px; background:none !important; box-shadow:none !important; padding:0; border-radius:18px; overflow:hidden; display:grid; place-items:center; flex:0 0 auto }
.tool-icon img{ width:100%; height:100%; object-fit:contain }

/* feature cards: narrower, taller, inset (reference) */
.tools{ }
.tools-grid{ max-width:920px; margin:1.4rem auto 0 0; gap:1.4rem }
.tool-box{ padding:1.5rem 1.6rem 1.6rem; min-height:172px }
@media (max-width:760px){ .tools-grid{ max-width:none; margin-inline:auto } }

/* type pills — colours/labels per reference */
.type-pill{ position:absolute; top:.6rem; left:.6rem; color:#fff;
  font-family:var(--font-b); font-weight:800; font-size:.6rem; letter-spacing:.05em;
  text-transform:uppercase; padding:.22rem .55rem; border-radius:999px; line-height:1;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.25) }
.type-pill.type-wallpaper{ background:linear-gradient(120deg,#ff6f93,#ff4d77) }
.type-pill.type-hybrid{ background:linear-gradient(120deg,#a98bff,#8b6ff0) }
.type-pill.type-theme{ background:linear-gradient(120deg,#5ec8ff,#36a9f4) }
.type-pill.type-cursor{ background:linear-gradient(120deg,#ffb15e,#ff8f3a) }
.type-pill.type-game{ background:linear-gradient(120deg,#7bd88f,#46bd64) }
.card-title{ color:var(--txt); font-family:var(--font-d); font-weight:600 }
.card-meta .meta{ color:var(--txt-mute) }

/* section title star (reference) */
.section-head h2 .sec-star{ color:var(--gold); margin-right:.45rem; font-size:.92em;
  text-shadow:0 2px 4px rgba(255,194,77,.4) }

/* dark mode fully disabled on this site */
[data-theme="dark"]{ }
.nav-extra, .theme-toggle, .nav-avatar{ display:none !important }

/* =====================================================================
   OWHIT — pass 6: cards 445x135 in the lower-left (reference), image
   icons crisp, copy top-aligned, soft star image, 3-line sub.
   ===================================================================== */
/* copy sits TOP-left over the banner (room for cards below) */
.hero-copy{ top:7% !important; transform:none !important }
.hero-sub{ max-width:none }

/* pull the two cards UP into the empty lower-left of the hero banner */
.tools{ position:relative; z-index:5; margin-top:max(-120px, -9vw) }
.tools-grid{ display:flex; flex-wrap:wrap; gap:30px; max-width:920px; margin:0 auto 0 0 }

/* fixed card size 445 x 135, both identical, compact internals */
.tool-box{ width:445px; height:135px; max-width:100%; padding:14px 18px; gap:0 14px;
  align-items:center; align-content:center; overflow:hidden }
.tool-icon{ grid-row:1 / span 3; width:56px; height:56px; border-radius:0;
  background:none !important; box-shadow:none !important; padding:0; place-self:center start }
.tool-icon img{ width:100%; height:100%; object-fit:contain }
.tool-box h3{ font-size:1rem; margin:0; line-height:1.1 }
.tool-box p{ font-size:.78rem; margin:.2rem 0 .45rem; line-height:1.25 }
.tool-cta{ margin-top:0 }
.tool-cta .btn-primary{ padding:.42rem .9rem; font-size:.82rem }
.tool-cta .btn-primary .arr{ width:20px; height:20px }

/* soft star image before section titles */
img.sec-star{ width:1.25em; height:1.25em; object-fit:contain; vertical-align:-0.26em; margin-right:.4rem; filter:drop-shadow(0 2px 3px rgba(255,170,60,.35)) }

@media (max-width:900px){
  .hero-copy{ top:auto !important }
  .tools{ margin-top:1rem }
  .tools-grid{ justify-content:center; margin-inline:auto }
}

/* =====================================================================
   OWHIT — pass 7: cards right-aligned (don't cover Explore All),
   star inline beside title (not wrapping under), clean star.
   ===================================================================== */
/* cards pushed to the RIGHT so they don't overlap the Explore All button */
.tools-grid{ margin:0 0 0 auto !important; justify-content:flex-end }

/* section title: star + text on ONE row, star BESIDE the name */
.section-head h2{ display:flex; align-items:center; gap:.45rem; flex-wrap:nowrap; white-space:nowrap }
.section-head.row{ flex-wrap:wrap }
img.sec-star{ display:block; width:1.1em; height:1.1em; flex:0 0 auto; margin:0;
  vertical-align:middle; filter:none; object-fit:contain }
.section-head h2 .badge-hot{ flex:0 0 auto }

@media (max-width:900px){
  .tools-grid{ margin-inline:auto !important; justify-content:center }
}

/* =====================================================================
   OWHIT — pass 8: icon tile = fixed SQUARE (no grid stretch), sized
   like the reference (~74px). Fixes the "tall/narrow" tile bug.
   ===================================================================== */
.tool-box{ align-items:center }
.tool-icon{
  grid-row:1 / span 3 !important;
  align-self:center !important;
  justify-self:start !important;
  width:82px !important;
  height:92px !important;
  aspect-ratio:auto;
  flex:0 0 82px;
  display:block !important;
  padding:0 !important;
  border-radius:16px;
  overflow:hidden;
  background:none !important;
  box-shadow:none !important;
}
.tool-icon img{
  width:82px !important;
  height:92px !important;
  object-fit:cover !important;
  display:block;
}

/* =====================================================================
   OWHIT — pass 9: un-trap the tool builder boxes from the homepage
   feature-card sizing (.tool-box is shared). Fixes Extension Builder.
   ===================================================================== */
.tool-box--solo{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  min-height:0 !important;
  overflow:visible !important;
  grid-template-columns:none !important;
  align-items:initial !important;
  padding:1.6rem !important;
}
.tool-box--solo .tool-form{ display:flex; flex-direction:column; gap:.7rem }
.tool-box--solo .tool-steps{ margin-top:1.2rem }

/* =====================================================================
   OWHIT — pass 10: input readability, big logo, nicer like, sidebar btns
   ===================================================================== */
/* 3) Extension Builder name field: white bg + dark text */
.tool-input{ background:#fff !important; color:#1a1330 !important; border:1px solid var(--border-2) }
.tool-input::placeholder{ color:#9b93b8 }

/* 4) site logo shown at uploaded size (~220x70), not tiny */
.logo-img{ height:70px !important; width:auto !important; max-width:260px; object-fit:contain }
.site-footer .logo-img{ height:42px !important }
.logo{ gap:.5rem }

/* 5) like control — nicer pink pill instead of plain text */
.like-btn{ background:rgba(255,111,175,.12); border:1px solid rgba(255,111,175,.3);
  border-radius:999px; padding:.24rem .6rem; color:#ff4f93; font-weight:700; font-size:.76rem }
.like-btn .like-ico{ font-size:.95rem }
.like-btn:hover{ background:rgba(255,111,175,.22); color:#ff2d86; transform:translateY(-1px) }
.like-btn.is-liked{ background:#ff5f9e; border-color:#ff5f9e; color:#fff }
.like-btn--lg{ background:rgba(255,111,175,.1) !important; border:1px solid rgba(255,111,175,.3) !important;
  color:#ff4f93 !important; font-weight:700 }
.like-btn--lg.is-liked{ background:#ff5f9e !important; color:#fff !important; border-color:#ff5f9e !important }

/* 6) sidebar Download Now + Add to Chrome buttons -> #9569d6 */
.btn-download{ background:#9569d6 !important; box-shadow:0 10px 30px -8px rgba(149,105,214,.55) !important }
.btn-chrome{ background:#9569d6 !important; box-shadow:0 10px 30px -8px rgba(149,105,214,.55) !important }
.btn-download:hover,.btn-chrome:hover{ filter:brightness(1.06) }

/* =====================================================================
   OWHIT — pass 11: Explore All clickable (tools overlay was eating
   clicks), footer logo = navbar size.
   ===================================================================== */
.hero-copy{ z-index:6 !important }
.hero-bg{ pointer-events:none }
/* the pulled-up tools section overlapped the hero; let clicks pass through
   its empty area, but keep the cards themselves interactive */
.tools{ pointer-events:none }
.tools-grid, .tool-box{ pointer-events:auto }

/* footer logo same size as navbar logo */
.site-footer .logo-img{ height:70px !important }

/* =====================================================================
   OWHIT — pass 12: make custom AdSense units actually fill.
   The flex+center .ad-slot collapsed the responsive <ins> to width:0
   (AdSense logs availableWidth=0 and shows nothing). Give it real width.
   ===================================================================== */
.ad-slot{ display:block; text-align:center; }
.ad-slot > .ad-label{ display:inline-block; }
.ad-slot ins.adsbygoogle{ display:block !important; width:100% !important; }
.ad-slot.ad-sidebar{ align-items:initial; }
.ad-slot.ad-sidebar ins.adsbygoogle{ width:300px !important; margin:0 auto; }