/* This CSS code is developed for the @KDR Team and Khogendra Rupini. 
It is exclusively owned and maintained by him.
If anyone wishes to use this stylesheet, they must first contact Khogendra Rupini 
through his official website https://khogendrarupini.com 
Or his GitHub profile https://github.com/khogendrarupini/
This code is protected and requires a valid license, 
as it falls under the @KDR License by Khogendra Rupini. */

*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#030712;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="rainbowGrad" x1="5%" y1="2%" x2="95%" y2="98%"><stop offset="0%" stop-color="%23f9a8d4" stop-opacity="0.14"/><stop offset="20%" stop-color="%23fde68a" stop-opacity="0.1"/><stop offset="40%" stop-color="%23a7f3d0" stop-opacity="0.12"/><stop offset="60%" stop-color="%23bae6fd" stop-opacity="0.16"/><stop offset="80%" stop-color="%23c4b5fd" stop-opacity="0.18"/><stop offset="100%" stop-color="%23fbcfe8" stop-opacity="0.2"/></linearGradient><radialGradient id="glow1" cx="30%" cy="25%" r="60%"><stop offset="0%" stop-color="%23f472b6" stop-opacity="0.08"/><stop offset="100%" stop-color="%23f472b6" stop-opacity="0"/></radialGradient><radialGradient id="glow2" cx="70%" cy="75%" r="55%"><stop offset="0%" stop-color="%2338bdf8" stop-opacity="0.1"/><stop offset="100%" stop-color="%2338bdf8" stop-opacity="0"/></radialGradient></defs><rect width="1400" height="900" fill="url(%23rainbowGrad)"/><circle cx="420" cy="250" r="450" fill="url(%23glow1)"/><circle cx="980" cy="680" r="400" fill="url(%23glow2)"/><path d="M-80 380 Q 400 150 850 380 T 1500 300" stroke="%23fbcfe8" stroke-width="42" fill="none" opacity="0.06"/></svg>') center/cover no-repeat;filter:blur(35px);z-index:0;pointer-events:none}.login-container{position:relative;z-index:1;background:rgba(13,20,30,0.85);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.08);border-radius:8px;box-shadow:0 25px 55px -15px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.03) inset;width:100%;max-width:440px;padding:2.5rem}@media (max-width:640px){.login-container{padding:1.75rem;border-radius:8px}}@media (max-width:480px){.login-container{padding:1.5rem;border-radius:8px}}@media (max-width:400px){.login-container{padding:1.25rem}}.logo-icon{width:56px;height:56px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}.logo-icon .material-icons-round{font-size:28px;color:#60a5fa}.input-group{position:relative;margin-bottom:1.25rem}.input-group label{display:block;color:#94a3b8;font-size:0.75rem;font-weight:500;margin-bottom:0.5rem;letter-spacing:0.3px;text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper .icon-left{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#4b5563;font-size:18px;pointer-events:none;z-index:1}.input-field{width:100%;background:rgba(5,12,20,0.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:0.75rem 1rem 0.75rem 2.75rem;color:#e5e7eb;font-size:0.9375rem;font-family:'Inter',sans-serif;outline:none;transition:all 0.2s ease}.input-field:focus{background:rgba(8,16,26,0.8);border-color:rgba(96,165,250,0.4);box-shadow:0 0 0 3px rgba(96,165,250,0.08)}.input-field::placeholder{color:#4b5563}.input-field.otp-input{letter-spacing:0.5em;font-size:1.375rem;text-align:center;padding:0.875rem 1rem;font-family:'SF Mono','Monaco','Consolas',monospace;font-weight:600}.input-field.otp-input:focus{letter-spacing:0.5em}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#4b5563;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;z-index:1;transition:color 0.2s}.password-toggle:hover{color:#9ca3af}.btn-primary{width:100%;padding:0.875rem 1.5rem;background:rgba(30,64,95,0.6);backdrop-filter:blur(10px);border:1px solid rgba(96,165,250,0.35);border-radius:8px;color:#93c5fd;font-size:0.9375rem;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.2s ease;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.4)}.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(96,165,250,0.08),transparent);transition:left 0.5s ease}.btn-primary:hover{background:rgba(40,80,120,0.7);border-color:rgba(96,165,250,0.55);color:#bfdbfe;box-shadow:0 10px 28px rgba(96,165,250,0.12)}.btn-primary:hover::before{left:100%}.btn-primary:active{transform:scale(0.98)}.divider{position:relative;text-align:center;margin:1.75rem 0}.divider::before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:rgba(255,255,255,0.06)}.divider span{position:relative;display:inline-block;padding:0 1rem;background:#0d1117;color:#6b7280;font-size:0.75rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase}.oauth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}.oauth-btn{display:flex;align-items:center;justify-content:center;gap:0.625rem;padding:0.75rem;background:rgba(15,20,28,0.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#d1d5db;font-size:0.875rem;font-weight:500;font-family:'Inter',sans-serif;text-decoration:none;cursor:pointer;transition:all 0.2s ease}.oauth-btn:hover{background:rgba(22,30,42,0.85);border-color:rgba(255,255,255,0.15);box-shadow:0 6px 16px rgba(0,0,0,0.3)}.oauth-btn svg{width:18px;height:18px;flex-shrink:0}.alert-success{background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);border-radius:8px;padding:0.875rem 1rem;margin-bottom:1.25rem;display:flex;align-items:flex-start;gap:0.625rem;backdrop-filter:blur(8px)}.alert-success p{color:#6ee7b7;font-size:0.875rem;line-height:1.4}.alert-error{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:8px;padding:0.75rem 1rem;margin-bottom:1rem;backdrop-filter:blur(8px)}.alert-error p{color:#fca5a5;font-size:0.8125rem;display:flex;align-items:center;gap:0.5rem}.error-message{color:#fca5a5;font-size:0.8125rem;margin-top:0.5rem;display:flex;align-items:center;gap:0.375rem}.link-text{color:#60a5fa;text-decoration:none;font-size:0.8125rem;font-weight:500;display:inline-flex;align-items:center;gap:0.375rem;transition:color 0.2s ease}.link-text:hover{color:#93c5fd}.security-notice{display:flex;align-items:center;justify-content:center;gap:0.5rem;color:#4b5563;font-size:0.75rem;margin-top:1.25rem}.security-notice .material-icons-round{font-size:0.875rem}.info-note{color:#94a3b8;text-align:center;font-size:0.75rem;margin-top:0.75rem;display:flex;align-items:center;justify-content:center;gap:0.35rem}.info-note .material-icons-round{font-size:14px}.loader-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100}.loader-box{background:rgba(18,24,34,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.spinner{width:40px;height:40px;border:3px solid rgba(96,165,250,0.15);border-top-color:#60a5fa;border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.fade-in{animation:fadeIn 0.3s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (max-width:640px){.input-field{font-size:0.875rem}.input-field.otp-input{font-size:1.25rem;letter-spacing:0.4em}.btn-primary{padding:0.75rem 1.25rem;font-size:0.875rem}.oauth-btn{padding:0.625rem;font-size:0.8125rem}.oauth-btn svg{width:16px;height:16px}}@media (max-width:400px){.logo-icon{width:48px;height:48px}.logo-icon .material-icons-round{font-size:24px}.oauth-grid{gap:0.5rem}.oauth-btn{padding:0.5rem;font-size:0.75rem;gap:0.375rem}}