:root{
      --primary-color:#1a365d; --secondary-color:#c59d5f; --dark-color:#1f2937;
    }
    body{ background:#f8fafc; }
    .container{ max-width:1200px; margin:0 auto; padding:0 16px; }
    .card{ background:#fff; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.06); overflow:hidden; }
    .hero{ height:160px; background:var(--primary-color); display:flex; align-items:center; justify-content:center; color:#fff; font-size:44px; }
    .hero img{ width:100%; height:100%; object-fit:cover; display:block; }
    .hero.alt{ background:linear-gradient(135deg,#1a365d,#243b53); }
    .title{ font-size:20px; font-weight:700; color:var(--dark-color); line-height:1.6; margin:8px 0 0; }
    .excerpt{ color:#4b5563; margin:8px 0 0; }
    .badge{ font-size:12px; color:#6b7280; display:flex; gap:.4rem; align-items:center; }
    .grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:20px; }
    @media (min-width:768px){ .grid{ grid-template-columns:repeat(2,1fr); } }
    @media (min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr); } }
    .controls{ background:#fff; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.06); padding:12px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
    .field{ border:1px solid #e5e7eb; border-radius:10px; padding:.6rem .9rem; background:#fff; min-width:220px; }
    .field:focus{ outline:none; border-color:var(--secondary-color); box-shadow:0 0 0 2px rgba(197,157,95,.15); }
    .empty{ text-align:center; color:#6b7280; padding:2rem 1rem; }
    header.site{ background:#fff; box-shadow:0 1px 12px rgba(0,0,0,.04); }
    header.site .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--dark-color); }
    header.site .brand h1{ font-size:18px; margin:0; }
    header.site nav a{ color:#6b7280; text-decoration:none; margin:0 8px; }
    header.site nav a:hover{ color:var(--primary-color); }