/* Simple styles for demo template */
:root{--teal:#0ea5a4;--accent:#f59e0b;--card:#fff;--bg:#f1f5f9;--ink:#0f172a}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45}
.container{max-width:1100px;margin:0 auto;padding:12px}
.site-header{background:#fff;padding:12px 0;box-shadow:0 6px 18px rgba(2,6,23,.06);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:72px;height:72px;background:linear-gradient(45deg,#fde68a,#fef3c7);display:grid;place-items:center;border-radius:50%;font-weight:700}
.title h1{margin:0;font-size:20px;color:var(--teal)}.sub{font-size:13px;color:#6b7280}
.meta{text-align:right}
.main-nav{margin-top:8px;padding:6px 0}
.main-nav a{margin-right:12px;color:#0f172a;text-decoration:none;font-weight:600}

.grid{display:grid;grid-template-columns:240px 1fr 260px;gap:16px;margin-top:16px}
.sidebar{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,.06)}
.sidebar h3{margin-top:0}
.sidebar ul{padding-left:16px}
.hero img{width:100%;height:320px;object-fit:cover;border-radius:10px}
.welcome{background:var(--card);padding:12px;border-radius:10px;margin-top:12px;box-shadow:0 8px 24px rgba(2,6,23,.06)}
.two-col{display:flex;gap:16px;margin-top:12px}
.left-col{flex:2}
.right-col{flex:1}
.card{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,.06);margin-bottom:12px}
.notice h3,.events h3{margin-top:0}
.message{background:#f8fafc;padding:10px;border-radius:8px;margin-bottom:10px}
.rightbar .card{position:sticky;top:100px}
.site-footer{background:#0b1220;color:#cbd5e1;padding:18px;margin-top:20px;border-radius:8px 8px 0 0;text-align:center}
@media (max-width:900px){.grid{grid-template-columns:1fr}.two-col{flex-direction:column}}