:root{
    --forest-1: #025A01;
    --forest-2: #017602;
    --forest-deep: #013201;
    --lime: #C3D611;
    --yellow: #F3F956;
    --ink: #0f172a;
    --slate: #64748b;
    --slate-light: #94a3b8;
    --line: #c4d6ef;
    --bg-soft: #f8faf7;
  }

  *{ box-sizing: border-box; }

  html,body{
    margin:0;
    padding:0;
    min-height:100vh;
    overflow-x:hidden; /* safety net against any accidental overflow */
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
      linear-gradient(180deg, rgba(1,50,1,0.72) 0%, rgba(1,50,1,0.55) 45%, rgba(1,50,1,0.78) 100%);
    z-index:0;
  }

  /* ---------- Card ---------- */
  /* Mobile-first: full-width card with tighter spacing by default */
  .card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:440px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    margin-bottom:1.25rem;
  }

  .brand-mark{
    width:52px;
    height:52px;
    flex-shrink:0;
    object-fit:contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  }

  .brand-mark svg{ width:26px; height:26px; }

  .brand-text{ display:flex; flex-direction:column; align-items:center; }

  .brand-name{
    font-size:0.98rem;
    font-weight:800;
    color:#fff;
    line-height:1.3;
    padding:0 0.5rem;
  }

  .brand-sub{
    font-size:0.58rem;
    font-weight:600;
    color: rgba(255, 255, 255, 0.29);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-top:0.15rem;
    padding:0 0.5rem;
  }

  .panel{
    width:100%; /* was 115% — that caused the panel to overflow its card container */
    background:#ffffffe6;
    border:1px solid var(--line);
    border-radius:1.1rem;
    padding:1.5rem 1.25rem;
    box-shadow: 0 20px 45px -12px rgba(0,0,0,0.35);
    text-align:left;
  }

.select-title{
    font-size:1.2rem;
    font-weight:600;
    margin: 0.75rem 0 0.35rem;  /* controls gap above/below "Select a campus" */
    color: #08490e;
    text-align:center !important;
}
  .panel-header{ margin-bottom:1.35rem; }

  .panel-title{
    font-size:1.25rem;
    font-weight:900;
    margin:0 0 0.35rem;
    color: var(--ink);
    text-align:center !important;
  }

.panel-desc{
    font-size:0.70rem;
    color: var(--slate);
    font-weight:500;
    margin:0;
    text-align:center !important;
}

  form{ margin:0; }

  .campus-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:1.35rem;
  }

  .campus-option{ position:relative; }

  .campus-option input{
    position:absolute;
    opacity:0;
    width:0; height:0;
  }

  .campus-option label{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1.5px solid var(--line);
    border-radius:0.8rem;
    background:#fffefe;
    cursor:pointer;
    box-shadow: 3px rgba(110, 138, 150, 0.209);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    /* Bigger, thumb-friendly tap target on touch screens */
    min-height:48px;
  }

  .campus-option label:hover{
    border-color: var(--forest-2);
  }

  .campus-option input:checked + label{
    border-color: var(--forest-1);
    background: #f2f8f0;
  }

  .campus-code{
    font-size:11px;
    font-weight:800;
    letter-spacing:0.03em;
    color: var(--forest-1);
    background:#eef4ec;
    border-radius:7px;
    padding:5px 8px;
    flex-shrink:0;
  }

  .campus-option input:checked + label .campus-code{
    background: var(--forest-1);
    color:#fff;
  }

  .campus-text{ flex:1; min-width:0; }

  .campus-text .name{
    font-weight:800;
    font-size:14px;
    color: var(--ink);
    display:block;
  }

  .campus-text .tagline{
    font-size:11.5px;
    font-weight:500;
    color: var(--slate);
  }

  .check-ring{
    width:17px; height:17px;
    border-radius:50%;
    border:1.5px solid var(--line);
    flex-shrink:0;
    position:relative;
  }

  .campus-option input:checked + label .check-ring{
    border-color: var(--forest-1);
    background: var(--forest-1);
  }

  .campus-option input:checked + label .check-ring::after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:50%;
    background: var(--yellow);
  }

  button.enter{
    width:100%;
    padding:0.9rem 1.1rem;
    border:none;
    border-radius:0.8rem;
    background: linear-gradient(135deg, var(--forest-1) 0%, var(--forest-2) 100%);
    color:#fff;
    font-family:'Inter', sans-serif;
    font-weight:800;
    font-size:14px;
    letter-spacing:0.01em;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow: 0 8px 20px -6px rgba(2,90,1,0.35);
    transition: transform .15s ease, box-shadow .15s ease;
    /* Thumb-friendly minimum tap height */
    min-height:48px;
  }

  button.enter:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(2,90,1,0.4); }
  button.enter:active{ transform: translateY(0); }
  button.enter:disabled{ background: var(--slate-light); box-shadow:none; cursor:not-allowed; transform:none; }

  button.enter svg{ transition: transform .15s ease; }
  button.enter:hover svg{ transform: translateX(3px); }

  .legal{
    margin:1.1rem 0 0;
    font-size:11px;
    font-weight:600;
    color: var(--slate-light);
    text-align:center;
    line-height:1.5;
  }

  :focus-visible{
    outline: 2px solid var(--forest-2);
    outline-offset: 2px;
  }

  /* ---------- Extra-small phones (≤360px): trim spacing further ---------- */
  @media (max-width: 360px){
    .panel{ padding:1.1rem 0.9rem; }
    .panel-title{ font-size:1.05rem; }
    .brand-mark{ width:42px; height:42px; }
    .brand-name{ font-size:0.9rem; }
    .campus-option label{ padding:10px 12px; gap:10px; }
  }

  /* ---------- Small phones (≤380px): trim spacing a bit further ---------- */
  @media (max-width: 380px){
    .panel{ padding:1.25rem 1rem; }
    .panel-title{ font-size:1.15rem; }
    .brand-mark{ width:46px; height:46px; }
  }

  /* ---------- Tablet and up (≥600px): restore roomier spacing ---------- */
  @media (min-width: 600px){
    .brand{ gap:0.65rem; margin-bottom:1.75rem; }
    .brand-mark{ width:64px; height:64px; }
    .brand-name{ font-size:1.09rem; }
    .brand-sub{ font-size:0.6rem; }

    .panel{ padding:2.25rem; border-radius:1.25rem; }
    .panel-header{ margin-bottom:1.75rem; }
    .panel-title{ font-size:1.5rem; }
    .panel-desc{ font-size:0.9rem; }

    .campus-list{ gap:10px; margin-bottom:1.5rem; }
    .campus-option label{ padding:14px 16px; gap:14px; }
    .campus-code{ font-size:11.5px; padding:5px 9px; }
    .campus-text .name{ font-size:14.5px; }
    .campus-text .tagline{ font-size:12px; }

    button.enter{ padding:0.95rem 1.25rem; font-size:14.5px; }
    .legal{ font-size:11.5px; margin-top:1.25rem; }
  }

  /* ---------- Desktop (≥1024px) ---------- */
  @media (min-width: 1024px){
    .card{ max-width:460px; }
  }

  /* ---------- Large desktop / wide monitors (≥1440px) ---------- */
  @media (min-width: 1440px){
    .card{ max-width:500px; }
    .panel-title{ font-size:1.65rem; }
    .panel-desc{ font-size:0.95rem; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }