:root {
  --bg: #0b0b0f;
  --panel: #141420;
  --text: #eaeaf2;
  --muted: #a7a7bd;
  --accent: #7c4dff; /* purple */
  --accent-2: #a789ff;
  --radius: 14px;
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body.theme-dark { background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

.topbar{
  height:56px; display:flex; align-items:center; padding:0 12px; position:sticky; top:0; z-index:30;
  background: rgba(10,10,20,0.65); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.brand{ font-weight:700; letter-spacing:.3px; }

.hamburger{
  width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:grid;place-items:center;margin-right:10px; cursor:pointer;
}
.hamburger span{ display:block; width:18px;height:2px;background:var(--text); margin:2px 0; border-radius:2px; }

.drawer{
  position:fixed; top:0; left:0; bottom:0; width:82%; max-width:320px; background:var(--panel);
  box-shadow: 0 10px 40px rgba(0,0,0,.35); transform: translateX(-100%); transition: transform .25s ease; z-index:40;
}
.drawer.open{ transform: translateX(0); }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.drawer-nav ul{ list-style:none; margin:0; padding:8px 0;}
.drawer-nav li a{ display:block; padding:12px 16px; color:var(--text); text-decoration:none; }
.drawer-nav li a:hover{ background: rgba(255,255,255,.06); }

.close{
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
}

.container{ padding:16px; max-width:960px; margin:0 auto; }

.section{ margin:18px 0; }
.section-title{ margin:0 4px 10px; font-size:1rem; color:var(--muted); }

.card-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}
.nav-card{
  padding:18px 14px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: var(--radius); text-decoration:none; color:var(--text); display:flex; align-items:center; justify-content:center;
}
.nav-card:hover{ border-color:rgba(255,255,255,.16); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
.nav-card span{ font-weight:600; }

.announce-feed{ display:grid; gap:12px; }
.announce-card{
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.announce-media img, .announce-media video{ display:block; width:100%; height:auto; max-height:300px; object-fit:cover; background:#000; }
.announce-body{ padding:12px; }
.announce-body h3{ margin:.2rem 0 .5rem; }
.announce-text{ color:var(--text); }
.meta{ color:var(--muted); font-size:.85rem; }

.rich-text{ border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }

.media-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.media-card{
  display:block; text-decoration:none; color:var(--text);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.media-card .thumb{ width:100%; padding-top:62%; background-size:cover; background-position:center; }
.media-card .meta{ padding:8px 10px; color:var(--muted); font-size:.85rem; }

.slider{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08); }
.slides{ display:flex; transition: transform .4s ease; }
.slide{ min-width:100%; height:38vh; max-height:380px; background-size:cover; background-position:center; }
.slider button{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(20,20,28,.6); border:1px solid rgba(255,255,255,.08);
  color:#fff; width:38px; height:38px; border-radius:40px; display:grid; place-items:center; cursor:pointer;
}
.slider .prev{ left:10px; } .slider .next{ right:10px; }

.btn-primary{
  display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; color:#fff; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.empty{ color:var(--muted); padding:10px; }

.footer{ padding:40px 16px 30px; text-align:center; color:var(--muted); }
@media (min-width: 720px){
  .media-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}