/* ═══════════════════════════════════════════════════════════════════
   NPolls — login and register.

   Both pages used to be one narrow 440px column with two stacked
   headings, so they scrolled instead of sitting on screen. They are now
   a single card split in two: a branded rail that says what an account
   is for, and the form beside it in a two-up grid.

   The card tilts to the pointer and the rail contents lift out of it on
   their own Z planes, so the depth is real perspective rather than a
   drop shadow pretending to be one.
   ═══════════════════════════════════════════════════════════════════ */

.auth-wrap{
  min-height:calc(100vh - 210px);
  display:grid; place-items:center;
  padding:44px 24px 72px;
  perspective:1600px;
}

.auth-card{
  position:relative; width:100%; max-width:1040px;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  border-radius:30px; overflow:hidden; isolation:isolate;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:var(--lift), inset 0 1px 0 rgba(255,255,255,.07);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  animation:authIn .8s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes authIn{
  from{ opacity:0; transform:translateY(26px) rotateX(7deg) scale(.97) }
  to  { opacity:1; transform:none }
}
:root[data-theme="light"] .auth-card{
  box-shadow:0 40px 90px -40px rgba(10,18,38,.35), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Left rail ──────────────────────────────────────────────────── */
.auth-aside{
  position:relative; overflow:hidden;
  padding:40px 38px;
  display:flex; flex-direction:column; gap:22px;
  background:linear-gradient(160deg, rgba(var(--c1-rgb),.14), rgba(var(--c5-rgb),.07) 45%, rgba(var(--c3-rgb),.12));
  border-right:1px solid var(--edge);
}
:root[data-theme="light"] .auth-aside{
  background:linear-gradient(160deg, rgba(var(--c1-rgb),.10), rgba(var(--c5-rgb),.05) 45%, rgba(var(--c3-rgb),.10));
}
/* A slow drifting light behind the rail. */
.auth-aside .aura{
  position:absolute; width:460px; height:460px; left:-140px; top:-130px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--c1), transparent 62%);
  opacity:.30; filter:blur(72px);
  animation:auraDrift 14s ease-in-out infinite;
}
@keyframes auraDrift{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%    { transform:translate(70px,60px) scale(1.14) }
  66%    { transform:translate(24px,-46px) scale(.94) }
}
/* Faint graph paper, so the rail is not a flat wash. */
.auth-aside .mesh{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 20%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse at 30% 20%, #000, transparent 78%);
}
.auth-aside > *:not(.aura):not(.mesh){ position:relative; z-index:1; }

.auth-brand{ display:flex; align-items:center; gap:11px; transform:translateZ(38px); }
.auth-brand .mark{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-cta); box-shadow:var(--glow-a);
}
.auth-brand .mark .i{ width:19px; height:19px; color:var(--on-cta); }
.auth-brand .wm{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; }

.auth-hl{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(25px,2.6vw,34px); line-height:1.08; margin:6px 0 0;
  transform:translateZ(52px);
}
.auth-hl .accent{
  background:linear-gradient(105deg,var(--c1),var(--c5) 55%,var(--c3));
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:heroSweep 8s linear infinite;
}
.auth-dek{
  color:var(--txt-2); font-size:14px; line-height:1.6; margin:0; max-width:34ch;
  transform:translateZ(30px);
}

.auth-perks{
  list-style:none; margin:auto 0 0; padding:0;
  display:grid; gap:14px; transform:translateZ(24px);
}
.auth-perks li{ display:flex; gap:12px; align-items:flex-start; margin:0; }
.auth-perks .pi{
  flex-shrink:0; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--c3);
  transition:transform var(--mid) var(--spring), color var(--mid) var(--ease);
}
.auth-perks li:hover .pi{ transform:translateY(-2px) rotate(-6deg); color:var(--c1); }
.auth-perks .pi .i{ width:17px; height:17px; }
.auth-perks span{ font-size:12.5px; color:var(--txt-2); line-height:1.5; }
.auth-perks span strong{ display:block; font-size:13.5px; font-weight:700; color:var(--txt); margin-bottom:1px; }

.auth-trust{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:11.5px; color:var(--txt-3); line-height:1.45;
  padding-top:16px; border-top:1px solid var(--edge);
}
.auth-trust .i{ width:15px; height:15px; flex-shrink:0; color:var(--c3); }

/* ── Right rail: the form ───────────────────────────────────────── */
.auth-form{ padding:40px 42px; display:flex; flex-direction:column; gap:22px; }
.af-head{ display:flex; align-items:center; gap:14px; }
.af-icon{
  width:46px; height:46px; border-radius:15px; flex-shrink:0;
  display:grid; place-items:center; position:relative;
  background:var(--glass-2); border:1px solid var(--edge-2); color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.af-icon .i{ width:21px; height:21px; }
/* A ring that breathes, so the header has a pulse of its own. */
.af-icon::after{
  content:""; position:absolute; inset:-4px; border-radius:19px;
  border:1px solid var(--c1); opacity:0;
  animation:afPulse 3.2s ease-out infinite;
}
@keyframes afPulse{
  0%  { opacity:.5; transform:scale(.9) }
  70% { opacity:0;  transform:scale(1.12) }
  100%{ opacity:0;  transform:scale(1.12) }
}
.af-head h1{ font-family:var(--display); font-weight:800; font-size:clamp(20px,2.1vw,26px); margin:0; letter-spacing:-.02em; }
.af-head p{ margin:2px 0 0; font-size:13px; color:var(--txt-2); }

.auth-form .form{ display:flex; flex-direction:column; gap:18px; }
/* Two up, so four fields take two rows instead of four. */
.af-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.af-grid.one{ grid-template-columns:1fr; }
.af-cell{ display:grid; gap:7px; min-width:0; }
.auth-form .label{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--txt-2); }

