@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

    :root{
      --white:#ffffff;
      --lavender-light:#f5f3ff;
      --lavender:#e6e6fa;
      --purple-neon:#a855f7;
      --purple:#7c3aed;

      --text-dark:#1f1b2e;
      --text-medium:#4a4658;
      --text-light:#6a6480;

      --border-light:rgba(147,115,219,0.15);
    }

    *{margin:0;padding:0;box-sizing:border-box;}

    html,body{
      min-height:100%;
      overflow-x:hidden;
      font-family:'Space Grotesk',sans-serif;
      background:var(--white);
      color:var(--text-dark);
    }

    body{
      background:linear-gradient(135deg,
        var(--white) 0%,
        rgba(245,243,255,0.85) 50%,
        rgba(230,230,250,0.65) 100%);
      position:relative;
    }

    /* Subtle background */
    .bg-grid{
      position:fixed; inset:0;
      background-image:
        linear-gradient(rgba(147,115,219,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147,115,219,0.03) 1px, transparent 1px);
      background-size:55px 55px;
      pointer-events:none;
      z-index:-2;
    }
    .bg-circles{
      position:fixed; inset:0;
      background:
        radial-gradient(circle at 20% 30%, rgba(168,85,247,0.10) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(124,58,237,0.08) 0%, transparent 55%),
        radial-gradient(circle at 40% 80%, rgba(230,230,250,0.10) 0%, transparent 55%);
      pointer-events:none;
      z-index:-1;
    }

    /* Main layout */
    .register-container{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
    }

    .register-shell{
      width:100%;
      max-width:1200px;
      display:flex;
      align-items:center;
      justify-content:center; /* mobile keeps centered card */
    }

    /* LEFT SIDE (DESKTOP ONLY) */
    .brand-panel{ display:none; }

    @media (min-width:1024px){
      .register-container{ padding:20px 28px; }

      .register-shell{
        justify-content:space-between;
        gap:56px;
        align-items:stretch;
      }

      .brand-panel{
        display:block;
        width:54%;
        position:relative;
        padding:44px 10px 44px 10px;
        min-height:560px;
      }

      /* Match register.php behavior */
      .brand-panel{ overflow-y:hidden; }
    }

    .brand-title{
      font-size:2.15rem;
      font-weight:750;
      letter-spacing:0.2px;
      line-height:1.15;
      margin-bottom:18px;
      background:linear-gradient(135deg, var(--text-dark) 0%, var(--purple-neon) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }

    /* Slider */
    .info-slider{
      position:relative;
      width:100%;
      max-width:540px;
      z-index:2;
    }

    .slider-viewport{
      position:relative;
      width:100%;
      overflow:hidden; /* ONLY ONE visible */
    }

    .slide-track{
      display:flex;
      width:100%;
      transition:transform 600ms ease;
      will-change:transform;
    }

    .slide{
      width:100%;
      flex:0 0 100%;
      padding-top:8px;
      padding-bottom:8px;
    }

    .slide-head{
      display:inline-block;
      font-weight:800;
      font-size:1.15rem;
      line-height:1.2;
      padding:4px 0 6px 0;
      border-bottom:3px solid rgba(124,58,237,0.55);
      margin-bottom:12px;
      color:var(--text-dark);
    }

    .slide-text{
      font-family:'Inter',sans-serif;
      color:var(--text-medium);
      line-height:1.6;
      font-size:0.98rem;
      max-width:560px;
    }

    .slider-dots{
      display:flex;
      gap:10px;
      justify-content:center;
      margin-top:16px;
      z-index:2;
      position:relative;
    }

    .dot{
      width:34px;
      height:6px;
      border-radius:999px;
      background:rgba(124,58,237,0.18);
      cursor:pointer;
      transition:opacity 200ms ease, background 200ms ease;
      opacity:0.85;
    }
    .dot.active{
      background:rgba(124,58,237,0.55);
      opacity:1;
    }

    /* Globe (same as register.php) */
    .globe-wrap{
      position:absolute;
      width:600px;
      height:600px;
      left:-100px;
      bottom:-250px;
      z-index:1;
      pointer-events:none;
      opacity:0.95;
    }
    .globe-wrap img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      transform:rotate(-6deg);
    }

    /* RIGHT SIDE CARD */
    .register-card{
      width:100%;
      max-width:480px;
      background:rgba(255,255,255,0.92);
      border-radius:22px;
      border:1px solid var(--border-light);
      padding:2.1rem 2.0rem;
      position:relative;
    }
    @media (max-width:480px){
      .register-card{ padding:2.0rem 1.5rem; border-radius:20px; }
    }
    @media (min-width:1024px){
      .register-card{
        margin-left:auto;
        align-self:center;
      }
    }

    .logo-container{ display:flex; justify-content:center; margin-bottom:1.1rem; }
    .logo{ height:46px; width:auto; }

    .tab-navigation{
      display:flex;
      background:rgba(168,85,247,0.08);
      border-radius:16px;
      padding:6px;
      margin-bottom:1.25rem;
      border:1px solid var(--border-light);
      position:relative;
    }
    .tab-slider{
      position:absolute;
      top:6px; left:6px;
      width:calc(50% - 12px);
      height:calc(100% - 12px);
      background:linear-gradient(135deg,var(--purple-neon),var(--purple));
      border-radius:12px;
      transition:transform 0.25s ease;
      transform:translateX(0); /* LOGIN starts on Sign In */
    }
    .tab-item{ flex:1; position:relative; z-index:2; }
    .tab-link{
      display:flex; align-items:center; justify-content:center;
      padding:12px 16px;
      font-size:1rem; font-weight:600;
      color:var(--text-medium);
      text-decoration:none;
      border-radius:12px;
      height:100%;
    }
    .tab-link.active{ color:white; }

    .welcome-text{ text-align:center; margin-bottom:1.1rem; }
    .welcome-title{
      font-size:2rem; font-weight:700;
      margin-bottom:0.5rem;
      background:linear-gradient(135deg,var(--text-dark),var(--purple-neon));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      line-height:1.15;
    }
    .welcome-subtitle{
      font-size:1rem;
      color:var(--text-light);
      line-height:1.45;
      font-family:'Inter',sans-serif;
    }

    .message-alert{
      padding:0.9rem 1.1rem;
      background:rgba(168,85,247,0.08);
      border-radius:12px;
      border:1px solid var(--border-light);
      margin-bottom:1rem;
      color:var(--text-dark);
      font-family:'Inter',sans-serif;
      font-size:0.95rem;
    }

    .ads-container{ margin-bottom:1.1rem; }

    /* Google Button + shimmer on hover (same as register.php) */
    .google-btn{
      width:100%;
      padding:16px 20px;
      background:linear-gradient(135deg,var(--purple-neon),var(--purple));
      color:white;
      border:none;
      border-radius:16px;
      font-family:'Space Grotesk',sans-serif;
      font-size:1.05rem;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      cursor:pointer;
      margin-bottom:1.1rem;
      position:relative;
      overflow:hidden;
    }
    .google-btn::before{
      content:'';
      position:absolute;
      top:0; left:-120%;
      width:60%;
      height:100%;
      background:linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.22) 45%,
        rgba(255,255,255,0.38) 50%,
        rgba(255,255,255,0.22) 55%,
        transparent 100%);
      transform:skewX(-18deg);
      opacity:0;
    }
    .google-btn:hover::before{
      opacity:1;
      animation:shimmer 850ms ease;
    }
    @keyframes shimmer{
      0%{ left:-120%; }
      100%{ left:140%; }
    }
    .google-btn:active{ opacity:0.95; }
    .google-logo{ width:22px; height:22px; }

    .google-praise{
      text-align:center;
      padding:1.05rem;
      background:rgba(168,85,247,0.05);
      border-radius:16px;
      border:1px solid var(--border-light);
      margin-bottom:1rem;
    }
    .secure-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 14px;
      background:rgba(34,197,94,0.1);
      border:1px solid rgba(34,197,94,0.2);
      border-radius:12px;
      margin-bottom:0.75rem;
    }
    .secure-badge i{ color:#22c55e; font-size:1.2rem; }
    .secure-badge span{ color:var(--text-dark); font-weight:600; font-size:0.95rem; }

    .google-brand{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-weight:500;
      color:var(--text-medium);
      font-size:0.95rem;
      font-family:'Inter',sans-serif;
    }
    .google-brand img{ height:18px; width:auto; }

    .register-footer{
      text-align:center;
      padding-top:0.85rem;
      margin-top:0.85rem;
      border-top:1px solid var(--border-light);
    }
    .copyright{
      font-size:0.85rem;
      color:var(--text-light);
      font-family:'Inter',sans-serif;
    }