/* THEME — update these once you confirm exact HEX from school site */
    :root{
      --brand-primary:#1d3557; /* TODO: replace with school primary */
      --brand-accent:#e0b000;  /* TODO: replace with school accent */
      --text:#0b0b0b; --muted:#555; --bg:#ffffff; --card:#f7f7f8; --ok:#1b8a5a; --warn:#a65e00;
      --radius:18px; --pad:16px; --gap:12px; --shadow:0 6px 20px rgba(0,0,0,.06);
    }
    *{box-sizing:border-box}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
    header{padding:28px var(--pad); background:linear-gradient(180deg,var(--brand-primary),#0e223a); color:white}
    .wrap{max-width:920px;margin:0 auto;padding:0 var(--pad)}
    header .header-text h1 {font-size: clamp(20px, 5vw, 32px);}
          .sub {font-size: clamp(12px, 3vw, 16px);}
    .sub{opacity:.9}
    .event{background:var(--card); border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow); margin:18px 0}
    .event h3{margin:0 0 6px}
    .grid{display:grid; gap:var(--gap)}
    .btn{display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid #ddd; background:white; cursor:pointer; font-weight:600}
    .btn.primary{background:var(--brand-accent); border:none}
    .pill{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef; margin-left:8px; font-size:12px}
    .names{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
    .name{background:white; border:1px solid #eee; padding:6px 10px; border-radius:999px}
    form.signup{display:grid; gap:8px; grid-template-columns:1fr 1fr}
    form.signup input{padding:10px;border-radius:10px;border:1px solid #ccc}
    form.signup .full{grid-column:1/-1}
    .notice{font-size:12px; color:var(--muted)}
    .capacity{font-size:13px; color:var(--muted)}
    .adminbar{position:sticky; top:0; background:#111; color:white; padding:8px var(--pad)}
    .hide{display:none}
    .wrap.header-content {
      display: flex;
      align-items: center; 
      gap: 20px;           
      }
    header img.logo {
      max-height: 100px;        
      height: auto;
      width: auto;         
      }  
#rosterList {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: clamp(10px, 4vw, 14px); 
    }
    #rosterList li.not-active {
      text-decoration: line-through;
      opacity: 0.6 }
      #subscribeModal.hide {
    display: none;
  }
  #subscribeModal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;              /* only applied when .hide is removed */
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  #loading {
    text-align: center;
    font-size: 1.2em;
    margin: 2em 0;
    color: var(--muted, #555);
  }