/* ===== Knox auth pages — loaded AFTER style.css ===== */
.auth-body{overflow-x:hidden}
.auth-body::before{display:none}

/* ---- ambient background ---- */
.bg-orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-orbs::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);
  mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%)}
.bg-orbs i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;
  width:420px;height:420px;background:rgba(229,9,20,.20);top:-140px;left:-100px;
  animation:drift 19s ease-in-out infinite alternate}
.bg-orbs i+i{width:360px;height:360px;background:rgba(160,6,14,.16);top:auto;left:auto;right:-90px;bottom:-120px;
  animation-duration:24s;animation-delay:-8s}
@keyframes drift{to{transform:translate3d(90px,70px,0) scale(1.15)}}

/* ---- card ---- */
.auth-wrap{max-width:400px;z-index:2}
.auth-card{
  background:linear-gradient(180deg,rgba(20,20,20,.82),rgba(12,12,12,.9));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid #232323;border-radius:20px;padding:38px 28px 26px;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.auth-logo{width:58px;height:58px;margin-bottom:20px;
  filter:drop-shadow(0 0 20px rgba(229,9,20,.4));animation:glow 3.6s ease-in-out 1.4s infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 30px rgba(229,9,20,.7))}}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s .15s cubic-bezier(.4,0,.2,1) forwards}
.draw.d2{animation-delay:.7s;animation-duration:.8s}
@keyframes draw{to{stroke-dashoffset:0}}
.auth-title{font-size:21px}
.auth-sub{line-height:1.55}
.auth-sub b{color:var(--txt);font-weight:600}
.auth-foot{text-align:center;margin-top:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2)}

/* ---- alerts ---- */
.alert-error{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* ---- inputs with icons ---- */
.ic{width:17px;height:17px}
[hidden]{display:none!important}
.input-wrap{position:relative}
.input-wrap .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim-2);
  display:flex;pointer-events:none;transition:color .15s}
