/* ============================================================
   DANUDE TEMPLATE — dark lime/pink brutalist design
   Prefix: dn-
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap');

:root {
  --dn-bg:       #0d0f08;
  --dn-surface:  #0a0c05;
  --dn-surface2: #111408;
  --dn-surface3: #121508;
  --dn-lime:     #c8ff2e;
  --dn-pink:     #ff2ee0;
  --dn-text:     #f2ffd6;
  --dn-text2:    #eef7dd;
  --dn-text3:    #f6ffe0;
  --dn-muted:    #7d8a6a;
  --dn-muted2:   #8a9973;
  --dn-muted3:   #aab89a;
  --dn-green:    #b9cf95;
  --dn-border:   #3c4429;
  --dn-border2:  #4a543a;
  --dn-scanline: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, rgba(0,0,0,0) 1px 3px);
}

/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--dn-scanline), var(--dn-bg);
  color: var(--dn-text2);
  font-family: Archivo, system-ui, sans-serif;
  min-height: 100vh;
}

::placeholder { color: var(--dn-muted); }

/* ── Wrapper ──────────────────────────────────────── */
.dn-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── HEADER ──────────────────────────────────────── */
.dn-header {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 16px;
  background: rgba(15, 18, 8, .97);
  border-bottom: 2px solid var(--dn-lime);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.dn-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex: none;
}

.dn-logo-text {
  font: 900 18px Archivo, sans-serif;
  letter-spacing: .02em;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 4px 9px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--dn-pink);
  display: inline-block;
}

.dn-logo-age {
  font: 700 9px ui-monospace, Menlo, monospace;
  color: var(--dn-pink);
  border: 1px solid var(--dn-pink);
  padding: 2px 5px;
  transform: rotate(3deg);
  display: inline-block;
}

.dn-nav {
  display: flex;
  gap: 2px;
}

.dn-nav-link {
  font: 700 11px ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  color: var(--dn-muted3);
  background: transparent;
  padding: 6px 10px;
  text-decoration: none;
  transition: color .1s, background .1s;
}

.dn-nav-link:hover,
.dn-nav-link.active {
  font-weight: 800;
  color: #0d0f08;
  background: var(--dn-lime);
}

.dn-search-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
}

.dn-search-input {
  width: min(380px, 100%);
  height: 34px;
  padding: 0 13px;
  border: 1.5px solid var(--dn-border);
  background: #0a0c05;
  color: #e8ffb0;
  font: 600 11px ui-monospace, Menlo, monospace;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.dn-search-input:focus {
  border-color: var(--dn-lime);
  box-shadow: 3px 3px 0 rgba(200, 255, 46, .4);
}

.dn-header-actions {
  display: flex;
  gap: 10px;
  flex: none;
}

.dn-btn-login {
  font: 800 11px ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
  color: #dfe8cf;
  text-decoration: none;
  padding: 8px 13px;
  border: 1.5px solid var(--dn-border2);
  transition: border-color .1s, color .1s;
}

.dn-btn-login:hover {
  border-color: var(--dn-lime);
  color: var(--dn-lime);
}

.dn-btn-join {
  font: 900 11px ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
  color: #0d0f08;
  text-decoration: none;
  padding: 8px 13px;
  background: var(--dn-pink);
  box-shadow: 3px 3px 0 var(--dn-lime);
  transition: transform .12s, box-shadow .12s;
}

.dn-btn-join:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--dn-lime);
}

/* ── Mobile burger ────────────────────────────────── */
.dn-burger {
  display: none;
}

@media (max-width: 959px) {
  .dn-nav,
  .dn-search-wrap,
  .dn-header-actions {
    display: none;
  }
  .dn-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--dn-lime);
    background: #0a0c05;
    text-decoration: none;
    color: var(--dn-lime);
    font: 900 14px ui-monospace, Menlo, monospace;
    box-shadow: 3px 3px 0 var(--dn-pink);
    cursor: pointer;
    margin-left: auto;
  }
}

