/* ============================================================
   ARGUS — DESIGN SYSTEM TOKENS  (shared across all app pages)
   Source of truth: brand style guide :root + site style.css
   Brand is DARK; app default theme is LIGHT (body.light).
   ============================================================ */

:root{
  /* ---- core (verbatim from brand guide) ---- */
  --ink:#0c1015;        /* dark background            */
  --paper:#ECE5DE;      /* cream — primary buttons    */
  --fg:#F3ECE4;         /* warm cream primary text    */
  --mute:#cfc9c4;       /* secondary / body           */
  --dim:#8f8a86;        /* eyebrow / label text       */
  --pink:#EC0B7E;       /* primary accent             */
  --violet:#A020F0;     /* secondary accent           */
  --grad:linear-gradient(135deg,#EC0B7E 0%,#A020F0 100%);

  /* ---- status ---- */
  --ok:#5fd39a; --warn:#FF8AC4; --crit:#EC0B7E; --warn-amber:#E0A341;

  /* ---- app surfaces (dark) ---- */
  --surface:#14121b; --surface-2:#1c1926;
  --line:rgba(243,236,228,.12); --line-soft:rgba(243,236,228,.07);

  /* ---- type ----
     --display : titles & headings (Poppins, matches the site + login)
     --ui      : body / sub-text / UI labels (SF Pro on Apple, clean system fallback)
     --mono    : data, metrics, eyebrows (IBM Plex Mono) */
  --display:'Poppins',system-ui,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','SF Pro',system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* ---- spacing scale ---- */
  --s1:4px; --s2:8px; --s3:14px; --s4:18px; --s5:22px; --s6:30px; --s7:50px;

  /* ---- radius ---- */
  --r-card:14px; --r-ctrl:10px; --r-chip:100px;

  /* ---- focus / glow ---- */
  --focus:0 0 0 3px color-mix(in srgb,var(--pink) 22%,transparent);
  --glow:0 0 12px var(--pink);

  /* ---- light theme tokens (the app's DEFAULT view) ---- */
  --lt-bg:#F3EEE7; --lt-surface:#FBF8F3; --lt-fg:#1b1720;
  --lt-mute:#4a4650; --lt-dim:#6f6a72; --lt-line:rgba(20,18,27,.12);
}

/* ============ RESET ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);color:var(--fg);
  font-family:var(--ui);font-weight:400;font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ============ UTILITIES ============ */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* eyebrow: mono label + pink tick */
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--pink)}
.eyebrow.dot::before{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:var(--glow)}

/* pulsing brand dot / heartbeat */
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:var(--glow);
  animation:argpulse 1.4s ease-in-out infinite}
