:root{
  /* Light theme defaults */
  --bg1: #f8fafc;
  --bg2: #eef2f7;
  --accent1: #6d28d9; /* indigo-700 */
  --accent2: #0891b2; /* teal-ish */
  --glass: rgba(15,23,42,0.04);
  --glass-2: rgba(15,23,42,0.03);
  --card-radius: 14px;
  --max-width: 1100px;
  --gap: 20px;
  --text: #0f172a;
  --muted: rgba(15,23,42,0.6);
  --shadow: rgba(2,6,23,0.06);
}

/* Dark theme overrides */
:root[data-theme="dark"],
[data-theme="dark"]{
  --bg1:#081229;
  --bg2:#0f172a;
  --accent1:#7c3aed;
  --accent2:#06b6d4;
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.04);
  --text: #e6eef8;
  --muted: rgba(230,238,248,0.6);
  --shadow: rgba(2,6,23,0.6);
}

/* smooth transitions */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.06), transparent 10%),
              radial-gradient(900px 400px at 90% 90%, rgba(6,182,212,0.04), transparent 10%),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:48px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .28s ease, color .28s ease;
}

/* container */
.page{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* hero */
.hero{
  position:relative;
  background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
  padding:18px 22px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow: 0 6px 20px var(--shadow);
  backdrop-filter: blur(6px);
}
.hero-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo{
  margin:0;
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:-0.02em;
  color:var(--text);
}
.logo span{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  color:transparent;
}
.subtitle{margin:0; font-size:0.95rem; color:var(--muted)}

/* theme toggle */
.theme-toggle{
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  font-size:1rem;
  transition:transform .12s ease, background .18s;
  color:var(--text);
}
.theme-toggle:active{ transform:scale(.98) }

/* controls */
.controls{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
}
.search input{
  background:var(--glass);
  border:1px solid rgba(0,0,0,0.06);
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  min-width:220px;
  outline:none;
  transition:box-shadow .18s ease;
}
.search input:focus{box-shadow:0 6px 24px rgba(12,18,44,0.06);}

/* grid */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--gap);
}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid{grid-template-columns:1fr} }

/* card */
.card{
  position:relative;
  overflow:hidden;
  border-radius:var(--card-radius);
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(0,0,0,0.04);
  display:flex;
  gap:14px;
  align-items:center;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, background .28s;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
[data-theme="dark"] .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
}
.card:hover{
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 16px 40px var(--shadow);
}
.card .thumb{
  width:64px;
  height:64px;
  flex:0 0 64px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:white;
  font-weight:700;
  font-size:1.05rem;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
}
.card .meta{flex:1}
.card .name{margin:0; font-weight:700; color:var(--text)}
.card .desc{margin:6px 0 0 0; font-size:0.92rem; color:var(--muted)}

/* small button in countdown */
.btn.small{
  margin-left:12px;
  background:transparent;
  color:var(--text);
  border:1px solid rgba(0,0,0,0.06);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}

/* countdown */
.countdown{display:flex; align-items:center; gap:8px; color:var(--text); padding:6px 10px; background:var(--glass-2); border-radius:10px}

/* footer */
.footer{text-align:center; color:var(--muted)}

/* subtle animated accent border pseudo */
.hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  border-radius:14px;
  mix-blend-mode:overlay;
  opacity:0.08;
  background: linear-gradient(60deg, rgba(124,58,237,0.5), rgba(6,182,212,0.5));
  filter:blur(36px);
}

/* accessibility focus */
button:focus, input:focus { outline: 3px solid rgba(99,102,241,0.14); outline-offset: 3px; }

/* ensure thumbs adapt visually in light theme */
:root .thumb{ color:white; }
[data-theme="dark"] .thumb{ color:white; }