:root{
  --primary:#0f2a44;
  --accent:#4ea3ff;
  --bg:#f4f7fb;
  --card:#fff;
  --muted:#6b7280;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:var(--bg);color:#111}
.header{
  background:var(--primary);color:#fff;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;
}
.header h1{margin:0;font-size:20px;display:flex;gap:10px;align-items:center}
.header nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:600}
.container{max-width:1100px;margin:28px auto;padding:0 18px}
.hero{background:linear-gradient(135deg,#10304a,#1f4d7a);color:#fff;padding:40px;border-radius:10px;margin-bottom:26px}
.hero h2{margin:0 0 8px;font-size:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:var(--card);padding:14px;border-radius:10px;box-shadow:0 8px 20px rgba(14,30,37,0.06);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.cover{width:100%;height:420px;max-height:300px;border-radius:6px;background:#eee;background-size:cover;background-position:center}
.title{font-weight:700;margin:12px 0 6px}
.author{color:var(--muted);font-size:14px;margin-bottom:6px}
.price{font-weight:800;color:var(--primary);margin-bottom:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;cursor:pointer;border:0}
.small{font-size:13px;color:var(--muted)}
.topbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.search{padding:8px 12px;border-radius:8px;border:1px solid #ddd;min-width:220px}
.filter{padding:8px 12px;border-radius:8px;border:1px solid #ddd;background:#fff}
.footer{padding:22px;text-align:center;color:#8b94a0;margin-top:28px}
@media (max-width:520px){
  .cover{height:220px}
}
.loading-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#fff; margin-left:8px; vertical-align:middle; opacity:0.9}
.loading-dot.hidden{ display:none }

/* --- ADDED: simple description style --- */
.desc{font-size:14px;color:var(--muted);margin:8px 0 10px;line-height:1.4}

/* --- ADDED: word count style --- */
.wordcount { font-size:13px; color:var(--muted); margin-top:6px; font-weight:600 }

/* --- ADDED: age warning style --- */
.age-warning{
  margin-top:12px;
  padding:10px 14px;
  border-radius:8px;
  background:#fff3cd;
  color:#664d03;
  font-size:14px;
  line-height:1.4;
  border:1px solid #ffe69c;
}

/* --- TAG-BASED CARD BACKGROUNDS (customize colours here) --- */

.card--erotica { background: linear-gradient(180deg, #fff9dc, #fff7d1); }

/* Standard SPH */
.card--sph { background: linear-gradient(180deg, #e6f3ff, #d6eaff); }

/* Gay SPH */
.card--gay-sph { background: linear-gradient(180deg, #fff1dc, #ffe4c2); }

/* Sissy SPH */
.card--sissy-sph { background: linear-gradient(180deg, #fff0f6, #ffe6f1); }

/* Gay + Sissy SPH */
.card--gay-sissy-sph { background: linear-gradient(180deg, #f6e6ff, #edd4ff); }

.card--romance { background: linear-gradient(180deg, #f7fff6, #e9fff0); }

.card--dark { background: linear-gradient(180deg, #f6f6f8, #efeef2); }


/* Increase contrast for text when using pale backgrounds */
.card--erotica .title,
.card--erotica .author,
.card--sph .title,
.card--sph .author,
.card--gay-sph .title,
.card--gay-sph .author,
.card--sissy-sph .title,
.card--sissy-sph .author,
.card--gay-sissy-sph .title,
.card--gay-sissy-sph .author,
.card--romance .title,
.card--romance .author,
.card--dark .title,
.card--dark .author {
  color:#071423;
}

/* subtle tag label */
.card .tag-label { font-size:12px; color:#374151; background: rgba(255,255,255,0.55); padding:6px 8px; border-radius:999px; margin-top:6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); 
}

.card-badge{
  position:absolute;
  top:8px;
  right:8px;
  font-size:11px;
  font-weight:700;
  padding:3px 7px;
  border-radius:6px;
  background:#000;
  color:#fff;
  letter-spacing:.5px;
}

/* optional colour variations */

.card--sph .card-badge { background:#3a6ea5; }

.card--gay-sph .card-badge { background:#d97a00; }

.card--sissy-sph .card-badge { background:#cc2f7a; }

.card--gay-sissy-sph .card-badge { background:#7a3ac7; }