*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f8fb;color:#111827}
a{text-decoration:none;color:inherit}
.container{width:90%;max-width:1200px;margin:auto}
.section-title{text-align:center;margin:30px 0 20px;font-size:28px;font-weight:900}
.muted{opacity:.85}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:900}
.badge.ok{background:#22c55e;color:#fff}
.badge.warn{background:#f59e0b;color:#fff}
.badge.bad{background:#ef4444;color:#fff}

/* NAVBAR */
.navbar{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:14px 0;position:sticky;top:0;z-index:1000}
.nav-flex{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo{font-size:24px;font-weight:900;color:#2563eb}
.nav-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nav-links a{font-weight:800;padding:8px 10px;border-radius:10px}
.nav-links a:hover{color:#2563eb;background:#eef2ff}
.nav-links a.active{color:#2563eb;background:#e8f0ff}

/* HERO */
.hero{
  background:linear-gradient(rgba(37,99,235,.75),rgba(37,99,235,.75)),
  url('https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?auto=format&fit=crop&w=1600&q=60');
  background-size:cover;background-position:center;color:#fff;text-align:center;padding:90px 20px
}
.hero h1{font-size:40px;margin:0 0 10px}
.hero p{font-size:18px;margin:0 0 22px}
.search-box{background:#fff;padding:10px;border-radius:50px;max-width:680px;margin:0 auto;display:flex;gap:10px}
.search-box input{flex:1;border:none;outline:none;padding:12px;font-size:16px;border-radius:40px}
.search-box button{background:#2563eb;color:#fff;border:none;padding:12px 22px;border-radius:40px;cursor:pointer;font-weight:900}

/* GRID / CARDS */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:#fff;border-radius:14px;box-shadow:0 4px 15px rgba(0,0,0,.08);overflow:hidden}
.card .img{width:100%;height:160px;object-fit:cover;background:#e5e7eb}
.card .p{padding:14px}
.card h3{margin:0 0 6px}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.price{font-weight:900;color:#2563eb}
.btn{border:none;border-radius:10px;padding:10px 12px;font-weight:900;cursor:pointer}
.btn.primary{background:#2563eb;color:#fff}
.btn.gray{background:#e5e7eb}
.btn.green{background:#22c55e;color:#fff}
.btn.red{background:#ef4444;color:#fff}

/* SECTIONS */
.section{padding:50px 0}
.panel{background:#fff;border-radius:14px;box-shadow:0 4px 15px rgba(0,0,0,.08);padding:18px}
.field{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,.15)}
.form-row{margin-bottom:12px}
label{display:block;font-size:13px;font-weight:900;margin-bottom:6px;opacity:.9}
.error{color:#b91c1c;font-size:13px;margin-top:6px;min-height:16px}
.split{display:flex;gap:12px;flex-wrap:wrap}
.split > *{flex:1;min-width:240px}

/* FOOTER */
.footer{background:#111827;color:#fff;padding:32px 0;text-align:center;margin-top:50px}