/* ── FOOTER ──────────────────────────────────────── */
.dn-footer {
  border-top: 2px solid var(--dn-lime);
  background: var(--dn-surface);
  margin-top: 48px;
}

.dn-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.dn-footer-logo {
  font: 900 13px Archivo, sans-serif;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 2px 7px;
  transform: rotate(-2deg);
  display: inline-block;
}

.dn-footer-copy {
  font: 500 10.5px ui-monospace, Menlo, monospace;
  color: #6d785c;
}

.dn-footer-spacer { flex: 1; }

.dn-footer-link {
  font: 600 10.5px ui-monospace, Menlo, monospace;
  color: var(--dn-muted2);
  text-decoration: none;
  transition: color .1s;
}

.dn-footer-link:hover { color: var(--dn-lime); }

/* ── MAIN ─────────────────────────────────────────── */
.dn-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 48px;
}

/* ── Section header ───────────────────────────────── */
.dn-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 12px;
  flex-wrap: wrap;
}

.dn-section-head h2, .dn-section-title {
  margin: 0;
  font: 900 16px Archivo, sans-serif;
  letter-spacing: .08em;
  color: var(--dn-text);
  text-transform: uppercase;
}

.dn-section-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--dn-border) 0 8px, transparent 8px 14px);
}

.dn-section-all {
  font: 800 11px ui-monospace, Menlo, monospace;
  letter-spacing: .08em;
  color: var(--dn-lime);
  text-decoration: none;
  transition: color .1s;
}

.dn-section-all:hover { color: var(--dn-pink); }

/* ── Badges ───────────────────────────────────────── */
.dn-badge-hot {
  font: 900 10px ui-monospace, Menlo, monospace;
  color: #0d0f08;
  background: var(--dn-pink);
  padding: 3px 7px;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 var(--dn-lime);
  display: inline-block;
}

.dn-badge-fresh {
  font: 900 10px ui-monospace, Menlo, monospace;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 3px 7px;
  transform: rotate(3deg);
  box-shadow: 2px 2px 0 var(--dn-pink);
  display: inline-block;
}

.dn-badge-4u {
  font: 900 10px ui-monospace, Menlo, monospace;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 3px 7px;
  transform: rotate(3deg);
  box-shadow: 2px 2px 0 var(--dn-pink);
  display: inline-block;
}

.dn-badge-count {
  font: 900 10px ui-monospace, Menlo, monospace;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 3px 7px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--dn-pink);
  display: inline-block;
}

/* ── Tabs ─────────────────────────────────────────── */
.dn-tabs {
  display: flex;
  gap: 6px;
}

.dn-tab {
  font: 800 10px ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
  color: var(--dn-muted3);
  background: transparent;
  border: 1.5px solid var(--dn-border2);
  box-shadow: none;
  padding: 5px 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all .1s;
}

.dn-tab:hover,
.dn-tab.active {
  color: #0d0f08;
  background: var(--dn-lime);
  border-color: var(--dn-lime);
  box-shadow: 2px 2px 0 var(--dn-pink);
}

/* ── Video grid ───────────────────────────────────── */
.dn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* ── Video card ───────────────────────────────────── */
.dn-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease;
}

.dn-card:hover { transform: rotate(-0.8deg); }

.dn-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1.5px solid rgba(200, 255, 46, .16);
  transition: background-position .9s ease, box-shadow .15s ease, border-color .15s ease;
}

.dn-card:hover .dn-card-thumb {
  background-position: 100% 50%;
  box-shadow: 5px 5px 0 var(--dn-pink);
  border-color: var(--dn-lime);
}

.dn-card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dn-card-badge-hd {
  position: absolute;
  top: 6px;
  left: 6px;
  font: 800 9px ui-monospace, Menlo, monospace;
  color: var(--dn-lime);
  background: #0a0c05;
  padding: 2px 5px;
  border: 1px solid var(--dn-lime);
  z-index: 1;
}

.dn-card-badge-new {
  position: absolute;
  top: 6px;
  left: 6px;
  font: 900 9px ui-monospace, Menlo, monospace;
  color: #0d0f08;
  background: var(--dn-pink);
  padding: 2px 5px;
  transform: rotate(-3deg);
  display: inline-block;
  z-index: 1;
}