.auth-form .field{
  position:relative; display:flex; align-items:center;
  border-radius:14px; background:var(--glass-2);
  border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.auth-form .field > .i{
  position:absolute; left:14px; width:17px; height:17px; color:var(--txt-3);
  pointer-events:none; transition:color var(--fast) var(--ease);
}
.auth-form .field .input{
  width:100%; background:transparent; border:0; outline:0;
  padding:13px 14px 13px 42px; font-family:var(--body); font-size:14.5px; color:var(--txt);
}
.auth-form .field .input::placeholder{ color:var(--txt-3); }
.auth-form .field:focus-within{
  border-color:transparent; background:var(--glass);
  box-shadow:0 0 0 1.5px var(--c1), 0 0 26px -8px var(--c1);
}
.auth-form .field:focus-within > .i{ color:var(--c1); }

/* Show/hide. A password field people cannot read back is a support
   ticket waiting to happen. */
.peek{
  background:none; border:0; cursor:pointer; padding:0 13px 0 8px;
  color:var(--txt-3); display:grid; place-items:center;
  transition:color var(--fast) var(--ease);
}
.peek:hover{ color:var(--txt); }
.peek .i{ width:17px; height:17px; }

/* Strength meter */
.pw-meter{ display:flex; align-items:center; gap:10px; }
.pw-meter .bars{ display:flex; gap:4px; flex:1; }
.pw-meter .bars i{
  flex:1; height:3px; border-radius:99px; background:var(--glass-2);
  transition:background .35s var(--ease);
}
.pw-meter .lbl{ font-size:11px; font-weight:600; color:var(--txt-3); min-width:52px; text-align:right; }
.pw-meter[data-level="1"] .bars i:nth-child(-n+1){ background:var(--c1); }
.pw-meter[data-level="2"] .bars i:nth-child(-n+2){ background:var(--c5); }
.pw-meter[data-level="3"] .bars i:nth-child(-n+3){ background:var(--c5); }
.pw-meter[data-level="4"] .bars i{ background:var(--c3); }

.match-note{ font-size:11.5px; margin:0; color:var(--txt-3); min-height:1em; }
.match-note.ok{ color:var(--c3); }
.match-note.no{ color:var(--c1); }

.af-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:0; border:0; margin:0;
}
.remember{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--txt-2); cursor:pointer; }
.remember input{ width:16px; height:16px; accent-color:var(--c1); cursor:pointer; }
.auth-form .link{ font-size:13px; color:var(--c3); text-decoration:none; }
.auth-form .link:hover{ text-decoration:underline; }

/* ── Submit ─────────────────────────────────────────────────────── */
.btn-xl{
  position:relative; overflow:hidden; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:100px; border:0; cursor:pointer;
  font-family:var(--body); font-size:15px; font-weight:700; color:var(--on-cta);
  background:var(--grad-cta); background-size:200% auto;
  box-shadow:var(--glow-a);
  transition:transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease), background-position .6s var(--ease);
}
.btn-xl:hover{ transform:translateY(-2px); background-position:right center; box-shadow:0 16px 44px -14px var(--c1); }
.btn-xl:active{ transform:translateY(0); }
.btn-xl .i{ width:18px; height:18px; }
.btn-xl::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  transform:translateX(-100%);
}
.btn-xl:hover::after{ animation:pillSheen 1.1s var(--ease); }

.auth-form .foot{ text-align:center; font-size:13.5px; color:var(--txt-2); }
.auth-form .foot a{ color:var(--c3); font-weight:600; text-decoration:none; }
.auth-form .foot a:hover{ text-decoration:underline; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .auth-card{ grid-template-columns:1fr; max-width:560px; }
  /* On one column the rail becomes a short banner: the perks would
     otherwise push the form off screen, which is the problem this
     layout exists to solve. */
  .auth-aside{ border-right:0; border-bottom:1px solid var(--edge); padding:30px 30px 28px; gap:16px; }
  .auth-perks, .auth-trust{ display:none; }
  .auth-form{ padding:30px; }
  .af-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .auth-wrap{ padding:24px 16px 56px; }
  .auth-card{ border-radius:24px; }
  .auth-aside, .auth-form{ padding:24px 22px; }
}

@media (prefers-reduced-motion:reduce){
  .auth-card, .auth-aside .aura, .af-icon::after, .auth-hl .accent{ animation:none; }
  .auth-card{ transform:none !important; }
  .btn-xl:hover{ transform:none; }
  .btn-xl:hover::after{ animation:none; }
}