:root{
  --bg:#0f1720;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#60a5fa; /* softer blue */
  --text:#e6eef6;
  --radius:12px;
  --max-width:900px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#0b0e14 0%, #0f131a 100%);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}
.topbar{
  width:100%;
  max-width:var(--max-width);
  margin:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topbar h1{
  margin:0;
  font-size:20px;
  letter-spacing:0.2px;
  font-weight:600;
}
.controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.controls input,.controls select{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  color:var(--text);
}
.feed{
  width:100%;
  max-width:var(--max-width);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:12px;
}
.card{
  background:#11161f;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 4px 14px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.08);
}
.card .meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.meta .time{
  color:#cbd5e1;
  font-size:12px;
  font-style:italic;
}
.meta .link a{
  color:var(--accent);
  font-weight:500;
  text-decoration:underline;
  font-size:13px;
}
.card .text{
  font-size:16px;
  line-height:1.6;
  color:#f1f5f9;
  font-weight:400;
  margin-bottom:12px;
}
.media-grid{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.media-grid img,.media-grid video{
  width:100%;
  height:280px;   /* larger thumbnails */
  object-fit:cover;
  border-radius:8px;
  background:#021226;
  cursor:pointer;
  filter:grayscale(20%);
  transition:filter 0.3s, transform 0.3s;
}
.media-grid img:hover,.media-grid video:hover{
  filter:grayscale(0%);
  transform:scale(1.02);
}
.loading,.end{
  color:var(--muted);
  padding:18px;
  text-align:center;
}
.footer{
  margin:24px;
  color:var(--muted);
  font-size:12px;
}

/* Lightbox styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.lightbox img, .lightbox video {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow:0 0 40px rgba(0,0,0,0.8);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
}

/* Ensure [hidden] actually hides the lightbox */
.lightbox[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.lightbox:not([hidden]) {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
/* prevent background scrolling when lightbox is open */
body.lb-open {
  overflow: hidden;
}

@media (max-width:600px){
  .controls input{min-width:120px}
  .media-grid img, .media-grid video{height:200px} /* slightly smaller on phones */
}