/* =========================
   🌑 Body Base
   ========================= */
body {
  background-color: #0f0f0f;
  color: #f3f4f6;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               sans-serif;
  min-height: 100vh;
}

/* =========================
   📦 Page Container
   ========================= */
.page-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}
@media (min-width:640px){
  .page-container{ padding:2rem 1.5rem; }
}
@media (min-width:1024px){
  .page-container{ padding:2rem; }
}

/* =========================
   🔍 Search Box
   ========================= */
.search-box {
  margin-bottom: 1.5rem;
  background: rgba(17,17,17,.8);
  backdrop-filter: blur(8px);
  padding: 1rem;
  border-radius: .5rem;
  box-shadow: 0 0 15px #4f46e5;
}
.search-box-inner{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
@media(min-width:640px){
  .search-box-inner{ flex-direction:row; gap:1rem; }
}

.search-input{
  width:100%;
  padding:.5rem 1rem;
  background:#1a1a1a;
  border:1px solid #374151;
  border-radius:.375rem;
  color:#f3f4f6;
}
.search-input:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 2px #6366f1;
}

/* =========================
   ✨ Section Headers
   ========================= */
.search-header{
  font-size:1.5rem;
  font-weight:800;
  color:#22d3ee;
  text-shadow:0 0 10px #0ff;
  margin-bottom:1.5rem;
}
.random-header{
  font-size:1.5rem;
  font-weight:800;
  color:#a855f7;
  text-shadow:0 0 10px #d946ef;
  margin:2rem 0 1.5rem;
}

/* =========================
   📚 Novel Grid
   ========================= */
.novel-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media(min-width:640px){
  .novel-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px){
  .novel-grid{ grid-template-columns:repeat(3,1fr); }
}

/* =========================
   📖 Novel Card (Unified)
   ========================= */
.novel-card{
  background: rgba(17,17,17,.9);
  border-radius:.75rem;
  border:1px solid rgba(99,102,241,.5);
  box-shadow:0 0 8px #4f46e5;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:.3s ease;
}
.novel-card:hover{
  transform:scale(1.02);
  box-shadow:0 0 18px #6366f1;
}
@media(min-width:640px){
  .novel-card{ flex-direction:row; }
}

.novel-card img{
  width:100%;
  border-radius:.375rem;
  object-fit:cover;
  transition:.3s;
}
.novel-card img:hover{
  filter:drop-shadow(0 0 15px rgba(79,70,229,.8));
}

/* =========================
   🔤 Novel Title
   ========================= */
.novel-title{
  font-size:1.125rem;
  font-weight:bold;
  background:linear-gradient(to right,#22d3ee,#f472b6,#a855f7);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 8px #00ffff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.novel-title:hover{
  transform:scale(1.03);
}

/* =========================
   🏷 Status Badge
   ========================= */
.status-completed{ color:#4ade80; text-shadow:0 0 6px #00ff88; }
.status-ongoing{ color:#facc15; text-shadow:0 0 6px #ffaa00; }
.status-drop{ color:#f87171; text-shadow:0 0 6px #ff0066; }
.status-default{ color:#9ca3af; }