.cyberpunk-template-page {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 10%, transparent) 0 20%, transparent 20% 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--cyber-bg) 88%, #04070d), var(--cyber-bg));
  color: var(--cyber-ink);
}

.cyber-shell { max-width: 1380px; margin: 0 auto; padding: 18px 24px 32px; }
.cyber-topbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cyber-topbar div, .cyber-panel { position: relative; padding: 18px; background: color-mix(in srgb, var(--cyber-panel) 78%, transparent); border: 1px solid var(--cyber-line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); backdrop-filter: blur(10px); }
.cyber-topbar span { display: block; color: var(--cyber-muted); font-size: 0.75rem; letter-spacing: 0.12em; }
.cyberpunk-dossier-hero { position: relative; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--cyber-line); }
.cyberpunk-dossier-hero .banner-hero-media img { width: 100%; height: 440px; object-fit: cover; filter: saturate(1.15) contrast(1.06); }
.cyberpunk-dossier-hero .banner-hero-copy { position: absolute; inset: auto auto 0 0; width: min(46rem, 72%); padding: 1.6rem 2rem 2rem; background: linear-gradient(90deg, color-mix(in srgb, var(--cyber-hero-bg) 92%, transparent), transparent); }
.cyber-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) 340px; gap: 18px; }
.cyber-main, .cyber-side { display: grid; align-content: start; gap: 18px; }
.cyber-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cyber-panel-wide { grid-column: 1 / -1; }
.cyber-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cyber-tags span { padding: 5px 9px; border: 1px solid var(--cyber-accent); color: var(--cyber-accent); text-transform: uppercase; font-size: 0.78rem; }
.cyber-kicker { margin: 0 0 14px; color: var(--cyber-gold); font-weight: 700; }

@media (max-width: 1040px) {
  .cyber-topbar, .cyber-grid, .cyber-main { grid-template-columns: 1fr; }
  .cyberpunk-dossier-hero .banner-hero-copy { position: relative; width: 100%; background: var(--cyber-hero-bg); }
}