/* =====================
   Base & Theme
===================== */
:root{
  --bg:#0b0c11;
  --panel:#12141b;
  --muted:#9aa3af;
  --text:#e5e7eb;
  --heading:#f3f4f6;
  --accent:#8b5cf6;     /* purple */
  --accent-2:#a78bfa;   /* lighter purple */
  --border:#212435;
  --chip:#1b1f2a;
  --chip-border:#2b3040;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 30% -10%, #1a1330 0%, transparent 70%),
              radial-gradient(1000px 600px at 100% 0%, #141629 0%, transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.wrap{max-width:900px;margin:48px auto;padding:0 24px}

/* header */
.logo-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}
.mm-logo-img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
h1{font-size:28px;margin:0;font-weight:700;letter-spacing:.2px;color:var(--heading)}

/* tabs */
.tabs{
  background: #0f1118;
  border:1px solid var(--border);
  border-radius:12px;
  padding:4px;
  display:flex;gap:4px;
  max-width:680px;margin:24px auto 32px;
}
.tab-btn{
  flex:1;
  padding:12px 16px;
  color:var(--muted);
  background: transparent;
  border:0;border-radius:10px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  transition: color .2s ease;
}
.tab-btn.active{
  color:#fff;
  background: linear-gradient(180deg, rgba(139,92,246,.25), rgba(139,92,246,.1));
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.35);
}

/* sections */
.section{display:none}
.section.active{display:block}

/* titles */
.block-title{
  display:flex;align-items:center;gap:12px;margin:0 0 8px 0;font-size:22px;
  font-weight:800;letter-spacing:.2px
}
.subtle{color:var(--muted);margin-top:8px;margin-bottom:18px}

/* grid */
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:960px){
  .grid{grid-template-columns:1fr 1fr}
}

/* card */
.card{
  border-radius:14px;
  background:
    radial-gradient(900px 400px at -10% -20%, rgba(139,92,246,.22) 0%, transparent 55%),
    linear-gradient(180deg, #181427, #141726 60%, #121523);
  border:1px solid #262a3c;
  padding:20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 40px rgba(139,92,246,.08);
  position: relative;
  overflow: hidden;
}
.card.large{grid-column: span 2}
.card h3{margin:0 0 8px 0;font-size:18px}
.label{opacity:.75}

/* controls */
.controls{display:grid;gap:12px;margin:8px 0 16px}
.days{display:flex;gap:12px;flex-wrap:wrap}
.day-btn{
  background:#0f1320;border:1px solid var(--border);color:#cbd5e1;
  padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600
}
.day-btn.active{border-color:#5644b9;background:rgba(139,92,246,.12);color:#fff;box-shadow: inset 0 0 0 1px rgba(167,139,250,.4)}
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{
  padding:10px 14px;border-radius:10px;border:1px solid var(--chip-border);
  background: var(--chip); color:#cbd5e1; cursor:pointer; font-weight:600
}
.chip.active{background: rgba(139,92,246,.15); border-color:#5644b9; color:#fff}

/* event mini cards */
.mini-card{
  border:1px solid #262a3c;border-radius:12px;padding:16px;
  background: linear-gradient(180deg, #141726, #10131f);
}
.mini-card .name{font-weight:800;margin-bottom:6px}
.mini-card .desc{color:#cdd3e1;font-size:14px}
.mini-card .age{
  display:inline-block;margin-top:12px;font-size:12px;
  background:#131726;border:1px solid #2a2f41;color:#d6def3;border-radius:6px;padding:6px 8px
}

/* accessibility helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}