/* ============================================================================
   SPECTER — auth.css  ·  the PRIJAVA split screen from Specter.dc.html
   ========================================================================== */

.auth-body{ background:var(--paper); overflow:hidden; }
.auth{ display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; min-height:100dvh; }

/* ══════════════════════════ LEVO — SCENA ═══════════════════════════════ */
/* ── §26.5 — the sign-in panel is a photographer's room ────────────────────
   „Treba sve tamnije da bude pa da ima svetlo belo koje obasjava, kao oni
   product shotovi." So the panel stops being a mid-dark blue surface with
   things moving on it and becomes the dark the light is seen against: nearly
   black, with a slow radial fall-off so the corners drop away and the eye
   goes to the lit kitchen in the middle. The light itself is not painted
   here — it is a real light in the scene, circling (`SpecterGL.cinema`). */
.auth-art{
  position:relative; color:var(--on-ink); overflow:hidden;
  background:#0A0E14;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(32px + var(--safe-t)) 56px calc(40px + var(--safe-b));
}
/* the room's fall-off, BEHIND everything — it darkens the corners of the
   panel, not the kitchen and not the text */
.auth-art::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 85% at 50% 46%, rgba(255,255,255,.05), rgba(0,0,0,.55) 78%);
}
/* ── §26.5 — and the join ─────────────────────────────────────────────────
   „Na white mode stavi fade sa crnog na belo desno na panel prijavite se, ili
   u krug ako je mali telefon." A hard vertical seam between a black
   photograph and a white form is the one place the eye stops on this screen.
   This is the seam dissolved: the dark panel fades into whatever colour the
   form panel is, which is `--paper` and therefore turns with the theme by
   itself — white in the light theme, near-black in the dark one, where the
   join disappears for the opposite reason.

   It sits ABOVE the scene on purpose (z-index 3): the kitchen has to fade out
   into the form too, or the gradient would stop at the canvas edge and put
   the seam back. Wide screens fade to the RIGHT, because that is where the
   form is; a phone stacks the form underneath, so there it fades DOWNWARD and
   the vignette closes in a circle instead. */
.auth-art::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 58%,
    color-mix(in srgb, var(--paper) 55%, transparent) 82%,
    var(--paper) 100%);
}
/* the scanning band is off (§26.5). It was a permanently animated gradient
   that said nothing about the program and fought the one light that does. */
.auth-sweep{ display:none; }
/* §26.5 — the panel in layers, bottom to top:
     0  the room's fall-off          (::before)
     1  the scene                    (.auth-art-mid)
     3  the black feather over it    (.auth-vig)
     4  the glare                    (.auth-glare)
     5  the fade to the form         (::after)
     6  the words                    (everything else)
   The quote and the brand are LAST — „tekst komentara klijenata treba da bude
   skroz front layer na vrhu" — so nothing painted over the picture is ever
   painted over them. */
.auth-art > *{ position:relative; z-index:6; }
.auth-art > .auth-art-mid{ z-index:1; }

/* ── §26.5 — the glare ─────────────────────────────────────────────────────
   A photograph of a lit object has bloom around the source; a WebGL canvas
   without a post-processing pass does not. Rather than carry an EffectComposer
   and a bloom pass for one panel, the bloom is drawn where the light actually
   is: `cinema()` projects the key light every frame and writes its screen
   position into `--glare-x/--glare-y`, and this paints a soft white pool
   there in `screen` blend, which is exactly what bloom does to the pixels
   under it. It sits above the scene and below the fade. */
/* ── §26.5 — the scene's own edges ─────────────────────────────────────────
   „Ivice kuhinje da budu gradient na kraju, da se ne seku onako sharp — stavi
   preko njih gradient crni pa ovaj beli preko."

   A render ends where its canvas ends, which is a straight cut through a
   photograph. This is the feather: black, in the panel's own colour, closing
   in from all four sides over the scene but UNDER the glare and under the fade
   to the form. Three layers in the right order — the picture, the dark that
   ends it, the light on it, the paper it hands over to. */
