/* MÍMIR GOLD · Executive Login HD: genuine office artwork + alpha logo.
   Visual CSS only. Auth, CSRF, sessions, trading and LIVE remain unchanged. */
:root {
  color-scheme:dark;
  --navy:#061322;
  --navy-deep:#030b16;
  --gold:#d8ab59;
  --gold-light:#f0cc84;
  --line:rgba(216,171,89,.36);
  --text:#f5f7fb;
  --muted:#a4b2c1;
}
* {box-sizing:border-box}
html,body {min-height:100%;margin:0}
body {
  background:var(--navy-deep);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.login-shell {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(398px,29%);
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
}
.login-hero {
  position:relative;
  overflow:hidden;
  background:#071421;
}
.hero-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:42% center;
  /* Never stretch the photographed trading room, even at unusual aspect ratios */
}
.hero-overlay {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(4,11,22,.04) 0%,rgba(4,11,22,.07) 50%,rgba(4,11,22,.25) 72%,rgba(5,17,31,.94) 100%);
}
.login-panel {
  position:relative;
  z-index:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  background:
    radial-gradient(circle at 95% 0,rgba(208,149,61,.10),transparent 43%),
    linear-gradient(180deg,rgba(9,27,46,.96) 0%,rgba(4,15,28,.98) 100%);
}
.login-card {
  width:100%;
  max-width:none;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  border-top:0;
  border-bottom:0;
  border-radius:0;
  padding:clamp(24px,2.8vw,42px);
  background:linear-gradient(155deg,rgba(12,30,47,.86),rgba(4,12,24,.92));
  box-shadow:0 24px 75px rgba(0,0,0,.38),inset 0 1px rgba(249,213,159,.08);
}
.brand {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:-4px auto 10px;
  overflow:hidden;
  isolation:isolate;
}
.brand img {
  display:block;
  width:min(345px,100%);
  height:auto;
  margin:0 auto;
  /* Genuine transparent alpha: never simulate transparency by screen blending. */
}
.login-label {
  text-align:center;
  font-size:11px;
  color:#c7d2df;
  letter-spacing:.22em;
  margin:0 0 21px;
}
form {margin:0}
.field {margin:0 0 17px}
label {display:block;margin:0 0 8px;color:#c4cfdd;font-size:12px;font-weight:600}
input {
  width:100%;
  border:1px solid rgba(166,181,195,.4);
  border-radius:10px;
  padding:13px 15px;
  background:rgba(2,9,19,.78);
  color:#f8fafc;
  font:inherit;
  font-size:14px;
  line-height:1.35;
  outline:none;
}
input::placeholder {color:#899bad}
input:focus {border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(216,171,89,.15)}
.primary-btn {
  width:100%;
  border:1px solid rgba(255,222,158,.65);
  border-radius:10px;
  padding:14px 16px;
  margin:8px 0 0;
  background:linear-gradient(120deg,#f0c879,#c58c41);
  color:#1b150f;
  font-size:15px;
  font-weight:750;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(173,111,35,.15);
}
.primary-btn:hover {filter:brightness(1.07)}
.primary-btn:focus-visible {outline:3px solid #fbe1ab;outline-offset:3px}
.social-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:21px 0 14px;
  color:#a9b8c6;
  font-size:11px;
  white-space:nowrap;
}
.social-divider::before,.social-divider::after {
  content:"";
  height:1px;
  background:rgba(216,171,89,.22);
  flex:1;
}
.social-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.social-btn {
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:10px 4px;
  min-height:43px;
  border:1px solid rgba(216,171,89,.24);
  border-radius:9px;
  color:#cbd5e1;
  background:rgba(3,12,24,.7);
  opacity:.76;
  font:inherit;
  font-size:11px;
  cursor:not-allowed;
}
.social-btn:disabled {pointer-events:none}
.social-mark {display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;line-height:1}
.google-mark {color:#4285f4;text-shadow:1px 0 #34a853,-1px 0 #ea4335}
.ms-mark {display:grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);gap:2px}
.ms-mark i:nth-child(1) {background:#f35325}.ms-mark i:nth-child(2) {background:#81bc06}
.ms-mark i:nth-child(3) {background:#05a6f0}.ms-mark i:nth-child(4) {background:#ffba08}
.apple-mark {color:#e3e8ee}
.social-note {margin-top:10px;text-align:center;color:#96a6b7;font-size:11px}
.error {padding:11px 13px;margin-bottom:17px;border:1px solid #a95856;border-radius:9px;background:#401b20;color:#ffdfdf;font-size:13px;line-height:1.5}
.footer {
  margin-top:23px;
  padding-top:16px;
  border-top:1px solid rgba(216,171,89,.16);
  text-align:center;
  color:#90a1b4;
  font-size:11px;
  line-height:1.6;
}
@media(max-width:980px) {
  .login-shell {display:block;position:relative}
  .login-hero {position:absolute;inset:0;z-index:0}
  .hero-image {object-position:31% center}
  .hero-overlay {background:linear-gradient(180deg,rgba(3,10,21,.60),rgba(3,10,21,.89))}
  .login-panel {
    position:relative;
    z-index:1;
    min-height:100vh;
    min-height:100dvh;
    padding:18px 14px;
    background:transparent;
  }
  /* Keep the previously approved floating card on tablets and phones. */
  .login-card {
    max-width:420px;
    min-height:auto;
    display:block;
    border:1px solid var(--line);
    border-radius:20px;
    padding:clamp(22px,2.15vw,32px);
  }
}
@media(max-width:380px) {
  .login-card {padding:21px 17px}
  .brand img {width:min(260px,100%)}
  .social-row {gap:5px}
  .social-btn {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  .primary-btn {transition:none}
}

/* Production-only conditional recovery link; only shown when recovery is enabled. */
.footer a {color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.footer a:focus-visible {outline:2px solid var(--gold-light);outline-offset:4px}