:root {
  --bg:#0e141b; --card:#16202a; --accent:#2b8a3e; --text:#e6edf3; --muted:#a6b1bb; --danger:#c0392b; --outline:#2b8a3e66;
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
a { color:#7cc0ff; text-decoration:none; }
a:hover { text-decoration:underline; }
.topbar { position: sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#0a1016; border-bottom:1px solid #1f2a34; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { height:36px; width:auto; display:block; }
.logo.fallback { background:#253342; color:#fff; padding:8px 10px; border-radius:6px; font-weight:700; }
.title { font-weight:600; font-size:18px; }
.hamburger { background:none; border:0; display:flex; flex-direction:column; gap:4px; cursor:pointer; }
.hamburger span { width:24px; height:2px; background:#fff; display:block; }
.navmenu { position:absolute; right:8px; top:56px; background:#0a1016; border:1px solid #1f2a34; border-radius:8px; display:none; min-width:200px; }
.navmenu a { display:block; padding:10px 12px; border-bottom:1px solid #15202b; }
.navmenu a:last-child { border-bottom:0; }
.navmenu.show { display:block; }
.container { max-width:1100px; margin: 24px auto; padding: 0 16px; }
.container.narrow { max-width:720px; }
.hero { margin:16px 0 24px; }
.btn { display:inline-block; padding:9px 14px; border-radius:8px; border:1px solid #2a3a47; color:#fff; background:#1b2733; text-decoration:none; cursor:pointer; }
.btn:hover { filter:brightness(1.05); }
.btn.primary { background:var(--accent); border-color:var(--accent); }
.btn.outline { background:transparent; border-color:var(--outline); }
.btn.danger { background:var(--danger); border-color:var(--danger); }
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid #20303c; border-radius:12px; padding:16px; }
.card-logo { width:100%; max-height:140px; object-fit:contain; background:#0a1016; border-radius:8px; padding:6px; }
.form label { display:block; margin-bottom:6px; color: var(--muted); }
.form input, .form textarea, .form select { width:100%; padding:10px; border-radius:8px; border:1px solid #2a3a47; background:#0f1720; color:#fff; }
.form .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form .actions-row { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.thumb img { max-width:180px; max-height:120px; display:block; border-radius:8px; border:1px solid #2a3a47; }
.alert { padding:12px; border-radius:8px; margin:12px 0; }
.alert.error { background:#36151a; border:1px solid #5c1d26; }
.alert.success { background:#183621; border:1px solid #265b39; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { padding:8px 12px; border-radius:999px; background:#13202b; border:1px solid #2a3a47; }
.tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.empty { padding:16px; background:#12202b; border:1px dashed #2a3a47; border-radius:8px; color:var(--muted); }
.table { width:100%; }
.table .row { display:grid; grid-template-columns:2fr 2fr 1fr 2fr; gap:8px; padding:10px 6px; border-bottom:1px solid #1f2a34; }
.table .row.head { font-weight:600; color:#b9c4cf; }
.table .row-actions { display:flex; gap:8px; align-items:center; }
@media (max-width: 640px) { .form .grid { grid-template-columns:1fr; } .table .row { grid-template-columns:1fr; } }
/* Manage Events Banner */
.manage-banner {
  margin: 12px 0 20px;
  background: linear-gradient(135deg, #163021 0%, #10251a 100%);
  border: 1px solid #244a32;
}

.manage-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.manage-banner__text {
  min-width: 260px;
}

.manage-banner__title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
}

.manage-banner__subtitle {
  margin: 0;
  color: var(--muted);
}

.manage-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.manage-banner__actions .btn {
  background: var(--accent);
  border-color: var(--accent);
}
.manage-banner__actions .btn.outline {
  background: transparent;
  border-color: var(--outline);
}

/* Mobile */
@media (max-width: 640px) {
  .manage-banner__content {
    flex-direction: column;
    align-items: flex-start;
  }
}