.dn-card-badge-hot {
  position: absolute;
  top: 6px;
  left: 6px;
  font: 900 9px ui-monospace, Menlo, monospace;
  color: #0d0f08;
  background: var(--dn-pink);
  padding: 2px 5px;
  transform: rotate(-3deg);
  display: inline-block;
  z-index: 1;
}

.dn-card-dur {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font: 700 10px ui-monospace, Menlo, monospace;
  color: #fff;
  background: rgba(8, 10, 4, .88);
  padding: 2px 5px;
  z-index: 1;
}

.dn-card-title {
  font: 700 12px/1.35 Archivo, sans-serif;
  color: var(--dn-text2);
  max-height: 33px;
  overflow: hidden;
}

.dn-card-meta {
  display: flex;
  gap: 7px;
  font: 600 10px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
}

.dn-card-chan { color: var(--dn-green); }
.dn-card-pct  { color: var(--dn-pink); }

/* ── Category grid ────────────────────────────────── */
.dn-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.dn-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 88px;
  padding: 12px 14px;
  overflow: hidden;
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1.5px solid rgba(200, 255, 46, .2);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-position .9s ease, border-color .15s ease;
}

.dn-cat-tile:hover {
  transform: translate(-3px, -3px) rotate(-1deg);
  box-shadow: 5px 5px 0 var(--dn-lime);
  border-color: var(--dn-lime);
  background-position: 100% 50%;
}

.dn-cat-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 20%, rgba(8, 10, 4, .8));
}

.dn-cat-name {
  position: relative;
  font: 900 15px Archivo, sans-serif;
  letter-spacing: .04em;
  color: #f6ffe0;
  text-transform: uppercase;
}

.dn-cat-count {
  position: relative;
  font: 600 10px ui-monospace, Menlo, monospace;
  color: var(--dn-lime);
}

/* Category page tile (bigger) */
.dn-cat-tile-lg {
  height: 112px;
  padding: 14px 16px;
}

.dn-cat-tile-lg .dn-cat-name { font-size: 18px; letter-spacing: .03em; }
.dn-cat-tile-lg .dn-cat-rank {
  position: absolute;
  top: 10px;
  right: 10px;
  font: 800 9px ui-monospace, Menlo, monospace;
  color: var(--dn-lime);
  background: #0a0c05;
  padding: 2px 5px;
  border: 1px solid rgba(200, 255, 46, .4);
}

/* ── Category grid (cat page) ─────────────────────── */
.dn-cat-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* ── Leaderboard ad ───────────────────────────────── */
.dn-leaderboard {
  margin: 28px auto 0;
  width: 728px;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

/* ── Archive / browse page ────────────────────────── */
.dn-archive-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.dn-arc-title {
  font: 900 28px Archivo, sans-serif;
  letter-spacing: -.01em;
  color: var(--dn-text3);
  text-transform: uppercase;
}

.dn-arc-kicker {
  font: 600 11px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dn-sort-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dn-sort-label {
  font: 600 10.5px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
}

.dn-sort-pill {
  font: 800 10px ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
  color: var(--dn-muted3);
  background: transparent;
  border: 1.5px solid var(--dn-border2);
  padding: 5px 10px;
  text-decoration: none;
  transition: all .1s;
}

.dn-sort-pill:hover,
.dn-sort-pill.active {
  color: #0d0f08;
  background: var(--dn-lime);
  border-color: var(--dn-lime);
  box-shadow: 2px 2px 0 var(--dn-pink);
}

/* ── Hot strip (video page) ───────────────────────── */
.dn-hot-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
}

.dn-hot-strip-label {
  font: 900 13px Archivo, sans-serif;
  letter-spacing: .12em;
  color: var(--dn-text);
}

.dn-hot-strip-sub {
  font: 600 10.5px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
}

/* ── Watch layout ─────────────────────────────────── */
.dn-watch-layout {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.dn-watch-main {
  flex: 1 1 0;
  min-width: 0;
}

.dn-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1.5px solid var(--dn-border);
  background: radial-gradient(120% 120% at 50% 30%, #1a2010 0%, #070804 70%);
}

.dn-player-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dn-player-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font: 600 12px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
}

.dn-watch-aside {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 74px;
}

/* ── Video page title + meta ──────────────────────── */
.dn-v-title {
  margin: 16px 0 8px;
  font: 900 26px/1.2 Archivo, sans-serif;
  letter-spacing: -.01em;
  color: var(--dn-text3);
}

.dn-v-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font: 600 12px ui-monospace, Menlo, monospace;
  color: var(--dn-muted2);
}

