:root{
  --bg: #f6fbff;
  --surface: #ffffff;
  --accent: #0b74de;
  --muted: #6b7280;
  --text: #0f1724;
  --max: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at 10% 20%, rgba(11,116,222,0.04), transparent 12%),var(--bg);color:var(--text);margin:0;display:flex;justify-content:center;padding:28px}
.container{width:100%;max-width:var(--max)}

.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;background:linear-gradient(135deg,var(--accent),#004e9f);box-shadow:0 8px 24px rgba(11,116,222,0.12)}
.brand-text h1{margin:0;font-size:1.15rem;font-weight:700}
.meta{margin:4px 0 0;color:var(--muted);font-size:0.95rem}

.actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--surface);background:var(--accent);box-shadow:0 6px 18px rgba(11,116,222,0.12)}
.btn.ghost{color:var(--accent);background:transparent;box-shadow:none;border:1px solid rgba(11,116,222,0.08)}

.controls{margin:18px 0}
.search{width:100%;max-width:680px;padding:12px 14px;border-radius:12px;border:1px solid rgba(12,20,40,0.06);background:#fff;font-size:0.98rem;box-shadow:0 4px 10px rgba(12,20,40,0.03)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:8px}
.card{display:flex;flex-direction:row;gap:12px;align-items:center;text-decoration:none;color:inherit;background:var(--surface);padding:12px;border-radius:12px;box-shadow:0 10px 30px rgba(12,20,40,0.06);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(12,20,40,0.12)}
.thumb{width:72px;height:72px;border-radius:10px;flex:0 0 72px;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:18px}
.card-body h3{margin:0;font-size:1rem}
.card-body .desc{margin:6px 0 0;color:var(--muted);font-size:0.92rem}
.card-actions{margin-left:auto;font-weight:600;color:var(--accent)}

.footer{margin-top:24px;color:var(--muted);font-size:0.9rem}

/* Accessibility */
.card:focus{outline:3px solid rgba(11,116,222,0.12);outline-offset:4px}

@media (max-width:620px){
  .site-head{flex-direction:column;align-items:flex-start;gap:12px}
  .card{flex-direction:column;align-items:flex-start}
  .thumb{width:100%;height:120px;border-radius:10px}
  .card-actions{margin-left:0;margin-top:8px}
}

/* Small utility */
.hidden{display:none !important}