:root { --bg:#fafafa; --card:#ffffff; --border:#e5e7eb; --muted:#6b7280; --link:#0ea5e9; --btn:#2563eb; --btn-txt:#fff; --hi:#dc2626; --med:#d97706; --lo:#16a34a; --safe:#0891b2;}
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color:#111827; }
    a { color: var(--link); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .container { max-width: 960px; margin: 0 auto; padding: 24px 20px 40px; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 20px; flex-wrap: wrap; }
    .title { margin: 0; font-size: 26px; font-weight: 700; }
    .badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:13px; color:var(--muted); }
    .meta { color: var(--muted); font-size: 14px; margin: 0 0 20px; max-width:720px; }
    .grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
    .card { background: var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:10px; transition: box-shadow .15s ease; }
    .card:hover { box-shadow:0 10px 18px rgba(15,23,42,0.08); }
    .card-title { font-size:16px; font-weight:600; margin:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .card p { margin:0; font-size:13px; color:#374151; line-height:1.45; }
    .tag { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--muted); }
    .footer { margin-top:32px; font-size:12px; color:var(--muted); }
    .footer strong { color:#111827; }