@keyframes argpulse{0%,100%{opacity:.4;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}

/* ============ BUTTONS ============ */
/* primary: cream paper, ink text, pink arrow */
.btn{font-family:var(--display);font-weight:500;font-size:14.5px;cursor:pointer;
  padding:14px 22px;border-radius:var(--r-ctrl);border:none;background:var(--paper);color:#0c1015;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 34px -12px rgba(236,11,126,.55)}
.btn .ar{color:var(--pink);transition:transform .2s ease}
.btn:hover .ar{transform:translateX(4px)}
.btn.block{width:100%}

/* ghost / secondary */
.btn-ghost{font-family:var(--display);font-weight:500;font-size:14px;color:var(--fg);cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:var(--r-ctrl);
  padding:13px 16px;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  transition:border-color .25s,background .25s}
.btn-ghost:hover{border-color:rgba(243,236,228,.28);background:rgba(255,255,255,.04)}

/* ============ FIELDS ============ */
.field{display:flex;flex-direction:column;gap:8px}
.field .row{display:flex;justify-content:space-between;align-items:baseline}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.field .req{color:var(--pink)}
.ip{position:relative}
.ip input{width:100%;font-family:var(--display);font-size:15px;color:var(--fg);
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:var(--r-ctrl);
  padding:13px 15px;outline:none;transition:border-color .25s,box-shadow .25s}
.ip input::placeholder{color:#5f5b58}
.ip input:focus{border-color:var(--pink);box-shadow:var(--focus)}

/* ============ CHIPS ============ */
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:6px 12px;border-radius:var(--r-chip);
  border:1px solid var(--line);color:#9aa0ab;background:rgba(255,255,255,.02);
  display:inline-flex;align-items:center;gap:7px}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.chip.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.chip.crit{color:#FF8AC4;border-color:color-mix(in srgb,var(--pink) 60%,transparent);background:color-mix(in srgb,var(--pink) 8%,transparent)}
.chip.crit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:var(--glow);animation:argpulse 1.6s ease-in-out infinite}

/* crop marks (corner framing) */
.crop{position:absolute;width:26px;height:26px;pointer-events:none;z-index:6}
.crop.tl{border-top:1px solid var(--line);border-left:1px solid var(--line)}
.crop.tr{border-top:1px solid var(--line);border-right:1px solid var(--line)}
.crop.bl{border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.crop.br{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ BRANDED LOADER — "the eye that never blinks" (8.0) ============
   Pure SVG/CSS, fully transparent — blends with the field, no video rectangle.
   Concept (on-brand: Argus the all-seeing watchman):
     · an outer watch-ring draws itself open
     · radial spokes (the many eyes) fade in
     · a radar beam sweeps the iris once (active monitoring)
     · the pupil contracts to "focus"
     · ARGUS decodes, then the curtain lifts. */
.loader{position:fixed;inset:0;z-index:1000;background:
  radial-gradient(120% 120% at 50% 38%, #15101c 0%, #0b0d12 46%, #07090d 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;overflow:hidden;
  transition:transform .85s cubic-bezier(.7,0,.2,1),opacity .5s ease .2s,visibility .85s}
.loader.done{transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none}

/* faint ambient bloom behind the eye */
.loader::before{content:"";position:absolute;top:38%;left:50%;width:520px;height:520px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(236,11,126,.16),rgba(160,32,240,.08) 45%,transparent 70%);
  opacity:0;animation:ldBloom 2s ease .2s forwards}
@keyframes ldBloom{to{opacity:1}}

.ld-eye{position:relative;width:min(220px,46vw);aspect-ratio:1}
.ld-eye svg{width:100%;height:100%;display:block;overflow:visible}

/* outer watch-ring draws itself */
.ld-ring{fill:none;stroke:url(#ldGrad);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:565;stroke-dashoffset:565;
  filter:drop-shadow(0 0 6px rgba(236,11,126,.5));
  animation:ldDraw 1.1s cubic-bezier(.5,0,.3,1) .15s forwards}
@keyframes ldDraw{to{stroke-dashoffset:0}}

/* inner tick ring, counter-rotates slowly */
.ld-ticks{stroke:rgba(243,236,228,.22);stroke-width:1.4;opacity:0;
  transform-origin:center;animation:ldFade .6s ease .8s forwards, ldSpin 9s linear 1s infinite}
@keyframes ldFade{to{opacity:1}}
@keyframes ldSpin{to{transform:rotate(360deg)}}

/* radial spokes — the "many eyes" — fade/scale in */
.ld-spokes line{stroke:url(#ldGrad);stroke-width:1.6;stroke-linecap:round;opacity:0;
  transform-origin:center;transform:scale(.2);
  animation:ldSpoke .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ldSpoke{to{opacity:.85;transform:scale(1)}}

/* iris fill + pupil */
.ld-iris{fill:url(#ldIris);opacity:0;transform-origin:center;transform:scale(.7);
  animation:ldIrisIn .9s cubic-bezier(.2,.7,.2,1) .5s forwards}
@keyframes ldIrisIn{to{opacity:1;transform:scale(1)}}
.ld-pupil{fill:#08090d;transform-origin:center;transform:scale(1);
  animation:ldFocus 1.1s cubic-bezier(.6,0,.2,1) 1.15s forwards}
@keyframes ldFocus{0%{transform:scale(1)}55%{transform:scale(.64)}100%{transform:scale(.78)}}
.ld-glint{fill:#fff;opacity:0;animation:ldGlint .5s ease 1.5s forwards}
@keyframes ldGlint{to{opacity:.95}}

/* radar sweep beam, one pass */
.ld-beam{transform-origin:center;opacity:0;
  animation:ldBeamOn .2s ease .9s forwards, ldBeamSweep 1.25s cubic-bezier(.4,0,.2,1) .9s forwards}
@keyframes ldBeamOn{to{opacity:.9}}
@keyframes ldBeamSweep{0%{transform:rotate(-30deg)}100%{transform:rotate(330deg)}}

/* focus pulse on completion */
.loader.focus .ld-eye{animation:ldPulse .5s ease}
@keyframes ldPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.05)}}

.ld-brand{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--fg);padding-left:.42em;text-shadow:0 0 18px rgba(236,11,126,.35)}
.ld-sub{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
  margin-top:-18px;opacity:0;animation:ldFade .7s ease 1.2s forwards}

@media (prefers-reduced-motion:reduce){
  .loader *{animation:none!important}
  .ld-ring{stroke-dashoffset:0}.ld-ticks,.ld-spokes line,.ld-iris,.ld-sub{opacity:1;transform:none}
  .ld-spokes line{transform:scale(1)}.ld-iris{transform:scale(1)}.ld-pupil{transform:scale(.78)}
  .ld-beam{opacity:0}.loader::before{opacity:1}
  .loader{transition:opacity .3s ease}.loader.done{transform:none;opacity:0}
}

/* login → dashboard exit fade */
body.leaving{opacity:0;transition:opacity .45s ease}