/* ===========================================================
   PngDonuts — "Flat" theme
   Zero shadows, zero gradients, zero decorative motion. Flat
   fills, 1px borders for structure, system fonts (no webfont
   network request at all — the single biggest lever for a
   sub-2s load and a clean Lighthouse run).
   =========================================================== */
:root{
  --ink:#bbe3c7;
  --ink-soft:#5f6368;
  --line:#dadce0;
  --paper:#ffffff;
  --card:#ffffff;
  --panel:#f1f3f4;          /* flat grey fill, used instead of shadows for separation */
  --accent:#1a73e8;          /* flat blue — links, nav, secondary actions */
  --accent-ink:#174ea6;
  --dl:#188038;              /* flat green — the one CTA color, download buttons only */
  --dl-ink:#0f5c27;
  --radius:6px;
  --radius-sm:4px;
  --max:1240px;
  --head-h:60px;
  font-synthesis:none;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-size:16px;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
body.layout-fluid .wrap{max-width:none;padding:0 32px}
.muted{color:var(--ink-soft)}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--accent-ink);background:#e8f0fe;padding:5px 10px;border-radius:var(--radius-sm);
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer}
.btn--solid{background:#188038;color:#fff}
.btn--solid:hover{background:#000}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.link-muted{color:var(--ink-soft);font-weight:500;font-size:14.5px}
.link-muted:hover{color:var(--ink)}
.link-arrow{color:var(--accent);font-weight:600;white-space:nowrap}
.link-arrow:hover{text-decoration:underline}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);color:#f1f1f1;font-size:13px}
.topbar__inner{display:flex;gap:14px;align-items:center;justify-content:center;padding:7px 20px;flex-wrap:wrap}
.topbar p{margin:0;opacity:.85}
.topbar strong{color:#fff}
.topbar__link{color:#9ec5ff;font-weight:600}
.topbar__link:hover{color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.site-head__inner{display:flex;align-items:center;gap:20px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:19px;color:var(--ink)}
.brand__logo{height:28px}
.brand__mark{color:var(--dl);display:flex}
.brand__name{letter-spacing:-.01em}
.mainnav{display:flex;gap:2px;margin-left:8px}
.mainnav a{font-weight:600;font-size:16px;color:var(--ink-soft);padding:8px 12px;border-radius:var(--radius-sm)}
.mainnav a:hover{color:var(--ink);background:var(--panel)}
.topsearch{margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid transparent;border-radius:var(--radius);padding:8px 14px;
  width:220px;color:var(--ink-soft)}
.topsearch:focus-within{background:#fff;border-color:var(--accent)}
.topsearch input{border:0;outline:0;background:none;font-size:14px;width:100%;color:var(--ink)}
.head-actions{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:1px}

/* ---------- hero ---------- */
.hero{padding:44px 0 36px;text-align:center;background:var(--panel);border-bottom:1px solid var(--line)}
.hero__copy{max-width:680px;margin:0 auto}
.hero h1{font-size:clamp(28px,4.6vw,42px);font-weight:600;margin:14px 0 0}
.hero h1 em{font-style:normal;color:var(--dl)}
.hero__sub{font-size:16px;color:var(--ink-soft);max-width:520px;margin:14px auto 22px}
.herosearch{display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:6px 6px 6px 16px;
  max-width:520px;margin:0 auto;color:var(--ink-soft)}
.herosearch input{flex:1;border:0;outline:0;font-size:15px;background:none;color:var(--ink)}
.herosearch button{background:var(--dl);color:#fff;border:0;font-weight:700;
  padding:11px 22px;border-radius:var(--radius-sm);cursor:pointer;font-size:14.5px}
.herosearch button:hover{background:var(--dl-ink)}
.trending{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:13.5px}
.trending__label{color:var(--ink-soft);font-weight:600}
.trending a{color:var(--ink);font-weight:500;background:#fff;border:1px solid var(--line);
  padding:5px 12px;border-radius:var(--radius-sm)}
.trending a:hover{border-color:var(--ink)}

/* ---------- category rail ---------- */
.rail{display:flex;gap:10px;overflow-x:auto;padding:8px 20px 24px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 16px;font-weight:600;font-size:14px;color:var(--ink)}
.chip:hover{border-color:var(--ink)}

/* ---------- block scaffolding ---------- */
.block{padding-top:44px;padding-bottom:44px}
.block__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin:22px 0px;flex-wrap:wrap}
.block h2{font-size:clamp(22px,2.8vw,30px);font-weight:600}
.block__head .muted{margin:6px 0 0;font-size:15px}
.block__more{text-align:center;margin-top:30px}
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* tabs */
.tabs{display:flex;gap:4px;background:var(--panel);border-radius:var(--radius);padding:4px}
.tab{border:0;background:none;font-weight:600;font-size:13.5px;color:var(--ink-soft);
  padding:7px 14px;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit}
.tab:hover{color:var(--ink)}
.tab.is-on{background:#fff;color:var(--ink)}

/* ---------- png grid (natural aspect-ratio cards, default) ----------
   HEIGHT is fixed per breakpoint, WIDTH is proportional to each card's own
   image (--ar, set inline by png_card()) — a wide banner and a tall icon
   each keep their real shape instead of being forced into an identical
   square. Admin can flip this to a uniform fixed-size box instead
   (Settings → Appearance → Thumbnail shape = Square) — see the
   #thumbShapeSquare override injected in theme/header.php when that's on;
   it wins via !important so this file never needs to know which mode is active. */
.grid{display:flex;flex-wrap:wrap;gap:16px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;display:flex;flex-direction:column;flex:0 0 auto;width:calc(220px * var(--ar,1))}
@media(max-width:1080px){.grid{gap:14px}.pcard{width:calc(190px * var(--ar,1))}}
@media(max-width:760px){.grid{gap:12px}.pcard{width:calc(160px * var(--ar,1))}}
@media(max-width:420px){.pcard{width:calc(130px * var(--ar,1))}}
.pcard:hover{border-color:#9d9d9d; box-shadow: 5px 5px #9d9d9d;}
.pcard__thumb{position:relative;height:220px;overflow:hidden;
  background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 50%/14px 14px}
@media(max-width:1080px){.pcard__thumb{height:190px}}
@media(max-width:760px){.pcard__thumb{height:160px}}
@media(max-width:420px){.pcard__thumb{height:130px}}
/* Phones: one full-width card per row instead of several narrow ones
   squeezed side by side — the fixed-height/proportional-width scheme above
   is a desktop-grid thing and looks cramped once there's only ~350px to
   work with. Card takes the full row width, thumb height switches from
   fixed to aspect-ratio so the image still keeps its real shape (no
   letterboxing) at that full width. Wins over the rules above (later in
   the file, same specificity) at any width this query matches. */
@media(max-width:600px){
  .grid{flex-direction:column;gap:14px}
  .pcard{width:100%!important}
  .pcard__thumb{height:auto!important;aspect-ratio:var(--ar,1)}
}
.pcard__thumb .checker{position:absolute;inset:0;opacity:.45;
  background-image:
    linear-gradient(45deg,#ededed 25%,transparent 25%),
    linear-gradient(-45deg,#ededed 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#ededed 75%),
    linear-gradient(-45deg,transparent 75%,#ededed 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.pcard__thumb svg,.pcard__thumb img{display:block;width:100%;height:100%;object-fit:contain}
.pcard__dl{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;
  opacity:0;color:var(--ink)}
.pcard:hover .pcard__dl{opacity:1}
.pcard__dl:hover{background:var(--dl);color:#fff;border-color:var(--dl)}
.pcard__body{padding:10px 12px 12px;border-top:1px solid var(--line);
  min-height:70px} /* fixed so justified rows stay flush */
.pcard__title{font-weight:600;color:var(--ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pcard__title:hover{color:var(--accent)}
/* One row only: tags that don't fit wrap to a clipped 2nd line, so every card
   body is the same height and justified rows stay flush (no white gaps). */
.pcard__tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;max-height:22px;overflow:hidden}
.pcard__tags a{font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--panel);
  border-radius:var(--radius-sm)}
.pcard__tags a:hover{color:var(--ink);background:#bbe3c7}

/* ---------- collections (thumbnail cards) ---------- */
.collections{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.coll{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;display:flex;flex-direction:column}
.coll:hover{border-color:var(--ink)}
.coll__thumb{position:relative;aspect-ratio:16/10;display:grid;place-items:center;padding:22px;background:var(--panel)}
.coll__thumb svg{width:46%;height:46%}
.coll__count{position:absolute;top:10px;right:10px;font-size:11px;font-weight:700;color:#fff;
  background:rgba(32,33,36,.72);padding:3px 9px;border-radius:var(--radius-sm)}
.coll__meta{padding:12px 14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.coll__meta h3{font-size:15.5px;font-weight:700}
.coll__meta .arr{color:var(--ink-soft)}
.coll:hover .arr{color:var(--ink)}

/* ---------- tag cloud ---------- */
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tagcloud a{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 14px;font-size:13.5px;font-weight:500;color:var(--ink)}
.tagcloud a:hover{border-color:var(--ink)}

/* ---------- faq ---------- */
.faq{max-width:760px}
.faq__list{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px}
.faq details[open]{border-color:var(--ink)}
.faq summary{font-weight:600;font-size:15.5px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:19px;color:var(--ink-soft);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:10px 0 0;color:var(--ink-soft)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#c4c7c5;padding:44px 0 24px;margin-top:16px}
.site-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.brand--foot{color:#fff;margin-bottom:12px}
.foot-brand .muted{color:#9aa0a6;max-width:230px}
.foot-col h2{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;margin-bottom:12px}
.foot-col a{display:block;color:#9aa0a6;font-size:14px;padding:4px 0}
.foot-col a:hover{color:#fff}
.site-foot__base{display:flex;justify-content:space-between;border-top:1px solid #3c4043;
  margin-top:30px;padding-top:18px;font-size:13px}
.site-foot__base .muted{color:#9aa0a6}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .mainnav,.topsearch{display:none}
  .head-actions{margin-left:auto}
  .hero{padding:34px 0 26px}
  .block{padding:34px 0}
  .collections{grid-template-columns:repeat(2,1fr)}
  .site-foot__grid{grid-template-columns:1fr 1fr;gap:20px}
  body.layout-fluid .wrap{padding:0 20px}
}
@media(max-width:620px){
  .wrap{padding:0 14px}
  .burger{display:flex}
  .head-actions .link-muted{display:none}
  .hero{padding:26px 0 20px}
  .hero h1{font-size:clamp(26px,8vw,36px)}
  .hero__sub{font-size:14.5px;margin:12px auto 18px}
  .herosearch{flex-wrap:wrap;border-radius:var(--radius)}
  .herosearch input{min-width:0}
  .herosearch button{flex:1}
  .block{padding:28px 0}
  .block__head{flex-direction:column;align-items:flex-start;gap:12px;margin:22px 0px}
  .rail{padding:4px 14px 18px}
  .collections{grid-template-columns:1fr;gap:12px}
  .coll__thumb{aspect-ratio:16/8}
  .site-foot{padding:32px 0 20px}
  .site-foot__base{flex-direction:column;gap:6px}
  .mainnav.open{display:flex;position:absolute;top:var(--head-h);left:0;right:0;
    flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:14px;gap:2px}
}

/* ===========================================================
   SINGLE PNG PAGE
   =========================================================== */
.breadcrumb{font-size:13px;color:var(--ink-soft);padding:16px 0 0;display:flex;
  flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{opacity:.5}
.breadcrumb .here{color:var(--ink);font-weight:500}

.single{display:grid;grid-template-columns:1fr 360px;gap:28px;padding:20px 0 10px;align-items:start}
.single--top{padding-top:28px}

/* preview */
.preview{display:block;width:fit-content;max-width:100%;margin:0 auto;position:relative;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;line-height:0}
.preview svg,.preview img{display:block;max-width:100%;max-height:500px;width:auto;height:auto}
.preview__zoom{position:absolute;top:12px;right:12px;background:#fff;border:1px solid var(--line);
  width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--ink-soft);z-index:1}
.preview__zoom:hover{color:var(--ink);border-color:var(--ink)}

/* quick tools row under preview */
.tools{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tools a{flex:1;min-width:110px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:11px;font-size:13.5px;
  font-weight:600;color:var(--ink)}
.tools a:hover{border-color:var(--ink)}
.tools svg{color:var(--accent)}

/* info panel */
.panel{position:sticky;top:76px}
.panel h1{font-size:24px;font-weight:600;line-height:1.25}
.panel__desc{color:var(--ink-soft);font-size:14.5px;margin:10px 0 18px}
.dl-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--dl);color:#fff;font-weight:700;font-size:15.5px;padding:14px;border-radius:var(--radius)}
.dl-btn:hover{background:var(--dl-ink)}
.dl-btn--narrow{max-width:280px}
.dl-note{text-align:center;font-size:12px;color:var(--ink-soft);margin:8px 0 0}
.dl-sizes{display:flex;gap:6px;margin-top:12px}
.dl-sizes button{flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 4px;
  cursor:pointer;font-family:inherit;line-height:1.3}
.dl-sizes button:hover,.dl-sizes button.is-on{border-color:var(--ink)}
.dl-sizes b{display:block;font-size:12.5px;color:var(--ink)}
.dl-sizes small{font-size:10.5px;color:var(--ink-soft)}

/* contributor */
.contributor{display:flex;align-items:center;gap:10px;margin-top:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px}
.contributor__av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:15px;background:var(--accent)}
.contributor__meta{line-height:1.3;min-width:0}
.contributor__meta small{display:block;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
.contributor__meta a{font-weight:700;font-size:14px;color:var(--ink)}
.contributor__meta a:hover{color:var(--accent)}
.contributor__follow{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--accent);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 12px}
.contributor__follow:hover{border-color:var(--accent)}

.specs{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.specs div{display:flex;justify-content:space-between;padding:10px 14px;font-size:13.5px;
  border-bottom:1px solid var(--line);background:#fff}
.specs div:last-child{border-bottom:0}
.specs span{color:var(--ink-soft)}
.specs b{font-weight:600}

.share{display:flex;align-items:center;gap:8px;margin-top:16px}
.share span{font-size:13px;color:var(--ink-soft);font-weight:600}
.share a{width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.share a:hover{color:#fff;background:var(--ink);border-color:var(--ink)}

.license{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px}
.license svg{color:var(--dl);flex:0 0 auto}

/* tags on detail */
.detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.detail-tags a{font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--panel);
  padding:6px 12px;border-radius:var(--radius-sm)}
.detail-tags a:hover{color:var(--ink);background:#e4e6e8}
.detail-tags--center{justify-content:center;margin-top:16px}

/* captcha form (download.php) */
.cap-form{max-width:320px;margin:0 auto}
.cap-form__err{color:#e5484d;font-size:14px;margin-bottom:10px}
.cap-form__input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;
  text-align:center;font-size:16px;letter-spacing:2px;text-transform:uppercase;margin:10px 0 12px}

/* error page (error.php) */
.error-page{text-align:center;padding:90px 20px}
.error-page__code{font-size:64px;margin-bottom:8px}
.error-page__msg{font-size:18px;margin-bottom:22px}

/* tool pages (tool-resize/compress/upscale.php) */
.toolgrid--section{margin-top:18px}
.prose--center{margin:0 auto}

.about{max-width:760px}
.about p{color:var(--ink-soft);margin:0 0 12px}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:30px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 6px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-weight:600;font-size:14px;
  color:var(--ink)}
.pagination a:hover{border-color:var(--ink)}
.pagination .is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .gap{border:0;background:none;color:var(--ink-soft)}
.pagination .nav{font-weight:600}
.pagination .nav[aria-disabled="true"]{color:var(--ink-soft);pointer-events:none}

/* infinite-scroll status row (replaces .pagination when admin turns it on) */
.scroll-status{text-align:center;padding:30px 0 6px;color:var(--ink-soft);font-size:14px}
.scroll-status[hidden]{display:none}
.scroll-spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--ink);
  border-radius:50%;display:inline-block;margin-right:8px;vertical-align:-4px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:920px){
  .single{grid-template-columns:1fr;gap:20px}
  .panel{position:static}
  .preview{min-height:320px;padding:24px}
}

/* ===========================================================
   DOWNLOAD PAGE
   =========================================================== */
.dlwrap{max-width:760px;margin:0 auto;padding:32px 0 10px}
.dlcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;text-align:center}
.dlcard--narrow{max-width:520px;margin:24px auto 0}
.dlcard__tick{width:42px;height:42px;border-radius:50%;background:#e6f4ea;
  color:var(--dl);display:grid;place-items:center;margin:0 auto 12px}
.dlcard h1{font-size:22px;font-weight:600;line-height:1.25}
.dlcard__sub{color:var(--ink-soft);font-size:14px;margin:8px 0 18px}
.dlcard__preview{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  height:420px;display:grid;place-items:center;padding:32px;overflow:hidden;margin-bottom:20px}
.dlcard__preview .checker{position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(45deg,#ededed 25%,transparent 25%),
    linear-gradient(-45deg,#ededed 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#ededed 75%),
    linear-gradient(-45deg,transparent 75%,#ededed 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}
.dlcard__preview svg,.dlcard__preview img{position:relative;max-height:390px;max-width:95%}
.dlcard .dl-btn{max-width:320px;margin:0 auto}
.dlcard__meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-top:16px;
  font-size:13px;color:var(--ink-soft)}
.dlcard__meta b{color:var(--ink);font-weight:600}
.dlcard__by{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;color:var(--ink-soft)}
.dlcard__by .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:11px;background:var(--accent)}
.dlcard__by a{color:var(--ink);font-weight:600}
.dlcard__by a:hover{color:var(--accent)}

/* ad slot — only rendered by ad_slot() when the admin has turned it on AND
   pasted real code, so an empty box never shows. Each variant reserves the
   ad unit's own footprint via min-height/min-width so the layout doesn't
   jump once the ad script fills in (Core Web Vitals / CLS). */
.adslot{margin:22px auto 0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.adslot--header{min-height:90px;max-width:970px;width:100%;margin:14px auto}
.adslot--sidebar{min-height:250px;min-width:280px;margin-top:20px}
.adslot--download{min-height:100px;max-width:760px}
.adslot--single{min-height:100px;max-width:100%}

@media(max-width:620px){
  .dlwrap{padding:22px 0 4px}
  .dlcard{padding:18px}
  .dlcard__preview{height:330px}
  /* img max-height wasn't overridden here before (still the desktop 260px)
     while the box itself dropped to 220px, so a tall/portrait image could
     already get clipped by the box's overflow:hidden on phones — fixed
     while resizing this box for the desktop 1.5x bump below. */
  .dlcard__preview svg,.dlcard__preview img{max-height:300px}
}

/* ===========================================================
   TAG / LISTING PAGE
   =========================================================== */
.listing-head{padding:24px 0 4px}
.listing-head h1{font-size:clamp(24px,3.6vw,34px);font-weight:600;margin-top:10px}
.listing-head h1 .count{font-size:.5em;font-weight:600;color:var(--ink-soft);vertical-align:middle;margin-left:8px}
.listing-head p{color:var(--ink-soft);max-width:700px;margin:10px 0 0;font-size:15px}
.user-head{display:flex;align-items:center;gap:16px;margin-top:14px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.user-head__av{width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--panel);color:var(--accent-ink);font-weight:600;font-size:22px}
.user-head__meta h1{font-size:clamp(20px,2.8vw,26px);font-weight:600}
.user-head__count{color:var(--ink-soft);font-size:13.5px;margin-top:2px}
.user-head__bio{color:var(--ink-soft);font-size:14px;margin-top:8px;max-width:640px}
.listing-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin:20px 0 22px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.listing-bar h2{font-size:18px;font-weight:700}
.listing-bar .sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
.sortsel{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft)}
.sortsel select{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;background:#fff;cursor:pointer}

/* long-form SEO prose sections (below pagination) */
.prose{max-width:1080px}
.prose h2{font-size:clamp(20px,2.4vw,25px);font-weight:600;margin-bottom:14px}
.prose p{color:var(--ink-soft);font-size:15px;line-height:1.72;margin:0 0 16px;max-width:1000px}
.prose p:last-child{margin-bottom:0}
.prose em{font-style:normal;color:var(--ink);font-weight:600}
.prose a{color:var(--accent);font-weight:500}
.prose a:hover{text-decoration:underline}

/* SEO copy block at the bottom of listing */
.seo-copy{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-top:10px}
.seo-copy h2{font-size:19px;font-weight:600;margin-bottom:8px}
.seo-copy h3{font-size:15px;font-weight:700;margin:16px 0 6px}
.seo-copy p{color:var(--ink-soft);margin:0 0 10px;max-width:800px;font-size:14.5px}
.seo-copy a{color:var(--accent);font-weight:500}
.seo-copy a:hover{text-decoration:underline}

@media(max-width:620px){
  .listing-head{padding:18px 0 2px}
  .seo-copy{padding:16px}
}

/* ===========================================================
   COOKIE CONSENT (site-wide, AdSense / GDPR baseline)
   =========================================================== */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:540px;
  margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:none}
.cookie-bar.show{display:block}
.cookie-bar h4{font-size:15px;font-weight:700;margin-bottom:5px}
.cookie-bar p{font-size:13px;color:var(--ink-soft);margin:0 0 12px;line-height:1.55}
.cookie-bar a{color:var(--accent);font-weight:500}
.cookie-bar a:hover{text-decoration:underline}
.cookie-bar__btns{display:flex;gap:8px;flex-wrap:wrap}
.cookie-bar__btns .btn{flex:1;min-width:120px;padding:9px 14px;font-size:13.5px}
@media(max-width:620px){.cookie-bar{left:8px;right:8px;bottom:8px;padding:14px}}

/* ===========================================================
   TOOL PAGES (resize / compress / upscale)
   =========================================================== */
.tool-hero{text-align:center;padding:38px 0 8px;max-width:680px;margin:0 auto}
.tool-hero .eyebrow{margin-bottom:12px}
.tool-hero h1{font-size:clamp(26px,3.8vw,38px);font-weight:600}
.tool-hero p{color:var(--ink-soft);font-size:15.5px;margin:14px auto 0;max-width:540px}

.tool{max-width:740px;margin:26px auto 0}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px dashed var(--line);border-radius:var(--radius);background:var(--card);
  padding:48px 22px;min-height:220px;text-align:center;cursor:pointer}
.dropzone.drag,.dropzone:hover{border-color:var(--accent);background:#e8f0fe}
.dropzone svg{width:38px;height:38px;color:var(--accent);margin-bottom:12px}
.dropzone h2{font-size:16.5px;font-weight:700}
.dropzone p{color:var(--ink-soft);font-size:13.5px;margin:5px 0 0}
.dropzone input{display:none}

.tool-panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.tool-panel.show{display:block}

/* ---------- public upload form (/upload) ---------- */
.upload-page{max-width:560px;margin:0 auto;padding-bottom:40px}
.upload-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin-top:22px;display:flex;flex-direction:column;gap:4px}
.upload-form .dropzone{min-height:170px;padding:30px 18px;margin-bottom:14px}
.upload-form .src-toggle{margin-bottom:14px}
.field__label{font-size:13.5px;font-weight:600;margin:14px 0 6px}
.field__label .muted{font-weight:400}
.field{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff}
.field:focus{outline:none;border-color:var(--accent)}
textarea.field{resize:vertical}
.upload-form__err{background:#fce8e6;border:1px solid #f6bab5;border-radius:var(--radius-sm);
  padding:10px 14px;margin-bottom:16px;color:#a50e0e;font-size:13.5px}
.upload-form__err p{margin:2px 0}
.upload-form__submit{margin-top:6px}
/* honeypot — invisible to sighted users and screen readers, but present in
   the DOM/tab order enough that a bot filling every field trips it. */
.upload-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tool-prev{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50%/22px 22px;
  display:grid;place-items:center;padding:16px;min-height:210px;margin-bottom:16px;overflow:hidden}
.tool-prev img{max-width:100%;max-height:290px;border-radius:4px}
.ctrl{margin-bottom:14px}
.ctrl label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:6px}
.ctrl label span{color:var(--accent)}
.ctrl input[type=range]{width:100%;accent-color:var(--accent)}
.ctrl-row{display:flex;gap:10px}
.ctrl-row .ctrl{flex:1}
.ctrl input[type=number]{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 11px;
  font-family:inherit;font-size:13.5px}
.ctrl-check{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft);font-weight:500}
.tool-stats{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.tool-stats span{flex:1;min-width:110px;background:var(--panel);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:12.5px;color:var(--ink-soft)}
.tool-stats b{display:block;font-size:14px;color:var(--ink);font-weight:700}
.tool-stats .save b{color:var(--dl)}
.tool-actions{display:flex;gap:8px;flex-wrap:wrap}
.tool-actions .btn{flex:1;min-width:150px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:10px;font-size:13px}
.step h3{font-size:15px;font-weight:700;margin-bottom:5px}
.step p{font-size:13.5px;color:var(--ink-soft);margin:0}

.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.toolcard{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px}
.toolcard:hover{border-color:var(--ink)}
.toolcard .ic{width:38px;height:38px;border-radius:var(--radius-sm);flex:0 0 auto;display:grid;place-items:center;
  background:#e8f0fe;color:var(--accent)}
.toolcard h3{font-size:14.5px;font-weight:700}
.toolcard p{font-size:12.5px;color:var(--ink-soft);margin:2px 0 0}

@media(max-width:760px){.steps,.toolgrid{grid-template-columns:1fr}}

/* ===========================================================
   LEGAL PAGE
   =========================================================== */
.legal{max-width:800px;margin:0 auto;padding:28px 0 10px}
.legal h1{font-size:clamp(24px,3.6vw,32px);font-weight:600}
.legal .updated{color:var(--ink-soft);;margin:8px 0 22px}
.legal h2{font-size:19px;font-weight:600;margin:26px 0 8px}
.legal h3{font-weight:700;margin:18px 0 7px}
.legal p,.legal li{color:var(--ink-soft);line-height:1.7}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li{margin-bottom:6px}
.legal a{color:var(--accent);font-weight:500}
.legal a:hover{text-decoration:underline}
.legal__toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:22px}
.legal__toc h4{text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:8px}
.legal__toc a{display:inline-block;margin:3px 12px 3px 0;}

/* ---- Collections directory (/collections/) ---- */
.collections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:8px}
.col-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.col-card:hover{border-color:var(--ink)}
.col-card__thumb{display:block;aspect-ratio:4/3;background:var(--panel);overflow:hidden}
.col-card__thumb img{width:100%;height:100%;object-fit:cover}
.col-card__meta{display:flex;flex-direction:column;gap:2px;padding:11px 13px}
.col-card__meta b{font-size:14.5px;font-weight:700;color:var(--ink)}
.col-card__meta small{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:520px){.collections-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}}

/* ---- External-download captcha popup ---- */
.dlmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.dlmodal[hidden]{display:none}
.dlmodal__backdrop{position:absolute;inset:0;background:rgba(32,33,36,.5)}
.dlmodal__box{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius,6px);
  width:100%;max-width:360px;padding:22px 22px;text-align:center}
.dlmodal__x{position:absolute;top:8px;right:10px;border:none;background:none;font-size:22px;line-height:1;
  color:var(--ink-soft,#5f6368);cursor:pointer;padding:4px}
.dlmodal__box h3{font-size:17px;font-weight:600;margin:0 0 6px}
.dlmodal__sub{color:var(--ink-soft,#5f6368);font-size:13.5px;margin:0 0 14px}
.dlmodal__cap{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.dlmodal__cap[hidden]{display:none}
.dlmodal__cap img{border:1px solid var(--line,#dadce0);border-radius:var(--radius-sm);background:#f1f3f4;width:200px;height:70px}
#dlCapReload,.cap-reload{border:1px solid var(--line,#dadce0);background:#fff;border-radius:var(--radius-sm);width:36px;height:36px;
  font-size:16px;cursor:pointer;color:var(--ink-soft,#5f6368)}
#dlCapReload:hover,.cap-reload:hover{border-color:var(--ink,#202124);color:var(--ink,#202124)}
#dlCapInput{width:100%;border:1px solid var(--line,#dadce0);border-radius:var(--radius-sm);padding:11px;text-align:center;
  font-size:17px;letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;font-weight:700}
#dlCapInput[hidden]{display:none}
.dlmodal__err{color:#c5221f;font-size:12.5px;margin:0 0 12px}
.dlmodal__ready{text-align:center}
.dlmodal__ok{color:var(--dl,#188038);font-weight:700;font-size:14.5px;margin:0 0 12px}
#dlCapVerify[hidden],#dlReady[hidden]{display:none}