/* The sign-in gate, built to match Jozary IQ's.
 *
 * Same shape as governiq/login/static/login/css/login.css: a dark brand
 * gradient, one glass card split into a brand panel and a form panel.
 *
 * Every name here is prefixed --gate-*. Jozary IQ learned this the hard way -
 * a page that redefined --text-muted in its own :root had the global palette
 * loaded after it and won, turning body text grey on a dark ground.
 */
:root{
  --gate-dark:#020617;
  --gate-muted:rgba(255,255,255,.72);
  --gate-border:rgba(255,255,255,.13);
  --gate-input-bg:rgba(255,255,255,.08);

  /* The configured accent measures 3.8:1 on this ground - under the 4.5:1
     body-text threshold. Mixing towards a warm light keeps the hue and clears
     7:1, and color-mix means it still follows whatever accent is set. */
  --gate-accent:color-mix(in srgb, var(--accent, #8c6a34) 55%, #ffd88a);
}

body.gate{
  margin:0;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #000040, var(--gate-dark));
  color:#fff;overflow-x:hidden;
  font:400 15px/1.55 var(--font-body);
}

.gate-shell{
  width:100%;max-width:1000px;min-height:580px;margin:2rem;
  display:flex;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  border:1px solid var(--gate-border);
  border-radius:24px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}

/* Left: what this thing is and what it can do. A control plane's sign-in
   should say plainly what is behind it. */
.gate-brand{
  flex:1.05;position:relative;
  padding:3rem 2.75rem;
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  background:linear-gradient(to bottom, rgba(30,58,138,.32), rgba(15,23,42,.86));
  border-right:1px solid var(--gate-border);
}
.gate-brand h1{
  font:800 30px/1.15 var(--font-display);color:#fff;margin:0;letter-spacing:-.6px;
}
.gate-brand .gate-host{
  font:500 12.5px/1 var(--font-mono);color:var(--gate-accent);
  display:inline-flex;align-items:center;gap:8px;
}
.gate-brand p{margin:0;color:var(--gate-muted);font-size:15px;max-width:38ch}
.gate-points{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.7rem}
.gate-points li{
  display:flex;gap:11px;align-items:flex-start;
  color:var(--gate-muted);font-size:13.5px;line-height:1.5;
}
.gate-points i{color:var(--gate-accent);margin-top:3px;font-size:12px;width:14px}

/* Right: the form, and nothing else. */
.gate-form-panel{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:3rem 2.5rem;background:rgba(2,6,23,.22);
}
.gate-card{width:100%;max-width:360px}
.gate-card h2{
  font:700 21px/1.2 var(--font-display);color:#fff;margin:0 0 6px;letter-spacing:-.3px;
}
.gate-card .gate-lede{color:var(--gate-muted);font-size:14px;margin:0 0 1.7rem}

.gate-field{position:relative;margin-bottom:1.05rem}
.gate-field label{
  display:block;font-size:13px;font-weight:500;
  color:var(--gate-muted);margin-bottom:7px;
}
.gate-field .icon{
  position:absolute;left:15px;top:41px;
  color:rgba(255,255,255,.42);font-size:14px;
}
.gate-field input{
  width:100%;padding:.95rem 1rem .95rem 2.85rem;
  background:var(--gate-input-bg);
  border:1px solid var(--gate-border);border-radius:12px;
  color:#fff;font:400 15px/1.2 var(--font-body);outline:none;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.gate-field input::placeholder{color:rgba(255,255,255,.35)}
.gate-field input:focus{
  border-color:var(--gate-accent);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,216,138,.18);
}

.gate-submit{
  width:100%;justify-content:center;margin-top:1.4rem;
  min-height:48px;border-radius:12px;
  font:700 15px/1 var(--font-body);
  background:#fff;border:1px solid #fff;color:#000040;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  transition:background .2s ease,transform .06s ease;
}
.gate-submit:hover{background:var(--gate-accent);border-color:var(--gate-accent);color:#1c1405}
.gate-submit:active{transform:translateY(1px)}

.gate-error{
  background:rgba(228,30,38,.16);border-left:4px solid #e41e26;
  padding:.85rem 1rem;border-radius:10px;margin-bottom:1.4rem;
}
.gate-error p{color:#fca5a5;font-size:13.5px;margin:0;line-height:1.5}

.gate-foot{
  margin:1.7rem 0 0;padding-top:1.2rem;
  border-top:1px solid var(--gate-border);
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55);
}

@media (max-width:860px){
  .gate-shell{flex-direction:column;min-height:0;margin:1rem;border-radius:18px}
  .gate-brand{border-right:none;border-bottom:1px solid var(--gate-border);
              padding:2.2rem 1.8rem;gap:1rem}
  .gate-brand h1{font-size:25px}
  .gate-points{display:none}
  .gate-form-panel{padding:2rem 1.8rem}
  .gate-card{max-width:none}
}