.dn-v-rating-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dn-v-rating-pct {
  font: 900 13px Archivo, sans-serif;
  color: var(--dn-lime);
}

.dn-v-rating-track {
  width: 120px;
  height: 5px;
  background: rgba(255, 255, 255, .14);
}

.dn-v-rating-fill {
  height: 5px;
  background: linear-gradient(90deg, var(--dn-lime), var(--dn-pink));
}

.dn-v-spacer { flex: 1; }

.dn-v-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dn-act-btn {
  font: 700 11px ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  color: #dfe8cf;
  border: 1.5px solid var(--dn-border2);
  padding: 9px 15px;
  text-decoration: none;
  transition: border-color .1s, color .1s;
}

.dn-act-btn:hover {
  border-color: var(--dn-lime);
  color: var(--dn-lime);
}

.dn-act-btn.active {
  font-weight: 900;
  color: #0d0f08;
  background: var(--dn-lime);
  border-color: var(--dn-lime);
  box-shadow: 3px 3px 0 var(--dn-pink);
}

/* ── Creator row ──────────────────────────────────── */
.dn-creator-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--dn-surface3);
  border: 1.5px solid rgba(200, 255, 46, .18);
  flex-wrap: wrap;
}

.dn-creator-av {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--dn-lime), var(--dn-pink));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 15px Archivo, sans-serif;
  color: #0d0f08;
  transform: rotate(-3deg);
}

.dn-creator-name {
  font: 800 14px Archivo, sans-serif;
  color: var(--dn-text);
}

.dn-creator-sub {
  font: 600 10.5px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
  margin-top: 2px;
}

.dn-creator-link {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.dn-creator-divider {
  width: 1.5px;
  height: 30px;
  background: var(--dn-border);
}

.dn-subscribe-btn {
  font: 900 10.5px ui-monospace, Menlo, monospace;
  letter-spacing: .08em;
  color: #0d0f08;
  background: var(--dn-pink);
  box-shadow: 3px 3px 0 var(--dn-lime);
  padding: 8px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: filter .1s;
}

.dn-subscribe-btn:hover { filter: brightness(1.12); }

/* ── Performer chip ───────────────────────────────── */
.dn-performer-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  padding: 5px 10px 5px 5px;
  background: rgba(200, 255, 46, .08);
  border: 1px solid rgba(200, 255, 46, .2);
  transition: background .1s, border-color .1s;
}

.dn-performer-chip:hover {
  background: rgba(255, 46, 224, .14);
  border-color: var(--dn-pink);
}

.dn-performer-av {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, hsl(308 60% 42%), hsl(82 70% 35%));
  display: inline-block;
}

.dn-performer-name {
  font: 700 12px Archivo, sans-serif;
  color: var(--dn-text);
}

/* ── Tags row ─────────────────────────────────────── */
.dn-tags-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.dn-tag-pill {
  font: 600 10px ui-monospace, Menlo, monospace;
  color: var(--dn-green);
  text-decoration: none;
  padding: 5px 9px;
  border: 1px solid var(--dn-border);
  transition: color .1s, border-color .1s;
}

.dn-tag-pill:hover {
  color: var(--dn-lime);
  border-color: var(--dn-lime);
}

/* ── Description ──────────────────────────────────── */
.dn-v-desc {
  margin-top: 14px;
  font: 500 13px/1.6 Archivo, sans-serif;
  color: var(--dn-muted2);
}

