:root{
    --brand:#0b63a8;
    --bg:#f2f6fa;
    --card:#fff;
    --muted:#58606a;
    --radius:10px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:#0b2636}
  .container{max-width:1100px;margin:0 auto;padding:18px}
  
  /* header */
  .site-header{background:linear-gradient(90deg,var(--brand),#0e78d6);color:#fff;padding:16px 0;box-shadow:0 4px 18px rgba(11,99,168,.08)}
  .site-header .container{display:flex;align-items:center}
  .logo{font-weight:800;color:#fff;text-decoration:none;font-size:20px;margin-right:20px}
  .main-nav{margin-left:auto}
  .main-nav a{color:#eaf6ff;margin-left:16px;text-decoration:none;font-weight:600}
  
  /* hero */
  .hero{display:flex;align-items:center;justify-content:space-between;margin:22px 0}
  .hero h1{margin:0;font-size:28px}
  .hero p{color:var(--muted);margin-top:6px}
  
  .search-box{display:flex;gap:8px}
  #search{padding:10px 12px;border-radius:8px;border:1px solid #dfe9f2;width:320px}
  #searchBtn{background:var(--brand);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
  
  /* cards/list */
  .cards h2{margin-bottom:10px}
  .calc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
  .calc-item{background:var(--card);padding:12px;border-radius:8px;box-shadow:0 6px 16px rgba(16,42,67,.06);display:flex;flex-direction:column}
  .calc-item a{font-weight:700;color:var(--brand);text-decoration:none}
  .calc-item .desc{color:var(--muted);font-size:13px;margin-top:6px}
  
  /* categories */
  .categories{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
  .cat-card{background:var(--card);padding:14px;border-radius:8px;box-shadow:0 6px 12px rgba(16,42,67,.04)}
  .cat-card h3{margin-top:0}
  .cat-card ul{padding-left:18px;color:var(--muted)}
  .cat-card a{color:var(--brand)}
  
  /* footer */
  .site-footer{padding:22px 0;text-align:center;color:var(--muted);margin-top:18px}
  
  /* small cards */
  .card{background:var(--card);padding:14px;border-radius:8px;box-shadow:0 6px 12px rgba(16,42,67,.04);margin:12px 0}
  
  /* responsiveness */
  @media (max-width:900px){
    .hero{flex-direction:column;align-items:flex-start;gap:12px}
    .categories{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:560px){
    .categories{grid-template-columns:1fr}
    #search{width:160px}
  }