/* Two‑column card */
.register-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    margin: 2rem 0;
  }
  @media(max-width:900px){
    .register-card { flex-direction: column; }
  }
  
  /* Left panel */
  .card-left {
    flex: 1;
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .card-left::before {
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
      radial-gradient(rgba(255,255,255,0.03) 1px,transparent 1px);
    background-size:24px 24px,32px 32px;
    animation:moveDots 20s linear infinite;
  }
  .card-left::after {
    content:"";
    position:absolute;
    top:0;left:-60%;
    width:40%;height:100%;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(5px);
    transform:skewX(-25deg);
    animation:glassSlide 3s infinite;
  }
  
  /* Welcome content */
  .card-left .welcome-content {
    z-index:1;
    text-align:center;
    color:#fff;
    padding:1rem;
  }
  .card-left h2 {
    font-size:2rem;
    margin-bottom:.5rem;
    text-shadow:1px 1px 3px rgba(0,0,0,.3);
  }
  .card-left p {
    margin-bottom:1rem;
    font-size:1.05rem;
  }
  .card-left .icon-bounce i {
    font-size:2.5rem;
    animation:bounce 2s infinite;
  }
  
  /* Right panel form width */
  .card-right {
    flex: 1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .card-right .form-inner {
    width:100%;
    max-width:360px;
  }
  
  /* Referrer toast */
  .referrer-toast {
    background: #fff8e1;
    border-left:4px solid var(--accent);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    margin-bottom:1.5rem;
    animation: fadeIn .6s ease both;
  }
  .referrer-toast img {
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--accent);
  }
  .referrer-toast span {
    font-size: .95rem;
    color: var(--text-dark);
  }