:root{
  --primary:#4CAF50;
  --text:#212121;
  --bg:#ffffff;
  --space:16px;
}
body{font-family:system-ui,Roboto,Arial;background:var(--bg);color:var(--text);margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space)}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.hero{min-height:480px;display:grid;place-items:center;text-align:center;padding:80px var(--space)}
.logo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:24px;align-items:center}
.blog-grid{display:grid;gap:24px}
@media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid #eee;border-radius:16px;padding:16px;transition:.3s ease-in-out}
.card:hover{transform:scale(1.03)}
.fade{opacity:0;transform:translateY(10px);transition:.8s ease}
.fade.visible{opacity:1;transform:none}

/* Admin Styles */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid #eee}
.table th{text-align:left;font-weight:600}
.table button{margin-left:8px; padding: 4px 8px; cursor:pointer;}
.hidden{display:none}
input, textarea { display: block; width: 100%; padding: 8px; margin-bottom: 10px; }
button { padding: 8px 16px; background: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; }
form { margin-top: 16px; }