:root{
  --bg1: linear-gradient(180deg,#071029 0%,#0c1530 100%);
  --muted:#9aa4c0;
  --text:#e6eef8;
  --card-bg: rgba(255,255,255,0.03);
  --radius:12px;

  --math:#2563eb;      /* blue */
  --physics:#ef4444;   /* red */
  --pchem:#10b981;     /* green */
  --ochem:#f59e0b;     /* orange */
  --ichem:#7c3aed;     /* purple */

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg1);color:var(--text);-webkit-font-smoothing:antialiased}
.hero{padding:26px 14px 6px;text-align:center}
.hero-inner{max-width:1100px;margin:auto}
.hero h1{margin:0;font-size:1.9rem}
.subtitle{color:var(--muted);margin:6px 0 14px}

/* controls */
.controls{display:flex;flex-direction:column;gap:12px;align-items:center}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;width:100%;max-width:1100px;padding:0 8px;margin-bottom:6px}
.cat-card{
  border-radius:14px;padding:12px;min-height:96px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:white;font-weight:800;font-size:1rem;cursor:pointer;transition:transform .22s,box-shadow .22s;
  background:var(--card-bg);border:1px solid rgba(255,255,255,0.04);
}
.cat-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}
.cat-emoji{font-size:22px;margin-bottom:6px;opacity:0.98}
.cat-label{line-height:1}

/* category color variants */
.cat-card.math{background:linear-gradient(135deg,var(--math),#3b82f6)}
.cat-card.physics{background:linear-gradient(135deg,var(--physics),#f87171)}
.cat-card.pchem{background:linear-gradient(135deg,var(--pchem),#34d399)}
.cat-card.ochem{background:linear-gradient(135deg,var(--ochem),#fb923c)}
.cat-card.ichem{background:linear-gradient(135deg,var(--ichem),#8b5cf6)}

/* search */
.search-area{width:100%;display:flex;justify-content:center}
#search{width:min(900px,96%);max-width:900px;padding:12px 14px;border-radius:12px;border:none;background:rgba(255,255,255,0.03);color:var(--text);outline:none;font-size:15px}

/* hint + grid */
.main{max-width:1100px;margin:18px auto;padding:0 12px}
.hint{color:var(--muted);text-align:center;padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}

/* book card */
.book{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;border:1px solid rgba(255,255,255,0.03);
  transition:transform .18s,box-shadow .18s,opacity .2s;
}
.book:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.5)}
.title{font-weight:800;color:var(--text);font-size:1rem}
.sub{color:var(--muted);font-size:13px}
.actions{margin-top:auto;display:flex;gap:8px}

/* JOIN button */
.join-btn{
  flex:1;padding:10px 12px;border-radius:999px;font-weight:900;text-decoration:none;color:white;border:none;
  background:linear-gradient(90deg,#ff512f,#dd2476);cursor:pointer;display:inline-block;text-align:center;
  box-shadow:0 10px 30px rgba(221,36,118,0.14);transition:transform .12s,box-shadow .12s;
}
.join-btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(221,36,118,0.24)}
.open-btn{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.04);color:var(--text);border:1px solid rgba(255,255,255,0.04);text-decoration:none}

/* responsive */
@media (max-width:640px){
  .hero h1{font-size:1.4rem}
  .cat-card{padding:10px;font-size:0.95rem}
  #search{width:92%}
  .book{padding:12px}
}

/* small appear animation */
.fade-in { animation: fadeInUp .36s ease both; }
@keyframes fadeInUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }