.join-group-button{background-color:var(--primary-800);color:var(--white);padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-sm);white-space:nowrap;height:auto;line-height:1;border-radius:var(--radius-sm);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease}.join-group-button:hover:not(:disabled){opacity:var(--opacity-80)}.join-group-button.leave-group{background-color:var(
    --accent-yellow
  );color:var(--gray-900)}.join-group-button:disabled{background-color:var(--gray-600);cursor:not-allowed}.join-modal{padding:var(--space-lg);background-color:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);width:100%;max-width:var(--width-md);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-md);font-size:var(--font-size-md);color:var(--gray-900)}.join-modal h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading);margin-bottom:var(--space-sm);text-align:center}.join-modal input[type=email]{padding:var(--space-sm);font-size:var(--font-size-md);border:var(--border-width-thin) solid var(--gray-200);border-radius:var(--radius-sm);width:100%;outline:none}.join-modal input[type=email]:focus{border-color:var(--primary-800);box-shadow:0 0 0 2px var(--primary-100)}.join-modal button{padding:var(--space-sm);font-size:var(--font-size-md);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .2s ease}.join-modal button:first-of-type{background-color:var(--primary-800);color:var(--white)}.join-modal button:first-of-type:hover{background-color:#0fa958}.join-modal button:last-of-type{background-color:var(--gray-200);color:var(--gray-700)}.join-modal button:last-of-type:hover{background-color:var(--gray-100)}