@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:'Poppins',sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0a0e1a;overflow:hidden;position:relative;}
  canvas#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;}

  .card{position:relative;z-index:10;background:rgba(10,14,26,0.82);border:1px solid rgba(0,200,255,0.18);border-radius:18px;width:900px;max-width:96vw;display:flex;overflow:hidden;box-shadow:0 0 60px rgba(0,150,255,0.1);}

  .left{flex:1;background:linear-gradient(135deg,rgba(0,20,50,0.95),rgba(0,10,30,0.98));padding:52px 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;border-right:1px solid rgba(0,200,255,0.12);position:relative;overflow:hidden;}
  .left::before{content:'';position:absolute;top:-80px;left:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(0,150,255,0.12),transparent 70%);}
  .left::after{content:'';position:absolute;bottom:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,150,0.09),transparent 70%);}

  .cam-icon{width:90px;height:90px;background:rgba(0,150,255,0.1);border:1.5px solid rgba(0,200,255,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;}
  .cam-icon svg{width:46px;height:46px;}
  .cam-icon .pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:1.5px solid rgba(0,200,255,0.4);animation:pulse 2.2s infinite;}
  .cam-icon .pulse-ring2{animation-delay:1.1s;}
  @keyframes pulse{0%{transform:scale(1);opacity:0.8;}100%{transform:scale(1.55);opacity:0;}}

  .left h1{color:#fff;font-size:26px;font-weight:700;text-align:center;letter-spacing:0.5px;}
  .left h2{color:rgba(0,200,255,0.8);font-size:13px;font-weight:400;text-align:center;letter-spacing:2px;text-transform:uppercase;}
  .left p{color:rgba(255,255,255,0.4);font-size:11px;text-align:center;line-height:1.7;max-width:200px;}

  .grid-badge{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
  .badge-item{background:rgba(0,150,255,0.1);border:1px solid rgba(0,200,255,0.2);color:rgba(0,220,255,0.85);font-size:10px;padding:5px 12px;border-radius:20px;letter-spacing:0.5px;}

  .scanline{position:absolute;top:0;left:0;width:100%;height:2px;background:rgba(0,200,255,0.3);animation:scan 4s linear infinite;}
  @keyframes scan{0%{top:0%;}100%{top:100%;}}

  .right{flex:1;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}

  .tabs{display:flex;gap:0;margin-bottom:28px;background:rgba(255,255,255,0.04);border:1px solid rgba(0,200,255,0.12);border-radius:10px;padding:4px;}
  .tab-btn{flex:1;padding:9px;border:none;background:transparent;color:rgba(255,255,255,0.45);font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;cursor:pointer;border-radius:7px;transition:all 0.25s;}
  .tab-btn.active{background:rgba(0,150,255,0.2);color:#00c8ff;border:1px solid rgba(0,200,255,0.3);}

  .form-panel{display:none;}
  .form-panel.active{display:block;}

  .subtitle{color:rgba(255,255,255,0.4);font-size:12px;margin-bottom:22px;letter-spacing:0.3px;}

  .input-group{display:flex;align-items:center;background:rgba(255,255,255,0.04);border:1px solid rgba(0,200,255,0.15);border-radius:10px;margin-bottom:14px;padding:0 14px;transition:border-color 0.2s;}
  .input-group:focus-within{border-color:rgba(0,200,255,0.45);}
  .input-group .icon{font-size:15px;margin-right:10px;opacity:0.6;}
  .input-group input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-family:'Poppins',sans-serif;font-size:13px;padding:12px 0;}
  .input-group input::placeholder{color:rgba(255,255,255,0.25);}
  .show-toggle{background:transparent;border:none;color:rgba(0,200,255,0.6);font-size:10px;font-family:'Poppins',sans-serif;cursor:pointer;letter-spacing:1px;}

  .row-check{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
  .remember{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,0.4);font-size:12px;cursor:pointer;}
  .remember input[type=checkbox]{accent-color:#00c8ff;}
  .forgot{color:rgba(0,200,255,0.65);font-size:12px;text-decoration:none;}
  .forgot:hover{color:#00c8ff;}

  .btn-primary{width:100%;padding:13px;background:linear-gradient(90deg,#0066cc,#00aaff);border:none;border-radius:10px;color:#fff;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:0.5px;transition:opacity 0.2s;position:relative;overflow:hidden;}
  .btn-primary:hover{opacity:0.9;}
  .btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);animation:shine 2.5s infinite;}
  @keyframes shine{0%{left:-100%;}100%{left:100%;}}

  .switch-text{color:rgba(255,255,255,0.35);font-size:12px;margin-top:18px;text-align:center;}
  .switch-text a{color:rgba(0,200,255,0.7);cursor:pointer;text-decoration:none;}
  .switch-text a:hover{color:#00c8ff;}

  .toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(60px);background:#22c55e;color:#fff;padding:12px 24px;border-radius:10px;font-size:13px;opacity:0;transition:all 0.3s;z-index:999;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  @media(max-width:640px){.card{flex-direction:column;}.left{display:none;}.right{padding:32px 24px;}}