.input-wrap input{padding:12px 40px 12px 38px;font-size:14px;border-radius:11px;background:#0a0a0a}
.input-wrap:focus-within .ico{color:var(--red)}
.reveal{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  color:var(--dim);cursor:pointer;border-radius:8px;transition:color .15s,background .15s}
.reveal:hover{color:var(--txt);background:#161616}
.reveal .off{display:none}
.reveal.on .off{display:block}.reveal.on .on{display:none}
.hint[hidden]{display:none}
.hint{font-size:11.5px;margin:-6px 0 12px;color:#f5a524;display:flex;align-items:center;gap:6px}
.row-end{display:flex;justify-content:flex-end;margin:-4px 0 14px}
.link-dim{font-size:12px;color:var(--dim);transition:color .15s}
.link-dim:hover{color:var(--red)}

/* ---- button loading state ---- */
.btn{position:relative}
.btn-primary{padding:12px 16px;font-size:14px;border-radius:11px}
.btn .spin{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;animation:spin .7s linear infinite}
.btn.is-loading{pointer-events:none}
.btn.is-loading .btn-label{opacity:0}
.btn.is-loading .spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- footer links ---- */
.tg-link{margin-top:22px}
.tg-link .ic{width:14px;height:14px}
.back-link{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--border);color:var(--dim);font-size:12.5px;transition:color .15s}
.back-link:hover{color:var(--txt)}.back-link .ic{width:14px;height:14px}

/* ---- OTP boxes ---- */
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:6px}
.otp input{height:54px;padding:0;text-align:center;font-size:22px;font-weight:600;border-radius:11px;
  font-family:'SF Mono',Menlo,Consolas,monospace;caret-color:var(--red)}
.otp input.filled{border-color:#3a1014;background:#100809}
.otp.bad input{border-color:var(--red);animation:shake .4s both}
.chip{display:inline-flex;align-items:center;gap:6px;margin:0 auto 18px;padding:5px 11px;border-radius:99px;
  background:#0d0d0d;border:1px solid var(--border);font-size:11.5px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.chip-row{display:flex;justify-content:center}
.chip .ic{width:13px;height:13px}
.chip.low{color:#ff6b74;border-color:rgba(229,9,20,.3)}

/* ---- password strength ---- */
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:-4px 0 10px}
.meter i{height:4px;border-radius:4px;background:#1a1a1a;transition:background .25s}
.meter[data-level="1"] i:nth-child(-n+1){background:#ef4444}
.meter[data-level="2"] i:nth-child(-n+2){background:#f59e0b}
.meter[data-level="3"] i:nth-child(-n+3){background:#84cc16}
.meter[data-level="4"] i{background:#16a34a}
.rules{list-style:none;display:grid;gap:6px;margin:0 0 14px;font-size:12px;color:var(--dim)}
.rules li{display:flex;align-items:center;gap:8px;transition:color .2s}
.rules li::before{content:'';width:14px;height:14px;border-radius:50%;border:1.5px solid #333;flex:none;
  transition:all .2s;background-position:center;background-repeat:no-repeat;background-size:9px}
.rules li.ok{color:#4ade80}
.rules li.ok::before{background-color:#16a34a;border-color:#16a34a;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.3 2.3L9.5 3.8' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.match{font-size:11.5px;margin:-6px 0 12px;min-height:16px;color:var(--dim)}
.match.ok{color:#4ade80}.match.no{color:#ff6b74}

/* ---- animated state badges ---- */
.sbadge{width:76px;height:76px;margin:2px auto 18px}
.sbadge svg{width:100%;height:100%;overflow:visible}
.sbadge .c,.sbadge .t{stroke-dasharray:1;stroke-dashoffset:1;stroke-width:2.4}
.sbadge .c{animation:draw .7s .1s cubic-bezier(.4,0,.2,1) forwards}
.sbadge .t{animation:draw .5s .65s cubic-bezier(.4,0,.2,1) forwards}
.sbadge .t2{animation-delay:.95s}
.sbadge-check{color:#22c55e;filter:drop-shadow(0 0 16px rgba(34,197,94,.35))}
.sbadge-mail{color:#22c55e;filter:drop-shadow(0 0 16px rgba(34,197,94,.35))}
.sbadge-cross{color:#ef4444;filter:drop-shadow(0 0 16px rgba(239,68,68,.35))}
.sbadge svg *{stroke:currentColor}
.tip{font-size:11.5px;color:var(--dim-2);text-align:center;margin:14px 0 16px;line-height:1.7}
.tip b{color:var(--dim);font-weight:500}

@media (max-width:420px){
  .auth-card{padding:32px 20px 22px}
  .bg-orbs i{width:280px;height:280px;filter:blur(70px)}
  .otp{gap:6px}.otp input{height:50px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .draw,.sbadge .c,.sbadge .t{stroke-dashoffset:0}
}

/* ---- "Verified Resellers List" button on the login page ---- */
.or-sep{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:#5a5a5a;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:#1e1e1e}
.resellers-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;text-decoration:none;
  background:linear-gradient(180deg,#121212,#0d0d0d);border:1px solid #232323;color:#ededed;transition:border-color .2s,transform .12s,background .2s}
.resellers-btn:hover{border-color:rgba(34,197,94,.45);background:linear-gradient(180deg,#131714,#0d0f0d)}
.resellers-btn:active{transform:scale(.985)}
.resellers-btn .rb-ico{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28);color:#22c55e}
.resellers-btn .rb-ico svg{width:19px;height:19px}
.resellers-btn .rb-txt{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.resellers-btn .rb-txt b{font-size:14px;font-weight:600}
.resellers-btn .rb-txt small{font-size:12px;color:#8a8a8a;margin-top:2px}
.resellers-btn .rb-go{width:17px;height:17px;color:#6a6a6a;flex-shrink:0;transition:transform .2s,color .2s}
.resellers-btn:hover .rb-go{transform:translateX(3px);color:#22c55e}

.demo-link{display:block;text-align:center;margin-top:12px;font-size:13px;color:#8a8a8a;text-decoration:none}
.demo-link b{color:#ffc53d;font-weight:600}
.demo-link:hover b{text-decoration:underline}
.install-link[hidden]{display:none}
.install-link b{color:#ffc53d}