:root{
  --bg:#0a0f0a;
  --panel:#0f1612;
  --panel-2:#0c140f;
  --txt:#e6ffe6;
  --muted:#8fd3a1;
  --neon:#00ff88;
  --neon-2:#4dffb5;
  --accent:#1dd16a;
  --line:rgba(0,255,136,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1000px 400px at 50% -20%, rgba(0,255,136,0.06), transparent) , var(--bg);
  color:var(--txt);
  font-family:"Share Tech Mono",ui-monospace,monospace;
  letter-spacing:.2px;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(0deg, rgba(0,0,0,.0), rgba(0,0,0,.18)), rgba(4,10,6,.6);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.topbar .brand{color:var(--neon); text-decoration:none; font-weight:700; font-size:20px; margin-right:10px}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--neon);display:inline-block;box-shadow:0 0 10px var(--neon);margin-left:10px}
.live-label{color:var(--muted);margin-left:6px}
.topbar .right{display:flex; gap:10px; align-items:center}
.toggle{display:flex; gap:6px; align-items:center; color:var(--muted); font-size:13px}

/* Buttons */
.btn{border:1px solid var(--line); background:transparent; color:var(--txt);
  padding:.45rem .8rem; border-radius:12px; cursor:pointer;
  text-decoration:none; transition:.15s ease all
}
.btn:hover{border-color:var(--neon); color:var(--neon)}
.btn-home{border-color:var(--neon); color:var(--neon); background:rgba(0,255,136,.07)}
.btn-home:hover{box-shadow:0 0 14px rgba(0,255,136,.25) inset, 0 0 12px rgba(0,255,136,.3)}

/* Ticker */
.ticker-wrap{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px dashed var(--line);
  background:linear-gradient(180deg, rgba(0,255,136,.06), transparent);
}
.ticker-badge{
  font-weight:700; color:#111; background:var(--neon); padding:4px 10px; border-radius:10px;
  text-shadow:none;
}
.ticker{overflow:hidden; flex:1; position:relative; height:28px}
.ticker .track{
  white-space:nowrap; position:absolute; left:100%; will-change:transform;
  animation: ticker 160s linear infinite;
  color:var(--muted);
}
@keyframes ticker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-200%); }
}

/* Container */
.container{ max-width:1200px; margin:20px auto; padding:0 14px }
.toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:12px }
.search{
  flex:1; background:var(--panel); border:1px solid var(--line); color:var(--txt);
  padding:.55rem .8rem; border-radius:12px; outline:none;
}
.search:focus{ border-color:var(--neon) }
.result-count{ color:var(--muted); font-size:13px }

/* Grid */
.grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px }
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr }}

/* Card */
.card{
  display:grid; grid-template-columns: 220px 1fr;
  background:linear-gradient(180deg, rgba(0,255,136,.04), transparent), var(--panel-2);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 16px rgba(0,255,136,.06);
}
@media (max-width: 640px){ .card{ grid-template-columns: 1fr } }

.thumb{ position:relative; background:rgba(0,0,0,.2) }
.thumb img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 16 / 10 }
.ribbon{
  position:absolute; top:10px; left:10px; font-weight:800; background:var(--neon);
  color:#051; padding:4px 10px; border-radius:8px;
  box-shadow:0 2px 10px rgba(0,255,136,.2);
}

.body{ padding:12px 14px 14px }
.meta{ color:var(--muted); font-size:13px; display:flex; align-items:center; gap:6px }
.dot{ opacity:.5 }
.title{ margin:.35rem 0 .35rem; font-size:20px; line-height:1.25 }
.desc{ color:var(--muted); margin:0 0 12px; max-height:3.6em; overflow:hidden }
.actions{ display:flex; gap:10px }
.btn.green{
  border-color:var(--neon); color:var(--neon); background:rgba(0,255,136,.07);
}
.btn.green:hover{ box-shadow:0 0 14px rgba(0,255,136,.25) inset, 0 0 12px rgba(0,255,136,.3) }
.btn.ghost{ color:var(--muted) }
.btn.ghost:hover{ color:var(--neon) }

/* subtle scanlines */
body:before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: repeating-linear-gradient( to bottom, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px);
  opacity:.25; mix-blend-mode:overlay;
}