:root{
    --blue:#2563EB; --navy:#1E3A8A; --orange:#F97316; --orange-dark:#EA6A0C;
    --green:#22C55E; --amber:#FBBF24;
    --bg:#F8FAFC; --ink:#0B1220; --text:#1E293B; --muted:#64748B;
    --border:#E6EBF2; --r-sm:10px; --r-md:16px; --r-lg:24px;
    --shadow-card:0 12px 32px rgba(15,23,42,0.08);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);min-height:100vh;}
  h1,h2,h3{font-family:'Poppins',sans-serif;}
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}
  input{font-family:'Inter',sans-serif;}

  .page{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}

  /* LEFT BRAND PANEL */
  .brand-panel{
    background:linear-gradient(150deg,var(--navy) 0%, var(--blue) 60%, #3B82F6 100%);
    position:relative;overflow:hidden;color:#fff;
    padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;
  }
  .brand-panel::before{content:"";position:absolute;top:-20%;right:-15%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,0.28),transparent 65%);}
  .brand-panel::after{content:"";position:absolute;bottom:-25%;left:-10%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 65%);}
  .logo-white{height:34px;width:auto;position:relative;z-index:1;filter:brightness(0) invert(1);}
  .brand-copy{position:relative;z-index:1;max-width:420px;}
  .brand-copy h2{font-size:32px;font-weight:700;line-height:1.25;margin-bottom:16px;}
  .brand-copy p{font-size:15.5px;color:#DBEAFE;line-height:1.6;}
  .brand-stats{display:flex;gap:36px;position:relative;z-index:1;margin-top:40px;}
  .brand-stats div b{display:block;font-family:'Poppins',sans-serif;font-size:24px;font-weight:700;}
  .brand-stats div span{font-size:12.5px;color:#BFDBFE;}
  .quote-card{
    position:relative;z-index:1;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);
    border-radius:var(--r-md);padding:22px 24px;backdrop-filter:blur(10px);margin-top:36px;
  }
  .quote-card p{font-size:14px;color:#EFF6FF;line-height:1.6;margin-bottom:14px;}
  .quote-person{display:flex;align-items:center;gap:10px;}
  .quote-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#FB923C);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;}
  .quote-person b{font-size:13px;display:block;}
  .quote-person span{font-size:11.5px;color:#BFDBFE;}

  /* RIGHT FORM PANEL */
  .form-panel{display:flex;align-items:center;justify-content:center;padding:48px;background:#fff;}
  .form-box{width:100%;max-width:400px;}
  .mobile-logo{display:none;}
  .form-head{margin-bottom:32px;}
  .form-head span.eyebrow{font-size:13px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;}
  .form-head h1{font-size:28px;font-weight:700;color:var(--ink);margin:10px 0 8px;}
  .form-head p{font-size:14.5px;color:var(--muted);}
  .form-head p a{color:var(--blue);font-weight:600;}

  .method-toggle{display:flex;background:var(--bg);border-radius:999px;padding:4px;margin-bottom:24px;}
  .method-toggle button{flex:1;padding:10px;border:none;background:transparent;border-radius:999px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;transition:all .2s ease;font-family:'Inter',sans-serif;}
  .method-toggle button.active{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(15,23,42,0.08);}

  .field{margin-bottom:18px;}
  .field label{display:block;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:7px;}
  .input-wrap{position:relative;}
  .input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:17px;}
  .input-wrap input{
    width:100%;padding:13px 14px 13px 42px;border:1.5px solid var(--border);border-radius:var(--r-sm);
    font-size:14.5px;color:var(--text);outline:none;transition:border-color .2s ease;background:var(--bg);
  }
  .input-wrap input:focus{border-color:var(--blue);background:#fff;}
  .input-wrap .toggle-eye{left:auto;right:14px;cursor:pointer;}

  .field-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-size:13.5px;}
  .remember{display:flex;align-items:center;gap:8px;color:var(--muted);}
  .remember input{width:16px;height:16px;accent-color:var(--blue);}
  .field-row a{color:var(--blue);font-weight:600;}

  .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:var(--r-sm);font-weight:600;font-size:15px;cursor:pointer;border:none;transition:transform .18s ease, box-shadow .18s ease;font-family:'Inter',sans-serif;}
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:linear-gradient(135deg,var(--blue) 0%, var(--navy) 100%);color:#fff;box-shadow:0 10px 26px rgba(37,99,235,0.32);margin-bottom:20px;}

  .divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:12.5px;font-weight:500;}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border);}

  .social-row{display:flex;gap:12px;margin-bottom:28px;}
  .social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;background:#fff;transition:border-color .2s ease, background .2s ease;}
  .social-btn:hover{border-color:var(--blue);background:var(--bg);}
  .social-btn i{font-size:18px;}
  .social-btn.google i{color:#EA4335;}
  .social-btn.apple i{color:#000;}
  .social-btn.microsoft i{color:#00A4EF;}

  .role-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
  .role-pill{padding:8px 16px;border-radius:999px;border:1.5px solid var(--border);font-size:13px;font-weight:600;color:var(--text);cursor:pointer;background:#fff;}
  .role-pill.active{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;border-color:transparent;}

  .signup-footer{text-align:center;font-size:14px;color:var(--muted);margin-top:8px;}
  .signup-footer a{color:var(--blue);font-weight:600;}

  .otp-boxes{display:flex;gap:10px;margin-bottom:24px;}
  .otp-boxes input{width:100%;text-align:center;padding:14px 0;font-size:20px;font-weight:700;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);outline:none;}
  .otp-boxes input:focus{border-color:var(--blue);background:#fff;}
  .otp-timer{font-size:13px;color:var(--muted);text-align:center;margin-bottom:20px;}
  .otp-timer a{color:var(--blue);font-weight:600;}

  @media(max-width:900px){
    .page{grid-template-columns:1fr;}
    .brand-panel{display:none;}
    .form-panel{padding:32px 24px;}
    .mobile-logo{display:block;margin-bottom:32px;height:32px;width:auto;}
  }