/* Supplied ClinixAI login design. Loaded only by login/index.html. */

/* Layout: split login — left brand panel (static headline + looping product story stage), right sign-in form. Single light theme, matching the shipped login page. */
:root{
  --navy:#141433; --ink:#2B2E4A; --muted:#6B6F8E; --faint:#9A9DB6;
  --purple:#5B3FE8; --purple-2:#7A63F0; --lav:#EFEBFE; --lav-2:#F7F5FF;
  --mint:#1FA886; --mint-bg:#E2F6EF;
  --amber:#A86A00; --amber-bg:#FFF5E2; --amber-line:#EFCB86;
  --line:#E7E4F2; --white:#FFFFFF; --sk:#ECEAF4;
  --f-ui:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ez:cubic-bezier(.45,0,.25,1);
  color-scheme:light;
}
html,body{min-height:100%;margin:0}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--white);color:var(--navy);font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
.page{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:100dvh}

/* ---------- Left panel ---------- */
.brand{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFFFFF 0%,#FAF8FF 45%,#F1EDFE 100%);
  padding-block:36px 28px;padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;min-width:0}
.brand::before{content:"";position:absolute;width:1100px;height:1100px;border-radius:50%;right:-520px;top:-260px;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.55) 70%,rgba(255,255,255,0));pointer-events:none}
.brand::after{content:"";position:absolute;width:760px;height:760px;border-radius:50%;left:-260px;bottom:-470px;
  background:radial-gradient(closest-side,rgba(122,99,240,.10),rgba(122,99,240,0));pointer-events:none}
.brand > *{position:relative;z-index:1}
.logo{font-weight:600;font-size:46px;letter-spacing:-.02em;line-height:1;color:var(--navy)}
.logo span{color:var(--purple);font-weight:400}
.tagline{margin-top:10px;font-size:11.5px;letter-spacing:.14em;color:var(--muted);font-weight:500}
h1{margin:30px 0 0;font-size:clamp(30px,3.1vw,44px);line-height:1.12;font-weight:600;letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
h1 em{font-style:normal;color:var(--purple)}
.lede{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--muted);max-width:46ch}

.stage-wrap{position:relative;width:100%;max-width:600px;margin:16px auto 0;flex:none}
.stage{position:absolute;left:0;top:0;width:560px;height:420px;transform-origin:0 0}
.foot-note{margin-top:auto;padding-top:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-note p{margin:0;font-size:14px;color:var(--muted)}
.foot-note p::before{content:"";display:block;width:40px;height:3px;border-radius:2px;background:var(--purple);margin-bottom:12px}

/* ---------- Stage ---------- */
.ambient{position:absolute;left:60px;top:20px;width:440px;height:380px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,99,240,.20),rgba(122,99,240,0));opacity:.35;filter:blur(6px)}
.pos{position:absolute;animation:clx-enter 1.1s cubic-bezier(.22,.7,.25,1) both}
@keyframes clx-enter{from{opacity:0;transform:translateY(26px)}}
.float{animation:clx-float 6.5s ease-in-out infinite alternate}
.pos.pl .float{animation-duration:7.3s;animation-delay:-2s}
.pos.pr .float{animation-duration:8.1s;animation-delay:-4s}
@keyframes clx-float{from{transform:translateY(-2.5px)}to{transform:translateY(2.5px)}}
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px;
  box-shadow:0 1px 2px rgba(20,20,51,.04),0 14px 34px -14px rgba(52,34,140,.22)}
