/* CamAggregator — front-end theme (Phase 1a).
   Modern dark cam-directory look. Responsive, dependency-free. */

:root{
  --bg:#0b0d12; --bg2:#12151d; --card:#161a23; --line:#232838;
  --text:#eceef3; --muted:#8b93a7; --brand:#ff2d78; --brand2:#ff5c9a;
  --live:#ff2d55; --hd:#12b981; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 16px}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(11,13,18,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:16px;height:60px}
.logo{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:#fff}
.logo::first-letter{color:var(--brand)}
.search{margin-left:auto;flex:0 1 340px}
.search input{width:100%;padding:.55em .9em;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font:inherit}
.search input:focus{outline:none;border-color:var(--brand)}

/* hub nav */
.hubs{background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:60px;z-index:40}
.hubs-in{display:flex;gap:6px;overflow-x:auto;padding:8px 16px}
.hubs a{white-space:nowrap;padding:.45em .95em;border-radius:999px;color:var(--muted);font-weight:600;font-size:.92rem;border:1px solid transparent}
.hubs a:hover{color:#fff;background:var(--card)}
.hubs a.on{color:#fff;background:var(--brand);border-color:var(--brand)}
.hubs a i{font-style:normal;opacity:.7;font-size:.8em;margin-left:.2em}

/* headings */
.page-h1{font-size:1.4rem;margin:18px 0 12px;font-weight:800}
.page-h1 .count{font-size:.85rem;color:var(--muted);font-weight:600}
.sec-h2{font-size:1.15rem;margin:26px 0 12px}
.live-dot{font-size:.7rem;background:var(--live);color:#fff;padding:.2em .5em;border-radius:5px;vertical-align:middle;letter-spacing:.05em}
.subj{color:var(--muted);margin:.2em 0 1em}
.intro{color:var(--muted);max-width:70ch;margin:-4px 0 16px;font-size:.92rem}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 18px}
.chip{padding:.32em .8em;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:.85rem}
.chip:hover{color:#fff;border-color:var(--brand);background:#20222e}

/* grid */
.grid-cams{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.cam{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .12s,border-color .12s}
.cam:hover{transform:translateY(-3px);border-color:var(--brand)}
.cam-thumb{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden}
.cam-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cam:hover .cam-thumb img{transform:scale(1.05);transition:transform .3s}
.badge{position:absolute;top:8px;font-size:.66rem;font-weight:800;letter-spacing:.04em;padding:.18em .45em;border-radius:5px;color:#fff}
.badge.live{left:8px;background:var(--live)}
.badge.hd{right:8px;background:var(--hd)}
.viewers{position:absolute;bottom:8px;right:8px;font-size:.72rem;background:rgba(0,0,0,.6);padding:.15em .5em;border-radius:5px;color:#fff}
.cam-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px}
.cam-meta .nm{font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam-meta .gen{font-size:.72rem;color:var(--muted);white-space:nowrap}
.g-female{color:#ff6aa2}.g-male{color:#5aa9ff}.g-couple{color:#c98bff}.g-trans{color:#37d6b0}

/* pager */
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:26px 0}
.pager a{min-width:38px;text-align:center;padding:.5em .7em;border-radius:8px;background:var(--card);border:1px solid var(--line);color:var(--text);font-weight:600}
.pager a.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* performer */
.performer{padding-bottom:30px}
.player{margin:6px 0 14px}
.embed-frame{position:relative;width:100%;max-width:900px;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{position:relative;display:block;max-width:900px;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover;opacity:.85}
.poster .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:#fff;background:rgba(0,0,0,.25)}
.offline{max-width:900px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)}
.cta{margin:4px 0 18px}
.btn-cam{display:inline-block;background:var(--brand);color:#fff;font-weight:800;padding:.8em 1.4em;border-radius:10px}
.btn-cam:hover{background:var(--brand2)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;max-width:900px;margin:6px 0 16px}
.mi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6em .8em}
.mi span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mi b{font-size:1rem}

/* misc */
.empty{padding:60px 0;text-align:center;color:var(--muted)}
.site-foot{border-top:1px solid var(--line);margin-top:30px;padding:22px 0;color:var(--muted);font-size:.85rem;text-align:center}

@media (max-width:640px){
  .grid-cams{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .search{flex-basis:auto}
  .logo{font-size:1.15rem}
}