/* ============================================================
   ArkViewer login skin  —  arkstrategic.io visual language
   Injected into the Aqua auth SPA via nginx sub_filter.
   EVERY rule is scoped under html.ark-login so it applies ONLY
   to the unauthenticated login view, never the authenticated
   AQUA admin app (same SPA, different state).
   Targets Aqua's STABLE hooks: .login-form-panel /
   .login-form-card / .login-form-head / .login-form-foot /
   .login-sso  (non-hashed, set by Aqua).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

html.ark-login{
  --navy:#0B1118; --panel:#111B26; --ink:#E7EDF3; --slate:#7F8DA2;
  --cyan:#67F1E6; --steel:#59A7C6; --steel-deep:#3E869E; --amber:#E08A3C;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
}

/* ---- page ground + atmosphere ---- */
html.ark-login, html.ark-login body{
  background:var(--navy) !important; color:var(--ink) !important;
  font-family:'Inter',system-ui,sans-serif !important; min-height:100vh;
}
html.ark-login body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 72% 36%, rgba(103,241,230,.10), transparent 60%),
    radial-gradient(700px 500px at 20% 82%, rgba(89,167,198,.08), transparent 60%),
    linear-gradient(180deg,#0B1118 0%,#0A0F16 100%);
}
html.ark-login body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 75%);
          mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 75%);
}
html.ark-login #ark-cloud{position:fixed; inset:0; z-index:0; opacity:.5; pointer-events:none;}

/* hide Aqua's left marketing hero + native header; keep our stuff above atmosphere */
html.ark-login .ark-hide{display:none !important;}
html.ark-login .login-form-head{display:none !important;}

/* ---- center the form column over the navy ground (full viewport) ---- */
html.ark-login #root,
html.ark-login #root > div,
html.ark-login #root > div > div{background:transparent !important;}
html.ark-login .login-form-panel{
  position:fixed !important; inset:0 !important; z-index:1;
  width:100vw !important; height:100vh !important; max-width:none !important; margin:0 !important;
  background:transparent !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  overflow:auto;
}

/* ---- brand lockup (injected above the card) ---- */
html.ark-login .ark-brand{
  display:flex; align-items:center; gap:11px; justify-content:center; margin:0 0 24px;
  animation:ark-rise .7s .04s cubic-bezier(.2,.7,.2,1) both;
}
html.ark-login .ark-brand .ark-mark{width:30px; height:30px; display:grid; place-items:center;}
html.ark-login .ark-brand .ark-mark svg{width:30px; height:30px;}
html.ark-login .ark-brand .ark-word{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:23px; letter-spacing:.04em; line-height:1;}
html.ark-login .ark-brand .ark-word b{color:#fff; font-weight:700;}
html.ark-login .ark-brand .ark-word i{color:var(--steel); font-style:normal; font-weight:600;}

/* ---- the login card (Aqua's real card, restyled) ---- */
html.ark-login .login-form-card{
  position:relative !important;
  background:linear-gradient(180deg,rgba(17,27,38,.94),rgba(12,19,28,.94)) !important;
  border:1px solid var(--line) !important; border-radius:14px !important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(103,241,230,.04) inset !important;
  padding:32px 30px 24px !important; width:min(420px,92vw) !important;
  animation:ark-rise .8s .12s cubic-bezier(.2,.7,.2,1) both;
}
html.ark-login .login-form-card::before{
  content:""; position:absolute; top:-1px; left:22px; width:46px; height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent); border-radius:2px; opacity:.85;
}

/* ---- injected header ---- */
html.ark-login .ark-header{margin-bottom:22px;}
html.ark-login .ark-kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.22em; color:var(--cyan);
  display:flex; align-items:center; gap:8px; margin-bottom:13px; text-transform:uppercase;
}
html.ark-login .ark-kicker .ark-dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:ark-pulse 2.4s ease-in-out infinite;}
html.ark-login .ark-h1{
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:38px; line-height:1.02;
  letter-spacing:-.5px; color:#F2F6FA; margin:0 0 6px;
}
html.ark-login .ark-h1 em{font-style:italic; font-weight:500; color:var(--steel);}
html.ark-login .ark-sub{color:var(--slate); font-size:13.5px; line-height:1.5; margin:0;}

