:root{--brand:#0d6efd;--muted:#6c757d}
*{box-sizing:border-box}
body{font-family:Segoe UI, Arial, sans-serif;margin:0;color:#222;background:#fff}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:9}
.header .container{display:flex;align-items:center;gap:20px}
.nav a{margin-right:14px;text-decoration:none;color:#222}
.nav a:hover{color:var(--brand)}
.hero{background:linear-gradient(90deg,#e9f2ff,#ffffff);padding:36px 0;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.card img{width:100%;height:160px;object-fit:cover;background:#f3f4f6}
.card .p{padding:14px}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;border:0;cursor:pointer}
.btn.secondary{background:#6c757d}
.btn.danger{background:#dc3545}
input,textarea,select{width:100%;padding:10px;border:1px solid #ccc;border-radius:8px}
label{display:block;margin-top:12px;margin-bottom:6px;font-weight:600}
.form{max-width:640px}
.alert{padding:12px 14px;border-radius:8px;border:1px solid;margin:14px 0}
.alert.success{background:#e6fcf5;border-color:#20c997}
.alert.error{background:#fff5f5;border-color:#fa5252}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px 10px;border-bottom:1px solid #eee;text-align:left}
.footer{border-top:1px solid #eee;margin-top:30px}
.footer .container{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}
.muted{color:var(--muted)}
.right{float:right}
.badge{display:inline-block;background:#e9ecef;color:#495057;border-radius:6px;padding:4px 8px;font-size:.85rem}