.auth-vig{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  /* All four sides, and a radial on top of them so the corners close too —
     „taj crni gradient oko kuhinje gde je cutout treba da je sa svih strana".
     Four straight fades leave the corners lighter than the edges, because
     nothing is fading diagonally; the radial is what makes it a frame rather
     than four separate curtains. */
  background:
    radial-gradient(82% 78% at 50% 50%, rgba(10,14,20,0) 52%, #0A0E14 100%),
    linear-gradient(90deg,  #0A0E14 0%, rgba(10,14,20,0) 24%),
    linear-gradient(270deg, #0A0E14 0%, rgba(10,14,20,0) 26%),
    linear-gradient(180deg, #0A0E14 0%, rgba(10,14,20,0) 26%),
    linear-gradient(0deg,   #0A0E14 0%, rgba(10,14,20,0) 28%);
}
.auth-glare{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  opacity:var(--glare-on, 0);
  mix-blend-mode:screen;
  background:
    radial-gradient(26% 34% at var(--glare-x,70%) var(--glare-y,22%),
      rgba(255,255,255,.30), rgba(255,255,255,.10) 42%, transparent 70%),
    radial-gradient(70% 80% at var(--glare-x,70%) var(--glare-y,22%),
      rgba(255,246,230,.10), transparent 68%);
  transition:opacity var(--t-5) var(--ease);
}
@media (prefers-reduced-motion: reduce){ .auth-glare{ display:none; } }
.brand.on-dark{ color:var(--on-solid); }
.auth-art-lbl{ font-size:var(--fs-11); letter-spacing:.15em; color:var(--on-solid); opacity:.86; }
.auth-art-mid{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; }
/* §26.5 — what the panel says while 3.4 MB is on its way. It goes the moment
   the scene draws its first frame; a black rectangle that says nothing for
   four seconds reads as a page that failed, not as a page that is loading. */
.auth-wait{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:var(--fs-11); letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-3); white-space:nowrap; z-index:2;
  /* §31.6 — was its own 1.6 s. This caption and the `.chip.live` dot are the
     same statement („it is working"), so they breathe on the same beat. */
  animation:authWait var(--t-loop-pulse) ease-in-out infinite; }
@keyframes authWait{ 0%,100%{ opacity:.35 } 50%{ opacity:.8 } }
.auth-art.is-ready .auth-wait{ opacity:0; animation:none; transition:opacity var(--t-4) var(--ease); }
/* no bobbing either — a product shot does not float up and down. The only
   motion in this panel is the light going round. */
.auth-float{ perspective:1500px; }
/* ── §26.5 — the words get their own dark under them ──────────────────────
   „Nema ti gradienta iza teksta crnog… za belu na beloj." Exactly: the fade to
   the form is the whole point of the panel, and it is also the thing that puts
   pale paper directly under white type. So the two blocks that carry words
   each lay their own gradient down first — dark at the text, gone by the time
   it leaves the block. `z-index:-1` keeps it behind the words but inside their
   own stacking context, so it is still above the picture, the feather and the
   fade. The colour is the panel's, not `--paper`, so it is dark in BOTH
   themes: in the dark theme the form panel is dark too and the gradient simply
   stops being visible, which is the right amount of work for it to do. */
.auth-art-top, .auth-art-btm{ position:relative; }
.auth-art-top::before{
  content:''; position:absolute; inset:-30px -60px -22px -60px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, #0A0E14 26%, rgba(10,14,20,.70) 58%, rgba(10,14,20,0) 100%);
}
.auth-art-btm::before{
  content:''; position:absolute; inset:-26px -60px -46px -60px; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, #0A0E14 26%, rgba(10,14,20,.72) 58%, rgba(10,14,20,0) 100%);
}
/* §0! D2 — mera 440 px je bila na CELOM donjem bloku, pa ju je nasledio i
   jednoredni potpis ispod citata i lomio se na „…otvara radni / prostor".
   Mera pripada citatu (22 px slova, tu 440 px i treba), a blok se otvara. */
.auth-art-btm{ max-width:min(640px, 100%); }
.auth-quote{ font-size:var(--fs-22); line-height:1.45; letter-spacing:-.02em; text-wrap:pretty;
  max-width:440px; min-height:3em; transition:opacity var(--t-5) var(--ease); }
/* §0! D2 — potpis je nasleđivao meru citata (440 px) i zato se lomio u dva
   reda sa jednom rečju u drugom („…otvara radni / prostor"). Potpis je jedan
   red podataka, ne pasus; dobija svoju meru i staje u jedan red na širokom
   ekranu, a na uskom se i dalje prelama kao i sve ostalo.
   Bilo: 2 reda, drugi sa 1 rečju · sada: 1 red na ≥1024 px. */
.auth-quote-who{ font-size:var(--fs-11); color:var(--on-dark-3); margin-top:16px; letter-spacing:.06em;
  transition:opacity var(--t-5) var(--ease); }
.auth-quote.fade,.auth-quote-who.fade{ opacity:0; }
.auth-dots{ display:flex; gap:6px; margin-top:22px; }
.auth-dots i{ width:22px; height:3px; border-radius:var(--r-pill); background:rgba(255,255,255,.18);
  transition:background var(--t-4); }
.auth-dots i.on{ background:#7FA9F0; }

/* ══════════════════════════ DESNO — FORMA ══════════════════════════════ */
.auth-form-wrap{
  position:relative; background:var(--paper); display:flex; flex-direction:column;
  padding:0 40px calc(40px + var(--safe-b)); overflow-y:auto;
}
.auth-top{ padding:calc(18px + var(--safe-t)) 0 0; gap:8px; }
/* §0! D2/D3 — forma nije bila na sredini ekrana, nego na sredini onoga što
   PRETEKNE ispod gornje trake. Izmereno na 1920×1080: iznad forme 271,2 px,
   ispod 239,2 px — 32 px razlike, dovoljno da se vidi. Račun je prost: iznad
   stoji traka (56) + gornji razmak kolone, ispod donji razmak kolone + donji
   razmak panela (40). Da bi bilo jednako, donji razmak kolone mora da bude
   veći za tačno visinu trake: 24 + 16 = 40.
   Bilo: gore 271,2 / dole 239,2 · sada: 255,2 / 255,2. */
.auth-col{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 0 40px; }
.auth-col > .pane{ width:100%; max-width:392px; }

.pane{ display:none; }
.pane.on{ display:block; animation:paneIn var(--t-4) var(--ease) both; }
@keyframes paneIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.auth-col.shake > .pane.on{ animation:spShake var(--t-5) cubic-bezier(.36,.07,.19,.97) both; }

.auth-h1{ font-size:var(--fs-34); letter-spacing:-.035em; font-weight:700; margin:0; }
.auth-sub{ font-size:var(--fs-15); color:var(--ink-3); margin:10px 0 30px; line-height:1.55; }
.linky{ color:var(--acc); font-weight:600; cursor:pointer; border-bottom:1px solid var(--acc-line-2);
  background:none; font-size:inherit; padding:0; }
.linky:hover{ color:var(--acc-ink); }
.linky.sm{ font-size:var(--fs-13); font-weight:500; border-bottom:0; }

.field .hint{ font-size:var(--fs-12); color:var(--mut); min-height:0; }
.field.err .hint{ color:var(--danger); }
.field.err .lbl{ color:var(--danger); }

/* password field + eye */
.pw{ position:relative; }
.pw .inp{ padding-right:46px; }
.eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  border-radius:var(--r-6); display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-15); opacity:.5; transition:opacity var(--t-1), background var(--t-1); }
.eye:hover{ opacity:1; background:var(--surface-3); }
.eye.on{ opacity:1; color:var(--acc); }

/* strength meter */
.meter{ display:flex; gap:4px; margin-top:8px; }
.meter i{ flex:1; height:4px; border-radius:var(--r-pill); background:var(--line-3);
  transition:background var(--t-4) var(--ease); }
.meter.s1 i:nth-child(-n+1){ background:var(--danger); }
.meter.s2 i:nth-child(-n+2){ background:var(--warn); }
.meter.s3 i:nth-child(-n+3){ background:#C9A227; }
.meter.s4 i{ background:var(--ok); }

/* messages */
.err-box{ font-size:var(--fs-14); color:var(--danger); background:var(--danger-soft);
  border:1px solid var(--danger-line); padding:10px 12px; border-radius:var(--r-7);
  animation:spIn var(--t-3) ease both; line-height:1.5; }
.err-box.ok-box{ color:var(--ok); background:var(--ok-soft); border-color:var(--ok-line); }

.or{ display:flex; align-items:center; gap:12px; margin:2px 0; }
.or::before,.or::after{ content:""; flex:1; height:1px; background:var(--line); }
/* §0! D2 — razdelnik je jedini mono natpis na strani koji je bio malim
   slovima („ili"), dok su svi ostali na istom ekranu velikim: E-POŠTA,
   LOZINKA, DEMO:, RADNI PROSTOR, SCENA. Rečnik daje malo «ili» i on je u
   `core/i18n.js`, koji se ovde ne dira; slovo je ionako pitanje izgleda, pa
   se rešava tamo gde i pripada. Bilo: 1 od 6 mono natpisa mala slova ·
   sada: 0. */
.or span{ font-family:var(--mono); font-size:var(--fs-11); color:var(--mut-3); letter-spacing:.1em;
  text-transform:uppercase; }

.demo-hint{ font-size:var(--fs-11); color:var(--mut-3); text-align:center; line-height:1.7;
  margin-top:2px; letter-spacing:.04em; }
.terms{ font-size:var(--fs-12); color:var(--mut); line-height:1.6; text-align:center; margin-top:10px; }
.terms a{ color:var(--mut-2); text-decoration:underline; text-underline-offset:2px; }
.plan-pick{ margin-bottom:16px; }

/* ═══════════════════════════ RESPONSIVE ════════════════════════════════ */
@media (max-width:900px){
  .auth-body{ overflow:auto; }
  .auth{ grid-template-columns:1fr; min-height:auto; }
  .auth-art{ height:34vh; min-height:260px; padding:calc(18px + var(--safe-t)) 24px 20px; }
  .auth-art-btm{ display:none; }
  .auth-art-mid .auth-float{ transform:scale(.62); }
  /* §26.5 — stacked, so the form is underneath and the fade goes DOWN; and
     the light pool is closed in a circle, which is what „u krug ako je mali
     telefon" is: on a narrow panel a straight edge-fade eats the picture. */
  .auth-art::after{
    background:
      radial-gradient(78% 92% at 50% 42%, rgba(0,0,0,0) 46%,
        color-mix(in srgb, var(--paper) 70%, transparent) 88%, var(--paper) 100%),
      linear-gradient(180deg, rgba(0,0,0,0) 62%, var(--paper) 100%);
  }
  .auth-form-wrap{ padding-inline:22px; min-height:66vh; }
  .auth-col{ align-items:flex-start; padding-top:14px; }
  .auth-h1{ font-size:var(--fs-27); }
  .auth-sub{ margin-bottom:22px; }
}
@media (max-width:420px){
  .auth-form-wrap{ padding-inline:16px; }
  .auth-art{ height:26vh; min-height:190px; }
}
@media (prefers-reduced-motion:reduce){
  .auth-float{ animation:none; }
}