/* --- Variables --- */
:root {
  --bg:#0b0f1e;
  --panel:rgba(18, 25, 54, 0.8);
  --muted:#9ba3c9;
  --text:#eef1ff;
  --brand:#6d5dfc;
  --accent:#ff6ec7;
  --card:rgba(15, 20, 48, 0.85);
  --chip:rgba(27, 35, 72, 0.6);
  --border:#2e396a;
  --blur:20px;
}

html.light {
  background: #f0f4ff;
  background-attachment: fixed;
}

body.light {
  --bg:#f0f4ff;
  --panel:#f0f4ff;
  --muted:#52628f;
  --text:#0e1a35;
  --brand:#5a4efc;
  --accent:#d94baf;
  --card:#f0f4ff;
  --chip:#e4eaff;
  --border:#d7dcf3;
}

* {
  box-sizing: border-box;
  transition: background 1.2s ease, color 1.2s ease, border-color 1.2s ease;
}

html {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #101530, #050812);
  background-attachment: fixed;
}

body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  min-height: 100vh;
  background: transparent;
}

/* --- Buttons --- */
.btn {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  background: var(--accent);
}

.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--blur));
}

/* --- Header --- */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}
.site-header .brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.site-header h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(270deg, #ffe600, #00a3dd, #000000);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 6s ease infinite;
}
.top-actions {
  display: flex;
  gap: 10px;
}

/* --- Filters row --- */
.hero-search {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.controls.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}
.controls.filters select {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  backdrop-filter: blur(10px);
  font-size: 1rem;
}

/* --- Search bar --- */
.search-container {
  margin-top: 20px;
  text-align: center;
}

.search-container input {
  width: 60%;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  font-size: 1.1rem;
  backdrop-filter: blur(10px);
}
.search-container input::placeholder { color: var(--muted); }

/* --- Chips --- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; justify-content: center; }
.chip {
  font-size: .9rem;
  background: var(--chip);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
}
.chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Results --- */
.results-section { max-width: 1100px; margin: 20px auto; padding: 0 20px; }
.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width:980px){ .controls.filters{grid-template-columns:1fr 1fr} .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .controls.filters{grid-template-columns:1fr} .grid{grid-template-columns:1fr} }

/* --- Cards --- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  min-height: 280px;
}
.card:hover { transform: translateY(-4px); }
.avatar {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--chip);
  flex: 0 0 64px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  font-size: 1.2rem;
}
.avatar span { font-weight: 800; }
.card h3 {
  margin: .2rem 0 .3rem;
  font-size: 1.3rem;
}
.muted { color: var(--muted); font-size: 1rem; }
.stars { font-size:1.1rem; letter-spacing:.5px; }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.tag {
  font-size:.85rem;
  background: var(--chip);
  border: 1px dashed var(--border);
  padding: 6px 10px;
  border-radius:999px;
  color: var(--muted);
}

/* --- Small buttons --- */
.card .cta { margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.smallbtn {
  font-size:1rem;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--chip);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
}
.smallbtn:hover{ background: var(--brand); color:#fff; border-color:var(--brand); }
.smallbtn.primary { background: var(--brand); color:#fff; border:0; }

/* --- Pagination --- */
.pagination { display:flex; gap:10px; justify-content:center; margin-top:20px; }
.pagebtn {
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--chip);
  color:var(--text);
  cursor:pointer;
}
.pagebtn:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pagebtn[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- Footer --- */
.footer { opacity:.8; margin:24px 0; text-align:center; font-size:.95rem; }

/* --- Modal --- */
dialog {
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:20px;
  max-width:680px;
  width:min(92vw,680px);
  backdrop-filter: blur(var(--blur));
  box-shadow:0 6px 24px rgba(0,0,0,.5);
}
dialog::backdrop { background:rgba(0,0,0,.6); }
.modal-body { padding:0 18px 18px; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--border);
}
.xbtn { background:transparent; border:0; color:var(--text); font-size:1.3rem; cursor:pointer; }
.row { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.row .col {
  flex:1 1 250px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  backdrop-filter: blur(8px);
}
.badge {
  display:inline-block;
  background:var(--chip);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:.9rem;
  
/* --- Navbar --- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.navbar .logo a {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.navbar .nav-links {
  list-style: none;      /* removes bullets */
  display: flex;         /* horizontal layout */
  gap: 24px;             /* spacing between items */
  margin: 0;
  padding: 0;
}

.navbar .nav-links a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  transition: color 0.2s ease;
}

.navbar .nav-links a:hover {
  color: var(--brand);
}

/*Sticky Navbar*/ 
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}


}