/* VAST login styles — shared by index.php, old_login.php, forgot.php, 2FA.php */
/* Conthrax SemiBold (Typodermic) — VAST display face, served from this folder */
  @font-face{font-family:"Conthrax";src:url("conthrax.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
  /* ===== VAST brand tokens (same palette as v1) ===== */
  :root{
    --ink:#0F131A; --ink-2:#3A4556; --muted:#6B7385;
    --rnn-red:#C8222F;
    --cyan:#4FCBFF; --sky:#2DA6FF; --electric:#1570EF; --deep:#0B4FC4;
    --ice:#F4F9FF; --ice-2:#E6F2FF;
    --line:rgba(21,112,239,.18);
    --mx:50%; --my:50%;
    --display:"Conthrax","Inter",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--ice);overflow-x:hidden;-webkit-font-smoothing:antialiased}

  /* layered background */
  .bg{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(1000px 700px at 50% 45%, rgba(79,203,255,.20), transparent 65%),
      linear-gradient(180deg,#fff 0%,var(--ice) 55%,var(--ice-2) 100%)}
  /* static dot grid (painted once) — echoes the logo's dot mark */
  .dots{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(circle,rgba(45,166,255,.30) 1.1px,transparent 1.7px) 0 0/26px 26px;animation:breathe 6s ease-in-out infinite}
  @keyframes breathe{50%{opacity:.55}}
  /* mouse-follow layers — moved with transform only (GPU composited, no full-page repaint) */
  .spot,.lens{position:fixed;left:0;top:0;pointer-events:none;will-change:transform;opacity:0;transition:opacity .35s}
  body.live .spot,body.live .lens{opacity:1}
  .spot{z-index:0;width:600px;height:600px;border-radius:50%;
    background:radial-gradient(circle,rgba(45,166,255,.20),rgba(79,203,255,.06) 40%,transparent 70%)}
  .lens{z-index:1;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(21,112,239,.95) 1.9px,transparent 2.5px) 0 0/26px 26px;
    -webkit-mask:radial-gradient(circle,#000 0 25%,transparent 70%);mask:radial-gradient(circle,#000 0 25%,transparent 70%)}
  .wave{position:fixed;z-index:1;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;
    border:2px solid rgba(45,166,255,.7);box-shadow:0 0 18px rgba(79,203,255,.5);animation:wave .8s ease-out forwards}
  @keyframes wave{from{transform:scale(.2);opacity:1}to{transform:scale(9);opacity:0}}

  @media (pointer:coarse){.spot,.lens{display:none}}

  /* ===== layout ===== */
  .wrap{--gap:clamp(16px,4.2vh,44px);position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:clamp(10px,2.2vh,22px) clamp(16px,3vw,44px) clamp(8px,1.8vh,18px)}
  header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(10px,2vh,20px)}
  /* card, pipe and bands share one gap and sit centred between the top bar and the legal line, which is pinned to the bottom */
  footer{display:contents}
  .eyebrow{font:500 11px "JetBrains Mono",monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--electric);display:flex;align-items:center;gap:10px}
  .eyebrow::before{content:"";width:8px;height:8px;border:1.5px solid var(--electric);transform:rotate(45deg)}
  .sys{font:500 11px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase;display:flex;gap:18px;align-items:center}
  .sys .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#18C07A;margin-right:8px;box-shadow:0 0 0 0 rgba(24,192,122,.6);animation:ping 2s infinite}
  @keyframes ping{70%{box-shadow:0 0 0 8px rgba(24,192,122,0)}100%{box-shadow:0 0 0 0 rgba(24,192,122,0)}}
  #clock{color:var(--electric)}

  .stage{display:grid;grid-template-columns:minmax(0,440px);justify-content:center;align-items:center;gap:clamp(24px,6vw,110px);margin-top:auto;padding:0}

  /* ===== login card with 3D tilt ===== */
  .tilt{perspective:1100px}
  .card{position:relative;padding:clamp(20px,3.8vh,38px) 34px clamp(16px,2.8vh,28px);border-radius:24px;background:rgba(255,255,255,.93);
    box-shadow:0 0 0 1px rgba(45,166,255,.28),0 30px 80px -30px rgba(21,112,239,.55);
    transform-style:preserve-3d;will-change:transform}
  /* glare follows cursor over card */
  .card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%), rgba(79,203,255,.22), transparent 45%)}
  /* orbiting border light */
  .card::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;
    background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--cyan) 82%,var(--electric) 90%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    animation:orbit 5s linear infinite}
  @property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
  @keyframes orbit{to{--a:360deg}}
  .card > *{transform:translateZ(30px)}

  .logo-wrap{position:relative;width:clamp(238px,37.5vh,363px);max-width:100%;margin:0 auto}
  .logo{display:block;width:100%;height:auto}
  .hint{display:flex;justify-content:center;gap:6px;margin:clamp(6px,1.4vh,14px) 0 4px}
  .hint span{width:22px;height:3px;border-radius:3px;background:var(--ice-2);overflow:hidden;position:relative}
  .hint span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--electric));transform:translateX(-100%);animation:load 3s infinite}
  .hint span:nth-child(2)::after{animation-delay:.25s}.hint span:nth-child(3)::after{animation-delay:.5s}
  @keyframes load{40%,60%{transform:none}100%{transform:translateX(100%)}}
  .card h1{font:600 clamp(17px,2.3vh,20px)/1.3 var(--display);letter-spacing:.08em;text-align:center;margin-top:clamp(6px,1.4vh,14px)}
  .card .sub{text-align:center;color:var(--muted);font-size:14px;margin:4px 0 clamp(12px,2.4vh,24px)}

  form{display:flex;flex-direction:column;gap:clamp(9px,1.5vh,14px)}
  .fl{position:relative;--h:clamp(48px,6.4vh,56px)}
  .fl input{width:100%;height:var(--h);padding:18px 46px 0 16px;border-radius:14px;border:1px solid rgba(15,19,26,.12);background:rgba(255,255,255,.92);
    font:500 15px Inter,sans-serif;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s,transform .25s}
  .fl .fl-label{position:absolute;left:16px;top:calc(var(--h) / 2);transform:translateY(-50%);font:500 14px Inter,sans-serif;color:var(--muted);pointer-events:none;transition:.22s}
  .fl input:focus ~ .fl-label,.fl input:not(:placeholder-shown) ~ .fl-label{top:clamp(12px,1.7vh,15px);transform:translateY(-50%);font:500 10px "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--electric)}
  .fl input:hover{border-color:rgba(45,166,255,.5)}
  .fl input:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(45,166,255,.16),0 10px 26px -14px rgba(21,112,239,.7)}
  .fl .trace{position:absolute;inset:0;border-radius:14px;pointer-events:none;overflow:hidden}
  .fl .trace::before{content:"";position:absolute;left:-40%;bottom:0;width:40%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--electric),transparent);opacity:0}
  .fl input:focus ~ .trace::before{opacity:1;animation:trace 1.6s linear infinite}
  @keyframes trace{to{left:100%}}
  .eye{position:absolute;right:10px;top:calc(var(--h) / 2);transform:translateY(-50%);width:34px;height:34px;border:0;background:none;border-radius:9px;color:var(--muted);display:grid;place-items:center;transition:.2s}
  .eye:hover{color:var(--electric);background:var(--ice-2)}

  .row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-2);margin:2px 0 4px}
  .tg{display:flex;align-items:center;gap:10px;user-select:none}
  .tg input{appearance:none;width:34px;height:20px;border-radius:20px;background:#D9E3F0;position:relative;transition:.25s}
  .tg input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.25s}
  .tg input:checked{background:linear-gradient(90deg,var(--sky),var(--electric))}
  .tg input:checked::after{left:17px}
  a{color:var(--electric);text-decoration:none;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
  a:hover{background-size:100% 1px}

  /* magnetic button */
  .btn{position:relative;height:clamp(46px,6.2vh,54px);border:0;border-radius:14px;overflow:hidden;color:#fff;
    font:600 13px var(--display);letter-spacing:.16em;text-transform:uppercase;
    background:linear-gradient(100deg,var(--deep),var(--electric) 45%,var(--sky) 80%,var(--cyan));background-size:160% 100%;background-position:0 0;
    box-shadow:0 14px 32px -12px rgba(21,112,239,.85),inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .2s ease-out,box-shadow .3s,background-position .5s}
  .btn:hover{background-position:100% 0;box-shadow:0 18px 44px -12px rgba(21,112,239,1),inset 0 1px 0 rgba(255,255,255,.35)}
  .btn .lbl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;transition:transform .2s ease-out}
  .btn .lbl svg{transition:transform .3s}
  .btn:hover .lbl svg{transform:translateX(4px)}
  .btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
  @keyframes rip{to{transform:scale(4);opacity:0}}
  .btn[disabled]{filter:saturate(.8)}

  .alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ghost{height:46px;border-radius:12px;border:1px solid rgba(21,112,239,.22);background:rgba(255,255,255,.7);font:600 13px Inter,sans-serif;color:var(--ink);
    display:flex;align-items:center;justify-content:center;gap:8px;transition:.25s}
  .ghost:hover{border-color:var(--sky);background:#fff;transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(21,112,239,.8)}
  .ghost svg{color:var(--electric)}
  .or{display:flex;align-items:center;gap:12px;color:var(--muted);font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.18em;margin:4px 0}
  .or::before,.or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(15,19,26,.15),transparent)}

  .console:empty{display:none}
  .console{font:400 11.5px "JetBrains Mono",monospace;color:var(--electric);text-align:center}
  .console .ok{color:#12A36A}.console .err{color:var(--rnn-red)}
  .cfoot{margin-top:clamp(10px,1.8vh,18px);padding-top:clamp(8px,1.4vh,14px);border-top:1px dashed rgba(15,19,26,.12);display:flex;justify-content:space-between;
    font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
  .cfoot b{color:var(--rnn-red);font-weight:500}

  /* pipeline track */
  .pipe{--n:clamp(34px,5vh,44px);position:relative;display:flex;justify-content:space-between;max-width:760px;width:100%;margin:var(--gap) auto 0;padding:0 10px}
  .pipe::before{content:"";position:absolute;left:var(--x0,34px);right:var(--x1,34px);top:calc(var(--n) / 2 - 1px);height:2px;background:repeating-linear-gradient(90deg,rgba(21,112,239,.35) 0 4px,transparent 4px 10px)}
  .pipe .runner{position:absolute;z-index:1;top:calc(var(--n) / 2 - 5px);left:-5px;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px 4px rgba(79,203,255,.8);will-change:transform,opacity;pointer-events:none}
  .node{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.8vh,8px);font:500 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .node i{width:var(--n);height:var(--n);border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid rgba(21,112,239,.35);color:var(--electric);transition:.35s}
  .node i svg{width:20px;height:20px}
  .node:hover i,.node.on i{background:linear-gradient(135deg,var(--sky),var(--electric));color:#fff;border-color:transparent;box-shadow:0 0 0 6px rgba(45,166,255,.15),0 8px 20px -6px rgba(21,112,239,.8);transform:translateY(-3px)}
  .node:hover,.node.on{color:var(--electric)}

  .bands{margin-top:var(--gap);margin-bottom:auto;display:grid;line-height:1;grid-template-columns:1fr minmax(40px,120px) auto minmax(40px,120px) 1fr;align-items:center;gap:14px;font:600 11px var(--display);letter-spacing:.14em;color:var(--electric);text-transform:uppercase}
  .bands hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--sky),transparent)}
  .bands span:nth-child(1){text-align:right}
  .legal{padding-top:clamp(12px,2vh,20px);text-align:center;font:500 10px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

  /* ===== app-page additions (PHP login / forgot / 2FA) ===== */
  /* neutralise old global styles that may leak in from shared includes */
  .card input,.card button{box-sizing:border-box;margin:0}
  .notice{border-radius:12px;padding:8px 12px;font:500 12px/1.4 Inter,sans-serif;text-align:left}
  /* when a message is shown, tighten the card so the page still fits one screen */
  .card:has(.notice.err,.notice.ok) .hint{display:none}
  .card:has(.notice.err,.notice.ok) .logo-wrap{width:clamp(200px,27.5vh,325px)}
  .card:has(.notice.err,.notice.ok) h1{margin-top:clamp(4px,1vh,10px)}
  .card:has(.notice.err,.notice.ok) .sub{margin-bottom:clamp(8px,1.6vh,18px)}
  @media (max-height:700px){ .wrap:has(.notice.err,.notice.ok) .bands{display:none} }
  /* short laptop screens: drop decorative extras so the larger logo and taller 2FA card still fit without scrolling */
  @media (max-height:700px){
    .hint{display:none}
    .card h1{margin-top:clamp(4px,1vh,10px)}
    .wrap:has(.otp,#mfaemail,.notice.ok) .bands{display:none}
    .wrap:has(.notice.ok){--gap:12px}
  }
  .notice.err{background:rgba(200,34,47,.07);border:1px solid rgba(200,34,47,.25);color:var(--rnn-red)}
  .notice.ok{background:rgba(18,163,106,.07);border:1px solid rgba(18,163,106,.25);color:#0d7a50}
  .notice.info{background:var(--ice-2);border:1px solid rgba(21,112,239,.2);color:var(--ink-2)}
  .help{font:400 12.5px/1.5 Inter,sans-serif;color:var(--muted);text-align:center}
  .help a{font-weight:500}
  .row.end{justify-content:flex-end}
  .row.center{justify-content:center}
  /* jquery.validate messages */
  .fl label.error{display:block;margin:6px 2px 0;font:500 12px Inter,sans-serif;color:var(--rnn-red)}
  .fl input.error{border-color:rgba(200,34,47,.55)}
  /* one-time code input */
  .otp{--h:clamp(56px,7.4vh,64px)}
  .otp input{padding:0 16px;text-align:center;font:600 clamp(24px,3.4vh,30px) var(--display);letter-spacing:.6em;text-indent:.6em}
  .otp .fl-label{display:none}
  /* secondary (resend) button */
  .btn-ghost{width:100%;height:clamp(42px,5.6vh,48px);border-radius:12px;border:1px solid rgba(21,112,239,.25);background:rgba(255,255,255,.75);
    font:600 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--electric);cursor:pointer;transition:.25s}
  .btn-ghost:hover:not([disabled]){border-color:var(--sky);background:#fff;box-shadow:0 10px 22px -14px rgba(21,112,239,.8)}
  .btn-ghost[disabled]{color:var(--muted);cursor:not-allowed;opacity:.8}
  .btn-ghost #count{color:var(--electric)}
  a.resend{display:block;background:none}
  a.resend:hover{background:none}

  @media (max-width:1100px){
    .stage{grid-template-columns:1fr;justify-items:center}
    .col{display:none}
    .tilt{width:100%;max-width:440px}
    .bands{display:none}
    .sys .hide-sm{display:none}
  }
  @media (max-width:560px){
    .card{padding:30px 20px 22px}
    .pipe{display:none}
    header{flex-direction:column;align-items:flex-start;gap:8px}
  }
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}