/* VCare Login v27 — clean build. Works with your existing /static/img/vcare-logo.png (padding is cropped in CSS). */

:root{color-scheme:dark;--bg:#050a14;--bg2:#0b1224;--panel:rgba(13,20,38,.84);--line:#1e2a44;--text:#eaf0ff;--muted:#8693b0;--field:#09101f;
 --amber:#e8872a;--amber2:#f7a940;--blue:#3b7bf0;--teal:#16b8a0;--ring:rgba(59,123,240,.45);--node:232,135,42;--link:59,123,240;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:linear-gradient(160deg,var(--bg) 55%,var(--bg2));color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
#net{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.orb{position:fixed;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.14;z-index:0;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.o2{background:var(--blue);right:-16vmax;bottom:-16vmax;animation-delay:-9s}
@keyframes drift{to{transform:translate(6vmax,4vmax) scale(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Layout ── */
.page{position:relative;z-index:1;min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.brand{padding:clamp(24px,4vh,80px) clamp(28px,4vw,60px) clamp(24px,4vh,80px) clamp(56px,11vw,190px)}
.side{display:grid;place-items:center;padding:clamp(16px,4vw,64px)}

/* ── Logo: the PNG has a big empty margin, so crop to the artwork ── */
.mark{position:relative;display:block;overflow:hidden;width:var(--lw,min(clamp(220px,27vw,420px),44vh));aspect-ratio:1.2056;margin:0 0 clamp(12px,2.4vh,22px);animation:mk 1s .2s cubic-bezier(.2,.9,.2,1) both,flt 6s 1.4s ease-in-out infinite}
.mark img{position:absolute;display:block;max-width:none;width:165.56%;height:auto;left:-32.78%;top:-38.32%}
@keyframes mk{from{opacity:0;transform:translateY(-24px) scale(.9)}}
@keyframes flt{50%{transform:translateY(-7px)}}
.rule{height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,#78a9ff,#4fd8c4 60%,transparent);margin:0 0 clamp(14px,3vh,28px);animation:rl 1.1s .6s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes rl{to{width:min(420px,100%)}}

/* ── Title ── */
.tb{position:relative;padding-left:clamp(18px,2vw,28px)}
.tb::before{content:"";position:absolute;left:0;top:.5em;bottom:.7em;width:4px;border-radius:4px;background:linear-gradient(#78a9ff,#4fd8c4);transform:scaleY(0);transform-origin:top;animation:bar 1s .4s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes bar{to{transform:scaleY(1)}}
h1{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:var(--fs,clamp(40px,min(6vw,11vh),92px));line-height:1.02;letter-spacing:-.047em;margin:0}
h1 .row{display:flex;align-items:center;gap:.22em;flex-wrap:wrap}
h1 .w{color:var(--text)}
h1 .ch{display:inline-block;transform:translateY(40%);opacity:0;animation:pop2 .8s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(.25s + var(--d)*.04s)}
@keyframes pop2{to{transform:none;opacity:1}}
h1 .grad{font-weight:800;letter-spacing:-.047em;filter:drop-shadow(0 8px 24px rgba(79,216,196,.22));background:linear-gradient(95deg,#a9c4ff 0%,#6fe3d1 55%,#a9c4ff 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-bottom:.08em;transform:translateY(40%);opacity:0;animation:pop2 .9s .6s cubic-bezier(.2,1.1,.3,1) forwards,flow 6s 1s linear infinite}
@keyframes flow{to{background-position:-200% 0}}

/* ── Card ── */
.wrap{width:100%;max-width:500px;border-radius:24px;animation:slide 1s .4s cubic-bezier(.2,.9,.2,1) both}
@keyframes slide{from{opacity:0;transform:translateX(60px) scale(.96)}}
.wrap.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
form{background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:23px;padding:clamp(30px,5.5vh,46px) clamp(28px,2.6vw,42px) clamp(22px,4vh,34px);border:1px solid var(--line)}
h2{font-family:'Inter',system-ui,sans-serif;font-size:clamp(28px,4.6vh,37px);letter-spacing:-.02em;margin:0 0 6px}
.sub{font-size:1.05rem;margin:0 0 clamp(20px,3.6vh,30px);color:var(--muted);line-height:1.45}
.st{opacity:0;transform:translateY(16px);animation:up .7s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(.8s + var(--i)*.11s)}
.wrap.fast .st{animation-duration:.5s;animation-delay:calc(.04s + var(--i)*.06s)}
@keyframes up{to{opacity:1;transform:none}}
label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.field{margin-bottom:20px}.box{position:relative}
.box svg.i{position:absolute;left:14px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--muted);pointer-events:none;transition:color .2s,transform .3s}
.box:focus-within svg.i{color:var(--amber);transform:scale(1.15)}
input{width:100%;height:clamp(50px,7.6vh,60px);border-radius:14px;border:1px solid var(--line);background:var(--field);color:var(--text);font:inherit;padding:0 46px 0 44px;transition:border-color .2s,box-shadow .2s,transform .2s}
input::placeholder{color:var(--muted);opacity:.7}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--ring);transform:translateY(-1px)}
.eye{position:absolute;right:6px;top:50%;translate:0 -50%;width:38px;height:38px;border:0;background:none;color:var(--muted);border-radius:9px;cursor:pointer;display:grid;place-items:center}
.eye:hover{color:var(--text)}.eye:focus-visible{outline:2px solid var(--blue)}.eye svg{width:19px;height:19px}
.err{margin:-6px 0 14px;color:#ff8a7a;font-size:.88rem}.err:empty{display:none}
.ok-msg{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:rgba(22,184,160,.12);border:1px solid rgba(22,184,160,.3);color:#7ee8d4;font-size:.88rem;line-height:1.45}
.foot{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 0;color:var(--muted);font-size:.85rem}
.foot svg{width:14px;height:14px;color:var(--teal)}

/* ── Button ── */
.go{position:relative;overflow:hidden;width:100%;height:clamp(52px,7.9vh,62px);border:0;border-radius:14px;font:inherit;font-weight:600;font-size:1rem;color:#1b1204;cursor:pointer;background:linear-gradient(135deg,var(--amber),var(--amber2));box-shadow:0 12px 30px -10px var(--amber);transition:transform .15s,box-shadow .2s}
.go:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px var(--amber)}.go:active{transform:none}
.go:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.go:disabled{cursor:progress}
.go::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3.6s 2.2s infinite}
@keyframes shine{0%{left:-60%}35%,100%{left:130%}}
.go .rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rp .6s ease-out forwards;pointer-events:none}
@keyframes rp{to{transform:scale(1);opacity:0}}
.sp{display:none;width:20px;height:20px;border:2.5px solid rgba(27,18,4,.3);border-top-color:#1b1204;border-radius:50%;animation:spin .7s linear infinite;margin:auto}
.go.load .t{display:none}.go.load .sp{display:block}

/* ── Panels ── */
.forgot-row{display:flex;justify-content:flex-end;margin:-6px 0 18px}
.forgot-row a{color:var(--muted);font-size:.82rem;text-decoration:none;font-weight:500;transition:color .2s}
.forgot-row a:hover,.forgot-row a:focus-visible{color:var(--amber);outline:none}
.forgot-panel{display:none}
.forgot-panel.show{display:block}
.login-panel.hide{display:none}
.forgot-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(12px,2.4vh,18px)}
.forgot-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(59,123,240,.12);border:1px solid rgba(59,123,240,.28);color:#7eb0ff}
.forgot-icon svg{width:22px;height:22px}
.back-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font:inherit;font-size:.82rem;font-weight:500;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.back-pill:hover,.back-pill:focus-visible{color:var(--text);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);outline:none}
.forgot-panel .sub{margin-bottom:clamp(14px,2.6vh,24px)}
.forgot-panel .field{margin-bottom:clamp(12px,2.2vh,20px)}

/* ── Boot loader ── */
.boot{position:fixed;inset:0;z-index:100;background:#050a14;display:grid;place-items:center;animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.boot.hidden{display:none!important}
.boot-inner{text-align:center;position:relative;z-index:1}
.boot-spin{position:relative;width:72px;height:72px;margin:0 auto 24px}
.boot-spin span{position:absolute;border-radius:50%;border:2.5px solid transparent}
.boot-spin .s1{inset:0;border-top-color:var(--amber);animation:spin 1s linear infinite}
.boot-spin .s2{inset:10px;border-bottom-color:var(--blue);animation:spin .75s linear infinite reverse}
.boot-spin .s3{inset:20px;border-top-color:var(--teal);animation:spin 1.25s linear infinite}
.boot-title{margin:0 0 8px;font-size:1.15rem;font-weight:700}
.boot-msg{margin:0 0 18px;color:var(--muted);font-size:.875rem;min-height:1.3em}
.boot-dots{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.boot-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .3s}
.boot-dots i.active{background:linear-gradient(135deg,var(--amber),var(--blue))}
.boot-dots i.current{transform:scale(1.35);box-shadow:0 0 12px rgba(232,135,42,.5)}
.boot-track{height:3px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;max-width:200px;margin:0 auto}
.boot-fill{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--blue),var(--teal));transition:width .5s cubic-bezier(.16,1,.3,1)}
body.is-booting .page{filter:blur(10px) brightness(.5);pointer-events:none;transition:filter .4s ease}

/* ── Desktop: one screen, brand + card centred as a group ── */
@media (min-width:861px){
  body{overflow:hidden}
  .page{height:100dvh;display:flex;justify-content:center;align-items:center;gap:clamp(40px,6vw,96px);padding:0 clamp(24px,4vw,64px)}
  .brand{padding:0;flex:0 0 auto;min-width:0;--fs:clamp(40px,min(6vw,11vh),92px);--lw:min(clamp(220px,27vw,420px),44vh);width:calc(var(--fs)*5.7 + 34px)}
  .side{padding:0;flex:0 0 min(500px,44vw)}
}
/* very short desktop windows: allow scrolling instead of clipping */
@media (min-width:861px) and (max-height:640px){
  body{overflow:auto}
  .page{height:auto;min-height:100dvh;padding-top:24px;padding-bottom:24px}
}

/* ── Tablet / mobile ── */
@media (max-width:860px){
  .page{grid-template-columns:1fr;align-items:start;min-height:100dvh}
  .brand{padding:32px 24px 0;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;text-align:left}
  .mark{--lw:min(240px,70vw);margin:0 0 4px}
  .rule{margin:0 0 14px}
  h1{font-size:40px}
  .side{width:100%;padding:24px 16px 40px}
  .wrap{max-width:100%}
  form{padding:28px 22px 22px}
  .forgot-row{margin:-4px 0 14px}
}
@media (max-width:480px){
  .brand{padding:28px 18px 8px;flex-direction:column;align-items:flex-start}
  .mark{--lw:min(210px,64vw)}
  h1{font-size:clamp(32px,9vw,42px)}
  .side{padding:12px 14px 32px}
  form{padding:24px 18px 20px;border-radius:18px}
  h2{font-size:26px}
  .sub{font-size:.98rem}
  input{height:50px}
  .go{height:50px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
  .tb::before{transform:none}.rule{width:min(420px,100%)}
  .st,h1 .ch,h1 .grad{opacity:1;transform:none}
}