/* =====================================================================
   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:       1180px;
  --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:#fff; 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; aspect-ratio:1430/520; 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; }

/* =====================================================================
   CHROMEWALLPAPER — Google-style white theme overlay (chromewallpaper.com)
   Clean white canvas, Google Blue primary (#1a73e8), Material greys,
   pill category chips, blue Create CTA, red LIVE badges.
   Appended LAST so it overrides both the base neon theme and the OWHIT
   overlay above. Fonts: Inter (display + body) / JetBrains Mono (data).
   ===================================================================== */
:root{
  --bg:#ffffff; --bg-2:#f8f9fa;
  --surface:#ffffff; --surface-2:#f8f9fa;
  --border:#e8eaed; --border-2:#dadce0;
  --txt:#202124; --txt-dim:#5f6368; --txt-mute:#80868b;
  --violet:#1a73e8; --violet-2:#4285f4;   /* primary buttons ride these tokens */
  --cyan:#1a73e8;
  --pink:#ea4335;                          /* hot / live accents */
  --gold:#fbbc04;
  --green:#34a853;
  --radius:16px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(60,64,67,.10), 0 8px 24px -12px rgba(60,64,67,.22);
  --glow-v:0 1px 3px rgba(26,115,232,.3), 0 8px 20px -8px rgba(26,115,232,.45);
  --font-d:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-b:"Inter", ui-sans-serif, system-ui, sans-serif;
}
[data-theme="dark"]{ /* dark variant intentionally disabled on chromewallpaper */ }
body{ background:var(--bg); color:var(--txt) }
body::after{ display:none }               /* no grain on white */
h1,h2,h3,h4{ letter-spacing:-.02em }

/* plain white canvas — no mesh, no clouds */
.bg-mesh{ background:var(--bg); animation:none; filter:none }
.bg-mesh::before,.bg-mesh::after{ display:none }

