/* ══════════════════════════════════════════════════════════
   NOVARTH GROUP - auth.css
   Sign in / register.
   Desktop  = split showcase panel + form.
   Mobile   = native Android-style app screen (app bar + sheet).
══════════════════════════════════════════════════════════ */

:root{
  --navy:#0F2445;
  --navy-d:#08152B;
  --navy-l:#16375F;
  --gold:#C9992A;
  --gold-l:#E3BC6A;
  --gold-p:#F6EFDC;
  /* showcase-panel accent */
  --accent:#2E7BE8;
  --accent-d:#1C63CB;
  --ink:#12294D;
  --body:#657588;
  --body-l:#8C9AAB;
  --line:#E4E9F0;
  --surf:#FFFFFF;
  --surf-2:#F7F9FC;
  --danger:#D64545;
  --danger-s:#FDF2F2;
  --ok:#15A06A;

  --f-h:'Satoshi',sans-serif;
  --f-b:'Satoshi',sans-serif;

  /* Material-3 flavoured easings */
  --e-emph:cubic-bezier(.2,0,0,1);
  --e-std:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  --r-fld:13px;
  --r-btn:13px;
  --sheet-r:30px;
  /* Height of the wavy cap on the mobile sheet. Doubles as the distance the
     sheet is pulled up over the hero, so the two can never disagree. */
  --wave-h:40px;

  /* One height for every control in a field row, and where the floating
     label lands when it rises. --lab-lift is how far the label's centre sits
     above the box's top edge: 1px puts it on the middle of the 1.5px border,
     so the label reads as a notch cut into it. Measuring from the box edge
     rather than from the label's own line box is what keeps it there when
     the controls grow to 56px on a phone — that drift is what used to push
     the label down onto the inside of the border. */
  --fld-h:52px;
  --lab-lift:1px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body.auth-page{
  margin:0;
  font-family:var(--f-b);
  font-size:15px;
  line-height:1.6;
  color:var(--body);
  background:var(--surf);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; }
button{ color:inherit; background:none; border:none; padding:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-family:var(--f-h); font-weight:700; color:var(--ink); letter-spacing:-.025em; line-height:1.16; }
p{ margin:0; }

.auth-skip{
  position:fixed; top:0; left:0; z-index:999;
  transform:translateY(-130%);
  background:var(--navy); color:#fff; padding:.75rem 1.25rem;
  font-size:.8rem; font-weight:600;
  transition:transform .25s var(--e-emph);
}
.auth-skip:focus{ transform:translateY(0); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════
   SHELL
══════════════════════════════════════════════════════════ */
.auth-shell{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  min-height:100dvh;
}

/* ══════════════════════════════════════════════════════════
   SHOWCASE PANEL (desktop) / HERO (mobile)
══════════════════════════════════════════════════════════ */
.auth-visual{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(1.9rem,3vw,3.25rem);
  background:#071634;
  color:#fff;
}

/* The photograph fills the whole panel edge to edge and every piece of copy
   sits over it. Path is one level up from /css, not two — the old ../../ only
   worked because browsers clamp a leading .. at the document root, and it
   would have broken the moment the site moved into a subfolder. */
.auth-visual::before{
  content:''; position:absolute; inset:0; z-index:-2;
  /* The artwork puts the towers in its right ~42% and leaves the rest empty
     night sky. At `cover` that empty half landed under the headline, so the
     copy read as sitting on flat navy. Zooming to 200% and anchoring right
     crops into the tower cluster so the building fills the panel and the
     text genuinely sits over the photograph. */
  background:url("../images/loginbg.png") right center/200% auto no-repeat;
}
/* Scrim, not a blackout: heavier on the left so the headline and paragraph
   stay legible, but light enough throughout that the building still reads
   behind the text rather than being washed to flat navy. */
.auth-visual::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(4,12,30,.42) 0%,
      rgba(4,12,30,0) 26%,
      rgba(4,12,30,0) 62%,
      rgba(4,12,30,.46) 100%),
    linear-gradient(100deg,
      rgba(4,12,30,.80) 0%,
      rgba(6,17,42,.60) 38%,
      rgba(7,20,48,.34) 70%,
      rgba(7,20,48,.20) 100%);
}