/* ---- form fields (Aqua's real inputs, restyled) ---- */
html.ark-login .login-form-card label,
html.ark-login .login-form-card [class*="label"]{
  color:var(--slate) !important; font-family:'IBM Plex Mono',monospace !important;
  font-size:10.5px !important; letter-spacing:.16em !important; text-transform:uppercase !important;
}
html.ark-login .login-form-card input:not([type=checkbox]):not([type=radio]){
  background:rgba(8,12,18,.7) !important; border:1px solid var(--line) !important;
  border-radius:9px !important; color:var(--ink) !important; font-family:'Inter',sans-serif !important;
  font-size:14.5px !important; box-shadow:none !important;
}
html.ark-login .login-form-card input::placeholder{color:#46556a !important;}
html.ark-login .login-form-card input:not([type=checkbox]):not([type=radio]):focus{
  border-color:var(--cyan) !important; background:rgba(8,12,18,.9) !important;
  box-shadow:0 0 0 3px rgba(103,241,230,.14) !important; outline:none !important;
}
html.ark-login .login-form-card input[type=checkbox]{accent-color:var(--steel) !important;}
html.ark-login .login-form-card a{color:var(--slate) !important; text-decoration:none;}
html.ark-login .login-form-card a:hover{color:var(--cyan) !important;}

/* ---- primary submit button ---- */
html.ark-login .login-form-card button[class*="color-primary"],
html.ark-login .login-form-card button[type=submit],
html.ark-login .ark-primary{
  background:linear-gradient(180deg,var(--steel),var(--steel-deep)) !important;
  border:none !important; color:#06121A !important;
  font-family:'Barlow Condensed',sans-serif !important; font-weight:600 !important;
  font-size:16px !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  border-radius:9px !important; box-shadow:0 10px 26px -10px rgba(89,167,198,.6) !important;
  transition:filter .2s, box-shadow .2s, transform .12s !important;
}
html.ark-login .login-form-card button[class*="color-primary"]:hover,
html.ark-login .ark-primary:hover{filter:brightness(1.07) !important; box-shadow:0 14px 32px -10px rgba(103,241,230,.5) !important;}
html.ark-login .login-form-card button[class*="color-primary"]:active{transform:translateY(1px) !important;}

/* ---- Microsoft / SSO button ---- */
html.ark-login .login-sso, html.ark-login .ark-ms{
  background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important;
  color:var(--ink) !important; border-radius:9px !important;
  font-family:'Inter',sans-serif !important; font-weight:500 !important; text-transform:none !important;
}
html.ark-login .login-sso:hover, html.ark-login .ark-ms:hover{border-color:rgba(255,255,255,.28) !important; background:rgba(255,255,255,.05) !important;}

/* "OR CONTINUE WITH" divider, if present */
html.ark-login .login-form-card hr,
html.ark-login [class*="divider"]{border-color:var(--line) !important; color:#3a485a !important;}

/* ---- Aqua's native foot ("Request an invite") restyled ---- */
html.ark-login .login-form-foot{
  color:var(--slate) !important; font-size:12.5px !important; margin-top:18px !important;
}
html.ark-login .login-form-foot a{color:var(--cyan) !important;}

/* ---- injected status line ---- */
html.ark-login .ark-foot{
  margin-top:18px; display:flex; justify-content:space-between; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:#4a586b;
}
html.ark-login .ark-foot .ark-on{color:var(--cyan); display:flex; align-items:center; gap:6px;}
html.ark-login .ark-foot .ark-on .ark-d{width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}

/* top-right language / theme toggles — keep subtle */
html.ark-login .login-form-panel > button,
html.ark-login [class*="toolbar"] button{color:var(--slate) !important;}

@keyframes ark-rise{from{opacity:0; transform:translateY(13px);} to{opacity:1; transform:none;}}
@keyframes ark-pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}