/* ---------- Base & Theme ---------- */
:root{
  --bg: #0f1623;
  --panel: #111c2b;
  --panel-2:#0e1522;
  --text:#e9f1ff;
  --muted:#9bb3d1;
  --brand:#16b3ff;        /* cyan */
  --brand-2:#0aa1e6;      /* deeper cyan */
  --accent:#4cf0c3;       /* mint accent */
  --card:#0f1a2b;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --chip-bg: rgba(22,179,255,.15);
  --chip-text:#bfe7ff;
  --border: 1px solid rgba(255,255,255,.06);
}

body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), #0a111d 60%);
  color: var(--text);
}

/* Light mode overrides */
body.light{
  --bg:#f3f7fb; --panel:#ffffff; --panel-2:#f7fbff; --text:#0c1726; --muted:#5a6c84;
  --brand:#0078c8; --brand-2:#005f9d; --accent:#08b389; --card:#ffffff;
  --shadow: 0 10px 25px rgba(5,25,60,.10);
  --chip-bg: rgba(0,120,200,.10); --chip-text:#0a3a66;
  background: #eef5fb;
}

/* Utilities */
.hidden{display:none !important;}
.muted{color:var(--muted);}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(3,10,20,.75), rgba(3,10,20,.25));
  border-bottom: var(--border);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: .8rem 1rem; max-width:1200px; margin:0 auto;
}
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color:#001019; font-weight:900; text-decoration:none; letter-spacing:.5px;
  box-shadow: var(--shadow);
}
.nav{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.chip{
  border:0; padding:.45rem .9rem; border-radius:999px; cursor:pointer;
  background: var(--chip-bg); color: var(--chip-text); font-weight:600;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(22,179,255,.25); }
.chip.link{ text-decoration:none; display:inline-block; }

.toggle{
  border:0; background: var(--panel); color: var(--text);
  width:42px; height:42px; border-radius:12px; cursor:pointer;
  display:grid; place-items:center; box-shadow: var(--shadow);
}

/* Search */
.search-wrap{ max-width:1200px; margin:0 auto 1rem; padding: 0 1rem 1rem;}
#searchBar{
  width:100%; padding:.9rem 1rem; border-radius:12px; border: var(--border);
  background: var(--panel); color: var(--text); outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- Hero ---------- */
.hero{
  max-width:1200px; margin:1rem auto; padding: 0 1rem;
}
.hero-card{
  position:relative; border-radius:16px; overflow:hidden; background: var(--card);
  box-shadow: var(--shadow); border: var(--border);
}
.hero-media{
  aspect-ratio: 21/9; width:100%; overflow:hidden; background:#000;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient( to top, rgba(0,0,0,.65), transparent 45%);
  display:flex; align-items:flex-end; padding:1.2rem;
}
.hero-meta{
  color:#fff;
}
.hero-title{
  font-size: clamp(1.2rem, 4.2vw, 2.2rem); margin: .3rem 0;
  text-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.hero-kicker{
  display:inline-flex; gap:.6rem; align-items:center; font-weight:700;
}
.k-badge{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color:#001018; padding:.25rem .6rem; border-radius:999px; font-size:.8rem;
}
.k-stars{ color:#ffd769; }

/* ---------- Grid ---------- */
.grid{
  max-width:1200px; margin: 1rem auto 2rem; padding: 0 1rem;
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card{
  background: var(--card); border-radius:16px; overflow:hidden; border: var(--border);
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 35px rgba(0,0,0,.35);}
.thumb{ aspect-ratio: 16/9; overflow:hidden; background:#000;}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.c-body{ padding: .9rem;}
.tag{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.3px;
  color:#001019; background: linear-gradient(135deg, var(--brand), var(--accent));
  padding:.25rem .5rem; border-radius:999px;
}
.c-title{ margin:.5rem 0 .35rem; font-weight:800; line-height:1.25; }
.c-snippet{ color: var(--muted); font-size:.95rem; }
.starline{ margin-top:.5rem; color:#ffd769; font-weight:700; }

/* Empty state */
.empty{ max-width:1200px; margin:.5rem auto 2rem; padding:0 1rem; color:var(--muted); }

/* ---------- Article ---------- */
.article{
  max-width: 900px; margin: 1.5rem auto; padding: 0 1rem;
}
.article-hero{
  border-radius:16px; overflow:hidden; border: var(--border); background:#000; box-shadow: var(--shadow);
}
.article-hero .media{ aspect-ratio: 21/9; }
.media img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-head{
  padding: 1rem 0 0.5rem;
}
.meta-row{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
}
.meta-row .tag{ transform: translateY(1px); }
.article-title{ font-size: clamp(1.4rem, 4.5vw, 2.2rem); margin:.4rem 0; font-weight:900; }
.article-stars{ color:#ffd769; font-weight:800; }
.article-content{
  background: var(--panel); border: var(--border); border-radius:16px; padding:1.2rem; margin-top:1rem;
}
.proscons{
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-top:1rem;
}
.box{
  background: var(--panel-2); border: var(--border); border-radius:12px; padding:.9rem;
}
.box h3{ margin:.1rem 0 .6rem; }
.box.pros h3{ color: #22e0a7; }
.box.cons h3{ color: #ff7e7e; }

/* ---------- Comments ---------- */
.comments{
  max-width:900px; margin: 1rem auto 2rem; padding: 0 1rem;
}
.comment-list{ display:grid; gap:.6rem; margin:.6rem 0 1rem; }
.comment{
  background: var(--panel); border: var(--border); border-radius:12px; padding:.7rem .8rem;
  display:flex; gap:.7rem; align-items:flex-start; justify-content:space-between;
}
.comment .txt{ white-space:pre-wrap; }
.vote{
  display:flex; align-items:center; gap:.35rem;
}
.icon-btn{
  border:0; background: transparent; color: var(--muted); cursor:pointer; font-size:1.05rem;
}
.icon-btn:hover{ color: var(--text); }
.count{ min-width:1.2rem; text-align:center; color: var(--muted); }

.comment-new{
  display:grid; gap:.6rem;
}
#commentInput{
  width:100%; padding:.9rem; border-radius:12px; border: var(--border);
  background: var(--panel); color: var(--text); outline:none;
}
.btn{
  justify-self:end; border:0; padding:.55rem .9rem; border-radius:10px; cursor:pointer;
  background: linear-gradient(135deg, var(--brand), var(--accent)); color:#001019; font-weight:800;
  box-shadow: var(--shadow);
}

/* ---------- Related ---------- */
.related{
  max-width:900px; margin: 0 auto 2rem; padding: 0 1rem;
}
.related h2{ margin:.2rem 0 .6rem; }
.related-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
}
.related-card{ background: var(--card); border: var(--border); border-radius:12px; overflow:hidden; box-shadow: var(--shadow); }
.related-card .thumb{ aspect-ratio: 16/9; }
.related-card a{ display:block; color:inherit; text-decoration:none; }
.related-card .c-body{ padding:.7rem .8rem; }

/* ---------- Footer ---------- */
.site-footer{
  border-top: var(--border); text-align:center; padding:1.2rem; color: var(--muted);
}



/* Small screens */
@media (max-width:720px){
  .proscons{ grid-template-columns:1fr; }
}