/* ── brand ─────────────────────────────────────────────── */
.auth-brand{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:.62rem; flex:0 0 auto;
  align-self:flex-start;
}
.auth-brand .mk{ display:block;  overflow:hidden; flex:0 0 auto; }
/* crop logo.png to its emblem: the lockup's wordmark is navy and
   would disappear here, so the words are typeset instead */
.auth-brand .mk img{
 max-height:80px; max-width:none; height:auto;
}
    .auth-brand .mk img {
        filter: brightness(0) invert(1);
    }
    .brand-word {
        display: none;
        flex-direction: column;
        line-height: 1;
    }
.brand-word b{
  font-family:var(--f-h); font-size:1.34rem; font-weight:700;
  letter-spacing:.055em; text-transform:uppercase; color:#fff;
}
.brand-word i{
  font-style:normal; font-family:var(--f-h); font-size:.5rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:#8FA6C4; margin-top:6px;
}

/* ── content column ────────────────────────────────────── */
/* The panel is a flex column: brand pinned top, footer pinned bottom, and the
   two auto margins (here and on .visual-footer) split the leftover space in
   half — which lands the copy block in the upper-middle with the verticals
   row trailing it, matching the reference proportions. */
.auth-visual-copy{
  position:relative; z-index:2;
  margin-top:auto;
  max-width:430px;
}

/* The headline is deliberately mid-weight rather than bold — the accent word
   carries the emphasis, not the stroke thickness. */
.auth-visual-copy h1{
  color:#fff; font-size:clamp(1.65rem,2.55vw,2.2rem);
  font-weight:500; line-height:1.3; letter-spacing:-.012em;
  margin:0;
}
.auth-visual-copy h1 em{ font-style:normal; font-weight:600; color:var(--accent); }

/* short accent bar between headline and body copy */
.v-rule{
  display:block; width:34px; height:3px; border-radius:2px;
  margin:1.5rem 0 1.3rem;
  background:var(--accent-d);
}

.auth-visual-copy > p{
  font-size:.82rem; line-height:1.72; color:#9FB3CC; max-width:31ch;
}

/* --- business verticals row --------------------------- */
.v-verticals{
  position:relative; z-index:2;
  display:flex; align-items:flex-start;
  gap:clamp(.9rem,2.1vw,1.85rem);
  margin:2.6rem 0 0; padding:0; list-style:none;
}
.v-verticals li{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  min-width:0;
}
.v-verticals svg,
.v-verticals i[data-lucide]{
  width:26px; height:26px; flex:0 0 auto;
  fill:none; stroke:#CBD9EC; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .25s var(--e-std);
}
.v-verticals span{
  font-size:.62rem; font-weight:500; letter-spacing:.005em;
  color:#BDCCE0; white-space:nowrap;
}
.v-verticals li:hover svg{ stroke:var(--accent); }

.visual-footer{
  position:relative; z-index:2;
  margin-top:auto; padding-top:2.4rem;
  font-size:.68rem; color:#7589A4;
}
.visual-footer small{ color:var(--accent); margin-inline:.3rem; }

/* ══════════════════════════════════════════════════════════
   FORM PANEL
══════════════════════════════════════════════════════════ */
.auth-panel{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.25rem,2.4vw,2rem);
  background:var(--surf);
}

/* The sheet's wavy top edge, drawn only where the panel is a sheet — on
   desktop the two columns sit side by side and there is nothing to cap. */
.sheet-wave{ display:none; }

.auth-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex:0 0 auto;
}
.back-link,.secure-mark{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-h); font-size:.78rem; font-weight:600;
}
.back-link{
  color:var(--body); padding:.5rem .75rem; margin-left:-.75rem;
  border-radius:999px;
  transition:color .22s var(--e-std), background .22s var(--e-std);
}
.back-link svg,
.back-link i[data-lucide]{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s var(--e-emph);
}
.back-link:hover{ color:var(--ink); background:var(--surf-2); }
.back-link:hover svg{ transform:translateX(-3px); }

