/* ===== DATASTREAM — Night City feed, 2045 ===== */

:root{
  --bg: #08080d;
  --bg-alt: #0e0e17;
  --panel: #13131e;
  --panel-2: #191926;
  --border: #262638;
  --text: #d7dee6;
  --muted: #7c8494;
  --cyan: #00f6ff;
  --magenta: #ff2079;
  --yellow: #f4e04d;
  --green: #39ff88;
  --purple: #b26bff;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(0,246,255,.06), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(255,32,121,.07), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, transparent 1px, transparent 2px);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button, input, select, textarea{ font-family: inherit; }

::selection{ background: var(--magenta); color: #000; }

/* subtle CRT scanline overlay */
.scanlines{
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.06) 3px);
  mix-blend-mode: overlay;
  opacity: .5;
}

/* ===== topbar ===== */
.topbar{
  background: #000; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.topbar-inner{
  max-width: 1200px; margin: 0 auto; padding: 6px 20px;
  display: flex; gap: 24px; flex-wrap: wrap;
}
.topbar .ok{ color: var(--green); }
.topbar-right{ margin-left: auto; }

/* ===== header ===== */
.site-header{ background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.site-header-inner{
  max-width: 1200px; margin: 0 auto; padding: 22px 20px 10px;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.logo{
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  letter-spacing: 1px; color: #fff; text-shadow: 0 0 12px rgba(0,246,255,.5);
}
.logo.small{ font-size: 18px; margin-bottom: 8px; }
.logo .accent{ color: var(--cyan); }
.logo-mark{ color: var(--magenta); margin-right: 6px; }
.tagline{
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  margin: 0; flex: 1;
}
.search-form{ display: flex; }
.search-form input{
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; width: 200px; font-size: 13px;
}
.search-form button{
  background: var(--cyan); border: 1px solid var(--cyan); color: #000;
  padding: 8px 12px; cursor: pointer; font-weight: 700;
}

.main-nav{
  max-width: 1200px; margin: 0 auto; padding: 0 20px 14px;
  display: flex; gap: 4px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .5px;
}
.main-nav a{
  padding: 6px 10px; color: var(--muted); border: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.main-nav a:hover, .main-nav a.active{
  color: var(--cyan); border-color: var(--border);
}
.main-nav .nav-home{ color: var(--magenta); }

/* ===== ticker ===== */
.ticker{
  background: #000; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; overflow: hidden;
}
.ticker-label{
  background: var(--magenta); color: #000; font-family: var(--font-display);
  font-size: 11px; font-weight: 800; padding: 6px 12px; flex-shrink: 0;
  letter-spacing: 1px;
}
.ticker-track{ overflow: hidden; flex: 1; }
.ticker-content{
  display: inline-flex; white-space: nowrap; padding-left: 100%;
  animation: ticker-scroll 40s linear infinite;
  font-family: var(--font-mono); font-size: 13px; color: var(--cyan);
}
.ticker-entry{ padding: 6px 8px; }
.ticker-sep{ color: var(--muted); }
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

/* ===== layout ===== */
.site-main{ max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.layout{ display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
@media (max-width: 860px){ .layout{ grid-template-columns: 1fr; } }

.section-title{
  font-family: var(--font-display); font-size: 16px; letter-spacing: 1px;
  color: #fff; border-bottom: 2px solid var(--magenta); padding-bottom: 8px;
  margin: 30px 0 18px;
}
.section-title:first-child{ margin-top: 0; }

/* ===== hero ===== */
.hero{
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  background: var(--panel); border: 1px solid var(--border); margin-bottom: 10px;
}
@media (max-width: 700px){ .hero{ grid-template-columns: 1fr; } }
.hero-thumb{ display:block; overflow: hidden; height: 100%; min-height: 260px; background:#000; }
.hero-thumb img{ width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.hero-body{ padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.hero-body h1{ font-family: var(--font-display); font-size: 26px; line-height: 1.2; margin: 6px 0; }
.hero-body h1 a:hover{ color: var(--cyan); }
.hero-sub{ color: var(--muted); font-size: 16px; margin: 0; }
.hero-empty{ min-height: 260px; }

/* ===== category badges ===== */
.card-cat{
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .5px; padding: 3px 8px; border: 1px solid currentColor;
  text-transform: uppercase; width: max-content;
}
.cat-corporate{ color: var(--cyan); }
.cat-crime{ color: var(--magenta); }
.cat-scandal{ color: var(--yellow); }
.cat-tech{ color: #6fa8ff; }
.cat-culture{ color: var(--purple); }
.cat-city{ color: var(--green); }
.cat-obituary{ color: var(--muted); }
.cat-heading{ border-bottom-color: currentColor; }

/* ===== cards ===== */
.card-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px){ .card-grid{ grid-template-columns: 1fr; } }
.card{
  background: var(--panel); border: 1px solid var(--border);
  display: flex; flex-direction: column; transition: border-color .15s, transform .15s;
}
.card:hover{ border-color: var(--cyan); transform: translateY(-2px); }
.card-thumb{ position: relative; display: block; height: 160px; overflow: hidden; background:#000; }
.card-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.card-thumb-empty{
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: var(--font-mono); font-size: 12px;
  background: repeating-linear-gradient(45deg, #111 0 10px, #0a0a0a 10px 20px);
}
.card-thumb .card-cat{ position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.75); }
.card-body{ padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex:1; }
.card-body h3{ font-family: var(--font-display); font-size: 15px; line-height: 1.35; margin: 0; font-weight: 600; }
.card-body h3 a:hover{ color: var(--cyan); }
.card-sub{ color: var(--muted); font-size: 14px; margin: 0; flex: 1; }
.card-meta{
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}

/* ===== sidebar ===== */
.sidebar-block{ background: var(--panel); border: 1px solid var(--border); padding: 16px; margin-bottom: 18px; }
.sidebar-title{
  font-family: var(--font-display); font-size: 13px; color: var(--cyan);
  margin: 0 0 12px; letter-spacing: 1px;
}
.popular-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.popular-list li a{ display: flex; gap: 10px; font-size: 14px; }
.popular-list li a:hover{ color: var(--cyan); }
.pop-n{
  font-family: var(--font-display); color: var(--magenta); font-weight: 800;
  display: inline-block; width: 18px; flex-shrink: 0;
}

.ad-block{ border-color: var(--yellow); position: relative; }
.ad-label{
  position: absolute; top: -9px; left: 10px; background: var(--bg-alt);
  color: var(--yellow); font-family: var(--font-mono); font-size: 10px; padding: 0 6px;
}
.ad-corp{ font-family: var(--font-display); font-size: 13px; color: #fff; margin: 4px 0; }
.ad-line{ font-size: 14px; color: var(--muted); margin: 0; }

.classifieds{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.classifieds li{
  font-size: 13px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px;
}
.classifieds li:first-child{ border-top: none; padding-top: 0; }

/* ===== article page ===== */
.article-full{ background: var(--panel); border: 1px solid var(--border); padding: 26px; }
.article-full h1{ font-family: var(--font-display); font-size: 28px; line-height: 1.25; margin: 12px 0 8px; }
.article-sub{ color: var(--muted); font-size: 18px; margin: 0 0 14px; }
.article-meta{ padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.article-image{ margin: 0 0 20px; border: 1px solid var(--border); }
.article-image img{ width: 100%; }
.article-body{ font-size: 17px; line-height: 1.7; }
.article-body p{ margin: 0 0 16px; }
.tag-list{ margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag{
  font-family: var(--font-mono); font-size: 12px; color: var(--cyan);
  border: 1px solid var(--border); padding: 3px 8px;
}

.empty-note{ color: var(--muted); font-family: var(--font-mono); font-size: 14px; }

/* ===== footer ===== */
.site-footer{ border-top: 1px solid var(--border); background: #000; margin-top: 40px; }
.site-footer-inner{
  max-width: 1200px; margin: 0 auto; padding: 30px 20px;
  display: grid; grid-template-columns: 1.4fr 1fr 1.6fr; gap: 30px;
}
@media (max-width: 700px){ .site-footer-inner{ grid-template-columns: 1fr; } }
.footer-col p{ color: var(--muted); font-size: 13px; line-height: 1.6; }
.footer-col h4{ font-family: var(--font-display); font-size: 12px; color: var(--cyan); letter-spacing: 1px; }
.footer-col a{ display: block; color: var(--muted); font-size: 13px; padding: 3px 0; }
.footer-col a:hover{ color: var(--cyan); }
.legal{ font-size: 11px !important; color: #4c5262 !important; }

/* ===== 404 ===== */
.not-found{ text-align: center; padding: 80px 20px; }
.glitch-code{ font-family: var(--font-mono); color: var(--muted); }
.glitch-title{
  font-family: var(--font-display); font-size: 44px; color: #fff; position: relative;
  text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}
.btn-back{
  display: inline-block; margin-top: 20px; border: 1px solid var(--cyan); color: var(--cyan);
  padding: 10px 18px; font-family: var(--font-mono);
}
.btn-back:hover{ background: var(--cyan); color: #000; }

/* ===== editor ===== */
.editor-wrap{ max-width: 1200px; }
.editor-hint{ color: var(--magenta); font-family: var(--font-mono); font-size: 13px; }
.editor-grid{ display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px){ .editor-grid{ grid-template-columns: 1fr; } }

.editor-form{
  background: var(--panel); border: 1px solid var(--border); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px;
}
.editor-form h3{ font-family: var(--font-display); font-size: 15px; margin: 0; color: var(--cyan); }
.editor-form label{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.editor-form input[type=text], .editor-form input[type=file], .editor-form select, .editor-form textarea{
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; font-size: 14px; font-family: var(--font-body);
}
.editor-form textarea{ resize: vertical; font-family: var(--font-mono); font-size: 13px; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkbox-row{ flex-direction: row !important; align-items: center; gap: 8px !important; }
.checkbox-row input{ width: auto; }
.image-preview{ max-height: 140px; object-fit: cover; border: 1px solid var(--border); }
.form-actions{ display: flex; gap: 10px; }
.btn-primary, .btn-secondary{
  padding: 10px 16px; font-family: var(--font-display); font-size: 12px; letter-spacing: .5px;
  cursor: pointer; border: 1px solid var(--cyan);
}
.btn-primary{ background: var(--cyan); color: #000; flex: 1; }
.btn-secondary{ background: transparent; color: var(--muted); border-color: var(--border); }
.form-status{ font-family: var(--font-mono); font-size: 12px; min-height: 16px; }
.form-status.ok{ color: var(--green); }
.form-status.err{ color: var(--magenta); }

.admin-table{ width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); }
.admin-table th, .admin-table td{
  padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px;
}
.admin-table th{ font-family: var(--font-mono); color: var(--muted); font-weight: 400; }
.badge-featured{ color: var(--yellow); }
.admin-actions{ display: flex; gap: 8px; white-space: nowrap; }
.admin-actions button{
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 8px; font-size: 11px; cursor: pointer; font-family: var(--font-mono);
}
.admin-actions .btn-edit:hover, .admin-actions .btn-edit-mini:hover{ border-color: var(--cyan); color: var(--cyan); }
.admin-actions .btn-delete:hover, .admin-actions .btn-delete-mini:hover{ border-color: var(--magenta); color: var(--magenta); }

.editor-list-full{ margin-top: 20px; }
.mini-add-row{ display: flex; gap: 8px; margin-bottom: 12px; }
.mini-add-row input[type=text]{
  flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 9px 10px; font-size: 13px; font-family: var(--font-body);
}