:root{ --mg-brand:#0bcd03; --mg-ink:#000; --mg-line:#eaeaea; }
.mgs-hub{ color:var(--mg-ink); }
.mgs-hdr h2{ font-weight:800; margin:6px 0; }
.mgs-sub{ opacity:.85; margin:0 0 14px; }
.mgs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.mgs-card{ background:#fff; border:1px solid var(--mg-line); border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); transition:box-shadow .2s ease, transform .2s ease; }
.mgs-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.10); transform:translateY(-2px); }
.mgs-card__tag{ display:inline-block; font-size:12px; border:1px solid var(--mg-brand); border-radius:999px; padding:4px 8px; margin-bottom:8px; background:#fff; color:#000; }
.mgs-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border:2px solid var(--mg-brand); border-radius:999px; background:#fff; color:#000; text-decoration:none; cursor:pointer; font-weight:600; }
.mgs-btn:hover, .mgs-btn:active{ background:var(--mg-brand); color:#000; }
.mgs-single__stage{ max-width:920px; margin:16px auto; border:1px solid var(--mg-line); border-radius:16px; padding:16px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.mgs-modal{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:.2s ease; }
.mgs-modal[aria-hidden="false"]{ opacity:1; pointer-events:all; }
.mgs-modal__dialog{ background:#fff; border:1px solid var(--mg-line); border-radius:14px; padding:20px; width:min(420px,90vw); box-shadow:0 12px 32px rgba(0,0,0,.2); }
.mgs-modal__close{ float:right; background:none; border:none; font-size:20px; cursor:pointer; color:#333; }