/* Superuser / Trade Control gateway (operator 25 Sep 2026). Navy + gold, institutional and quiet.
   Used by the trade-control sign-in and the first-sign-in password page. UI only: no logic lives here. */
:root{
  --g-bg:#071a2f; --g-bg-2:#0b2542; --g-card:rgba(13,38,68,.74); --g-field:#0a2140;
  --g-line:rgba(62,118,200,.55); --g-line-2:rgba(90,150,225,.75);
  --g-gold:#d9a52b; --g-gold-2:#f2c14e; --g-blue:#2eaeea;
  --g-ink:#f4f7fa; --g-ink-2:#9fb6d6; --g-ink-3:#6f86a1; --g-bad:#ff7b7b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.gate{min-height:100vh;background:var(--g-bg);color:var(--g-ink);
  font:16px/1.5 Inter,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden}
.gate-word,.gate-card h1,.gate-form label,.gate-btn,.gate-note,.gate-fr b,.gate-fl,.gate-links,.gate-rail .k{font-family:Montserrat,Inter,"Segoe UI",system-ui,sans-serif}

/* ---------------------------------------------------------------- background: depth, not decoration */
.gate-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 560px at 92% 4%,rgba(242,193,78,.18),transparent 62%),
    radial-gradient(1200px 760px at 6% 0%,rgba(46,174,234,.16),transparent 62%),
    linear-gradient(180deg,var(--g-bg-2) 0%,var(--g-bg) 55%,#040d18 100%)}
.gate-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(122,170,215,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,215,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 32%,#000 0,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 55% at 50% 32%,#000 0,transparent 75%)}

.gate-mtn{position:fixed;top:0;right:0;height:min(118vh,1180px);aspect-ratio:800/2028;z-index:-1;pointer-events:none;
  background:url(mountain.jpg) right top/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(0deg,transparent 0,#000 30%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(0deg,transparent 0,#000 30%);mask-composite:intersect}
.gate-page{min-height:100vh;display:flex;flex-direction:column;padding:34px clamp(16px,4vw,64px) 28px}

/* ---------------------------------------------------------------- brand */
.gate-brand{display:flex;align-items:center;gap:22px;text-decoration:none;color:inherit;width:max-content;max-width:100%}
.gate-logo{width:230px;height:auto;flex:0 0 auto;filter:drop-shadow(0 6px 24px rgba(217,165,43,.30))}
.gate-word .w1{font-size:14px;font-weight:600;letter-spacing:.62em;color:var(--g-ink);text-transform:uppercase}
.gate-word .w2{font-size:clamp(34px,5.2vw,58px);font-weight:800;letter-spacing:.2em;line-height:1.05;
  background:linear-gradient(180deg,var(--g-gold-2),var(--g-gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-left:.05em}
.gate-word .w3{margin-top:4px;font-size:12.5px;font-weight:600;letter-spacing:.34em;color:var(--g-blue);white-space:nowrap}

/* ---------------------------------------------------------------- centre stage */
.gate-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px) minmax(0,1fr);align-items:center;
  gap:24px;padding:38px 0 30px}
.gate-rail{grid-column:1;align-self:start;margin-top:8px;border-left:2px solid rgba(217,165,43,.55);padding:8px 0 8px 26px;max-width:220px}
.gate-rail .k{font-size:13.5px;font-weight:700;letter-spacing:.3em;color:var(--g-ink-2);text-transform:uppercase;line-height:1.7}
.gate-rail .d{margin-top:14px;font-size:15px;color:var(--g-ink-3);line-height:1.5}
.gate-mobile-role{display:none;margin:0 auto 14px;color:var(--g-gold-2);font:700 11px/1.4 Montserrat,Inter,sans-serif;
  letter-spacing:.24em;text-align:center;text-transform:uppercase}
.gate-card{grid-column:2;position:relative;background:var(--g-card);border:1px solid var(--g-line);border-radius:18px;
  padding:42px clamp(24px,7vw,76px) 40px;box-shadow:0 24px 64px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.gate-shield{display:grid;place-items:center;margin:0 auto 14px;width:64px;height:64px;color:var(--g-gold-2)}
.gate-card h1{text-align:center;font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  color:var(--g-ink);padding-left:.3em}
.gate-lead{text-align:center;margin:14px auto 34px;max-width:390px;color:#7f9fd0;font-size:clamp(16px,2vw,19px);line-height:1.5}

/* ---------------------------------------------------------------- form */
.gate-form label{display:block;margin:0 0 9px;font-size:13px;font-weight:700;letter-spacing:.26em;color:var(--g-ink-2);text-transform:uppercase}
.gate-form .gate-field+label{margin-top:26px}
.gate-field{position:relative;display:flex;align-items:center;height:60px;background:var(--g-field);border:1px solid var(--g-line);
  border-radius:12px;transition:border-color .15s,box-shadow .15s}
.gate-field:focus-within{border-color:var(--g-gold-2);box-shadow:0 0 0 3px rgba(242,193,78,.16),0 0 22px rgba(46,174,234,.10)}
.gate-field>svg{flex:0 0 auto;margin-left:20px;color:var(--g-ink-2)}
.gate-field input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;color:var(--g-ink);
  font:inherit;font-size:17px;padding:0 16px 0 16px}
.gate-field input::placeholder{color:#6f8bb8;opacity:1}
.gate-field input:-webkit-autofill,.gate-field input:-webkit-autofill:hover,.gate-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--g-ink);caret-color:var(--g-ink);
  -webkit-box-shadow:0 0 0 1000px #0a2140 inset;box-shadow:0 0 0 1000px #0a2140 inset;transition:background-color 600000s 0s,color 600000s 0s;border-radius:0}
.gate-field input{background-clip:padding-box}
.gate-eye{flex:0 0 auto;width:52px;height:100%;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;
  color:var(--g-ink-2);border-radius:0 12px 12px 0;transition:color .15s}
.gate-eye:hover,.gate-eye:focus-visible{color:var(--g-gold-2);outline:0}
.gate-eye .off{display:none}
.gate-eye[aria-pressed="true"] .on{display:none}
.gate-eye[aria-pressed="true"] .off{display:block}

.gate-err{margin:20px 0 0;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,123,123,.4);background:rgba(255,107,107,.1);
  color:#ffb3b3;font-size:14.5px;line-height:1.45}

.gate-btn{margin-top:34px;width:100%;height:64px;display:flex;align-items:center;justify-content:center;gap:16px;cursor:pointer;
  border:1px solid rgba(255,220,130,.55);border-radius:12px;color:#061525;font:inherit;font-size:19px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;background:linear-gradient(180deg,#f2c14e 0%,#d9a52b 100%);
  box-shadow:0 10px 26px rgba(217,165,43,.20),inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .15s,transform .08s,box-shadow .15s}
.gate-btn:hover{filter:brightness(1.08);box-shadow:0 12px 30px rgba(242,193,78,.30),inset 0 1px 0 rgba(255,255,255,.4)}
.gate-btn:active{transform:translateY(1px) scale(.995);filter:brightness(.97)}
.gate-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gate-btn svg{transition:transform .15s}
.gate-btn:hover svg{transform:translateX(3px)}
.gate-btn[disabled]{cursor:progress;filter:saturate(.7) brightness(.9);transform:none}
.gate-btn[disabled] svg{display:none}
.gate-btn.is-loading::after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid rgba(6,21,37,.35);border-top-color:#061525;
  animation:gspin .8s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
.gate-note{margin-top:18px;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.28em;color:var(--g-ink-3);text-transform:uppercase}

/* ---------------------------------------------------------------- footer */
.gate-foot{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding-top:6px}
.gate-fr{display:flex;align-items:center;gap:20px;width:min(640px,100%)}
.gate-fr i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(242,193,78,.6),transparent)}
.gate-fr b{font-size:15px;font-weight:700;letter-spacing:.5em;color:var(--g-gold-2);padding-left:.5em}
.gate-fl{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--g-ink-2);text-transform:uppercase}
.gate-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.gate-links a,.gate-links span{color:#7fa8ea;text-decoration:underline;text-underline-offset:3px;padding:2px 16px;white-space:nowrap}
.gate-links a:hover{color:var(--g-gold-2)}
.gate-links>*+*{border-left:1px solid rgba(122,170,215,.4)}
.gate-risk{max-width:760px;font-size:13.5px;color:var(--g-ink-3);line-height:1.55}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .gate-mtn{height:80vh;opacity:.9}
  .gate-main{grid-template-columns:minmax(0,680px);justify-content:center}
  .gate-rail{display:none}
  .gate-card{grid-column:1}
  .gate-mobile-role{display:block}
}
@media (max-width:640px){
  .gate-page{padding:22px 16px 22px}
  .gate-brand{gap:14px}
  .gate-logo{width:112px}
  .gate-mtn{height:62vh;opacity:.7}
  .gate-word{min-width:0}
  .gate-word .w1{font-size:11px;letter-spacing:.5em}
  .gate-word .w2{font-size:clamp(21px,7.2vw,40px);letter-spacing:.15em}
  .gate-word .w3{font-size:clamp(7px,2.2vw,10px);letter-spacing:.12em}
  .gate-main{padding:24px 0 22px}
  .gate-card{padding:30px 20px 28px;border-radius:16px}
  .gate-shield{width:54px;height:54px}
  .gate-card h1{letter-spacing:.22em}
  .gate-lead{margin:12px auto 26px}
  .gate-field{height:56px}
  .gate-btn{height:58px;font-size:17px;margin-top:28px}
  .gate-fr b{letter-spacing:.34em;font-size:13px}
  .gate-fl{letter-spacing:.12em;font-size:11px}
  .gate-links a,.gate-links span{padding:2px 10px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:1.6s!important}}
.gate-note a{color:#7fa8ea;text-decoration:underline;text-underline-offset:3px}
.gate-note a:hover{color:var(--g-gold-2)}
.gate-lead b{color:var(--g-ink)}