/* content.css - listings + category hubs of all six content types (CT-1, pages/content_list.php).
   S1.2-B (search, home tiles) and S4.3-A (landing pages) extend this file. Prefix .ct-; the listing keeps the
   legacy class names (.search-input, .sort-btn, .cat-btn, .chip-filter, .page-btn) that livesearch.js and the
   old pages used. Per-type tint: --ct-accent (#hex) and --ct-rgb (r,g,b) are set inline on .ct-hero/.ct-page. */

.ct-hero{position:relative;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--border2);padding:48px 24px 36px}
.ct-hero::before{content:"";position:absolute;top:-220px;right:-140px;width:560px;height:560px;background:radial-gradient(closest-side,rgba(var(--ct-rgb,52,226,155),.11),transparent);pointer-events:none}
.ct-wrap{position:relative;max-width:1240px;margin:0 auto}
.ct-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 14px;font-size:13px;color:var(--muted)}
.ct-crumbs a{color:var(--muted);text-decoration:none}
.ct-crumbs a:hover{color:var(--text)}
.ct-crumbs i{font-size:15px;opacity:.55}
.ct-crumbs span{color:var(--text)}
.ct-pill{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:4px 12px;border-radius:100px;background:rgba(var(--ct-rgb),.1);border:1px solid rgba(var(--ct-rgb),.25);color:var(--ct-accent);font:700 11px/1.6 var(--font-mono);letter-spacing:.02em}
.ct-pill i{font-size:14px}
.ct-h1{margin:0 0 8px;font-family:var(--font-display);font-size:2.2rem;font-weight:700;line-height:1.15}
.ct-sub{margin:0 0 28px;color:var(--muted);font-size:15px}
.ct-search{position:relative;max-width:600px}
.ct-search>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px;pointer-events:none;z-index:1}
.ct-search form{margin:0}
.search-input{box-sizing:border-box;width:100%;padding:12px 16px 12px 44px;border-radius:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font-size:15px;font-family:var(--font-body);outline:none;transition:border-color .15s,box-shadow .15s}
.search-input:focus{border-color:var(--ct-accent,var(--green));box-shadow:0 0 0 3px rgba(var(--ct-rgb,52,226,155),.15)}