/* ── Pagination ───────────────────────────────────── */
.dn-pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.dn-pager a, .dn-pager span {
  font: 700 11px ui-monospace, Menlo, monospace;
  color: var(--dn-muted3);
  border: 1.5px solid var(--dn-border2);
  padding: 6px 11px;
  text-decoration: none;
  transition: all .1s;
}

.dn-pager a:hover,
.dn-pager span.current {
  color: #0d0f08;
  background: var(--dn-lime);
  border-color: var(--dn-lime);
  box-shadow: 2px 2px 0 var(--dn-pink);
}

/* ── Empty state ──────────────────────────────────── */
.dn-empty {
  padding: 48px 24px;
  text-align: center;
  font: 600 13px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
  border: 1.5px dashed var(--dn-border);
  margin-top: 24px;
}

/* ── Pornstar page ────────────────────────────────── */
.dn-pornstar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.dn-star-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease;
}

.dn-star-card:hover { transform: rotate(-0.7deg); }

.dn-star-thumb {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1.5px solid rgba(200, 255, 46, .16);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.dn-star-card:hover .dn-star-thumb {
  box-shadow: 5px 5px 0 var(--dn-pink);
  border-color: var(--dn-lime);
}

.dn-star-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(8, 10, 4, .85));
}

.dn-star-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  font: 900 10px ui-monospace, Menlo, monospace;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 2px 6px;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 var(--dn-pink);
  display: inline-block;
}

.dn-star-name {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font: 900 15px/1.15 Archivo, sans-serif;
  color: #f6ffe0;
  text-transform: uppercase;
}

.dn-star-meta {
  display: flex;
  gap: 8px;
  font: 600 10px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
  flex-wrap: wrap;
}

.dn-star-vids { color: var(--dn-lime); }
.dn-star-pct  { color: var(--dn-pink); }

/* ── Performer header ─────────────────────────────── */
.dn-performer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--dn-surface2);
  border: 1.5px solid rgba(200, 255, 46, .18);
}

.dn-performer-header-av {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--dn-lime), var(--dn-pink));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 28px Archivo, sans-serif;
  color: #0d0f08;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 rgba(255, 46, 224, .5);
}

.dn-performer-header-name {
  font: 900 24px Archivo, sans-serif;
  color: var(--dn-text3);
  text-transform: uppercase;
}

.dn-performer-header-sub {
  font: 600 11px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
  margin-top: 4px;
}

/* ── Channels page ────────────────────────────────── */
.dn-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.dn-channel-card {
  background: var(--dn-surface2);
  border: 1.5px solid rgba(200, 255, 46, .16);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dn-channel-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--dn-pink);
  border-color: var(--dn-lime);
}

.dn-channel-banner {
  display: block;
  position: relative;
  aspect-ratio: 16/5;
  overflow: hidden;
  text-decoration: none;
}

.dn-channel-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(8, 10, 4, .7));
}

.dn-channel-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.dn-channel-av {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 15px Archivo, sans-serif;
  color: #0d0f08;
  transform: rotate(-3deg);
}

.dn-channel-name {
  font: 800 14px Archivo, sans-serif;
  color: var(--dn-text);
}

.dn-channel-name-check {
  color: var(--dn-lime);
  font-size: 11px;
}

.dn-channel-sub {
  font: 600 10px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
  margin-top: 3px;
}

/* ── Aside ad panel ───────────────────────────────── */
.dn-aside-label {
  font: 500 9.5px ui-monospace, Menlo, monospace;
  color: #5a6449;
}

.dn-premium-box {
  background: #131608;
  border: 1.5px solid var(--dn-lime);
  box-shadow: 4px 4px 0 rgba(255, 46, 224, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  min-height: 80px;
}

.dn-premium-title {
  font: 900 13px Archivo, sans-serif;
  letter-spacing: .1em;
  color: var(--dn-lime);
  transform: rotate(-1deg);
  display: inline-block;
}

.dn-premium-desc {
  font: 600 10.5px/1.5 ui-monospace, Menlo, monospace;
  color: #dfe8cf;
  text-align: center;
}

.dn-premium-cta {
  font: 900 11px ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 8px 16px;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--dn-pink);
  transition: transform .12s ease, box-shadow .12s;
}

