:root{
  --bg1: linear-gradient(180deg,#f7fbff,#ffffff);
  --accent1: #4B8BFF;
  --accent2: #FF5FA2;
  --muted: #6b7280;
  --card: rgba(255,255,255,0.8);
}
*{ box-sizing:border-box; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
body{ margin:0; min-height:100vh; background:var(--bg1); color:#0f172a; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }
.site-header{ background:transparent; position:sticky; top:0; z-index:50; padding:14px 0; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-weight:700; color:var(--accent1); text-decoration:none; font-size:20px; }
.top-nav a{ margin-left:12px; text-decoration:none; color:var(--muted); }
.btn-primary{ background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:600; box-shadow: 0 6px 18px rgba(75,139,255,0.12); }
.btn-primary.large{ padding:12px 18px; font-size:16px; }
.btn-ghost{ background:transparent; border:1px solid rgba(15,23,42,0.06); padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--muted); }

.hero{ padding:36px 0; }
.hero-inner{ display:flex; gap:20px; align-items:center; }
.hero-text{ flex:1; }
.hero-text h1{ margin:0 0 8px; font-size:28px; line-height:1.05; }
.hero-text p{ margin:0 0 16px; color:var(--muted); max-width:560px; }
.hero-preview{ width:320px; }
.preview-card{ background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); padding:16px; border-radius:14px; box-shadow: 0 10px 30px rgba(75,139,255,0.06); }
.preview-card .tag{ font-size:12px; color:var(--accent1); font-weight:600; margin-bottom:8px; display:inline-block; }

.main-grid{ display:grid; grid-template-columns: 1fr 300px; gap:20px; padding-bottom:40px; }
.feed{ }
.filters{ margin-bottom:12px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-block; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid rgba(15,23,42,0.04); text-decoration:none; color:var(--muted); font-weight:600; }
.chip.clear{ background:transparent; border:1px dashed rgba(15,23,42,0.06); }

.card{ background:var(--card); border-radius:12px; padding:14px; margin-bottom:14px; box-shadow: 0 8px 24px rgba(15,23,42,0.03); border:1px solid rgba(15,23,42,0.03); }
.card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.card-tag{ font-weight:700; color:var(--accent1); font-size:13px; }
.card-body .card-text{ margin:0 0 10px; color:#0b1220; }
.card-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.card-footer .meta{ color:var(--muted); font-size:13px; }
.actions button{ background:transparent; border:0; cursor:pointer; font-weight:700; padding:6px 8px; border-radius:8px; }
.actions .report{ color:#ef4444; }

.sidebar .small{ padding:12px; }
.tags-list{ display:flex; flex-direction:column; gap:6px; }
.tag-link{ text-decoration:none; color:var(--muted); }

.site-footer{ border-top:1px solid rgba(15,23,42,0.04); padding:18px 0; color:var(--muted); font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.empty{ padding:24px; text-align:center; color:var(--muted); }

@media(max-width:900px){
  .hero-inner{ flex-direction:column; align-items:flex-start; }
  .main-grid{ grid-template-columns: 1fr; }
  .sidebar{ order:2; }
  .hero-preview{ width:100%; }
}