/* Replace your current sites_html.css with this file */
/* Core reset + base */
* { box-sizing: border-box; margin:0; padding:0; }
:root {
  --bg:#0f172a;
  --panel: rgba(255,255,255,0.06);
  --accent: #3b82f6;
  --muted: #94a3b8;
  --glass: rgba(255,255,255,0.04);
  --container: 1200px;
}

html,body { height:100%; font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial; background:var(--bg); color:#fff; }

/* Background visual (kept lightweight) */
.background-effects {
  position:fixed; inset:0; z-index:-1;
  background: linear-gradient(135deg,#0f172a,#1e293b 50%,#0b1220);
  opacity:0.95;
}

/* Layout container */
.container { max-width:var(--container); margin:0 auto; padding:0 16px; }

/* Topbar */
.topbar { position:sticky; top:0; backdrop-filter: blur(6px); background: rgba(6,10,20,0.5); border-bottom:1px solid rgba(255,255,255,0.03); z-index:1000; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.brand { font-weight:700; text-decoration:none; color:#fff; font-size:1.05rem; }
.topnav a { color:var(--muted); margin-left:14px; text-decoration:none; padding:6px 8px; border-radius:8px; font-weight:600; }
.topnav a.active, .topnav a:hover { background: rgba(59,130,246,0.12); color:var(--accent); }

/* Hero */
.hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:28px 0; padding:22px; background:var(--panel); border-radius:16px; border:1px solid rgba(255,255,255,0.03); }
.hero-left h1 { font-size:1.8rem; margin-bottom:6px; letter-spacing:-0.5px; }
.hero-left .lead { color:var(--muted); max-width:640px; }
.hero-right { width:320px; }
#siteSearch { width:100%; padding:12px 14px; border-radius:12px; background:var(--glass); border:1px solid rgba(255,255,255,0.04); color:#fff; }

/* Two-column layout */
.layout { display:flex; gap:24px; align-items:flex-start; }

/* Sidebar */
.sidebar { width:260px; flex:0 0 260px; }
.sidebar-inner { background:var(--panel); padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); position:sticky; top:86px; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sidebar-header h3 { font-size:1rem; }
.collapse-btn { background:transparent; color:var(--muted); border:0; cursor:pointer; font-weight:600; }
.language-list { list-style:none; margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.language-list li a { display:flex; justify-content:space-between; text-decoration:none; padding:10px 12px; border-radius:10px; color:#fff; background:transparent; border:1px solid transparent; transition:all .18s ease; }
.language-list li a:hover { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.02); }
.badge { background: rgba(255,255,255,0.06); color:var(--muted); padding:3px 8px; border-radius:999px; font-size:.85rem; }

/* Content */
.content { flex:1; min-width:0; }
.language-section { margin-bottom:28px; padding:12px 0; }
.language-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.language-title { font-size:1.3rem; font-weight:800; }
.language-meta .count { color:var(--muted); font-weight:600; }

/* Grid of site cards (stacked, each card shows logo left and info right on wide screens) */
.sites-grid { display:flex; flex-direction:column; gap:18px; }

/* Site card */
.site-card {
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:16px;
  align-items:center;
  padding:14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  transition: transform .18s ease, box-shadow .18s ease;
}
.site-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.45); border-color: rgba(59,130,246,0.08); }

/* Left area (logo) clickable */
.site-left { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.site-logo { width:110px; height:70px; object-fit:contain; border-radius:8px; background: rgba(0,0,0,0.3); }

/* Right area */
.site-right { min-width:0; display:flex; flex-direction:column; gap:8px; }
.site-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-name { font-size:1.05rem; font-weight:700; margin:0; color:#fff; text-decoration:none; }
.site-description { color:var(--muted); font-size:0.95rem; line-height:1.4; margin:0; max-width:70ch; }
.site-notes { color: rgba(255,255,255,0.65); font-size:0.88rem; margin:0; }

/* Actions */
.site-actions { display:flex; gap:8px; }
.btn-visit { background:var(--accent); color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:700; font-size:.95rem; }
.btn-visit:hover { background:#2571d8; }

/* Footer */
.site-footer { margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.03); color:var(--muted); }
.footer-grid { display:flex; gap:20px; align-items:flex-start; }
.footer-grid h4 { margin-bottom:8px; color:#fff; }
.footer-bottom { margin-top:12px; text-align:center; color:var(--muted); }

/* Responsive */
@media (max-width: 1100px) {
  .layout { gap:16px; }
  .sidebar { display:none; }
  .page-layout .container { padding:0 10px; }
  .hero-right { width:260px; }
}
@media (max-width: 800px) {
  .hero { flex-direction:column; align-items:flex-start; gap:12px; }
  .site-card { grid-template-columns: 1fr; }
  .site-left { justify-content:flex-start; }
  .site-logo { width:160px; height:90px; }
  #siteSearch { width:100%; }
}
.visually-hidden { position:absolute !important; clip:rect(1px,1px,1px,1px); height:1px; width:1px; overflow:hidden; white-space:nowrap; }