@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  --brand: #39b549;
  --accent: #c49b6d;
  --bg: #0f1113;
  --surface: #16181b;
  --text: #e7e9ea;
}

* { font-family: Lato, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

body { background: var(--accent); color: var(--text); }

.navbar { border-bottom: 1px solid rgba(255,255,255,0.08); }
.bg-brand { background: var(--brand); }
.brand { color: #fff; font-weight: 700; letter-spacing: 0.2px; }
.navbar .nav-link { color: #fff; }
.navbar .nav-link:hover { color: #eaeaea; text-decoration: underline; }

.card-surface { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.card-brand { background: var(--brand); color: #fff; border-radius: 16px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }

.muted { color: #9aa0a6; }

.btn-brand { background: var(--brand); color: #0b1109; border: none; }
.btn-brand:hover { filter: brightness(0.95); }
.btn-accent { background: var(--accent); color: #1a120d; border: none; }
.btn-accent:hover { filter: brightness(0.95); }

.input-modern { border: 1px solid rgba(255,255,255,0.08); color: #000; }
.input-modern:focus { border-color: var(--brand); box-shadow: 0 0 0 0.2rem rgba(57,181,73,0.15); }

.badge-soft { background: rgba(196,155,109,0.2); color: #e7e9ea; }
.badge-ghost { background: rgba(255,255,255,0.35); color: #fff; }

.avatar-brand { width: 48px; height: 48px; border-radius: 12px; background: var(--brand); }
.avatar-white { width: 48px; height: 48px; border-radius: 12px; background: #fff; }

.tile-translucent { background: rgba(255,255,255,0.18); border-radius: 12px; color: #fff; }

.qr-img { background: #fff; border-radius: 12px; padding: 12px; width: 100%;}
.text-soft-white { color: #fff; opacity: 0.9; }
.referral-code { font-size: 40px; display: block; margin-top: 10px; font-weight: 700; color: #fff; }
.score-card { background: rgba(255,255,255,0.15); border-radius: 12px; padding: 16px; color: #fff; }
.score-value { font-size: 48px; font-weight: 900; line-height: 1; }
.rank-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.35); color: #fff; font-weight: 700; }
.points-label { text-transform: uppercase; font-size: 12px; opacity: 0.9; color: #fff; }
.points-pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.35); color: #fff; font-weight: 700; }
.header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.header-meta .meta-item { text-align: right; color: #fff; }
.section-title { font-weight: 700; color: #fff; opacity: 0.9; }
.table-modern { background-color: #4fca62; }
.table-modern thead { background-color: #4fca62; color: #fff; background-color: #62ce70;}
.table-modern tbody tr { background-color: #c49b6d; color: #fff; background-color: #62ce70;}
.table-modern tbody tr:nth-child(even) { background-color: #d2ae85; }
.table-modern th, .table-modern td { border-color: #a88459 !important; background-color: #62ce70; color: #fff;}
.f-20 { font-size: 20px; }
.events-wrap { margin-top: 16px; }
.event-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.2); color: #fff; border-radius: 999px; padding: 8px 12px; margin: 6px; }
.event-chip .date { font-size: 12px; opacity: 0.9; }
.agenda-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.agenda-card { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.18); border-radius: 12px; padding: 12px; color: #fff; }
.agenda-icon { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.25); border-radius: 8px; }
.agenda-icon .fa-solid { font-size: 20px;}
.agenda-title { font-weight: 700; font-size:24px; text-decoration: none;}
.agenda-date { font-size: 16px; opacity: 0.9; text-decoration: none; }
.top-logo { height: 100px; margin-top: 10px }
.nav-link { color: #fff; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: #c49b6d; color: #fff; }
.container { max-width: 540px !important; }
#eventModal .modal-content { background: var(--accent); color: var(--text); }
#eventModalDesc { white-space: pre-wrap; font-size: 18px;}
.modal-header { border-bottom: 0;}
.social-links { display: flex; justify-content: center; gap: 16px; }
.social-link { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 12px; }
.social-link:hover { filter: brightness(1.05); }
.fs-18 { font-size: 18px;}
a {text-decoration: none;}