* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Arial, sans-serif; color:#111; background:#fff; font-size:14px; }
.wrap { max-width: 960px; margin:0 auto; padding:16px; }
header { display:flex; flex-wrap:wrap; align-items:center; gap:12px; border-bottom:1px solid #ddd; padding-bottom:12px; margin-bottom:16px; }
header a.brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:#111; font-weight:700; font-size:18px; }
header img.logo { width:32px; height:32px; object-fit:contain; }
input, select { border:1px solid #999; padding:4px 8px; font-size:14px; background:#fff; }
#search { flex:1; min-width:180px; }
h1 { font-size:16px; margin:12px 0; }
.grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .grid { grid-template-columns:1fr 1fr 1fr; } }
/* --- Blog-style (WordPress-like) post cards --- */
.card { display:flex; flex-direction:column; background:#fff; border:1px solid #e4e4e7; border-radius:10px; overflow:hidden; text-decoration:none; color:#111; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card:hover { box-shadow:0 8px 24px rgba(0,0,0,.10); transform:translateY(-2px); border-color:#d4d4d8; }
.card .thumb { position:relative; display:block; width:100%; aspect-ratio:16/9; background:#eee; overflow:hidden; }
.card .thumb img, .card .thumb .noicon { width:100%; height:100%; object-fit:cover; display:block; background:#eee; }
.card .cat { position:absolute; left:10px; top:10px; background:#111; color:#fff; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.card .body { display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; flex:1; }
.card .title { font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
.card:hover .title { text-decoration:underline; }
.card .excerpt { color:#52525b; font-size:13px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .cardfoot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid #f0f0f2; color:#71717a; font-size:12px; }
.card .readmore { font-weight:600; color:#111; }
.meta { color:#666; margin-top:4px; }
.badge { border:1px solid #ddd; padding:0 4px; margin-right:8px; }
.muted { color:#666; }
.err { color:#b00; }
.back { font-size:20px; text-decoration:none; color:#111; display:inline-block; margin-bottom:8px; }
.shots { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
.shots img { width:100%; border:1px solid #ddd; }
.center { text-align:center; }
.overlay { position:fixed; inset:0; background:#fff; padding:16px; z-index:50; }
.overlay .box { max-width:360px; margin:64px auto 0; }
.foot { border-top:1px solid #ddd; padding-top:16px; margin-top:32px; text-align:center; }
.foot a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#111; }
.foot img { width:32px; height:32px; object-fit:contain; }
.social { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
.social img { width:32px; height:32px; object-fit:contain; }

/* --- OMNi additions --- */
.agegate { background:#fff; z-index:9999; overflow:auto; }
.agegate .box { max-width:360px; margin:80px auto 0; }
button { border:1px solid #999; background:#f5f5f5; color:#111; padding:8px 14px; font-size:14px; cursor:pointer; }
button:hover { background:#eee; }
.share { border:1px solid #999; background:#fff; padding:2px 8px; font-size:13px; cursor:pointer; margin-top:8px; }
.card .body { flex:1; }
.tabs { display:grid; grid-template-columns:repeat(auto-fit, minmax(56px, 1fr)); gap:4px; margin:10px 0; }
.tab { width:100%; min-height:22px; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #999; background:#fff; color:#111; padding:3px 4px; font-size:10px; cursor:pointer; }

.tab.active { background:#111; color:#fff; border-color:#111; }
.dlbtn { display:inline-block; padding:10px 18px; font-size:16px; }
#adcount { color:#666; }

/* featured auto-loop slider */
.slider { border:1px solid #ddd; margin:12px 0; }
.slide { display:block; text-decoration:none; color:#111; }
.slide img { width:100%; height:180px; object-fit:cover; display:block; background:#eee; }
.slidetext { padding:8px; }
.dots { display:flex; gap:6px; justify-content:center; padding:0 0 8px; }
.dot { width:10px; height:10px; padding:0; border:1px solid #999; background:#fff; cursor:pointer; }
.dot.active { background:#111; border-color:#111; }


/* native ad slot inside content */
.adslot { grid-column:1 / -1; margin:16px 0; min-height:250px; display:flex; justify-content:center; align-items:center; }
.shots img { cursor:pointer; }

/* screenshot lightbox */
.lightbox { position:fixed; inset:0; background:#000; z-index:9998; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; }
.lightbox img { max-width:100%; max-height:88vh; object-fit:contain; }
.lbclose { margin-bottom:12px; }

/* ad loading screen */
.adloading { position:fixed; inset:0; background:#fff; z-index:9997; }
.adloading .box { max-width:360px; margin:120px auto 0; text-align:center; }

#adnote { border:1px solid #ddd; padding:8px; margin-top:10px; color:#333; font-size:13px; }

.recgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.reccard { display:block; text-align:center; }
.reccard img { width:64px; height:64px; object-fit:cover; border:1px solid #ddd; }
.rectitle { display:block; font-size:12px; }


/* Most downloaded rail */
.sechead { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:22px 0 10px; border-bottom:2px solid #111; padding-bottom:6px; }
.sechead h2 { font-size:15px; margin:0; letter-spacing:.02em; text-transform:uppercase; }
.sechead .muted { font-size:12px; }
.toplist { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px){ .toplist { grid-template-columns:1fr 1fr; } }
.topitem { display:flex; min-width:0; align-items:center; gap:12px; padding:10px; border:1px solid #e4e4e7; border-radius:10px; background:#fff; text-decoration:none; color:#111; transition:background .15s ease, border-color .15s ease; }
.topitem:hover { background:#fafafa; border-color:#d4d4d8; }
.topitem .rank { flex:0 0 auto; width:26px; text-align:center; font-size:16px; font-weight:800; color:#a1a1aa; }
.topitem img, .topitem .noicon { width:56px; height:56px; border-radius:8px; object-fit:cover; background:#eee; flex:0 0 auto; }
.topitem .tinfo { display:block; flex:1 1 auto; min-width:0; overflow:hidden; }
.topitem .ttitle { display:block; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topitem .tmeta { display:block; color:#71717a; font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hot { display:inline-block; background:#fee2e2; color:#b91c1c; font-size:11px; font-weight:700; padding:1px 6px; border-radius:999px; margin-left:6px; }


/* --- ad slots --- */
.adslot-ref { min-height:250px; }
.adslot-ref img { max-width:300px; height:auto; }
.adslot-rail { min-height:600px; }
.adslot-video { min-height:0; }
.adslot-video .video-js { width:100%; max-width:640px; height:auto; aspect-ratio:16/9; }
.adslot-native { min-height:120px; display:block; }
@media (max-width:420px){ .adslot-rail { min-height:600px; overflow:hidden; } }
.adslot-under { margin: 12px auto 0; text-align: center; min-height: 60px; }

.adstack { display:block; margin:16px 0; }
.adstack .adslot { grid-column:auto; }
.adslot-under { margin:12px auto; text-align:center; min-height:250px; }