/* ===========================================================================
   The sign-in screens  -  owner panel and sub trader panel
   ===========================================================================
   This was written inline in login.php, so traders/login.php had none of it
   and rendered as a bare form on a black page: its markup used classes
   (login-container, input-wrapper, icon-box) that no stylesheet has ever
   defined. One file now, linked by both, so the two doors look the same.
   =========================================================================== */
body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.wrap{position:relative;z-index:1;width:420px;max-width:100%;text-align:center}
.logo{width:230px;max-width:70%;margin:0 auto 18px;display:block}
.tag{font-size:11px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;margin-bottom:30px}
.cardx{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;
  padding:32px 30px 28px;backdrop-filter:blur(10px);position:relative;overflow:hidden}
.cardx::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(140deg,rgba(44,216,245,.55),transparent 42%,transparent 60%,rgba(192,38,211,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
h2{margin:0 0 4px;font-size:19px;font-weight:600}
.hint{font-size:12.5px;color:var(--dim);margin-bottom:24px}
.fld{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:13px;text-align:left}
.fld.fc{border-color:rgba(44,216,245,.5);box-shadow:0 0 0 3px rgba(44,216,245,.09)}
.fld .ic{font-size:15px;opacity:.75;width:18px;text-align:center}
.fld input{background:none;border:none;outline:none;color:var(--ink);font-size:14px;width:100%;
  font-family:inherit}
.fld input::placeholder{color:#5B657C}
/* Chrome fills saved logins with a white background and black text.
   The inset shadow repaints it, since background-color itself is ignored. */
.fld input:-webkit-autofill,
.fld input:-webkit-autofill:hover,
.fld input:-webkit-autofill:focus,
.fld input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #11151F inset !important;
  box-shadow:0 0 0 1000px #11151F inset !important;
  transition:background-color 9999s ease-in-out 0s;
}
.row{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 20px;font-size:12.5px}
.row label{color:var(--dim);display:flex;align-items:center;gap:7px;cursor:pointer}
.row label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.chk{width:14px;height:14px;border-radius:4px;border:1px solid rgba(44,216,245,.55);
  background:transparent;display:inline-block;position:relative;transition:.15s;flex:none}
.chk::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;
  border:solid #05070D;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .15s}
.row label input[type=checkbox]:checked + .chk{background:var(--cyan);border-color:var(--cyan)}
.row label input[type=checkbox]:checked + .chk::after{transform:rotate(45deg) scale(1)}
.row label input[type=checkbox]:focus-visible + .chk{box-shadow:0 0 0 3px rgba(44,216,245,.25)}
.row a{color:var(--cyan);text-decoration:none}
.go{width:100%;padding:14px;border:none;border-radius:11px;background:var(--grad);color:#05070D;
  font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.2px}
/* These two lines were #4F5869 and #454E60 at 11.5px: a grey on a near-black
   background, which reads as disabled text and takes a second look to make
   out at all. They are the only things on the page that say who the panel
   belongs to, so they are white and a size you can actually read. */
.sec{margin-top:18px;font-size:13px;color:#FFF;display:flex;align-items:center;
  justify-content:center;gap:7px}
.below,
.foot{margin-top:22px;font-size:13.5px;color:#FFF;letter-spacing:.3px;text-align:center}

/* Show / hide the password.
   It lives inside the <label>, so a click still lands on the field and the
   cursor stays where the person left it. type=button, or it submits. */
.eye{background:none;border:none;padding:4px;margin:-4px -2px -4px 0;cursor:pointer;
  color:#7F8AA3;display:flex;align-items:center;flex:none;border-radius:7px}
.eye:hover{color:var(--cyan)}
.eye:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(44,216,245,.25)}
.eye svg{width:18px;height:18px;display:block}
.eye .off{display:none}
.eye.on .on{display:none}
.eye.on .off{display:block}
.msg{margin-top:14px;color:var(--red);font-size:12.5px;font-weight:600}