.secure-mark{
  color:var(--ok); font-size:.72rem;
  background:#EAF8F2; border:1px solid #CDEDDF;
  padding:.36rem .7rem; border-radius:999px;
}
.secure-mark svg,
.secure-mark i[data-lucide]{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; }

.auth-form-wrap{
  width:100%; max-width:404px;
  margin:auto; padding-block:clamp(1.5rem,4vh,3rem);
}
.auth-register-wrap{ max-width:436px; }

.form-kicker{
  font-family:var(--f-h); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.55rem;
}
.auth-form-wrap h2{ font-size:clamp(1.5rem,2.4vw,1.85rem); margin-bottom:.5rem; }
.form-intro{ font-size:.88rem; color:var(--body); margin-bottom:1.6rem; }

/* ══════════════════════════════════════════════════════════
   FIELDS - outlined, with a notched floating label
══════════════════════════════════════════════════════════ */
/* The gap is also the raised label's living space: it clears the box by about
   16px, so anything under 1.25rem puts it on top of the field above. */
.auth-form{ display:flex; flex-direction:column; gap:1.25rem; }

.field{ display:block; position:relative; }

.f-box{
  position:relative;
  display:flex; align-items:center;
  background:var(--surf);
  border:1.5px solid var(--line);
  border-radius:var(--r-fld);
  transition:border-color .22s var(--e-std), box-shadow .22s var(--e-std), background .22s var(--e-std);
}
.f-box:hover{ border-color:#C9D2DE; }
.f-box:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,153,42,.13);
}

.f-ic{
  flex:0 0 auto; display:grid; place-items:center;
  width:44px; height:var(--fld-h); color:var(--body-l);
  transition:color .22s var(--e-std);
}
.f-ic svg,
.f-ic i[data-lucide]{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.f-box:focus-within .f-ic{ color:var(--gold); }

.f-box input{
  flex:1 1 auto; min-width:0;
  height:var(--fld-h); padding:0 .5rem 0 0;
  border:none; outline:none; background:none;
  font-family:var(--f-b);
  font-size:16px;            /* 16px keeps iOS from zooming on focus */
  color:var(--ink);
}
.f-box input::placeholder{ color:transparent; }
.f-box input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--surf) inset;
}

/* Floating label. Raised, it sits on the border and masks it with its own
   background, so it reads as a notch. The raise used to be a percentage of
   the label's own line box — 24px tall for 15px text — which made it depend
   on the leading and on the box height at the same time, so the notch drifted
   off the border by 2px the moment the controls grew on a phone. */
.f-box label{
  position:absolute; left:40px; top:50%;
  transform:translateY(-50%);
  transform-origin:left center;
  padding-inline:.3rem;
  font-size:15px; color:var(--body-l);
  pointer-events:none; white-space:nowrap;
  background:var(--surf);
  transition:transform .2s var(--e-emph), color .2s var(--e-std), font-size .2s var(--e-emph);
}
/* -50% undoes the resting centring, half the box height carries the label to
   the top edge, and --lab-lift places it against the border. Every term is in
   pixels of the box, so 52px and 56px controls notch it in the same place. */
.f-box input:focus + label,
.f-box input:not(:placeholder-shown) + label{
  transform:translate(-4px,calc(-50% - (var(--fld-h) / 2) - var(--lab-lift))) scale(.86);
  color:var(--gold);
}
.field.no-ic .f-box label{ left:12px; }
.field.no-ic .f-box input{ padding-left:15px; }

