:root{
  --bg: #f7fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --brand: #2563eb; /* blue-600 */
  --brand-2: #22c55e; /* green-500 */
  --ring: rgba(37, 99, 235, 0.25);
  --chip: #eef2ff; /* indigo-50 */
  --chip-ink: #3730a3; /* indigo-700 */
  --danger: #dc2626;
  --shadow: 0 10px 25px rgba(2, 6, 23, .08);
  --radius: 16px;
}
*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial; color:var(--ink); background:linear-gradient(180deg,#f5fbff, #f7fafc 30%);
}
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(255,255,255,.75); border-bottom:1px solid #e5e7eb;
}
.wrap{max-width:1200px; margin:0 auto; padding:16px 20px}
.topbar{display:flex; align-items:center; gap:16px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.logo{width:38px; height:38px; background:conic-gradient(from 180deg at 50% 50%, #dbeafe, #93c5fd, #60a5fa, #3b82f6, #2563eb, #1d4ed8); border-radius:12px; box-shadow:var(--shadow)}
.cta-group{display:flex; gap:10px; flex-wrap:wrap}
.btn{appearance:none; border:1px solid #dbe4ff; padding:10px 14px; border-radius:12px; font-weight:600; background:var(--card); cursor:pointer}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent}
.btn.ghost{background:transparent}

.hero{padding:28px 0 10px}
.hero h1{font-size:clamp(24px, 4vw, 40px); margin:0 0 8px}
.hero p{color:var(--muted); margin:0}

.filters{display:grid; grid-template-columns:1.2fr .9fr .9fr .8fr auto; gap:10px; margin:16px 0 6px}
.filters input,.filters select{width:100%; border:1px solid #e5e7eb; padding:12px 14px; border-radius:12px; outline:none; background:#fff}
.filters input:focus,.filters select:focus{box-shadow:0 0 0 6px var(--ring); border-color:transparent}

.chipbar{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 18px}
.chip{padding:8px 10px; background:var(--chip); color:var(--chip-ink); border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; border:1px solid #e0e7ff}
.chip.active{outline:3px solid rgba(79,70,229,.15)}

.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px}
.card{grid-column:span 12; background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); border:1px solid #e5e7eb}
@media (min-width:720px){.card{grid-column:span 6}}
@media (min-width:1024px){.card{grid-column:span 4}}

/* Featured */
.featured{margin:8px 0 16px}
.featured-card{display:block; border:1px solid #c7d2fe; background:linear-gradient(180deg,#eef2ff,#ffffff); border-radius:20px; padding:18px; box-shadow:var(--shadow)}
.featured-card h3{font-size:22px; margin:2px 0 4px}
.badge{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#3730a3; background:#e0e7ff; border:1px solid #c7d2fe; padding:4px 8px; border-radius:999px}

.name{font-size:18px; font-weight:800; margin:0 0 4px}
.meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:13px}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.tag{font-size:12px; background:#f8fafc; border:1px solid #e5e7eb; color:#334155; padding:4px 8px; border-radius:999px}
.actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.actions a,.actions button{border:1px solid #e5e7eb; padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--ink); background:#fff; font-weight:600}
.actions a.primary{background:var(--brand); color:#fff; border-color:transparent}

.empty{display:none; text-align:center; color:var(--muted); padding:24px}

.subtle{color:var(--muted); font-size:13px}

footer{margin:28px 0 60px; color:var(--muted)}
footer .cols{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:800px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
.foot-card{background:#fff; padding:16px; border-radius:12px; border:1px solid #e5e7eb}

.modal{position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; padding:20px}
.modal .panel{background:#fff; width:min(840px, 98vw); max-height:90vh; overflow:auto; border-radius:16px; padding:18px 18px 20px; box-shadow:var(--shadow)}
.modal h3{margin:0 0 10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid2>div{display:flex; flex-direction:column; gap:6px}
.grid2 input, .grid2 textarea{border:1px solid #e5e7eb; padding:10px 12px; border-radius:10px}

.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#f0fdf4; color:#166534; border:1px solid #dcfce7; font-weight:700}
.note{border-left:4px solid #bae6fd; padding:10px 12px; background:#f8fafc; border-radius:10px;}