.chead{display:flex;align-items:center;gap:8px}
.cicon{width:22px;height:22px;border-radius:6px;background:var(--lav);display:grid;place-items:center;flex:none}
.cicon svg{width:12px;height:12px;stroke:var(--purple)}
.ctitle{font-size:12.5px;font-weight:600;color:var(--navy)}
.ctag{margin-left:auto;font-family:var(--f-mono);font-size:8.5px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 5px}
.cmeta{font-size:9.5px;color:var(--faint);margin:6px 0 2px}
.sec{font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:10px 0 4px}
.fld{position:relative;display:flex;align-items:center;gap:6px;height:20px;padding:0 20px 0 6px;margin:0 -6px 2px;border-radius:6px}
.fld > *:not(.hl):not(.tick){position:relative;z-index:1}
.hl{position:absolute;inset:0;border-radius:6px;background:rgba(91,63,232,.075);border:1px solid rgba(91,63,232,.24);opacity:0}
.hl.mintl{background:rgba(31,168,134,.08);border-color:rgba(31,168,134,.45)}
.tick{position:absolute;right:4px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--purple);display:grid;place-items:center;opacity:0;z-index:2}
.tick svg{width:6px;height:6px;stroke:#fff}
.sk{height:5px;border-radius:3px;background:var(--sk);flex:none}
.txt{font-size:9.5px;color:var(--ink);white-space:nowrap}
.txt.miss{color:var(--faint);font-style:italic}
.code{margin-left:auto;font-family:var(--f-mono);font-size:8.5px;color:var(--purple);background:var(--lav);border-radius:4px;padding:1px 5px}
.cb{width:10px;height:10px;border-radius:3px;border:1px solid #CFCBE3;flex:none;display:grid;place-items:center}
.cb.on{background:var(--mint);border-color:var(--mint)}
.cb svg{width:6px;height:6px;stroke:#fff}
.mitem{margin-left:auto;font-family:var(--f-mono);font-size:8.5px;color:var(--ink);flex:none}
.radios{display:flex;gap:3px}
.radios i{width:7px;height:7px;border-radius:50%;border:1px solid #CFCBE3}
.radios i.on{background:var(--purple-2);border-color:var(--purple-2)}
.vitals{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:2px}
.vital{border:1px solid var(--line);border-radius:6px;padding:4px 5px;background:var(--lav-2)}
.vital small{display:block;font-size:7px;letter-spacing:.08em;color:var(--faint);font-weight:600}
.vital b{font-family:var(--f-mono);font-size:8.5px;font-weight:500;color:var(--ink)}
.marker{position:absolute;right:-14px;z-index:3;display:flex;align-items:center;gap:4px;padding:3px 7px 3px 5px;border-radius:999px;
  background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber);font-size:8.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(168,106,0,.35);opacity:0}
.marker svg{width:9px;height:9px;stroke:var(--amber)}
.ring{position:absolute;inset:-3px;border-radius:999px;border:1.5px solid var(--amber-line);opacity:0}
.scan{position:absolute;left:14px;top:0;width:532px;height:70px;z-index:4;pointer-events:none;opacity:0}
.scan .band{position:absolute;inset:0;background:linear-gradient(180deg,rgba(122,99,240,0),rgba(122,99,240,.10));
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.scan .ln{position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:linear-gradient(90deg,rgba(91,63,232,0),rgba(91,63,232,.9) 20%,rgba(122,99,240,1) 50%,rgba(91,63,232,.9) 80%,rgba(91,63,232,0));
  box-shadow:0 0 10px 1px rgba(122,99,240,.45)}
.scan .pt{position:absolute;bottom:0;width:2.5px;height:2.5px;border-radius:50%;background:var(--purple-2);opacity:0;animation:clx-rise 1.8s ease-out infinite}
@keyframes clx-rise{0%{opacity:0;transform:translateY(0)}25%{opacity:.7}100%{opacity:0;transform:translateY(-22px)}}
.ins{position:absolute;left:232px;top:206px;width:308px;z-index:6;background:rgba(255,255,255,.96);
  border:1px solid #E1DCF7;border-radius:16px;padding:14px 14px 12px;opacity:0;
  box-shadow:0 1px 2px rgba(20,20,51,.05),0 24px 48px -18px rgba(52,34,140,.38),0 0 0 4px rgba(122,99,240,.06)}
.ins-h{display:flex;align-items:center;gap:8px}
.spark{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--purple-2))}
.spark svg{width:13px;height:13px;fill:#fff}
.ins-h b{font-size:13px;font-weight:600;color:var(--navy)}
.ins-st{margin-left:auto;position:relative;height:18px;width:104px}
.st{position:absolute;right:0;top:0;display:flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:999px;font-size:9px;font-weight:600;white-space:nowrap}
.st.a{background:var(--lav);color:var(--purple)}
.st.a i{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(91,63,232,.25);border-top-color:var(--purple);animation:clx-spin 1s linear infinite}
@keyframes clx-spin{to{transform:rotate(360deg)}}
.st.b{background:var(--mint-bg);color:#147A61;opacity:0}
.st.b svg{width:8px;height:8px;stroke:#147A61}
.ins ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.r{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:10px;background:var(--lav-2);border:1px solid #EFECF9;opacity:0}
.ri{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none}
.ri svg{width:11px;height:11px}
.ri.amber{background:var(--amber-bg)}
.ri.amber svg{stroke:var(--amber)}
.ri.purple{background:var(--lav)}
.ri.purple svg{stroke:var(--purple)}
.ri.mint{background:var(--mint-bg)}
.ri.mint svg{stroke:var(--mint)}
.r b{display:block;font-size:11.5px;font-weight:600;color:var(--navy);line-height:1.25}
.r span{display:block;font-size:9.5px;color:var(--muted);line-height:1.3;margin-top:1px}
.ins-f{display:flex;align-items:center;gap:10px;margin-top:10px}
.bar{flex:1;height:4px;border-radius:2px;background:var(--sk);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-2));transform-origin:0 50%;transform:scaleX(0)}
.ins-f span{font-size:9px;color:var(--muted);white-space:nowrap}
/* ---------- Right panel ---------- */
.signin{position:relative;display:flex;flex-direction:column;padding-block:28px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px));min-width:0}
.signin-footer{position:absolute;left:24px;right:32px;bottom:28px;display:flex;justify-content:center;align-items:center}
.form-wrap{margin:auto;width:100%;max-width:420px;min-width:0;padding-block:32px}
.signin-brand{margin-bottom:28px}.signin .logo{font-size:38px}
.form-wrap h2{margin:0;font-size:34px;font-weight:600;letter-spacing:-.02em}
.form-wrap .sub{margin:6px 0 32px;color:var(--muted);font-size:17px}
label.lbl{display:block;font-size:14px;font-weight:600;margin:0 0 8px}
.inp{display:flex;align-items:center;gap:12px;height:52px;border:1px solid #DCD9EA;border-radius:10px;padding:0 16px;margin-bottom:22px;background:var(--white);transition:border-color .2s,box-shadow .2s}
.inp:focus-within{border-color:var(--purple-2);box-shadow:0 0 0 4px rgba(122,99,240,.12)}
.inp svg{width:18px;height:18px;stroke:var(--muted);flex:none}
.inp input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:15px;color:var(--navy);background:transparent}
.inp input::placeholder{color:var(--faint)}
.eye{border:0;background:none;padding:0;cursor:pointer;display:grid}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-4px 0 26px;font-size:14px;color:var(--ink)}
.row label{display:flex;align-items:center;gap:10px}
.row input{width:18px;height:18px;accent-color:var(--purple)}
.row a{color:var(--purple);font-weight:600;text-decoration:none}
.btn{width:100%;height:54px;border:0;border-radius:10px;background:var(--purple);color:#fff;font:inherit;font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:background .2s}
.btn:hover{background:#4E33DA}
.btn:focus-visible{outline:3px solid rgba(91,63,232,.35);outline-offset:2px}
.btn svg{width:18px;height:18px;stroke:#fff}
.legal{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--muted)}
.legal a{color:var(--muted);text-decoration:none}

@media (max-width:900px){
  .page{grid-template-columns:minmax(0,1fr)}
  .brand{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:32px 24px}
  .logo{font-size:36px} h1{margin-top:28px}
  .signin{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-bottom:88px}.form-wrap{margin-inline:auto;width:min(100%,520px)}.signin-footer{left:20px;right:20px;bottom:24px;display:flex;flex-direction:column;gap:10px}.stage-wrap{margin-left:0;max-width:540px}
}
@media (prefers-reduced-motion:reduce){
  .pos,.float,.scan .pt,.st.a i{animation:none!important}
}

/* Form behavior and viewport sizing for this application's login route. */
.login-page .page { min-height: 100dvh; }
.login-page .signin { padding-bottom: 84px; }
.login-page .inp input { height: 100%; }
.login-page .inp input::placeholder { color: #77728b; }
.login-page .eye { min-width: 40px; min-height: 40px; place-items: center; margin-right: -10px; border-radius: 6px; }
.login-page .eye:hover:not(:disabled) { background: var(--lav-2); }
.login-page .row label { min-height: 44px; cursor: pointer; }
.login-page .row input { margin: 0; }
.login-page :is(button, a, input[type="checkbox"]):focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.login-page :is(input, button):disabled { cursor: wait; opacity: .7; }
.login-page .login-message { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--lav-2); color: var(--ink); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.login-page .login-message.is-error { color: #a3254a; background: #fff2f6; border-color: #efced9; }
.login-page [hidden] { display: none !important; }
.login-page .legal a:hover { color: var(--purple); text-decoration: underline; }
.login-page .btn:disabled:hover { background: var(--purple); }
.login-page .form-wrap[aria-busy="true"] .btn::before { content: ""; width: 16px; height: 16px; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; animation: clx-spin .8s linear infinite; }
.login-page .form-wrap[aria-busy="true"] .btn > svg { display: none; }
@media (max-width: 900px) {
  .login-page .signin { min-height: 620px; }
  .login-page .form-wrap { max-width: 520px; }
}
@media (max-width: 600px) {
  .login-page .brand { display: none; }
  .login-page .signin { min-height: 100dvh; padding-top: 24px; padding-bottom: 24px; }
  .login-page .signin-footer { position: static; padding-top: 24px; flex-shrink: 0; }
  .login-page .form-wrap { padding-block: 24px; }
  .login-page .form-wrap h2 { font-size: 30px; }
}
@media (max-width: 1024px), (pointer: coarse) {
  .login-page .inp input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-page .form-wrap[aria-busy="true"] .btn::before { animation: none; }
}