.dn-premium-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--dn-pink);
}

/* ── Section performer strip ──────────────────────── */
.dn-perf-thumb {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, hsl(308 60% 42%), hsl(82 70% 35%));
  flex: none;
  transform: rotate(-3deg);
}

/* ── CTA bar (video page) ─────────────────────────── */
.dn-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--dn-surface2);
  border: 1.5px solid rgba(200, 255, 46, .2);
  text-decoration: none;
  margin-top: 10px;
  transition: border-color .1s;
}

.dn-cta-bar:hover { border-color: var(--dn-lime); }

.dn-cta-bar-text {
  font: 600 12px Archivo, sans-serif;
  color: var(--dn-muted2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dn-cta-btn {
  font: 900 11px ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
  color: #0d0f08;
  background: var(--dn-lime);
  padding: 7px 14px;
  box-shadow: 2px 2px 0 var(--dn-pink);
}

/* ── Report modal (re-use default styles) ─────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal-content {
  background: #1a1e10;
  border: 1.5px solid var(--dn-lime);
  box-shadow: 5px 5px 0 var(--dn-pink);
  padding: 24px;
  width: min(480px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-title {
  font: 900 16px Archivo, sans-serif;
  color: var(--dn-lime);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.close-modal-btn {
  background: none;
  border: none;
  color: var(--dn-muted3);
  font-size: 20px;
  cursor: pointer;
}

.form-group { margin-bottom: 14px; }

.form-label {
  display: block;
  font: 700 11px ui-monospace, Menlo, monospace;
  color: var(--dn-muted2);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  background: #0a0c05;
  border: 1.5px solid var(--dn-border);
  color: var(--dn-text2);
  font: 500 13px Archivo, sans-serif;
  outline: none;
}

.form-control:focus { border-color: var(--dn-lime); }

.form-actions { margin-top: 16px; }

.btn-primary {
  font: 900 11px ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
  color: #0d0f08;
  background: var(--dn-lime);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--dn-pink);
}

/* ── Footer friends ───────────────────────────────── */
.dn-footer-links-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px 0;
  border-bottom: 1px solid rgba(200, 255, 46, .12);
}

.dn-footer-links-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-bottom: 12px;
}

.dn-footer-friend {
  font: 500 11px ui-monospace, Menlo, monospace;
  color: var(--dn-muted);
  text-decoration: none;
  transition: color .1s;
}

.dn-footer-friend:hover { color: var(--dn-lime); }

.dn-footer-friend::after {
  content: " · ";
  color: var(--dn-border);
}

.dn-footer-friend:last-child::after { content: ""; }

.dn-footer-deadbro { margin-bottom: 10px; }

.dn-deadbro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: 500 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #b6b9ff;
  background: linear-gradient(180deg, #1a1d3a, #14162e);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(120, 130, 255, .25), 0 4px 12px rgba(0, 0, 0, .4);
  transition: box-shadow .15s ease-in-out;
}

.dn-deadbro-badge:hover {
  box-shadow: 0 0 0 1px rgba(150, 160, 255, .5), 0 6px 16px rgba(0, 0, 0, .5);
}

.dn-deadbro-badge strong { font-weight: 600; color: #d6d9ff; }

.dn-footer-desc {
  font: 500 11px ui-monospace, Menlo, monospace;
  color: #5a6449;
  line-height: 1.6;
  margin: 10px 0 16px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
  .dn-watch-layout { flex-wrap: wrap; }
  .dn-watch-aside { display: none; }
  .dn-watch-main { flex: 1 1 100%; }
  .dn-channel-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 640px) {
  .dn-main { padding: 16px 16px 48px; }
  .dn-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .dn-cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .dn-cat-grid-lg { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .dn-arc-title { font-size: 22px; }
  .dn-v-title { font-size: 20px; }
}