/* Theme variables */
:root, :root[data-theme="dark"]{
  --bg:#0e0f13; --fg:#e9eef4; --muted:#aab4c0; --card:#161821; --card2:#1e2130;
  --brand:#00e6ff; --brand2:#7af0ff; --accent:#ffd166; --shadow: 0 10px 25px rgba(0,0,0,.3);
}
/* Light theme when toggled OR when system prefers light and no toggle set */
:root[data-theme="light"]{
  --bg:#f7f8fb; --fg:#0e1220; --muted:#5b6572; --card:#ffffff; --card2:#f1f3f7;
  --brand:#007a85; --brand2:#00b8c7; --accent:#a46300;
}

/* Optional: respect system preference on first load (before JS runs) */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f8fb; --fg:#0e1220; --muted:#5b6572; --card:#ffffff; --card2:#f1f3f7;
    --brand:#007a85; --brand2:#00b8c7; --accent:#a46300;
  }
}

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  background:var(--bg); color:var(--fg); transition: background .2s ease, color .2s ease;
}

.site-header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(120%) blur(8px);
  background:color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem;
}

.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px}
.brand .title{font-size:1.1rem}
.brand .accent{color:var(--brand)}

.logo{border-radius:12px; box-shadow:var(--shadow)}

.controls{display:flex; gap:.6rem; align-items:center}
.search{
  appearance:none; background:var(--card2); color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius:12px; padding:.6rem .8rem; min-width:210px;
}
.btn{border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:var(--card); color:var(--fg); padding:.6rem .9rem; border-radius:12px; cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#001217; border:none; font-weight:700}
.btn.ghost{background:transparent}

.hero{padding:3rem 1rem 2rem; text-align:center; max-width:1000px; margin:0 auto}
.hero h1{font-size:clamp(1.8rem, 3.5vw, 3rem); margin:.2rem 0 .4rem}
.hero p{color:var(--muted); margin:.4rem auto 1rem; max-width:52ch}
.hero-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

.grid{
  padding:1rem; margin:0 auto 3rem; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); max-width:1200px;
}

.card{
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.thumbwrap{position:relative; display:block}
.thumb{display:block; width:100%; height:150px; object-fit:cover; background:var(--card2)}
.badge{
  position:absolute; bottom:10px; right:10px; background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#001217; padding:.35rem .55rem; border-radius:999px; font-weight:700; font-size:.8rem; border:1px solid color-mix(in srgb, black 10%, transparent);
}

.card-body{padding:.9rem}
.card-title{margin:.1rem 0 .2rem; font-size:1.05rem}
.card-desc{margin:0; color:var(--muted); min-height:2.6em}
.card-meta{display:flex; gap:.4rem; margin-top:.7rem; flex-wrap:wrap}
.pill{font-size:.75rem; padding:.2rem .5rem; border-radius:999px; background:var(--card2); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); color:var(--muted)}

.site-footer{padding:2rem 1rem; text-align:center; color:var(--muted); border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent)}