* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #111; color: #eee; font-family: system-ui, sans-serif; line-height: 1.4; }
a { color: inherit; text-decoration: none; }
h1 { font-size: 1.5rem; margin-bottom: 14px; }
h2 { font-size: 1.15rem; margin: 28px 0 12px; }

button {
  padding: 8px 14px; border: 0; border-radius: 6px;
  background: #ff4d4d; color: #fff; cursor: pointer;
}

/* header */
.header {
  display: flex; gap: 16px; align-items: center;
  padding: 12px 20px; background: #1b1b1b;
  position: sticky; top: 0; z-index: 10;
}
.logo { font-weight: 700; font-size: 1.4rem; color: #ff4d4d; }
.search { flex: 1; display: flex; gap: 8px; }
.search input {
  flex: 1; padding: 8px 12px; border-radius: 6px;
  border: 1px solid #333; background: #222; color: #eee;
}

/* layout */
.container { max-width: 1300px; margin: 0 auto; padding: 20px; min-height: 70vh; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a { padding: 6px 12px; background: #222; border-radius: 20px; font-size: .9rem; }
.tabs a.active { background: #ff4d4d; }
.breadcrumbs { font-size: .85rem; color: #999; margin-bottom: 12px; }
.breadcrumbs a { color: #ccc; }
.footer { text-align: center; padding: 24px; color: #777; font-size: .85rem; border-top: 1px solid #222; }

/* grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: #1b1b1b; border-radius: 8px; overflow: hidden; display: block; }
.card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.card .meta { padding: 10px; }
.card h3 {
  font-size: .95rem; margin-bottom: 4px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card span { font-size: .8rem; color: #999; }

/* pager */
.pager { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 28px 0; }
.pager a { padding: 6px 14px; background: #222; border-radius: 6px; }

/* video page */
.player { aspect-ratio: 16/9; width: 100%; background: #000; }
.player iframe { width: 100%; height: 100%; border: 0; }
.video-info h1 { margin: 16px 0 6px; font-size: 1.3rem; }
.video-info p { color: #999; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tags a { background: #222; padding: 4px 10px; border-radius: 14px; font-size: .85rem; }

/* misc */
.message { text-align: center; padding: 60px 20px; color: #aaa; }
.message h1 { color: #eee; }
.message p { margin-top: 10px; }

/* age gate: content stays in the HTML for crawlers; users see an overlay until they confirm */
.gate {
  display: none; position: fixed; inset: 0; z-index: 100; background: #111;
  flex-direction: column; gap: 16px; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.gated .gate { display: flex; }
.gated body { overflow: hidden; }

/* nav */
.mainnav { display: flex; gap: 14px; font-size: .95rem; }
.mainnav a { color: #ccc; }
.mainnav a:hover { color: #ff4d4d; }
.footer a { color: #aaa; text-decoration: underline; }

/* ads (code is in config/ads.js) */
.ad { display: flex; justify-content: center; align-items: center; max-width: 100%; overflow: hidden; margin: 16px auto; text-align: center; min-height: 50px; }
.ad > * { max-width: 100%; }

/* articles */
.card.article .noimg { aspect-ratio: 16/9; background: linear-gradient(135deg, #222, #2c2c2c); }
.excerpt { font-size: .85rem; color: #bbb; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.grid.one { grid-template-columns: minmax(260px, 520px); }
.more { margin-top: 12px; }
.more a { color: #ff4d4d; }
code { background: #222; padding: 2px 6px; border-radius: 4px; }

/* shown only when started with ADS_DEBUG=true */
.ad-debug { border: 2px dashed #ff4d4d; color: #ff9a9a; padding: 14px; font-size: .85rem; min-height: 60px; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { display: block; flex: none; border-radius: 8px; }
.logo span { letter-spacing: .3px; }

/* intro text + legal pages */
.intro { color: #bbb; max-width: 900px; margin: -4px 0 16px; font-size: .95rem; }
.legal { max-width: 820px; }
.legal h2 { margin: 26px 0 8px; font-size: 1.1rem; }
.legal p, .legal li { color: #ccc; margin-bottom: 10px; }
.legal ul, .legal ol { margin: 0 0 10px 22px; }
.legal a { color: #ff7a8a; text-decoration: underline; }
.legal .updated { color: #888; font-size: .85rem; }

/* footer */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 10px; }
.footer p { max-width: 900px; margin: 0 auto; }

/* error page */
.error-links a { color: #ff7a8a; text-decoration: underline; }

/* share buttons */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.share-label { color: #aaa; font-size: .9rem; margin-right: 2px; }
.share-btn { display: inline-block; padding: 7px 13px; border-radius: 18px; font-size: .85rem; font-weight: 600;
  color: #fff; background: #333; border: 0; cursor: pointer; line-height: 1.2; font-family: inherit; }
.share-btn:hover { filter: brightness(1.15); }
.share-whatsapp { background: #1fa855; }
.share-telegram { background: #229ed9; }
.share-messenger { background: #0a7cff; }
.share-facebook { background: #1877f2; }
.share-x { background: #000; border: 1px solid #444; }
.share-reddit { background: #ff4500; }
.share-email { background: #555; }
.share-copy, .share-native { background: #ff4d4d; }
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) { .touch-only { display: inline-block; } }
[hidden] { display: none !important; }