/* ═══════════════════════════════════════════════════════════════════════
   login-theme.css — Bill.html jaisा login design, har app ke liye reusable.
   Use: page me ye CSS include karein aur login container ko is structure me rakhein:

   <div class="dnw-login">                     (full-screen backdrop)
     <div class="lg-card">
       <button class="lg-close" ...>✕</button>   (optional)
       <div class="lg-orb" style="..."></div>     (optional decorative orbs)
       <div class="lg-brand">
         <div class="lg-logo"><img src="..."></div>
         <h1>App Name</h1><p>tagline</p>
       </div>
       <div class="lg-body">
         <div class="lg-title">Login</div>
         <div class="lg-sub">...</div>
         <div class="lg-field"><label>...</label><span class="lg-ico">🆔</span><input ...></div>
         <div class="lg-field"><label>...</label><span class="lg-ico">🔒</span><input type=password ...></div>
         <button class="lg-btn lg-btn-p">Login</button>
       </div>
     </div>
   </div>
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes dnwLgGrad { 0%{background-position:0%} 100%{background-position:200%} }
@keyframes dnwLgSlideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes dnwLgOrb { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-20px)} }
@keyframes dnwLgFloat { 0%,100%{opacity:.4;transform:translateY(0)} 50%{opacity:.8;transform:translateY(-15px)} }

.dnw-login{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(1200px 800px at 20% 10%,rgba(127,0,255,.18),transparent 60%),
             radial-gradient(1000px 700px at 90% 90%,rgba(0,168,255,.15),transparent 60%),
             #07070f;overflow:auto;font-family:'Segoe UI',system-ui,'Hind',sans-serif;}
.dnw-login .lg-card{width:92%;max-width:420px;background:rgba(12,12,22,.96);backdrop-filter:blur(40px);border-radius:28px;border:2px solid transparent;box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 60px rgba(127,0,255,.1);padding:0;overflow:hidden;animation:dnwLgSlideUp .5s ease-out;position:relative;}
.dnw-login .lg-card::before{content:'';position:absolute;inset:-2px;border-radius:30px;background:linear-gradient(135deg,#7F00FF,#00A8FF,#00FF88,#FFB74D,#FF4444,#7F00FF);background-size:300% 300%;animation:dnwLgGrad 4s linear infinite;z-index:-1;}
.dnw-login .lg-card::after{content:'';position:absolute;inset:0;border-radius:28px;background:rgba(12,12,22,.96);z-index:0;}
.dnw-login .lg-orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;animation:dnwLgOrb 8s ease-in-out infinite;}
.dnw-login .lg-brand{text-align:center;padding:28px 20px 12px;position:relative;z-index:2;}
.dnw-login .lg-logo{width:90px;height:90px;margin:0 auto 10px;border-radius:22px;overflow:hidden;box-shadow:0 10px 35px rgba(127,0,255,.4);transition:transform .3s;}
.dnw-login .lg-logo img{width:100%;height:100%;object-fit:cover;}
.dnw-login .lg-logo:hover{transform:scale(1.08);}
.dnw-login .lg-brand h1{font-size:21px;font-weight:800;margin:0;background:linear-gradient(135deg,#fff,#C8C8FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.dnw-login .lg-brand p{color:#6B6B8D;font-size:11px;margin:3px 0 0;}
.dnw-login .lg-body{padding:0 22px 24px;position:relative;z-index:2;}
.dnw-login .lg-title{font-size:21px;font-weight:700;text-align:center;margin-bottom:3px;background:linear-gradient(135deg,#7F00FF,#00A8FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.dnw-login .lg-sub{text-align:center;color:#6B6B8D;font-size:11px;margin-bottom:16px;}
.dnw-login .lg-field{margin-bottom:12px;position:relative;}
.dnw-login .lg-field label{display:block;margin-bottom:5px;color:#8888AA;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.dnw-login .lg-field input,.dnw-login .lg-field select,.dnw-login .lg-field textarea{width:100%;padding:12px 14px 12px 42px;background:rgba(255,255,255,.03);border:1.5px solid rgba(127,0,255,.12);border-radius:12px;color:#fff;font-size:14px;transition:all .3s;outline:none;box-sizing:border-box;}
.dnw-login .lg-field textarea{padding-left:14px;min-height:50px;resize:vertical;font-family:inherit;}
.dnw-login .lg-field input:focus,.dnw-login .lg-field select:focus,.dnw-login .lg-field textarea:focus{box-shadow:0 0 20px rgba(127,0,255,.15);}
.dnw-login .lg-field:nth-child(1) input,.dnw-login .lg-field:nth-child(1) select{border-color:rgba(127,0,255,.35);}
.dnw-login .lg-field:nth-child(1) input:focus{border-color:#7F00FF;box-shadow:0 0 20px rgba(127,0,255,.2);}
.dnw-login .lg-field:nth-child(2) input,.dnw-login .lg-field:nth-child(2) select{border-color:rgba(0,168,255,.35);}
.dnw-login .lg-field:nth-child(2) input:focus{border-color:#00A8FF;box-shadow:0 0 20px rgba(0,168,255,.2);}
.dnw-login .lg-field:nth-child(3) input,.dnw-login .lg-field:nth-child(3) select{border-color:rgba(0,230,118,.35);}
.dnw-login .lg-field:nth-child(3) input:focus{border-color:#00E676;box-shadow:0 0 20px rgba(0,230,118,.2);}
.dnw-login .lg-field input::placeholder{color:#555;}
.dnw-login .lg-field .lg-ico{position:absolute;left:14px;top:32px;font-size:15px;opacity:.55;pointer-events:none;}
.dnw-login .lg-eye{position:absolute;right:12px;top:29px;background:none;border:none;color:#8888AA;font-size:16px;cursor:pointer;padding:2px;}
.dnw-login .lg-btn{width:100%;padding:13px;border:none;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;transition:all .25s;font-family:inherit;}
.dnw-login .lg-btn:active{transform:scale(.97);}
.dnw-login .lg-btn-p{background:linear-gradient(135deg,#7F00FF,#5A00B8);color:#fff;box-shadow:0 6px 25px rgba(127,0,255,.35);}
.dnw-login .lg-btn-p:hover{box-shadow:0 8px 35px rgba(127,0,255,.5);transform:translateY(-1px);}
.dnw-login .lg-btn-g{background:linear-gradient(135deg,#00E676,#00C853);color:#000;}
.dnw-login .lg-btn-o{background:linear-gradient(135deg,#FFB74D,#FF9800);color:#000;}
.dnw-login .lg-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#555;font-size:10px;text-transform:uppercase;letter-spacing:.5px;}
.dnw-login .lg-divider::before,.dnw-login .lg-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08);}
.dnw-login .lg-link{color:#00A8FF;text-decoration:none;font-size:11px;cursor:pointer;}
.dnw-login .lg-close{position:absolute;top:14px;right:14px;z-index:5;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#666;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dnw-login .lg-close:hover{background:rgba(255,68,68,.15);color:#FF4444;}
.dnw-login .lg-msg{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;display:none;}
.dnw-login .lg-msg.err{background:rgba(255,82,82,.12);border:1px solid rgba(255,82,82,.35);color:#ff8a8a;display:block;}
.dnw-login .lg-msg.ok{background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.3);color:#7ef0b0;display:block;}
.dnw-login .lg-foot{text-align:center;margin-top:16px;font-size:11px;color:#6B6B8D;line-height:1.8;}

/* PIN login (6-digit) — Bill jaisा */
.dnw-login .pin-d{width:38px;height:46px;text-align:center;font-size:20px;font-weight:700;background:rgba(255,255,255,.05);border:2px solid rgba(255,183,77,.25);border-radius:10px;color:#FFB74D;outline:none;box-sizing:border-box;padding:0;}
.dnw-login .pin-d:focus{border-color:#FFB74D;background:rgba(255,183,77,.1);box-shadow:0 0 10px rgba(255,183,77,.25);}
.dnw-login #pinInputWrap{display:flex;gap:6px;justify-content:center;margin-top:6px;width:100%;max-width:280px;margin-left:auto;margin-right:auto;box-sizing:border-box;}
.dnw-login .lg-qrow{display:flex;gap:8px;align-items:center;margin-top:10px;}
.dnw-login .lg-bio{flex:0 0 52px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;padding:0;background:linear-gradient(135deg,rgba(0,200,136,.15),rgba(0,200,136,.05));border:2px solid rgba(0,200,136,.4);color:#00C888;border-radius:50%;cursor:pointer;transition:all .25s;}
.dnw-login .lg-bio:hover{border-color:rgba(0,200,136,.8);box-shadow:0 0 25px rgba(0,200,136,.35);transform:scale(1.06);}