/* Layout: 240px sticky filter column; stacked below 1100px (a 728x90 leaderboard needs a 760px results column) */
.ct-page{max-width:1240px;margin:0 auto;padding:32px 24px 80px}
.mu-list-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.mu-list-layout>aside{position:sticky;top:88px;min-width:0}
.ct-main{min-width:0}
.sidebar-section{margin-bottom:24px}
.sidebar-section h4{margin:0 0 10px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ct-side .mu-side-cats{max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.cat-btn{box-sizing:border-box;display:block;width:100%;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:14px;font-family:var(--font-body);text-align:left;text-decoration:none;transition:background .15s,color .15s}
.cat-btn:hover,.cat-btn.active{background:rgba(var(--ct-rgb),.1);color:var(--ct-accent)}
.ct-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-filter{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:100px;border:1px solid var(--border2);color:var(--muted);font:600 12px/1.5 var(--font-mono);text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.chip-filter:hover,.chip-filter.active{border-color:var(--ct-accent);color:var(--ct-accent);background:rgba(var(--ct-rgb),.08)}
.chip-filter i{font-size:14px}
.ct-submit{display:flex;align-items:center;gap:8px;margin-top:4px;padding:11px 14px;border-radius:11px;background:var(--ct-accent);color:#06120c;font-size:13.5px;font-weight:700;text-decoration:none;transition:filter .15s}
.ct-submit:hover{filter:brightness(1.1)}
.ct-clear{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:#ff6b81;font-size:13px;font-weight:600;text-decoration:none}

/* Results */
.ct-sortbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-bottom:24px}
.ct-count{font-size:14px;color:var(--muted)}
.ct-count strong{color:var(--text)}
.ct-tagpill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;background:rgba(var(--ct-rgb),.1);border:1px solid rgba(var(--ct-rgb),.25);color:var(--ct-accent);font-size:12.5px;font-weight:600;text-decoration:none}
.ct-sorts{display:flex;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ct-sorts::-webkit-scrollbar{display:none}
.sort-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:100px;border:1px solid var(--border2);color:var(--muted);font-size:13px;font-weight:600;font-family:var(--font-body);text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.sort-btn:hover,.sort-btn.active{border-color:var(--ct-accent);color:var(--ct-accent);background:rgba(var(--ct-rgb),.08)}
.sort-btn i{font-size:13px}
.ct-empty{margin-bottom:36px;padding:72px 24px;border:1px dashed var(--border2);border-radius:18px;text-align:center;color:var(--muted)}
.ct-empty>i{display:block;margin-bottom:14px;font-size:56px;color:var(--ct-accent);opacity:.35}
.ct-empty p{margin:0;font-size:15px}
.ct-empty .ct-empty__sub{margin-top:8px;font-size:13px}
.ct-empty a{color:var(--ct-accent)}
.ct-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.page-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 6px;border-radius:9px;border:1px solid var(--border2);color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.page-btn:hover,.page-btn.active{border-color:var(--ct-accent);color:var(--ct-accent);background:rgba(var(--ct-rgb),.08)}
.ct-gap{padding:0 4px;color:var(--muted)}

/* How to install + browse by version */
.ct-howto{margin-top:40px;padding:0 22px;background:var(--surface);border:1px solid var(--border2);border-radius:18px}
.ct-howto summary{display:flex;align-items:center;gap:10px;padding:18px 0;cursor:pointer;list-style:none;font:700 17px/1.3 var(--font-display)}
.ct-howto summary::-webkit-details-marker{display:none}
.ct-howto summary>i{font-size:20px;color:var(--ct-accent)}
.ct-howto summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 4px 0 auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.ct-howto[open] summary::after{transform:rotate(-135deg)}
.ct-howto ol{display:grid;gap:10px;margin:0;padding:0 0 20px;list-style:none;counter-reset:ct-step}
.ct-howto li{display:flex;align-items:flex-start;gap:12px;counter-increment:ct-step;font-size:14.5px;line-height:1.55}
.ct-howto li::before{content:counter(ct-step);flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(var(--ct-rgb),.12);color:var(--ct-accent);font:700 13px/1 var(--font-mono)}
.ct-browse{margin-top:28px}
.ct-browse h2{margin:0 0 12px;font:700 17px/1.3 var(--font-display)}
.ct-cloud{display:flex;flex-wrap:wrap;gap:8px}

/* Coming soon (type switched off) */
.ct-soon{max-width:640px;margin:0 auto;padding:56px 24px;border:1px solid var(--border2);border-radius:20px;background:var(--surface);text-align:center}
.ct-soon__icon{display:block;margin-bottom:12px;font-size:56px;color:var(--ct-accent);opacity:.6}
.ct-soon h2{margin:0 0 10px;font:700 1.5rem/1.25 var(--font-display)}
.ct-soon p{margin:0 0 22px;color:var(--muted);font-size:15px}
.ct-soon .ct-cloud{justify-content:center}

.ct-hero a:focus-visible,.ct-page a:focus-visible,.ct-howto summary:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px}

/* Search + home (S1.2-B): type switch, result groups, compact cards .ct-cc, type tiles .ct-tile, rows .ct-row */
input[type=search].search-input{-webkit-appearance:none;appearance:none}
.ct-seg{margin-top:18px}
.sort-btn b{font:600 11px var(--font-mono);opacity:.7}
.ct-sg{margin-bottom:36px}
.ct-sg__h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ct-sg__h h2{margin:0;font:700 19px/1.3 var(--font-display)}
.ct-sg__h small{color:var(--muted);font:600 12px var(--font-mono)}
.ct-sg__h>a{display:flex;align-items:center;gap:3px;margin-left:auto;color:var(--ct-accent);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.ct-sg__more{margin:16px 0 0;text-align:center}
.ct-sg__more a{white-space:normal}
.ct-ico,.ct-cc__l{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:rgba(var(--ct-rgb),.12);color:var(--ct-accent);font-size:19px;overflow:hidden}
.ct-cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ct-cc,.ct-tile{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--border2);color:var(--text);text-decoration:none;transition:.15s}
.ct-cc:hover,.ct-tile:hover{border-color:var(--ct-accent);transform:translateY(-2px)}
.ct-cc__l{flex-basis:48px;height:48px;font-size:22px}
.ct-cc__l img{display:block;width:48px;height:48px;object-fit:cover}
.ct-cc__b,.ct-tile>span+span{flex:1;min-width:0}
.ct-cc__n,.ct-cc__s{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ct-cc__n{font-size:14.5px;font-weight:700}
.ct-cc__s{margin-top:2px;color:var(--muted);font-size:12.5px}
.ct-cc__m{display:flex;align-items:center;gap:4px;margin-top:5px;color:var(--ct-accent);font:600 11.5px var(--font-mono)}
.ct-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ct-tile{gap:14px;padding:18px;border-radius:16px}
.ct-tile>span:first-child{display:grid;place-items:center;flex:0 0 50px;height:50px;border-radius:14px;background:linear-gradient(140deg,var(--ct-accent),rgba(var(--ct-rgb),.3));color:#06120c;font-size:25px}
.ct-tile b{display:block;font:700 17px/1.25 var(--font-display)}
.ct-tile small{color:var(--muted);font:600 12px/1.4 var(--font-mono)}
.ct-tile>i{color:var(--muted);font-size:20px}
.ct-tile:hover>i{color:var(--ct-accent)}
.ct-cc:focus-visible,.ct-tile:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px}
@media (max-width:760px){
  .ct-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ct-tile{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .ct-tile>span:first-child{flex-basis:44px;width:44px;height:44px;font-size:22px}
  .ct-tile>i{display:none}
}
@media (max-width:640px){
  .ct-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(240px,84%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .ct-row>*{scroll-snap-align:start}
}
/* Landing pages (S4.3-A, pages/landing.php): stat tiles, switcher rows, rank badges (page 1), about + install, FAQ */
.ct-lead{max-width:820px;line-height:1.6}
.ct-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:820px;margin:0 0 18px}
.ct-stats>div{min-width:0;padding:13px 16px;border-radius:14px;background:rgba(var(--ct-rgb),.06);border:1px solid rgba(var(--ct-rgb),.2)}
.ct-stats b{display:block;overflow:hidden;font:700 22px/1.2 var(--font-display);white-space:nowrap;text-overflow:ellipsis}
.ct-stats span{display:block;margin-top:3px;color:var(--muted);font:600 10.5px/1.4 var(--font-mono);letter-spacing:.05em;text-transform:uppercase}
.ct-sw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ct-sw>span{margin-right:4px;color:var(--muted);font:600 12px var(--font-mono)}
.chip-filter b{font-weight:600;opacity:.6}
.ct-rank{counter-reset:ct-rk}
.ct-rank .mu-mcard{counter-increment:ct-rk}
.ct-rank .mu-mcard__img::after{content:"#" counter(ct-rk);position:absolute;top:6px;left:6px;padding:1px 7px;border-radius:7px;background:rgba(8,11,9,.85);border:1px solid rgba(var(--ct-rgb),.45);color:var(--ct-accent);font:700 11px/1.5 var(--font-mono)}
.ct-ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:28px;align-items:start}
.ct-ab p{margin:0 0 14px;color:#c2cdc6;font-size:15px;line-height:1.7}
.ct-ab .ct-howto{margin-top:0}
.ct-fq{margin-top:10px}
.ct-fq summary{font-size:15.5px}
.ct-fq p{margin:0;padding:0 0 18px;color:#c2cdc6;font-size:14.5px;line-height:1.65}
@media (max-width:900px){.ct-ab{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ct-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ct-stats b{font-size:19px}.ct-by{display:none}}
@media (max-width:1100px){
  .mu-list-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .mu-list-layout>aside{position:static}
  .ct-side .sidebar-section{margin-bottom:14px}
  .ct-side .mu-side-cats,.ct-side .ct-chips{display:flex;flex-wrap:nowrap;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-width:thin}
  .ct-side .cat-btn{flex:0 0 auto;width:auto;padding:7px 13px;border:1px solid var(--border2);border-radius:100px;font-size:13px;white-space:nowrap}
  .ct-side .chip-filter{flex:0 0 auto;padding:7px 13px}
  .ct-submit{display:inline-flex}
}
@media (max-width:640px){
  .ct-hero{padding:32px 16px 24px}
  .ct-h1{font-size:1.75rem}
  .ct-sub{margin-bottom:20px;font-size:14px}
  .ct-page{padding:20px 16px 60px}
  .ct-sortbar{margin-bottom:16px}
  .ct-sorts{gap:6px}
  .sort-btn{padding:7px 10px;font-size:12.5px}
  .ct-howto{padding:0 16px}
  .ct-empty{padding:48px 18px}
}