.pass-toggle{
  flex:0 0 auto; width:46px; height:var(--fld-h);
  display:grid; place-items:center; color:var(--body-l);
  border-radius:0 var(--r-fld) var(--r-fld) 0;
  transition:color .2s var(--e-std), background .2s var(--e-std);
}
.pass-toggle:hover{ color:var(--ink); background:var(--surf-2); }
.pass-toggle svg,
.pass-toggle i[data-lucide]{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.pass-toggle .eye-off{ display:none; }
.pass-toggle.is-on .eye-on{ display:none; }
.pass-toggle.is-on .eye-off{ display:block; }

/* per-field valid tick */
.f-tick{
  position:absolute; right:14px; top:50%; z-index:2;
  width:20px; height:20px; margin-top:-10px;
  border-radius:50%; background:var(--ok);
  display:grid; place-items:center;
  opacity:0; transform:scale(.4);
  transition:opacity .24s var(--e-std), transform .34s var(--e-spring);
  pointer-events:none;
}
.f-tick svg,
.f-tick i[data-lucide]{
  width:12px; height:12px; fill:none; stroke:#fff;
  stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;
}
.field.is-ok .f-tick{ opacity:1; transform:scale(1); }
.field.is-ok:not(:focus-within) .f-box{ border-color:#BFE6D5; }
.field.has-toggle .f-tick{ right:52px; }   /* clear of the eye button */

/* ── Error state + shake ─────────────────────────────── */
.field.is-err .f-box{
  border-color:var(--danger);
  background:var(--danger-s);
  animation:shake .5s cubic-bezier(.36,.07,.19,.97);
}
.field.is-err .f-box:focus-within{ box-shadow:0 0 0 4px rgba(214,69,69,.12); }
.field.is-err .f-ic,
.field.is-err .f-box label{ color:var(--danger); }
.field.is-err .f-box label{ background:var(--danger-s); }

@keyframes shake{
  0%,100%{ transform:translateX(0); }
  14%{ transform:translateX(-9px); }
  28%{ transform:translateX(8px); }
  42%{ transform:translateX(-6px); }
  56%{ transform:translateX(4px); }
  72%{ transform:translateX(-2px); }
}

.f-msg{
  display:flex; align-items:flex-start; gap:.35rem;
  font-size:.76rem; font-weight:500; color:var(--danger);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .28s var(--e-emph), opacity .22s var(--e-std), margin .28s var(--e-emph);
}
.f-msg svg{ width:13px; height:13px; margin-top:3px; flex:0 0 auto; fill:currentColor; }
.field.is-err .f-msg{ max-height:3.4em; opacity:1; margin-top:.42rem; }
/* a shaken field with no inline text keeps its row collapsed */
.field.is-err .f-msg:has(span:empty){ max-height:0; opacity:0; margin-top:0; }

/* ══════════════════════════════════════════════════════════
   PASSWORD STRENGTH  +  CAPS LOCK
══════════════════════════════════════════════════════════ */
.strength{
  display:flex; align-items:center; gap:.5rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .3s var(--e-emph), opacity .24s var(--e-std), margin .3s var(--e-emph);
}
.strength.on{ max-height:2.4em; opacity:1; margin-top:.55rem; }
.s-bars{ display:flex; gap:4px; flex:1 1 auto; }
.s-bars i{ flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .3s var(--e-std); }
.s-txt{
  font-family:var(--f-h); font-size:.7rem; font-weight:700;
  letter-spacing:.03em; color:var(--body-l); min-width:58px; text-align:right;
}
.strength[data-score="1"] .s-bars i:nth-child(-n+1){ background:#E0574F; }
.strength[data-score="2"] .s-bars i:nth-child(-n+2){ background:#E8A33D; }
.strength[data-score="3"] .s-bars i:nth-child(-n+3){ background:#3FA9E0; }
.strength[data-score="4"] .s-bars i{ background:var(--ok); }
.strength[data-score="1"] .s-txt{ color:#E0574F; }
.strength[data-score="2"] .s-txt{ color:#C8862B; }
.strength[data-score="3"] .s-txt{ color:#2E8DC0; }
.strength[data-score="4"] .s-txt{ color:var(--ok); }

.caps{
  display:none; align-items:center; gap:.35rem; margin-top:.45rem;
  font-size:.74rem; font-weight:600; color:#C8862B;
}
.caps.on{ display:flex; }
.caps svg,
.caps i[data-lucide]{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ══════════════════════════════════════════════════════════
   OPTIONS / CHECKBOX
══════════════════════════════════════════════════════════ */
.form-options{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-top:-.35rem;
}
.check{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem; color:var(--body); cursor:pointer;
  min-height:44px;                 /* comfortable touch target */
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check > span{
  position:relative; flex:0 0 auto;
  width:20px; height:20px; border-radius:6px;
  border:1.7px solid #C4CEDB; background:var(--surf);
  transition:background .2s var(--e-std), border-color .2s var(--e-std);
}
.check > span::after{
  content:''; position:absolute; left:6px; top:2px;
  width:6px; height:11px;
  border-right:2.4px solid #fff; border-bottom:2.4px solid #fff;
  transform:rotate(42deg) scale(0); transform-origin:center;
  transition:transform .26s var(--e-spring);
}
.check input:checked + span{ background:var(--gold); border-color:var(--gold); }
.check input:checked + span::after{ transform:rotate(42deg) scale(1); }
.check input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

.check-terms{ align-items:flex-start; font-size:.8rem; line-height:1.55; padding-block:.3rem; }
.check-terms > span{ margin-top:2px; }
.check-terms a{ color:var(--gold); font-weight:600; }
.check-terms.is-err > span{ border-color:var(--danger); animation:shake .5s cubic-bezier(.36,.07,.19,.97); }

.text-link{
  font-family:var(--f-h); font-size:.8rem; font-weight:600; color:var(--gold);
  padding:.4rem 0;
}
.text-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ══════════════════════════════════════════════════════════
   SUBMIT - morphs to a circle and draws a checkmark
══════════════════════════════════════════════════════════ */
.auth-submit{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; height:54px; margin-top:.35rem;
  border-radius:var(--r-btn);
  background:var(--navy); color:#fff;
  font-family:var(--f-h); font-size:.92rem; font-weight:700;
  box-shadow:0 6px 18px rgba(15,36,69,.22);
  transition:
    width .5s var(--e-emph),
    border-radius .5s var(--e-emph),
    background .35s var(--e-std),
    box-shadow .35s var(--e-std),
    transform .2s var(--e-std);
}
.auth-submit:hover{ background:var(--navy-l); box-shadow:0 10px 26px rgba(15,36,69,.3); }
.auth-submit:active{ transform:scale(.985); }

.s-label{
  display:inline-flex; align-items:center; gap:.5rem;
  transition:opacity .22s var(--e-std), transform .3s var(--e-emph);
}
.s-label svg,
.s-label i[data-lucide]{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s var(--e-emph);
}
.auth-submit:hover .s-label svg{ transform:translateX(3px); }

.s-spin{
  position:absolute; width:22px; height:22px; border-radius:50%;
  border:2.2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  opacity:0; transform:scale(.5);
  transition:opacity .2s var(--e-std), transform .3s var(--e-emph);
}
.s-check{
  position:absolute; width:26px; height:26px;
  fill:none; stroke:#fff; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0;
}
.s-check path{ stroke-dasharray:30; stroke-dashoffset:30; }

.auth-submit.is-busy{ pointer-events:none; }
.auth-submit.is-busy .s-label{ opacity:0; transform:translateY(-8px); }
.auth-submit.is-busy .s-spin{ opacity:1; transform:scale(1); animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

.auth-submit.is-done{
  width:54px; border-radius:50%;
  background:var(--ok); pointer-events:none;
  box-shadow:0 8px 26px rgba(21,160,106,.42);
}
.auth-submit.is-done .s-label{ opacity:0; transform:scale(.7); }
.auth-submit.is-done .s-spin{ opacity:0; transform:scale(.4); animation:none; }
.auth-submit.is-done .s-check{ opacity:1; }
.auth-submit.is-done .s-check path{ animation:draw .42s .14s var(--e-emph) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* touch ripple */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.4);
  transform:scale(0); opacity:.75;
  animation:ripple .55s var(--e-std) forwards;
}
.social-btn .ripple{ background:rgba(15,36,69,.13); }
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

/* ══════════════════════════════════════════════════════════
   FORM-LEVEL BANNER
══════════════════════════════════════════════════════════ */
.form-message{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.8rem; font-weight:500;
  border-radius:10px;
  max-height:0; opacity:0; overflow:hidden; padding:0 .85rem;
  transition:max-height .3s var(--e-emph), opacity .24s var(--e-std),
             padding .3s var(--e-emph), margin .3s var(--e-emph);
}
.form-message svg{ width:15px; height:15px; margin-top:2px; flex:0 0 auto; }
.form-message.show{ max-height:6em; opacity:1; padding:.7rem .85rem; margin-top:.15rem; }
.form-message.err{
  color:#A8302F; background:var(--danger-s); border:1px solid #F5D5D5;
  animation:shake .5s cubic-bezier(.36,.07,.19,.97);
}
.form-message.ok{ color:#0B7A50; background:#EAF8F2; border:1px solid #CDEDDF; }

/* ══════════════════════════════════════════════════════════
   DIVIDER / SOCIAL / SWITCH / DEMO
══════════════════════════════════════════════════════════ */
.auth-divider{
  display:flex; align-items:center; gap:.9rem;
  margin:1.5rem 0 1.15rem;
  font-size:.74rem; color:var(--body-l);
}
.auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }

.social-login{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.social-btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  height:48px; border-radius:var(--r-btn);
  border:1.5px solid var(--line); background:var(--surf);
  font-family:var(--f-h); font-size:.85rem; font-weight:600; color:var(--ink);
  transition:border-color .22s var(--e-std), background .22s var(--e-std), transform .22s var(--e-std);
}
.social-btn:hover{ border-color:#C9D2DE; background:var(--surf-2); }
.social-btn:active{ transform:scale(.985); }
.social-btn svg{ width:17px; height:17px; }
.social-btn b{
  font-family:var(--f-h); font-size:1rem; font-weight:800;
  background:conic-gradient(from -45deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.auth-switch{
  margin-top:1.6rem; text-align:center;
  font-size:.85rem; color:var(--body);
}
.auth-switch a{
  font-family:var(--f-h); font-weight:700; color:var(--gold);
  display:inline-flex; align-items:center; gap:.3rem;
}
.auth-switch a span{ transition:transform .26s var(--e-emph); }
.auth-switch a:hover span{ transform:translateX(4px); }

/* front-end-only build: lets the demo credentials be tried quickly */
.demo-hint{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-bottom:1.15rem; padding:.6rem .7rem .6rem .85rem;
  border:1px dashed #D8DFE9; border-radius:10px;
  background:var(--surf-2);
  font-size:.74rem; color:var(--body);
}
.demo-hint button{
  flex:0 0 auto;
  font-family:var(--f-h); font-size:.72rem; font-weight:700; color:var(--gold);
  padding:.34rem .6rem; border-radius:7px;
  transition:background .2s var(--e-std);
}
.demo-hint button:hover{ background:var(--gold-p); }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* ══════════════════════════════════════════════════════════
   SUCCESS OVERLAY
══════════════════════════════════════════════════════════ */
.auth-done{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .34s var(--e-std), visibility .34s;
}
.auth-done.show{ opacity:1; visibility:visible; }
.done-in{ text-align:center; padding:2rem; transform:translateY(14px); transition:transform .5s var(--e-emph); }
.auth-done.show .done-in{ transform:none; }
.done-ring{
  width:82px; height:82px; margin:0 auto 1.35rem;
  border-radius:50%; background:var(--ok);
  display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(21,160,106,.34);
  animation:ring 1.6s var(--e-std) infinite;
}
@keyframes ring{
  70%{ box-shadow:0 0 0 22px rgba(21,160,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(21,160,106,0); }
}
.done-ring svg,
.done-ring i[data-lucide]{ width:40px; height:40px; fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.done-ring path{ stroke-dasharray:32; stroke-dashoffset:32; }
.auth-done.show .done-ring path{ animation:draw .5s .18s var(--e-emph) forwards; }
.done-in h3{ font-size:1.35rem; margin-bottom:.4rem; }
.done-in p{ font-size:.86rem; color:var(--body); }

/* app bar belongs to the mobile presentation only */
.app-bar{ display:none; }

/* ══════════════════════════════════════════════════════════
   MOBILE - native Android app presentation
══════════════════════════════════════════════════════════ */
@media (max-width:1023px){
    .auth-visual-copy{
        display:none;
    }
  
    .auth-shell {
        grid-template-columns: 1fr;
        min-height: 100dvh;
    }

  /* hero acts as a Material "large top app bar" */
  .auth-visual{
    min-height:clamp(186px,29vh,244px);
    /* The wave crops into the bottom of the hero, so the copy needs to stop
       clear of it — the old 2.5rem was measured against a straight edge. */
    padding:calc(env(safe-area-inset-top,0px) + .85rem) 1.25rem calc(var(--wave-h) + 1.4rem);
    border-radius:0;
  }
  /* Anchored to the panel's top edge and drawn upward into the hero. The 1px
     of overlap is deliberate: at fractional device pixel ratios an exact edge
     match leaves a hairline of hero showing along the join. */
  .sheet-wave{
    display:block;
    position:absolute;
    left:0; right:0; bottom:calc(100% - 1px);
    width:100%; height:var(--wave-h);
    fill:var(--surf);
    pointer-events:none;
  }
  /* the showcase extras belong to the desktop panel only */
  .v-verticals,.visual-footer{ display:none; }
  /* the compact hero is wide and short, so `cover` frames it fine */
  .auth-visual::before{ background-size:cover; background-position:right center; }
  /* less room here, so the scrim leans darker for contrast */
  .auth-visual::after{
    background:linear-gradient(170deg,rgba(5,15,38,.62),rgba(7,22,52,.86));
  }
  .auth-brand{ margin-bottom:.15rem; }
  
  
  .brand-word b{ font-size:1rem; }
  .brand-word i{ font-size:.5rem; letter-spacing:.28em; }

  .app-bar{
    position:relative; z-index:3;
    display:flex; align-items:center; gap:.35rem;
    margin:0 -.35rem .25rem;
  }
  .app-back{
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; color:#fff;
    transition:background .2s var(--e-std);
  }
  .app-back:active{ background:rgba(255,255,255,.14); }
  .app-back svg,
  .app-back i[data-lucide]{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .app-title{ font-family:var(--f-h); font-size:.98rem; font-weight:700; color:#fff; }

  /* the compact hero still reads best bottom-aligned under the brand, so it
     keeps the old single auto margin rather than the desktop centring */
  .auth-visual-copy{ margin-top:auto; padding-top:1.1rem; max-width:none; }
  .auth-visual-copy h1{ font-size:clamp(1.45rem,6.4vw,1.9rem); }
  .auth-visual-copy > p{ font-size:.78rem; line-height:1.6; max-width:34ch; }
  .v-rule{ width:28px; height:2px; margin:.85rem 0 .7rem; }

  /* form rises as a bottom sheet over the hero, capped by the wave. The
     panel is pulled up by the wave's own height so the curve is what
     overlaps the hero — the sheet's square top edge hides underneath it. */
  .auth-panel{
    margin-top:calc(var(--wave-h) * -1);
    border-radius:0;
    padding:0 1.25rem calc(env(safe-area-inset-bottom,0px) + 1.5rem);
    background:var(--surf);
    box-shadow:0 -8px 30px rgba(15,36,69,.10);
    z-index:4;
  }
  .auth-panel::before{           /* sheet grabber */
    content:''; display:block;
    width:38px; height:4px; border-radius:2px;
    background:#DFE5EE; margin:.7rem auto 1.1rem;
  }
  .auth-top{ display:none; }
  .auth-form-wrap,.auth-register-wrap{
    max-width:520px; padding-block:.4rem 0; margin-inline:auto;
  }

  .form-kicker{ display:none; }
  .auth-form-wrap h2{ font-size:1.35rem; }
  .form-intro{ font-size:.85rem; margin-bottom:1.35rem; }

  /* thumb-friendly control sizing — one token, and the floating label
     follows it instead of having to be re-tuned alongside */
  :root{ --fld-h:56px; }
  .auth-submit{ height:56px; font-size:.95rem; }
  .auth-submit.is-done{ width:56px; }
  .social-btn{ height:52px; }

  .auth-switch{ margin-top:1.5rem; padding-top:1.15rem; border-top:1px solid var(--line); }
}

@media (max-width:420px){
  /* Stacked, the .75rem that was only ever a column gap becomes the row gap
     too — and 12px is less than the raised label is tall. */
  .field-grid{ grid-template-columns:1fr; gap:1.25rem; }
  .social-login{ grid-template-columns:1fr; }
  .form-options{ gap:.25rem; }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .s-check path,.done-ring path{ stroke-dashoffset:0 !important; }
}