/* Login — vanilla port of 21st.dev "Sign In Card 2" (jatin-yadav05), adapted for SMART CRM */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#000;color:#fff;overflow:hidden;-webkit-font-smoothing:antialiased}

.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.bg-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(174,190,81,.38),rgba(98,112,30,.55) 50%,#000)}
.bg-noise{position:absolute;inset:0;opacity:.03;mix-blend-mode:soft-light;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow{position:absolute;left:50%;transform:translateX(-50%)}
.glow-top{top:0;width:120vh;height:60vh;border-radius:0 0 50% 50%;background:rgba(198,214,104,.20);filter:blur(80px)}
.glow-top-2{top:0;width:100vh;height:60vh;border-radius:0 0 9999px 9999px;background:rgba(214,226,140,.20);filter:blur(60px);animation:breathe 8s ease-in-out infinite alternate}
.glow-bottom{bottom:0;width:90vh;height:90vh;border-radius:9999px 9999px 0 0;background:rgba(174,190,81,.22);filter:blur(60px);animation:breathe2 6s ease-in-out 1s infinite alternate}
.spot{position:absolute;width:24rem;height:24rem;border-radius:50%;background:rgba(255,255,255,.05);filter:blur(100px);opacity:.4;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.spot-a{left:25%;top:25%}.spot-b{right:25%;bottom:25%;animation-delay:1s}
@keyframes breathe{from{opacity:.15;transform:translateX(-50%) scale(.98)}to{opacity:.3;transform:translateX(-50%) scale(1.02)}}
@keyframes breathe2{from{opacity:.3;transform:translateX(-50%) scale(1)}to{opacity:.5;transform:translateX(-50%) scale(1.1)}}
@keyframes pulse{50%{opacity:.2}}

.stage{position:relative;z-index:1;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px;perspective:1500px}
.tilt{width:100%;max-width:384px;transition:transform .25s ease-out;transform-style:preserve-3d;animation:rise .8s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.card-wrap{position:relative}

/* traveling light beams */
.beams{position:absolute;inset:-1px;border-radius:16px;overflow:hidden;pointer-events:none}
.beam{position:absolute;opacity:.7;filter:blur(1.5px)}
.beam-top,.beam-bottom{height:3px;width:50%;background:linear-gradient(to right,transparent,#fff,transparent)}
.beam-left,.beam-right{width:3px;height:50%;background:linear-gradient(to bottom,transparent,#fff,transparent)}
.beam-top{top:0;left:-50%;animation:bt 3.5s ease-in-out infinite}
.beam-right{right:0;top:-50%;animation:br 3.5s ease-in-out .6s infinite}
.beam-bottom{bottom:0;right:-50%;animation:bb 3.5s ease-in-out 1.2s infinite}
.beam-left{left:0;bottom:-50%;animation:bl 3.5s ease-in-out 1.8s infinite}
@keyframes bt{0%{left:-50%;opacity:.3}50%{opacity:.7}71%,100%{left:100%;opacity:.3}}
@keyframes br{0%{top:-50%;opacity:.3}50%{opacity:.7}71%,100%{top:100%;opacity:.3}}
@keyframes bb{0%{right:-50%;opacity:.3}50%{opacity:.7}71%,100%{right:100%;opacity:.3}}
@keyframes bl{0%{bottom:-50%;opacity:.3}50%{opacity:.7}71%,100%{bottom:100%;opacity:.3}}
.corner{position:absolute;border-radius:50%;animation:twinkle 2.2s ease-in-out infinite alternate}
.c-tl{top:0;left:0;width:5px;height:5px;background:rgba(255,255,255,.4);filter:blur(1px)}
.c-tr{top:0;right:0;width:8px;height:8px;background:rgba(255,255,255,.6);filter:blur(2px);animation-delay:.5s}
.c-br{bottom:0;right:0;width:8px;height:8px;background:rgba(255,255,255,.6);filter:blur(2px);animation-delay:1s}
.c-bl{bottom:0;left:0;width:5px;height:5px;background:rgba(255,255,255,.4);filter:blur(1px);animation-delay:1.5s}
@keyframes twinkle{from{opacity:.2}to{opacity:.4}}

.card{position:relative;background:rgba(0,0,0,.40);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,.05);box-shadow:0 25px 50px -12px rgba(0,0,0,.6);overflow:hidden}
.card-pattern{position:absolute;inset:0;opacity:.03;background-image:linear-gradient(135deg,#fff .5px,transparent .5px),linear-gradient(45deg,#fff .5px,transparent .5px);background-size:30px 30px;pointer-events:none}

.head{text-align:center;margin-bottom:20px;position:relative}
.logo{margin:0 auto 12px;display:flex;align-items:center;justify-content:center;animation:pop .8s cubic-bezier(.34,1.56,.64,1) both}.logo img{height:34px;width:auto;filter:invert(1) hue-rotate(180deg) brightness(1.15)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.head h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;background:linear-gradient(to bottom,#fff,rgba(255,255,255,.8));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.6)}

.error{position:relative;display:flex;gap:8px;align-items:center;margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fecaca;font-size:12.5px}

form{position:relative;display:flex;flex-direction:column;gap:12px}
.field{position:relative;display:flex;align-items:center;border-radius:8px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.field:hover{transform:scale(1.01)}
.field:focus-within{transform:scale(1.02)}
.field-icon{position:absolute;left:12px;color:rgba(255,255,255,.4);transition:color .3s}
.field:focus-within .field-icon{color:#fff}
.field input{width:100%;height:40px;border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:14px;padding:0 40px 0 40px;outline:none;transition:background .3s,border-color .3s,box-shadow .3s}
.field input::placeholder{color:rgba(255,255,255,.3)}
.field input:focus{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.eye{position:absolute;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:rgba(255,255,255,.4);cursor:pointer;border-radius:6px}
.eye:hover{color:#fff}
.eye .eye-open{display:none}
.eye.is-open .eye-open{display:block}.eye.is-open .eye-closed{display:none}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px;font-size:12px;white-space:nowrap}
.check{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);cursor:pointer;user-select:none}
.check:hover{color:rgba(255,255,255,.8)}
.check input{position:absolute;opacity:0;pointer-events:none}
.box{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:#000;transition:all .2s}
.box svg{opacity:0;transform:scale(.5);transition:all .2s}
.check input:checked + .box{background:#aebe51;border-color:#aebe51}
.check input:checked + .box svg{opacity:1;transform:none}
.check input:focus-visible + .box{box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.hint{color:rgba(255,255,255,.4)}

.submit{position:relative;margin-top:16px;border:0;padding:0;background:none;cursor:pointer;width:100%;transition:transform .15s}
.submit:hover{transform:scale(1.02)}.submit:active{transform:scale(.98)}
.submit-glow{position:absolute;inset:0;border-radius:8px;background:rgba(255,255,255,.10);filter:blur(16px);opacity:0;transition:opacity .3s}
.submit:hover .submit-glow{opacity:.7}
.submit-inner{position:relative;display:flex;align-items:center;justify-content:center;height:40px;border-radius:8px;background:#aebe51;color:#11130c;font:600 14px Inter,sans-serif;overflow:hidden}
.label{display:flex;align-items:center;gap:6px}
.label svg{transition:transform .3s}.submit:hover .label svg{transform:translateX(4px)}
.submit-shine{position:absolute;inset:0;background:linear-gradient(to right,rgba(255,255,255,0),rgba(174,190,81,.35),rgba(255,255,255,0));transform:translateX(-100%);opacity:0}
.spinner{display:none;width:16px;height:16px;border:2px solid rgba(0,0,0,.7);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
.submit.is-loading .label{display:none}.submit.is-loading .spinner{display:block}
.submit.is-loading .submit-shine{opacity:1;animation:shine 1.5s ease-in-out infinite}
.submit:disabled{cursor:wait}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.divider{display:flex;align-items:center;gap:12px;margin:20px 0 12px}
.divider span{flex:1;border-top:1px solid rgba(255,255,255,.05)}
.divider em{font-style:normal;font-size:11px;color:rgba(255,255,255,.4);animation:fade 3s ease-in-out infinite;text-transform:uppercase;letter-spacing:.08em}
@keyframes fade{50%{opacity:.6}}
.foot{margin:0;text-align:center;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.45)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:420px){.card{padding:20px}}