@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; }

    /* Scroll wrapper is a transparent passthrough on mobile */
    .register-scroll{
      width:100%;
      display:flex;
      justify-content:center;
    }

    @media (min-width:1024px){
      /* Split-screen auth: lock the outer frame to the viewport */
      .register-container{
        padding:0;
        height:100vh;
        min-height:0;
        overflow:hidden;
        align-items:stretch;
      }

      .register-shell{
        max-width:none;
        width:100%;
        height:100vh;
        gap:0;
        align-items:stretch;
        justify-content:flex-start;
      }

      /* LEFT: content flows from the top; globe is the large centred hero below it */
      .brand-panel{
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        position:relative;
        width:52%;
        flex:0 0 52%;
        height:100vh;
        overflow:hidden;
        padding:9vh 6% 0 6%;
      }
      /* Title + slider sit at the top, with clear spacing between them */
      .brand-panel .brand-title{ margin-bottom:2rem; position:relative; z-index:3; }
      .brand-panel .info-slider{ margin-bottom:0; position:relative; z-index:3; }

      /* RIGHT: independent scroll column — only this side ever scrolls */
      .register-scroll{
        width:48%;
        flex:0 0 48%;
        height:100vh;
        overflow-y:auto;
        overflow-x:hidden;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        padding:40px 5%;
        scrollbar-width:thin;
        scrollbar-color:rgba(168,85,247,0.35) transparent;
      }
      .register-scroll::-webkit-scrollbar{ width:8px; }
      .register-scroll::-webkit-scrollbar-track{ background:transparent; }
      .register-scroll::-webkit-scrollbar-thumb{
        background:rgba(168,85,247,0.35);
        border-radius:99px;
        border:2px solid transparent;
        background-clip:padding-box;
      }
      .register-scroll::-webkit-scrollbar-thumb:hover{
        background:rgba(168,85,247,0.6);
        background-clip:padding-box;
      }

      .register-card{
        margin:auto;
      }
    }

    .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 — large hero, shifted left and down so it bleeds off the panel edges */
    .globe-wrap{
      position:relative;
      align-self:flex-start;
      width:min(105%, 620px);
      height:auto;
      aspect-ratio:1 / 1;
      margin-top:2.5rem;
      margin-left:-14%;
      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; }

    /* Email/Password auth form */
    .auth-form{ display:flex; flex-direction:column; gap:1rem; margin-bottom:0.25rem; }
    .auth-field{ display:flex; flex-direction:column; gap:6px; }
    .auth-label{ font-size:0.85rem; font-weight:700; color:var(--text-dark); }
    .auth-label-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .auth-forgot-link{ font-size:0.82rem; font-weight:600; color:var(--purple); text-decoration:none; }
    .auth-forgot-link:hover{ text-decoration:underline; }

    .auth-input{
      width:100%;
      padding:13px 16px;
      border-radius:14px;
      border:1px solid var(--border-light);
      background:rgba(255,255,255,0.85);
      font-family:'Inter',sans-serif;
      font-size:0.95rem;
      color:var(--text-dark);
      outline:none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .auth-input:focus{
      border-color: rgba(124,58,237,0.45);
      box-shadow: 0 0 0 3px rgba(168,85,247,0.12);
    }
    .auth-input::placeholder{ color: rgba(106,100,128,0.55); }

    .auth-input-wrap{ position:relative; }
    .auth-input-wrap .auth-input{ padding-right:46px; }
    .auth-eye-btn{
      position:absolute;
      top:50%;
      right:6px;
      transform:translateY(-50%);
      width:34px; height:34px;
      border-radius:10px;
      border:1px solid var(--border-light);
      background:rgba(245,243,255,0.7);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      color:var(--text-medium);
    }
    .auth-eye-btn i{ font-size:16px; }
    .auth-eye-btn:hover{ background:rgba(245,243,255,1); }

    .auth-help{ font-size:0.78rem; color:var(--text-light); font-family:'Inter',sans-serif; }

    .auth-feedback{ font-size:0.8rem; font-weight:700; display:flex; align-items:center; gap:6px; }
    .auth-feedback i{ font-size:15px; }
    .auth-feedback.is-ok{ color:#16a34a; }
    .auth-feedback.is-bad{ color:#dc2626; }
    .auth-feedback.is-warn{ color:#d97706; }

    /* Back-to-login / back link used on forgot-password and new-password pages */
    .auth-back-link{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      font-size:0.9rem;
      font-weight:700;
      color:var(--text-medium);
      text-decoration:none;
      margin-bottom:1rem;
      transition:color 0.15s ease;
    }
    .auth-back-link:hover{ color:var(--purple); }
    .auth-back-link i{ font-size:1rem; }

    .auth-submit-btn{
      width:100%;
      padding:15px 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.02rem;
      font-weight:700;
      cursor:pointer;
      margin-top:0.1rem;
      transition: opacity 0.15s ease, transform 0.05s ease;
    }
    .auth-submit-btn:hover{ opacity:0.94; }
    .auth-submit-btn:active{ transform: scale(0.99); }

    /* Resend verification prompt */
    .resend-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      padding:0.85rem 1rem;
      background:rgba(239,68,68,0.06);
      border:1px solid rgba(239,68,68,0.18);
      border-radius:14px;
      margin-bottom:1rem;
    }
    .resend-text{
      display:flex; align-items:center; gap:6px;
      font-size:0.85rem; font-weight:700; color:var(--text-dark);
    }
    .resend-text i{ color:#dc2626; }
    .resend-form{ margin:0; }
    .resend-btn{
      padding:8px 14px;
      border-radius:10px;
      border:1px solid rgba(124,58,237,0.3);
      background:white;
      color:var(--purple);
      font-weight:700;
      font-size:0.82rem;
      cursor:pointer;
      white-space:nowrap;
    }
    .resend-btn:hover{ background:rgba(168,85,247,0.06); }

    /* "or" divider between form and Google */
    .auth-divider{
      display:flex;
      align-items:center;
      text-align:center;
      color: var(--text-light);
      font-size:0.85rem;
      font-weight:600;
      margin: 1rem 0;
      gap: 12px;
    }
    .auth-divider::before,
    .auth-divider::after{
      content:'';
      flex:1;
      height:1px;
      background: var(--border-light);
    }

    /* Google Sign-In — secondary/neutral style (white, bordered) */
    .google-btn-secondary{
      width:100%;
      padding:14px 20px;
      background:#ffffff;
      color:var(--text-dark);
      border:1px solid rgba(31,27,46,0.18);
      border-radius:16px;
      font-family:'Space Grotesk',sans-serif;
      font-size:0.98rem;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      cursor:pointer;
      margin-bottom:1.1rem;
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .google-btn-secondary:hover{
      background:#f8f8f8;
      border-color: rgba(31,27,46,0.3);
      box-shadow: 0 2px 6px rgba(31,27,46,0.08);
    }
    .google-btn-secondary:active{ background:#f0f0f0; }
    .google-logo-secondary{ width:20px; height:20px; }

    .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;
    }