/* ---------- navbar ---------- */
.navbar{ background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); box-shadow:none }
.navbar.scrolled{ box-shadow:0 1px 6px rgba(60,64,67,.12) }
.logo-text{ font-weight:800; color:var(--txt); letter-spacing:-.03em }
.logo-mark{ text-shadow:none; filter:none }
.logo-svg{ width:26px; height:26px; display:block }
.nav-links > a, .nav-drop-toggle{ color:var(--txt-dim); font-weight:600; border-radius:999px }
.nav-links > a:hover, .nav-drop-toggle:hover{ color:var(--violet); background:#e8f0fe }
.nav-links > a[aria-current="page"]{ color:var(--violet) }
.nav-links > a[aria-current="page"]::after{ content:""; position:absolute; left:50%;
  transform:translateX(-50%); bottom:-2px; width:26px; height:3px; border-radius:3px 3px 0 0;
  background:var(--violet) }
.nav-search input{ background:#f1f3f4; border:1px solid transparent; color:var(--txt);
  border-radius:999px }
.nav-search input:focus{ background:#fff; border-color:var(--border-2);
  box-shadow:0 1px 6px rgba(60,64,67,.18) }
.nav-search input::placeholder{ color:var(--txt-mute) }
.nav-search-kbd{ background:#e8eaed; color:var(--txt-mute) }
.nav-drop-menu{ background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 4px 20px rgba(60,64,67,.18) }
.nav-drop-menu a{ color:var(--txt-dim) }
.nav-drop-menu a:hover{ color:var(--violet); background:#e8f0fe }
.badge-hot{ background:linear-gradient(90deg,#ea4335,#f57c00); box-shadow:none; animation:none }

/* + Create button & its dropdown */
.btn-create{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-family:var(--font-b); font-weight:600; font-size:.93rem; color:#fff !important;
  background:var(--violet); border:0; border-radius:999px; padding:.55rem 1.1rem;
  box-shadow:var(--glow-v); transition:background .2s, box-shadow .2s }
.btn-create:hover{ background:#1765cc; box-shadow:0 2px 6px rgba(26,115,232,.4) }
.btn-create .plus{ font-size:1.05rem; line-height:1; transform:translateY(-1px) }
.nav-create{ margin-left:.35rem }
.nav-drop-menu--right{ left:auto; right:0; min-width:280px }
.create-item{ display:flex !important; gap:.7rem; align-items:flex-start; padding:.65rem .7rem !important }
.create-item .ci-ico{ flex:0 0 34px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; color:#fff; font-size:1rem }
.create-item .ci-ico--ext{ background:linear-gradient(135deg,#4285f4,#1a73e8) }
.create-item .ci-ico--theme{ background:linear-gradient(135deg,#a142f4,#7b1fa2) }
.create-item b{ display:block; color:var(--txt); font-size:.92rem; font-weight:600 }
.create-item small{ display:block; color:var(--txt-mute); font-size:.78rem; line-height:1.35 }

/* ---------- hero: title + two tool cards in one row ---------- */
.cw-hero{ display:grid; grid-template-columns:1.05fr 1fr 1fr; gap:1.2rem;
  align-items:stretch; padding-top:2.2rem }
.cw-hero-copy{ display:flex; flex-direction:column; justify-content:center }
.cw-hero-title{ font-size:clamp(1.7rem,3.2vw,2.45rem); font-weight:800; color:var(--txt);
  line-height:1.12 }
.cw-hero-sub{ margin:.7rem 0 0; color:var(--txt-dim); font-size:1.02rem }
.cw-hero .tool-box{ margin:0; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:none; padding:1.4rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  transition:box-shadow .25s, transform .25s }
.cw-hero .tool-box:hover{ box-shadow:var(--shadow); transform:translateY(-2px) }
.cw-hero .tool-box--ext{ background:linear-gradient(150deg,#e8f0fe 0%,#f8f9fa 70%) }
.cw-hero .tool-box--theme{ background:linear-gradient(150deg,#f3e8fd 0%,#f8f9fa 70%) }
.cw-hero .tool-box h3{ font-size:1.12rem; font-weight:700; color:var(--txt) }
.cw-hero .tool-box p{ margin:0; color:var(--txt-dim); font-size:.9rem }
.cw-hero .tool-icon{ width:56px; height:56px; border-radius:14px; overflow:hidden;
  background:none; display:grid; place-items:center }
.cw-hero .tool-icon img{ width:100%; height:100%; object-fit:contain }
.cw-hero .btn{ margin-top:.4rem; border-radius:999px; font-weight:600; font-size:.9rem;
  padding:.6rem 1.15rem }
.cw-hero .btn-primary{ background:var(--violet); color:#fff; box-shadow:none }
.cw-hero .btn-primary:hover{ background:#1765cc }
.cw-hero .btn-pink{ background:#7b1fa2 } .cw-hero .btn-pink:hover{ background:#6a1b8f }
.badge-new{ background:#e8f0fe; color:var(--violet); box-shadow:none }

/* ---------- category chip rail ---------- */
.cat-chips{ margin-top:1.6rem; position:relative }
.cat-chips-track{ display:flex; gap:.7rem; overflow-x:auto; scrollbar-width:none;
  padding:.2rem .1rem; scroll-behavior:smooth }
.cat-chips-track::-webkit-scrollbar{ display:none }
.chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.55rem;
  background:#fff; border:1px solid var(--border-2); border-radius:999px;
  padding:.42rem 1.05rem .42rem .48rem; font-weight:600; font-size:.92rem; color:var(--txt);
  transition:box-shadow .2s, border-color .2s, transform .2s }
.chip:hover{ border-color:var(--violet); box-shadow:0 2px 10px rgba(60,64,67,.14);
  transform:translateY(-1px) }
.chip-ico{ width:32px; height:32px; border-radius:50%; overflow:hidden; flex:0 0 32px;
  background:#e8f0fe; display:grid; place-items:center; font-size:1rem }
.chip-ico img{ width:100%; height:100%; object-fit:cover }
.chip--more{ padding:.42rem .8rem; color:var(--txt-dim) }

/* ---------- featured wallpaper preview ---------- */
.featured{ margin-top:1.8rem }
.featured-frame{ position:relative; display:block; border-radius:20px; overflow:hidden;
  border:1px solid var(--border); box-shadow:0 10px 40px -18px rgba(60,64,67,.4);
  aspect-ratio:16/8.2; background:#000 }
.featured-frame img, .featured-frame video{ position:absolute; inset:0; width:100%;
  height:100%; object-fit:cover }
.featured-overlay{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.9rem; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 40%) }
.featured-search{ display:flex; align-items:center; gap:.6rem; width:min(46%,420px);
  background:rgba(255,255,255,.22); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:.6rem 1.1rem;
  color:#fff; font-size:.9rem; font-weight:500; text-shadow:0 1px 4px rgba(0,0,0,.4) }
.featured-search svg{ flex:0 0 auto; opacity:.9 }
.featured-name{ position:absolute; left:1.1rem; bottom:1rem; color:#fff; font-weight:600;
  font-size:.92rem; text-shadow:0 1px 6px rgba(0,0,0,.55);
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  padding:.35rem .85rem; border-radius:999px }
.featured .badge-live{ position:absolute; top:1rem; left:1.1rem }

/* ---------- section heads ---------- */
.section-head h2{ font-size:1.28rem; font-weight:800; color:var(--txt) }
.sec-star{ display:none }
.sec-emoji{ font-size:1.15rem; margin-right:.45rem }
.view-all{ background:none; border:1px solid var(--border-2); border-radius:999px;
  color:var(--txt-dim); font-weight:600 }
.view-all:hover{ color:var(--violet); border-color:var(--violet); background:#e8f0fe }

/* ---------- cards ---------- */
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:none; transition:box-shadow .25s, transform .25s }
.card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--border-2) }
.card-title{ color:var(--txt); font-weight:600 }
.card-meta, .meta{ color:var(--txt-mute) }
.like-btn{ color:var(--txt-mute) } .like-btn[aria-pressed="true"]{ color:var(--pink) }
.type-pill{ font-family:var(--font-b); font-weight:700; letter-spacing:.02em;
  box-shadow:0 1px 4px rgba(0,0,0,.25) }
.type-pill.type-wallpaper{ background:#ea4335 }               /* LIVE — red   */
.type-pill.type-theme{ background:linear-gradient(120deg,#4285f4,#1a73e8) }
.type-pill.type-cursor{ background:linear-gradient(120deg,#34a853,#188038) }
.type-pill.type-game{ background:linear-gradient(120deg,#fbbc04,#f57c00); color:#fff }
.type-pill.type-hybrid{ background:linear-gradient(120deg,#a142f4,#7b1fa2) }
.badge-live{ display:inline-flex; align-items:center; gap:.35rem; color:#fff;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border-radius:999px;
  padding:.3rem .8rem; font-size:.78rem; font-weight:700 }
.badge-live::before{ content:"▶"; font-size:.65rem; color:#ea4335 }
.badge-4k{ position:absolute; top:.6rem; left:.6rem; z-index:2; color:#fff;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border-radius:8px;
  padding:.18rem .5rem; font-family:var(--font-m); font-size:.68rem; font-weight:700 }
.play-pill{ background:rgba(0,0,0,.5); backdrop-filter:blur(4px) }

/* ---------- trust ---------- */
.trust{ background:var(--surface-2); border:1px solid var(--border); box-shadow:none }
.trust-item b{ color:var(--txt) } .trust-item span{ color:var(--txt-mute) }
.trust-ico{ color:var(--violet); background:#e8f0fe }

/* ---------- buttons (global) ---------- */
.btn-explore{ background:var(--violet); box-shadow:var(--glow-v) }
.btn-explore:hover{ background:#1765cc; box-shadow:0 4px 14px rgba(26,115,232,.4) }
.btn-primary{ background:var(--violet); box-shadow:none }
.btn-ghost{ background:#f1f3f4; color:var(--txt-dim); border:1px solid var(--border) }
.btn-ghost:hover{ background:#e8f0fe; color:var(--violet) }

/* ---------- tool pages / sidebar / forms ---------- */
.tool-box{ background:#fff; border:1px solid var(--border); box-shadow:none }
.sidebar-tools .tool-mini, .sidebar .widget{ background:var(--surface-2);
  border:1px solid var(--border) }
input[type="text"],input[type="search"],input[type="email"],input[type="url"],
input[type="number"],select,textarea{ background:#fff; border:1px solid var(--border-2);
  color:var(--txt); border-radius:10px }
input:focus,select:focus,textarea:focus{ border-color:var(--violet); outline:none;
  box-shadow:0 0 0 3px rgba(26,115,232,.15) }

/* ---------- pagination ---------- */
.pagination a, .pagination span{ background:#fff; border:1px solid var(--border-2);
  color:var(--txt-dim); border-radius:10px }
.pagination a:hover{ border-color:var(--violet); color:var(--violet) }
.pagination .current{ background:var(--violet); border-color:var(--violet); color:#fff }

/* ---------- footer ---------- */
.footer{ background:var(--surface-2); border-top:1px solid var(--border); color:var(--txt-dim) }
.footer a{ color:var(--txt-dim) } .footer a:hover{ color:var(--violet) }
.footer h4, .footer b{ color:var(--txt) }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .cw-hero{ grid-template-columns:1fr 1fr }
  .cw-hero-copy{ grid-column:1 / -1 }
  .featured-search{ width:70% }
}
@media (max-width:640px){
  .cw-hero{ grid-template-columns:1fr; padding-top:1.4rem }
  .featured-frame{ aspect-ratio:16/10 }
  .featured-search{ display:none }
  .nav-create{ margin-left:auto }
}

/* =====================================================================
   CHROMEWALLPAPER v2 — Glassmorphism pass
   Wider canvas, frosted-glass surfaces over soft color washes,
   SVG tool cards, glass chips / navbar / content cards.
   Appended last — overrides the v1 white overlay above.
   ===================================================================== */

/* wider canvas */
.wrap{ max-width:1440px }

/* soft ambient color washes behind the glass (fixed, very light) */
.bg-mesh{
  background:
    radial-gradient(46rem 30rem at 12% -6%,  rgba(66,133,244,.12), transparent 60%),
    radial-gradient(40rem 28rem at 88% 4%,   rgba(161,66,244,.10), transparent 60%),
    radial-gradient(34rem 26rem at 55% 42%,  rgba(52,168,83,.05),  transparent 65%),
    radial-gradient(38rem 30rem at 6% 88%,   rgba(234,67,53,.05),  transparent 65%),
    #fff;
}

/* ---------- shared glass recipe ---------- */
.glass-card, .card, .chip, .trust, .sidebar .widget, .sidebar-tools .tool-mini{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset,
             0 8px 32px -12px rgba(60,64,67,.25);
}

/* navbar glass */
.navbar{ background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.8);
  box-shadow:0 4px 24px -16px rgba(60,64,67,.3) }
.navbar.scrolled{ background:rgba(255,255,255,.78) }
.nav-search input{ background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
.nav-drop-menu{ background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.85) }

/* ---------- hero: breathe wider, bigger type ---------- */
.cw-hero{ grid-template-columns:1fr 1.08fr 1.08fr; gap:1.5rem; padding-top:2.8rem }
.cw-hero-title{ font-size:clamp(2rem,3.4vw,3rem) }
.cw-hero-sub{ font-size:1.08rem; max-width:34ch }

/* tool cards: icon tile + body, glass with per-card tint */
.cw-hero .tool-box{ flex-direction:row; align-items:center; gap:1.2rem;
  padding:1.7rem 1.8rem; border-radius:22px; position:relative; overflow:hidden }
.cw-hero .tool-box::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%) }
.cw-hero .tool-box--ext{
  background:linear-gradient(140deg, rgba(232,240,254,.75), rgba(255,255,255,.45)) }
.cw-hero .tool-box--theme{
  background:linear-gradient(140deg, rgba(243,232,253,.75), rgba(255,255,255,.45)) }
.cw-hero .tool-box:hover{ transform:translateY(-3px);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 18px 44px -16px rgba(60,64,67,.35) }
.tool-body{ display:flex; flex-direction:column; gap:.4rem; min-width:0 }
.tool-body h3{ font-size:1.18rem }
.tool-body p{ font-size:.92rem }

/* 3D-ish glass icon tiles */
.tool-ico-3d{ flex:0 0 84px; width:84px; height:84px; border-radius:22px;
  display:grid; place-items:center; position:relative;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 2px rgba(255,255,255,.8) inset, 0 12px 26px -10px rgba(60,64,67,.35) }
.tool-ico-3d--blue{ background:linear-gradient(145deg, rgba(138,180,248,.4), rgba(26,115,232,.16)) }
.tool-ico-3d--purple{ background:linear-gradient(145deg, rgba(215,174,251,.4), rgba(123,31,162,.16)) }
.tool-ico-3d::after{ content:""; position:absolute; inset:2px; border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,.6), transparent 55%); pointer-events:none }

/* glass CTA buttons */
.btn-glass{ align-self:flex-start; margin-top:.35rem; display:inline-flex; align-items:center;
  gap:.4rem; border-radius:999px; padding:.6rem 1.25rem; font-weight:600; font-size:.9rem;
  color:#fff; border:1px solid rgba(255,255,255,.5); position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s }
.btn-glass::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.35), transparent 50%); pointer-events:none }
.btn-glass--blue{ background:linear-gradient(135deg,#4285f4,#1a73e8);
  box-shadow:0 8px 20px -8px rgba(26,115,232,.6) }
.btn-glass--purple{ background:linear-gradient(135deg,#a142f4,#7b1fa2);
  box-shadow:0 8px 20px -8px rgba(123,31,162,.6) }
.btn-glass:hover{ transform:translateY(-1px);
  box-shadow:0 12px 26px -8px rgba(60,64,67,.5); color:#fff }
.btn-glass .arr{ transition:transform .2s }
.btn-glass:hover .arr{ transform:translateX(3px) }

/* ---------- chips: frosted pills ---------- */
.chip{ border-radius:999px }
.chip:hover{ border-color:rgba(66,133,244,.6);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 24px -10px rgba(26,115,232,.35) }
.chip-ico{ background:linear-gradient(145deg, rgba(138,180,248,.35), rgba(26,115,232,.15));
  border:1px solid rgba(255,255,255,.8); color:#1a73e8; font-weight:700 }

/* ---------- content cards ---------- */
.card{ border-radius:18px }
.card:hover{ box-shadow:0 1px 1px rgba(255,255,255,.9) inset,
             0 20px 48px -18px rgba(60,64,67,.4) }

/* featured frame: glass ring */
.featured-frame{ border:1px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 6px rgba(255,255,255,.45), 0 24px 60px -24px rgba(60,64,67,.5) }

/* view-all + create refinements */
.view-all{ background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8) }
.btn-create{ background:linear-gradient(135deg,#4285f4,#1a73e8);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 8px 20px -8px rgba(26,115,232,.65) }
.btn-create:hover{ background:linear-gradient(135deg,#3b7ce6,#1765cc) }

/* footer */
.footer{ background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.8) }

/* responsive */
@media (max-width:1180px){
  .cw-hero{ grid-template-columns:1fr 1fr }
  .cw-hero-copy{ grid-column:1 / -1 }
  .cw-hero-title br{ display:none }
}
@media (max-width:640px){
  .cw-hero{ grid-template-columns:1fr }
  .cw-hero .tool-box{ padding:1.3rem }
  .tool-ico-3d{ flex-basis:68px; width:68px; height:68px }
}

/* =====================================================================
   CHROMEWALLPAPER v3 — width fix, nav nowrap, visual category cards
   ===================================================================== */

/* the real width knob: .wrap uses width:min(100% - 2.4rem, var(--max)) */
:root{ --max:1460px }

/* nav items must never wrap ("Top 10" was breaking onto two lines) */
.nav-links > a, .nav-drop-toggle{ white-space:nowrap }

/* hero: single-line-friendly title, tighter copy column */
.cw-hero{ grid-template-columns:1.15fr 1fr 1fr; align-items:center }
.cw-hero-title{ font-size:clamp(1.8rem,2.5vw,2.5rem); line-height:1.15 }
.cw-hero-sub{ max-width:none }

/* ---------- visual category cards (replace chips) ---------- */
.cat-chips{ margin-top:2rem }
.cat-chips-track{ gap:.9rem; padding:.3rem .15rem }
.catg-card{ position:relative; flex:0 0 200px; height:112px; border-radius:16px;
  overflow:hidden; display:flex; align-items:flex-end;
  background:linear-gradient(145deg, rgba(138,180,248,.35), rgba(26,115,232,.15));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 26px -12px rgba(60,64,67,.35);
  transition:transform .25s, box-shadow .25s }
.catg-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .4s }
.catg-card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62));
  pointer-events:none }
.catg-card-name{ position:relative; z-index:2; color:#fff; font-weight:700;
  font-size:1rem; padding:.7rem .9rem; text-shadow:0 1px 6px rgba(0,0,0,.5) }
.catg-card:hover{ transform:translateY(-3px);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 18px 40px -14px rgba(60,64,67,.5) }
.catg-card:hover img{ transform:scale(1.06) }
.catg-card--more{ flex-basis:110px; align-items:center; justify-content:center }
.catg-card--more::after{ display:none }
.catg-card--more .catg-card-name{ color:var(--violet); padding:0; text-shadow:none }

@media (max-width:640px){
  .catg-card{ flex-basis:150px; height:92px }
  .catg-card--more{ flex-basis:88px }
}

/* =====================================================================
   CHROMEWALLPAPER v4 — nav glass buttons, pro search, smaller cat cards
   with rail arrows, CW pagination, featured store badge
   ===================================================================== */

/* 1) + Create: glass treatment */
.btn-create{
  background:linear-gradient(135deg, rgba(66,133,244,.92), rgba(26,115,232,.88));
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.55); position:relative; overflow:hidden;
  box-shadow:0 1px 1px rgba(255,255,255,.5) inset, 0 8px 22px -8px rgba(26,115,232,.65) }
.btn-create::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.4), transparent 45%) }
.btn-create:hover{ background:linear-gradient(135deg, rgba(59,124,230,.95), rgba(23,101,204,.92));
  transform:translateY(-1px) }

/* 2) Download button (chrome-ring icon, frosted white pill) */
.btn-store{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  font-family:var(--font-b); font-weight:600; font-size:.93rem; color:var(--txt) !important;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.8); border-radius:999px; padding:.55rem 1.1rem;
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 8px 22px -12px rgba(60,64,67,.35);
  transition:transform .2s, box-shadow .2s, border-color .2s }
.btn-store .store-chrome{ color:#1a73e8 }
.btn-store:hover{ transform:translateY(-1px); border-color:rgba(66,133,244,.55);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 12px 28px -10px rgba(26,115,232,.4) }

/* 3) Search: professional frosted field */
.nav-search{ position:relative }
.nav-search input{ width:250px; padding:.62rem .9rem .62rem 2.35rem; font-size:.92rem;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.85); border-radius:999px; color:var(--txt);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 6px 18px -10px rgba(60,64,67,.3);
  transition:width .25s ease, box-shadow .25s, border-color .25s, background .25s }
.nav-search-ico{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  color:#1a73e8; display:grid; place-items:center; pointer-events:none }
.nav-search input:focus{ width:310px; background:rgba(255,255,255,.85);
  border-color:rgba(66,133,244,.6);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 0 0 4px rgba(26,115,232,.14),
             0 10px 26px -10px rgba(26,115,232,.35) }
.nav-search input::placeholder{ color:var(--txt-mute); font-weight:500 }
@media (max-width:1280px){ .nav-search input{ width:200px } .nav-search input:focus{ width:240px } }

/* 5) Category cards: smaller + arrow rail buttons */
.cat-chips{ padding:0 .5rem }
.catg-card{ flex:0 0 150px; height:86px; border-radius:14px }
.catg-card-name{ font-size:.88rem; padding:.55rem .75rem }
.catg-card--more{ flex-basis:92px }
.rail-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  font-size:1.3rem; line-height:1; color:var(--txt-dim);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 8px 20px -8px rgba(60,64,67,.4);
  transition:color .2s, transform .2s, box-shadow .2s }
.rail-btn:hover{ color:var(--violet); transform:translateY(-50%) scale(1.06) }
.rail-btn--prev{ left:-8px } .rail-btn--next{ right:-8px }
@media (max-width:760px){ .rail-btn{ display:none } .cat-chips{ padding:0 } }

/* 6) Featured store badge (replaces post-title pill) */
.featured-store{ position:absolute; left:1.1rem; bottom:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-weight:600;
  font-size:.9rem; padding:.5rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(255,255,255,.45);
  text-shadow:0 1px 4px rgba(0,0,0,.4);
  box-shadow:0 1px 1px rgba(255,255,255,.3) inset, 0 8px 20px -8px rgba(0,0,0,.35);
  transition:background .2s }
.featured-frame:hover .featured-store{ background:rgba(255,255,255,.3) }

/* 8) CW pagination: frosted glass, Google-blue active */
.cw-pager .yow-letter, .cw-pager .yow-arrow{
  border:1px solid rgba(255,255,255,.85); color:var(--txt-dim);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 8px 20px -12px rgba(60,64,67,.35) }
.cw-pager .yow-cell:hover .yow-letter{ border-color:rgba(66,133,244,.6);
  color:var(--violet); transform:translateY(-2px) }
.cw-pager .yow-cell.is-active .yow-letter{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#4285f4,#1a73e8);
  box-shadow:0 0 0 4px rgba(26,115,232,.15), 0 10px 24px -8px rgba(26,115,232,.6) }
.cw-pager .yow-cell.is-active .yow-num{ color:var(--violet); font-weight:700 }
.cw-pager .yow-num{ color:var(--txt-mute) }
.cw-pager .yow-arrow:hover{ border-color:rgba(66,133,244,.6); color:var(--violet) }

/* =====================================================================
   CHROMEWALLPAPER v5 — 10-madde cilası
   store button, pro search, logo accent, trust tiles, post sidebar
   in Chrome brand colors, category-icon chips
   ===================================================================== */

/* 9) logo wordmark */
.logo-text{ display:inline-flex; gap:.34rem; white-space:nowrap }
.logo-accent{ color:#1a73e8 }
.site-footer .logo-svg{ width:24px; height:24px; vertical-align:-5px }

/* 2) Download → refined store button (multicolor ring, blue tint glass) */
.btn-store{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  font-family:var(--font-b); font-weight:600; font-size:.93rem; color:#1a73e8 !important;
  background:linear-gradient(135deg, rgba(232,240,254,.9), rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(66,133,244,.35); border-radius:999px; padding:.55rem 1.15rem;
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 8px 22px -12px rgba(26,115,232,.4);
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s }
.store-ring{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(60,64,67,.25) }
.btn-store:hover{ transform:translateY(-1px); border-color:rgba(66,133,244,.6);
  background:linear-gradient(135deg, rgba(210,227,252,.95), rgba(255,255,255,.7));
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 12px 28px -10px rgba(26,115,232,.5) }

/* 3) search — pro treatment: kbd chip, deeper field */
.nav-search input{ width:270px; padding-right:2.6rem }
.nav-search input:focus{ width:330px }
.nav-search-kbd{ position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:grid; place-items:center;
  font-family:var(--font-m); font-size:.72rem; font-weight:700; color:var(--txt-mute);
  background:rgba(255,255,255,.8); border:1px solid var(--border-2); border-radius:6px;
  box-shadow:0 1px 0 rgba(60,64,67,.15); pointer-events:none }
.nav-search input:focus ~ .nav-search-kbd{ opacity:0 }
@media (max-width:1280px){ .nav-search input{ width:210px } .nav-search input:focus{ width:250px } }

/* 7) section-head icon chips */
.sec-ico{ display:inline-grid; place-items:center; width:34px; height:34px; margin-right:.55rem;
  border-radius:10px; color:#1a73e8; vertical-align:-9px;
  background:linear-gradient(145deg, rgba(138,180,248,.4), rgba(26,115,232,.12));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 6px 14px -6px rgba(60,64,67,.3) }
.sec-ico--fire{ color:#ea4335;
  background:linear-gradient(145deg, rgba(242,139,130,.45), rgba(234,67,53,.12)) }
.sec-ico--clock{ color:#188038;
  background:linear-gradient(145deg, rgba(129,201,149,.5), rgba(24,128,56,.12)) }
.section-head h2{ display:flex; align-items:center }

/* 8) trust bar — tile layout */
.trust.trust--cw{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  padding:0 }
.trust--cw .trust-item{ display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.2rem;
  border-radius:16px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 26px -14px rgba(60,64,67,.35);
  transition:transform .22s, box-shadow .22s }
.trust--cw .trust-item:hover{ transform:translateY(-2px);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 16px 36px -14px rgba(60,64,67,.45) }
.trust--cw .trust-item::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px }
.trust--cw .trust-item:nth-child(1)::before{ background:#4285f4 }
.trust--cw .trust-item:nth-child(2)::before{ background:#34a853 }
.trust--cw .trust-item:nth-child(3)::before{ background:#fbbc04 }
.trust--cw .trust-item:nth-child(4)::before{ background:#ea4335 }
.trust--cw .trust-ico{ width:44px; height:44px; flex:0 0 44px; border-radius:12px;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 6px 14px -6px rgba(60,64,67,.3) }
.trust--cw .trust-ico svg{ width:22px; height:22px }
.t-blue{   color:#1a73e8; background:linear-gradient(145deg, rgba(138,180,248,.45), rgba(26,115,232,.12)) }
.t-green{  color:#188038; background:linear-gradient(145deg, rgba(129,201,149,.5),  rgba(24,128,56,.12)) }
.t-yellow{ color:#b06000; background:linear-gradient(145deg, rgba(253,214,99,.55),  rgba(251,188,4,.15)) }
.t-red{    color:#c5221f; background:linear-gradient(145deg, rgba(242,139,130,.5),  rgba(234,67,53,.12)) }
.trust--cw b{ display:block; color:#202124; font-size:.95rem }
.trust--cw span{ color:#5f6368; font-size:.8rem }
@media (max-width:900px){ .trust.trust--cw{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .trust.trust--cw{ grid-template-columns:1fr } }

/* 10) post sidebar — Chrome colors, glass */
.post-side .side-box, .post-side .chrome-box{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.8); border-radius:18px;
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 14px 32px -18px rgba(60,64,67,.4) }
.btn-download{ background:linear-gradient(135deg,#4285f4,#1a73e8);
  border:1px solid rgba(255,255,255,.5); border-radius:999px;
  box-shadow:0 1px 1px rgba(255,255,255,.4) inset, 0 10px 24px -8px rgba(26,115,232,.6) }
.btn-download:hover{ filter:none; background:linear-gradient(135deg,#3b7ce6,#1765cc) }
.btn-download.counting{ background:linear-gradient(135deg,#9aa0a6,#5f6368); color:#fff }
.like-btn--lg{ background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:999px; color:#5f6368;
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 6px 16px -8px rgba(60,64,67,.3) }
.like-btn--lg:hover, .like-btn--lg.is-liked{ border-color:rgba(234,67,53,.5);
  background:rgba(252,232,230,.7); color:#c5221f }
.chrome-box{ border-color:rgba(66,133,244,.35) !important }
.chrome-glyph{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(145deg, rgba(138,180,248,.45), rgba(26,115,232,.12));
  border:1px solid rgba(255,255,255,.85) }
.btn-chrome{ background:linear-gradient(135deg,#34a853,#188038);
  border:1px solid rgba(255,255,255,.5); border-radius:999px;
  box-shadow:0 1px 1px rgba(255,255,255,.4) inset, 0 10px 24px -8px rgba(24,128,56,.55) }
.btn-chrome:hover{ background:linear-gradient(135deg,#2d9a4b,#146c30) }

/* =====================================================================
   CHROMEWALLPAPER v6 — sidebar action buttons pro, chrome-letter logo,
   HOT! + rank badges in brand colors
   ===================================================================== */

/* 2) logo — "Wallpaper" letters in Chrome colors */
.lw i{ font-style:normal; font-weight:800 }
.lw .l-b{ color:#4285f4 } .lw .l-r{ color:#ea4335 }
.lw .l-y{ color:#f9ab00 } .lw .l-g{ color:#34a853 }

/* 6) HOT! badge — chrome gradient */
.badge-hot{ background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 0 50%,#f9ab00 0 75%,#34a853 0);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); box-shadow:0 4px 12px -4px rgba(60,64,67,.5) }

/* 6) Top-10 rank numbers — cycle chrome colors 1→blue 2→red 3→yellow 4→green */
.rank-wrap::before{ font-family:var(--font-b); font-weight:800; border:2px solid #fff;
  box-shadow:0 6px 16px -4px rgba(60,64,67,.55) }
.card-grid .rank-wrap:nth-child(4n+1)::before{ background:linear-gradient(135deg,#4285f4,#1a73e8) }
.card-grid .rank-wrap:nth-child(4n+2)::before{ background:linear-gradient(135deg,#ea4335,#c5221f) }
.card-grid .rank-wrap:nth-child(4n+3)::before{ background:linear-gradient(135deg,#fbbc04,#f29900); color:#202124; text-shadow:none }
.card-grid .rank-wrap:nth-child(4n+4)::before{ background:linear-gradient(135deg,#34a853,#188038) }

/* 1) Download Now — layered glass action button */
.btn-download{ display:flex; align-items:center; justify-content:center; gap:.65rem;
  position:relative; overflow:hidden; width:100%; padding:.85rem 1rem;
  font-size:1rem; font-weight:700; letter-spacing:.01em;
  background:linear-gradient(135deg,#4285f4,#1a73e8);
  border:1px solid rgba(255,255,255,.55); border-radius:16px;
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 12px 28px -10px rgba(26,115,232,.65);
  transition:transform .18s, box-shadow .18s }
.btn-download::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.35), transparent 45%) }
.btn-download:hover{ transform:translateY(-1px);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 16px 34px -10px rgba(26,115,232,.75) }
.btn-download:active{ transform:translateY(0) scale(.99) }
.dl-ico{ display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px;
  border-radius:50%; color:#fff; background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 1px 1px rgba(255,255,255,.4) inset }
.btn-download.counting{ background:linear-gradient(135deg,#80868b,#5f6368); cursor:wait }
.btn-download.ready{ background:linear-gradient(135deg,#34a853,#188038); animation:ready-pop .4s ease;
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 12px 28px -10px rgba(24,128,56,.7) }
.dl-sub{ text-align:center; font-size:.78rem; color:var(--txt-mute) }

/* 1) Like — frosted pill, heart chip, count bubble */
.like-btn--lg{ display:flex; align-items:center; justify-content:center; gap:.55rem;
  width:100%; padding:.6rem .9rem; border-radius:16px; font-weight:600; font-size:.95rem;
  color:#5f6368; background:rgba(255,255,255,.6); cursor:pointer;
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 6px 16px -8px rgba(60,64,67,.3);
  transition:transform .18s, border-color .18s, background .18s, color .18s }
.like-btn--lg .like-ico{ display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
  border-radius:50%; font-size:1rem; color:#c5221f;
  background:linear-gradient(145deg, rgba(242,139,130,.45), rgba(234,67,53,.12));
  border:1px solid rgba(255,255,255,.85); transition:transform .18s }
.like-btn--lg .like-count{ margin-left:.15rem; padding:.15rem .6rem; border-radius:999px;
  font-family:var(--font-m); font-size:.78rem; font-weight:700; color:#5f6368;
  background:rgba(255,255,255,.8); border:1px solid var(--border) }
.like-btn--lg:hover{ transform:translateY(-1px); border-color:rgba(234,67,53,.45);
  background:rgba(252,232,230,.65); color:#c5221f }
.like-btn--lg:hover .like-ico{ transform:scale(1.12) }
.like-btn--lg.is-liked{ border-color:rgba(234,67,53,.55); background:rgba(252,232,230,.8); color:#c5221f }
.like-btn--lg.is-liked .like-ico{ background:linear-gradient(135deg,#ea4335,#c5221f); color:#fff;
  animation:ready-pop .35s ease }
.like-btn--lg.is-liked .like-count{ color:#c5221f; border-color:rgba(234,67,53,.35) }

/* 1) Add to Chrome — green glass action with brand ring */
.btn-chrome{ display:flex; align-items:center; justify-content:center; gap:.6rem;
  position:relative; overflow:hidden; width:100%; padding:.8rem 1rem;
  font-size:.97rem; font-weight:700; border-radius:16px;
  background:linear-gradient(135deg,#34a853,#188038);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 12px 28px -10px rgba(24,128,56,.6);
  transition:transform .18s, box-shadow .18s }
.btn-chrome::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.32), transparent 45%) }
.btn-chrome:hover{ transform:translateY(-1px);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 16px 34px -10px rgba(24,128,56,.7) }
.btn-chrome .arr{ transition:transform .2s }
.btn-chrome:hover .arr{ transform:translateX(3px) }
.chrome-ring-mini{ display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px;
  border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(60,64,67,.3) }

/* =====================================================================
   CHROMEWALLPAPER v7 — compact featured, theme HOT!, Add-to-Chrome fix
   ===================================================================== */

/* 1) featured preview: much smaller, centered */
.featured{ margin-top:1.6rem }
.featured-frame{ max-width:840px; margin-inline:auto; aspect-ratio:16/8;
  border-radius:16px; box-shadow:0 0 0 5px rgba(255,255,255,.45),
  0 18px 44px -20px rgba(60,64,67,.45) }
.featured-search{ width:min(52%,340px); padding:.5rem .95rem; font-size:.84rem }
.featured-store{ font-size:.82rem; padding:.42rem .85rem }
@media (max-width:900px){ .featured-frame{ max-width:100%; aspect-ratio:16/9 } }

/* 2) HOT! — single theme color (Google blue), no rainbow */
.badge-hot{ background:linear-gradient(135deg,#4285f4,#1a73e8); color:#fff;
  text-shadow:none; box-shadow:0 4px 12px -4px rgba(26,115,232,.55) }

/* 3) Add to Chrome — frosted white secondary, blue accent (kills purple) */
.btn-chrome{ color:#1a73e8 !important;
  background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1.5px solid rgba(66,133,244,.5);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 24px -12px rgba(26,115,232,.35) }
.btn-chrome::before{ display:none }
.btn-chrome:hover{ color:#fff !important;
  background:linear-gradient(135deg,#4285f4,#1a73e8); border-color:rgba(255,255,255,.55);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 14px 30px -10px rgba(26,115,232,.6) }
.chrome-ring-mini{ box-shadow:0 1px 4px rgba(60,64,67,.25) }

/* =====================================================================
   CHROMEWALLPAPER v8 — featured hero: copy left / browser-framed video
   ===================================================================== */
.feat-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:2.4rem; align-items:center }

/* left copy */
.feat-title{ font-size:clamp(1.5rem,2.3vw,2.15rem); font-weight:800; line-height:1.18;
  color:#202124; letter-spacing:-.02em }
.feat-accent{ color:#1a73e8 }
.feat-sub{ margin:.8rem 0 1.1rem; color:#5f6368; font-size:1rem; line-height:1.55 }
.feat-list{ list-style:none; margin:0 0 1.4rem; padding:0;
  display:flex; flex-direction:column; gap:.75rem }
.feat-list li{ display:flex; gap:.7rem; align-items:flex-start;
  font-size:.92rem; line-height:1.5; color:#5f6368 }
.feat-list b{ color:#202124; font-weight:700 }
.feat-check{ flex:0 0 22px; width:22px; height:22px; margin-top:.1rem;
  display:grid; place-items:center; border-radius:7px; font-size:.72rem; font-weight:800;
  color:#fff; background:linear-gradient(135deg,#4285f4,#1a73e8);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 1px rgba(255,255,255,.4) inset, 0 5px 12px -5px rgba(26,115,232,.6) }
.feat-cta-row{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap }
.btn-feat-cta{ display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem; border-radius:999px; font-weight:700; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,#4285f4,#1a73e8); position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 14px 32px -10px rgba(26,115,232,.65);
  transition:transform .18s, box-shadow .18s }
.btn-feat-cta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.35), transparent 45%) }
.btn-feat-cta:hover{ transform:translateY(-2px); color:#fff;
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 18px 40px -10px rgba(26,115,232,.75) }
.feat-users{ font-size:.88rem; font-weight:600; color:#5f6368 }
.feat-stars{ color:#f9ab00; letter-spacing:.08em }

/* right: browser-framed screen */
.feat-shot{ display:block; border-radius:16px; overflow:hidden; text-decoration:none;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 24px 56px -22px rgba(60,64,67,.5);
  transition:transform .25s, box-shadow .25s }
.feat-shot:hover{ transform:translateY(-4px);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 32px 68px -22px rgba(26,115,232,.4) }
.browser-bar{ display:flex; align-items:center; gap:.9rem; padding:.55rem .9rem;
  background:rgba(248,249,250,.9); border-bottom:1px solid var(--border) }
.bb-dots{ display:flex; gap:.4rem }
.bb-dots i{ width:11px; height:11px; border-radius:50% }
.bb-r{ background:#ea4335 } .bb-y{ background:#fbbc04 } .bb-g{ background:#34a853 }
.bb-url{ flex:1; display:flex; align-items:center; gap:.45rem; max-width:340px;
  padding:.32rem .85rem; border-radius:999px; background:#fff;
  border:1px solid var(--border); color:#5f6368;
  font-family:var(--font-m); font-size:.74rem; font-weight:500; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.bb-url svg{ flex:0 0 auto; color:#188038 }
.feat-screen{ position:relative; display:block; aspect-ratio:16/9; background:#000 }
.feat-screen img, .feat-screen video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover }
.feat-screen .badge-live{ position:absolute; top:.8rem; left:.9rem }

@media (max-width:1024px){
  .feat-grid{ grid-template-columns:1fr; gap:1.6rem }
  .feat-copy{ order:2 } .feat-shot{ order:1 }
}

/* =====================================================================
   CHROMEWALLPAPER v9 — wider featured video (no cropping),
   button colors locked with !important (kills stale purple)
   ===================================================================== */

/* 1) featured: video column wider + show the FULL frame (no side crop) */
.feat-grid{ grid-template-columns:.8fr 1.35fr; gap:2rem }
.feat-screen{ position:relative; aspect-ratio:auto; background:#000 }
.feat-screen img, .feat-screen video{ position:static; display:block;
  width:100%; height:auto; object-fit:unset }
.feat-title{ font-size:clamp(1.35rem,2vw,1.9rem) }

/* 2) action buttons — final colors, locked */
.btn-download{ background:linear-gradient(135deg,#4285f4,#1a73e8) !important; color:#fff !important }
.btn-download.counting{ background:linear-gradient(135deg,#80868b,#5f6368) !important }
.btn-download.ready{ background:linear-gradient(135deg,#34a853,#188038) !important }
.btn-chrome{ background:rgba(255,255,255,.65) !important; color:#1a73e8 !important;
  border:1.5px solid rgba(66,133,244,.5) !important; box-shadow:0 1px 1px rgba(255,255,255,.9) inset,
  0 10px 24px -12px rgba(26,115,232,.35) !important }
.btn-chrome:hover{ background:linear-gradient(135deg,#4285f4,#1a73e8) !important; color:#fff !important;
  border-color:rgba(255,255,255,.55) !important }

/* =====================================================================
   CHROMEWALLPAPER v10 — Like button: theme-blue, no pink
   ===================================================================== */
.like-btn--lg{ color:#5f6368 !important; background:rgba(255,255,255,.65) !important;
  border:1.5px solid var(--border-2) !important;
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 6px 16px -8px rgba(60,64,67,.3) !important }
.like-btn--lg .like-ico{ color:#1a73e8;
  background:linear-gradient(145deg, rgba(138,180,248,.4), rgba(26,115,232,.12));
  border:1px solid rgba(255,255,255,.85) }
.like-btn--lg .like-count{ color:#5f6368; background:rgba(255,255,255,.85);
  border:1px solid var(--border) }
.like-btn--lg:hover{ color:#1a73e8 !important;
  border-color:rgba(66,133,244,.55) !important;
  background:rgba(232,240,254,.75) !important }
.like-btn--lg.is-liked{ color:#1a73e8 !important;
  border-color:rgba(66,133,244,.6) !important;
  background:rgba(232,240,254,.85) !important }
.like-btn--lg.is-liked .like-ico{ color:#fff;
  background:linear-gradient(135deg,#4285f4,#1a73e8) }
.like-btn--lg.is-liked .like-count{ color:#1a73e8; border-color:rgba(66,133,244,.4) }
/* card-grid small like buttons follow the same accent */
.like-btn[aria-pressed="true"], .like-btn.is-liked{ color:#1a73e8 }

/* =====================================================================
   CHROMEWALLPAPER v11 — category SEO description block (above top ad)
   ===================================================================== */
.cat-head h1{ margin-bottom:.6rem }
.cat-desc{ max-width:78ch; position:relative }
.cat-desc-text{ color:#5f6368; font-size:.94rem; line-height:1.65 }
.cat-desc-text br + br{ display:block; content:""; margin-top:.55rem }
.cat-desc[data-collapsed="1"] .cat-desc-text{ max-height:132px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);
  mask-image:linear-gradient(180deg,#000 60%,transparent) }
.cat-desc-toggle{ margin-top:.45rem; cursor:pointer; font-weight:600; font-size:.85rem;
  color:#1a73e8; background:rgba(232,240,254,.7); border:1px solid rgba(66,133,244,.35);
  border-radius:999px; padding:.35rem .95rem;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .2s, border-color .2s }
.cat-desc-toggle:hover{ background:#e8f0fe; border-color:rgba(66,133,244,.6) }

/* =====================================================================
   CHROMEWALLPAPER v12 — category hero header (full-width, pro)
   ===================================================================== */
.cat-hero{ position:relative; overflow:hidden; margin-top:1.6rem;
  padding:1.8rem 2rem 1.6rem; border-radius:22px;
  background:linear-gradient(135deg, rgba(232,240,254,.75) 0%, rgba(255,255,255,.55) 45%, rgba(243,232,253,.45) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 18px 44px -22px rgba(60,64,67,.45) }
.cat-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 0 50%,#fbbc04 0 75%,#34a853 0) }
.cat-hero::after{ content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px;
  border-radius:50%; pointer-events:none; opacity:.45; filter:blur(14px);
  background:radial-gradient(circle, rgba(138,180,248,.7), transparent 70%) }

.cat-hero-top{ position:relative; z-index:1; display:flex; align-items:center; gap:1.1rem }
.cat-hero-ico{ flex:0 0 62px; width:62px; height:62px; border-radius:18px;
  display:grid; place-items:center; color:#1a73e8;
  background:linear-gradient(145deg, rgba(138,180,248,.45), rgba(26,115,232,.12));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 24px -10px rgba(26,115,232,.45) }
.cat-hero-ico svg{ width:30px; height:30px }
.cat-hero-head h1{ margin:0; font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:800;
  letter-spacing:-.02em; color:#202124 }
.cat-hero-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.55rem }
.cat-chip{ display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .8rem; border-radius:999px; font-size:.78rem; font-weight:600; color:#5f6368;
  background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 4px 12px -6px rgba(60,64,67,.25) }
.cat-chip svg{ color:#1a73e8 }

/* description: full-width, magazine two-column on wide screens */
.cat-hero .cat-desc{ position:relative; z-index:1; max-width:none; margin-top:1.2rem;
  padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.9) }
.cat-hero .cat-desc-text{ color:#5f6368; font-size:.93rem; line-height:1.7;
  column-count:2; column-gap:3rem }
.cat-hero .cat-desc[data-collapsed="1"] .cat-desc-text{ max-height:150px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,transparent) }
.cat-hero .cat-desc-toggle{ margin-top:.6rem }

@media (max-width:900px){
  .cat-hero{ padding:1.3rem 1.2rem 1.2rem }
  .cat-hero .cat-desc-text{ column-count:1 }
  .cat-hero-ico{ flex-basis:52px; width:52px; height:52px; border-radius:14px }
}

/* ===== CHROMEWALLPAPER v13 — cat description: single column, fold at ~100 words ===== */
.cat-hero .cat-desc-text{ column-count:1; column-gap:0; max-width:105ch }
.cat-hero .cat-desc[data-collapsed="1"] .cat-desc-text{ max-height:118px }

/* ===== CHROMEWALLPAPER v14 — category description moved BELOW the grid ===== */
.cat-hero{ padding-bottom:1.8rem }              /* desc gitti, alt boşluğu dengele */
.cat-about{ position:relative; overflow:hidden; margin-top:2.2rem;
  padding:1.7rem 2rem 1.8rem; border-radius:20px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 14px 36px -20px rgba(60,64,67,.4) }
.cat-about::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 0 50%,#fbbc04 0 75%,#34a853 0) }
.cat-about h2{ margin:0 0 .9rem; font-size:1.15rem; font-weight:800; color:#202124 }
.cat-about-text{ color:#5f6368; font-size:.93rem; line-height:1.75; max-width:none }
.cat-about-text br + br{ display:block; content:""; margin-top:.6rem }
@media (max-width:900px){ .cat-about{ padding:1.2rem 1.2rem 1.3rem } }

/* ===== CHROMEWALLPAPER v15 — footer about text ===== */
.footer-about{ margin:.8rem 0 0; max-width:36ch; color:#5f6368;
  font-size:.84rem; line-height:1.6 }

/* ===== CHROMEWALLPAPER v16 — uninstall page card layout ===== */
.uni-hero{ display:flex; align-items:center; gap:1.1rem; margin-top:1.6rem;
  padding:1.6rem 2rem; border-radius:22px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(232,240,254,.75), rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 18px 44px -22px rgba(60,64,67,.45) }
.uni-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 0 50%,#fbbc04 0 75%,#34a853 0) }
.uni-hero-ico{ flex:0 0 60px; width:60px; height:60px; border-radius:16px;
  display:grid; place-items:center; color:#1a73e8;
  background:linear-gradient(145deg, rgba(138,180,248,.45), rgba(26,115,232,.12));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 24px -10px rgba(26,115,232,.45) }
.uni-hero h1{ margin:0; font-size:clamp(1.35rem,2.2vw,1.85rem); font-weight:800;
  letter-spacing:-.02em; color:#202124 }
.uni-hero p{ margin:.35rem 0 0; color:#5f6368; font-size:.95rem }

.uni-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:1.4rem;
  margin-top:1.4rem; align-items:stretch }
.uni-card{ border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 16px 40px -20px rgba(60,64,67,.4) }
.uni-steps{ padding:1.6rem 1.8rem }
.uni-steps h2{ margin:0 0 1.1rem; font-size:1.1rem; font-weight:800; color:#202124 }
.uni-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem }
.uni-list li{ display:flex; gap:.85rem; align-items:flex-start;
  color:#5f6368; font-size:.93rem; line-height:1.6 }
.uni-list strong{ color:#202124 }
.uni-num{ flex:0 0 28px; width:28px; height:28px; margin-top:.05rem;
  display:grid; place-items:center; border-radius:50%; color:#fff;
  font-size:.8rem; font-weight:800; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 10px -4px rgba(60,64,67,.45) }
.uni-num.n1{ background:linear-gradient(135deg,#4285f4,#1a73e8) }
.uni-num.n2{ background:linear-gradient(135deg,#ea4335,#c5221f) }
.uni-num.n3{ background:linear-gradient(135deg,#fbbc04,#f29900); color:#202124 }
.uni-num.n4{ background:linear-gradient(135deg,#34a853,#188038) }

.uni-video{ display:flex; flex-direction:column }
.uni-frame{ position:relative; flex:1; min-height:280px; background:#000 }
.uni-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

@media (max-width:900px){
  .uni-grid{ grid-template-columns:1fr }
  .uni-hero{ padding:1.2rem 1.3rem }
  .uni-frame{ aspect-ratio:16/9; min-height:0 }
}

/* ===== CHROMEWALLPAPER v17 — tool pages (Extension Builder / Theme Creator) ===== */
.xb-hero{ display:flex; align-items:center; gap:1.1rem; margin-top:1.6rem;
  padding:1.6rem 2rem; border-radius:22px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(232,240,254,.75), rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 18px 44px -22px rgba(60,64,67,.45) }
.xb-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 0 50%,#fbbc04 0 75%,#34a853 0) }
.xb-hero-ico{ flex:0 0 66px; width:66px; height:66px; border-radius:18px;
  display:grid; place-items:center;
  background:linear-gradient(145deg, rgba(138,180,248,.4), rgba(26,115,232,.12));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 24px -10px rgba(26,115,232,.45) }
.xb-hero-ico--green{ background:linear-gradient(145deg, rgba(129,201,149,.45), rgba(24,128,56,.12));
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 24px -10px rgba(24,128,56,.45) }
.xb-hero h1{ margin:0; font-size:clamp(1.4rem,2.3vw,1.95rem); font-weight:800;
  letter-spacing:-.02em; color:#202124 }
.xb-hero p{ margin:.4rem 0 0; color:#5f6368; font-size:.95rem; max-width:64ch }
.xb-hero code{ background:#f1f3f4; padding:.1rem .4rem; border-radius:6px;
  font-family:var(--font-m); font-size:.82em; color:#202124 }

.xb-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:1.4rem;
  margin-top:1.4rem; align-items:stretch }
.xb-card{ position:relative; overflow:hidden; padding:1.7rem 1.8rem; border-radius:20px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 16px 40px -20px rgba(60,64,67,.4) }
.xb-bar{ position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 0 50%,#fbbc04 0 75%,#34a853 0) }
.xb-steps h2{ margin:0 0 1.1rem; font-size:1.1rem; font-weight:800; color:#202124 }
.xb-note{ display:flex; gap:.55rem; align-items:flex-start; margin-top:1.2rem;
  padding:.8rem 1rem; border-radius:12px; font-size:.83rem; line-height:1.5; color:#5f6368;
  background:rgba(232,240,254,.6); border:1px solid rgba(66,133,244,.25) }
.xb-note svg{ flex:0 0 auto; margin-top:.15rem; color:#1a73e8 }

.xb-drop{ display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:2rem 1.4rem; border-radius:16px; cursor:pointer; text-align:center;
  background:linear-gradient(150deg, rgba(232,240,254,.55), rgba(255,255,255,.6));
  border:1.5px dashed rgba(66,133,244,.5);
  transition:border-color .2s, background .2s, transform .2s }
.xb-drop:hover, .xb-drop.dragover{ border-color:#1a73e8; border-style:solid;
  background:rgba(232,240,254,.8); transform:translateY(-1px) }
.xb-drop-ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  color:#1a73e8; background:#fff; border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 18px -8px rgba(26,115,232,.45) }
.xb-drop .file-drop-text{ font-weight:600; color:#202124; font-size:.95rem }
.xb-drop .file-drop-text u{ color:#1a73e8; text-underline-offset:3px }
.xb-drop-hint{ font-size:.78rem; color:#80868b }
.xb-drop .file-drop-name{ font-family:var(--font-m); font-size:.8rem; color:#188038; font-weight:600 }

.xb-input{ width:100%; margin-top:1rem; padding:.8rem 1.1rem; border-radius:12px;
  background:#fff; border:1px solid #dadce0; color:#202124; font-size:.95rem }
.xb-input:focus{ border-color:#1a73e8; box-shadow:0 0 0 3px rgba(26,115,232,.15); outline:none }

.xb-submit{ width:100%; margin-top:1rem; display:flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.85rem 1rem; border-radius:14px; font-weight:700; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,#4285f4,#1a73e8); position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 12px 28px -10px rgba(26,115,232,.6);
  transition:transform .18s, box-shadow .18s }
.xb-submit::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.35), transparent 45%) }
.xb-submit:hover{ transform:translateY(-1px);
  box-shadow:0 1px 1px rgba(255,255,255,.45) inset, 0 16px 34px -10px rgba(26,115,232,.7) }

@media (max-width:900px){
  .xb-grid{ grid-template-columns:1fr }
  .xb-hero{ padding:1.2rem 1.3rem }
}

/* ===== CHROMEWALLPAPER v18 — sidebar 300x250 ad box (above Free Tools) ===== */
.side-ad{ display:flex; flex-direction:column; align-items:center; gap:.45rem;
  margin:0 0 14px; padding:.9rem; border-radius:18px;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 26px -16px rgba(60,64,67,.35) }
.side-ad-label{ font-family:var(--font-m); font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#9aa0a6 }
.side-ad-slot{ width:300px; max-width:100%; min-height:250px;
  display:grid; place-items:center; overflow:hidden; border-radius:10px }
.side-ad-slot > *{ max-width:300px }

/* ===== CHROMEWALLPAPER v19 — nav dropdowns: more opaque ===== */
.nav-drop-menu{ background:rgba(255,255,255,.97) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--border-2) !important;
  box-shadow:0 8px 32px rgba(60,64,67,.22), 0 2px 8px rgba(60,64,67,.12) !important }

/* ===== CHROMEWALLPAPER v20 — sidebar ad: iç placeholder'ı kutuya uydur ===== */
.side-ad .ad-slot{ min-height:250px !important; width:100%;
  border:0 !important; background:none !important; box-shadow:none !important;
  display:grid; place-items:center; padding:0 !important }
.side-ad .ad-slot .ad-label{ display:none }          /* çift etiket olmasın */
.side-ad .ad-slot::before, .side-ad .ad-slot::after{ display:none !important }

/* ===== CHROMEWALLPAPER v21 — featured CTA yanı: "Coming soon" rozeti ===== */
.feat-soon{ display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:999px; font-size:.84rem; font-weight:600;
  color:#b06000; background:rgba(254,247,224,.85);
  border:1px solid rgba(249,171,0,.4);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 1px rgba(255,255,255,.8) inset, 0 6px 16px -10px rgba(249,171,0,.5) }
.soon-dot{ width:8px; height:8px; border-radius:50%; background:#f9ab00;
  animation:soon-pulse 1.6s ease-in-out infinite }
@keyframes soon-pulse{ 0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.45; transform:scale(.8) } }