/* ZamaHub - global styles
   Two main colors: primary (#FF6F61) and accent (#2196F3)
   Clean, rounded buttons, responsive grid
*/

:root{
    --primary: #FF6F61;
    --accent:  #2196F3;
    --bg: #f6f8fb;
    --card: #ffffff;
    --muted: #666;
    --radius: 12px;
    --max-width: 1100px;
    --container-padding: 20px;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background:var(--bg);
    color:#222;
    -webkit-font-smoothing:antialiased;
  }
  
  .topnav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
    background:linear-gradient(90deg,var(--card),#fff);
    border-bottom:1px solid rgba(0,0,0,0.04);
    position:sticky;
    top:0;
    z-index:50;
  }
  .brand{display:flex; align-items:center; gap:12px}
  .logo{width:42px;height:42px;border-radius:8px;object-fit:cover}
  .site-title{font-weight:700;font-size:1.2rem;color:var(--primary)}
  
  .menu a{
    margin-left:12px;
    text-decoration:none;
    color:var(--muted);
    padding:8px 10px;
    border-radius:8px;
  }
  .menu a.active, .menu a:hover{
    color:#fff;
    background:var(--accent);
    box-shadow:0 4px 10px rgba(33,150,243,0.12);
  }
  
  .container{
    max-width:var(--max-width);
    margin:22px auto;
    padding:var(--container-padding);
  }
  
  .container.narrow{max-width:820px}
  
  .hero{
    background:linear-gradient(90deg, rgba(255,111,97,0.06), rgba(33,150,243,0.04));
    border-radius:var(--radius);
    padding:18px;
    margin-bottom:18px;
  }
  
  .tools-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-top:14px;
  }
  
  .tool-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px;
    background:var(--card);
    border-radius:14px;
    text-decoration:none;
    color:inherit;
    align-items:center;
    text-align:center;
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 6px 20px rgba(27,31,35,0.03);
  }
  .tool-card img{width:72px;height:72px;object-fit:contain}
  .tool-card h3{margin:0}
  .tool-card p{margin:0;color:var(--muted);font-size:.95rem}
  
  .tool-card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 30px rgba(27,31,35,0.06);
  }
  
  .card{
    background:var(--card);
    padding:16px;
    border-radius:12px;
    margin-bottom:14px;
    box-shadow:0 6px 18px rgba(0,0,0,0.03);
  }
  
  .ad-box{
    background:linear-gradient(90deg,#fff,#f9fbff);
    border:1px dashed rgba(0,0,0,0.06);
    padding:12px;
    border-radius:10px;
    margin-top:12px;
  }
  .ad-box.small{font-size:.95rem;border-style:solid;opacity:.95}
  
  .btn{
    display:inline-block;
    padding:10px 14px;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    border:none;
    cursor:pointer;
    margin-top:10px;
    text-decoration:none;
  }
  .btn:hover{filter:brightness(.97);transform:translateY(-2px)}
  
  .hidden{display:none !important}
  
  label{display:block;margin:10px 0;font-weight:600}
  input[type="text"],input[type="file"],textarea{
    width:100%;
    padding:10px;
    border-radius:8px;
    border:1px solid rgba(0,0,0,0.08);
    margin-top:6px;
    background:#fff;
    font-size:1rem;
  }
  
  .form-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
  
  .note{color:var(--muted);font-size:.9rem;margin-top:6px}
  .small{font-size:.9rem;color:var(--muted)}
  
  .site-footer{
    text-align:center;
    padding:18px;
    color:var(--muted);
    border-top:1px solid rgba(0,0,0,0.03);
    margin-top:28px;
  }
  
  /* Responsive tweaks */
  @media (max-width:600px){
    .menu{display:none}
    .site-title{font-size:1rem}
    .topnav{padding:12px}
  }