:root {
  --bg-0: #0b1020;
  --bg-1: #11172e;
  --bg-2: #181f3a;
  --fg-0: #e6e8f2;
  --fg-1: #a9b0c8;
  --fg-2: #707892;
  --accent: #ff5c7c;
  --accent-2: #ffb86c;
  --border: rgba(255,255,255,0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-0); color: var(--fg-0); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif; line-height: 1.55; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

.container { max-width: 920px; margin: 0 auto; padding: 0 18px; }
.accent { color: var(--accent); }

.topbar { border-bottom: 1px solid var(--border); background: var(--bg-1); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; gap: 2px; color: var(--fg-0); }
.brand .logo { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.brand .tagline { color: var(--fg-2); font-size: 12px; }
.nav { display: flex; gap: 18px; }
.nav a { color: var(--fg-1); font-size: 14px; }
.nav a:hover { color: var(--fg-0); }

.hero { padding: 42px 0 18px; }
.hero h1 { font-size: 34px; letter-spacing: -.02em; margin-bottom: 10px; }
.hero .lead { color: var(--fg-1); max-width: 640px; }
.meta-row { display: flex; gap: 14px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.badge { display: inline-block; background: rgba(255,92,124,.14); color: var(--accent); border: 1px solid rgba(255,92,124,.4); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.meta { color: var(--fg-2); font-size: 13px; }
.meta strong { color: var(--fg-0); }

.jokes { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 36px; }
.joke { background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.joke-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.joke-head .num { color: var(--fg-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.joke-head .cat { background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; font-size: 11px; }
.joke p { color: var(--fg-0); font-size: 16.5px; }
.joke-foot { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.joke-foot button { background: transparent; color: var(--fg-1); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: .15s; }
.joke-foot button:hover { color: var(--fg-0); border-color: rgba(255,255,255,0.2); }
.joke-foot .like:hover { background: rgba(255,92,124,.1); }
.joke-foot .share { color: var(--fg-2); font-size: 12px; margin-left: auto; }

.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 20px 0 60px; }
.pagination .page { padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--fg-1); font-size: 14px; }
.pagination .page.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination .dots { color: var(--fg-2); padding: 0 4px; }

.footer { border-top: 1px solid var(--border); padding: 28px 0 40px; color: var(--fg-2); font-size: 13px; }
.footer .container { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 540px) {
  .hero h1 { font-size: 26px; }
  .nav { gap: 10px; }
  .nav a { font-size: 13px; }
  .joke { padding: 16px 18px; }
}