/* =========================================================================
   VERSO LOGIN THEME
   Palette, type, and motion language matched to the Voicentra Research
   design system (same --violet tokens, Fraunces/Manrope/IBM Plex Mono,
   grain overlay, fadeUp/floatOrb keyframes, cubic-bezier(0.25,0.46,0.45,0.94)
   easing) so this login page reads as one family with that site.
   ========================================================================= */

:root{
  --bg:#FFFBF7;
  --bg-alt:#FFF3EA;
  --surface:#FFFFFF;
  --surface-2:#FFEEDE;
  --line:#F5DFC9;
  --violet:#F4661B;
  --violet-bright:#E85D04;
  --violet-glow:#FF8C42;
  --text:#2B1B12;
  --text-muted:#8A6E5A;
  --text-faint:#C4A488;
  --danger:#D6456B;
  --danger-bg:#FBEAEF;
  --amber:#B8842A;
  --amber-bg:#FBF3E4;
  --display:'Fraunces', serif;
  --body:'Manrope', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --ease:cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ height:100%; }

body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  overflow:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

::selection{ background:var(--violet); color:#fff; }

#grain{
  position:fixed; inset:0; z-index:250; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  height:100vh;
  width:100%;
}

/* ---------- BRAND PANEL ---------- */
.brand{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:56px 60px;
  background:linear-gradient(160deg, #4A2107 0%, #A6450D 100%);
  color:#fff;
}

.brand-media{ position:absolute; inset:0; z-index:0; }
.brand-media .poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.5;
}
.brand-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s ease;
}
.brand-media video.is-ready{ opacity:0.55; }

.brand::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(circle at 15% 15%, rgba(244,102,27,0.35), transparent 55%),
    linear-gradient(160deg, rgba(30,13,3,0.75) 0%, rgba(110,52,10,0.5) 55%, rgba(20,9,3,0.85) 100%);
}

.brand-canvas{ position:absolute; inset:0; z-index:2; }

.brand-mid{
  position:relative; z-index:3;
  display:flex; flex-direction:column; justify-content:center;
  flex:1;
}

.brand-logo{
  display:flex; align-items:center; gap:12px;
  opacity:0; animation:fadeUp .9s var(--ease) forwards .1s;
}
.brand-logo-text{
  font-family:var(--display); font-weight:600; font-size:3.4rem; letter-spacing:0.01em;
  color:#fff; line-height:1;
}
.brand-logo-text span{ color:#FFC08A; }

.brand-heading{
  margin-top:26px;
  font-family:var(--display); font-weight:500; letter-spacing:-0.01em;
  font-size:clamp(2rem, 3.4vw, 2.7rem); line-height:1.18; max-width:12ch;
  opacity:0; animation:fadeUp 1s var(--ease) forwards .25s;
}
.brand-heading em{
  font-style:italic; font-weight:400;
  background:linear-gradient(90deg, #FFD8B4, #FFB877, #FFEFE0, #FFD8B4);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s ease-in-out infinite;
}

.brand-sub{
  margin-top:18px; max-width:34ch;
  font-size:1rem; line-height:1.65; font-weight:300; color:rgba(255,255,255,0.82);
  opacity:0; animation:fadeUp 1s var(--ease) forwards .4s;
}

.brand-foot{
  position:relative; z-index:3;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em;
  color:rgba(255,255,255,0.6);
  opacity:0; animation:fadeUp 1s var(--ease) forwards .55s;
}

.brand-copyright{
  position:relative; z-index:3; margin-top:10px;
  font-size:0.76rem; color:rgba(255,255,255,0.35);
}

@keyframes floatOrb{
  0%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-40px) scale(1.1); }
  66%{ transform:translate(-20px,30px) scale(0.9); }
  100%{ transform:translate(10px,-20px) scale(1.05); }
}
@keyframes shimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- FORM PANEL ---------- */
.panel{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  padding:40px;
}

.orb{
  position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;
  animation:floatOrb 14s ease-in-out infinite alternate;
}
.orb-a{
  width:340px; height:340px; top:-80px; right:-60px;
  background:radial-gradient(circle, rgba(244,102,27,0.18), transparent 70%);
}
.orb-b{
  width:280px; height:280px; bottom:-90px; left:-70px;
  background:radial-gradient(circle, rgba(232,93,4,0.14), transparent 70%);
  animation-delay:5s;
}

.card{
  position:relative; z-index:1;
  width:100%; max-width:400px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:44px 40px 36px;
  box-shadow:0 30px 70px -30px rgba(120,54,7,0.28);
}

.seal{
  width:44px; height:44px;
  display:block; margin:0 auto 20px;
  stroke:var(--violet-bright); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.seal path:first-child{
  stroke-dasharray:130; stroke-dashoffset:130;
  animation:drawSeal 1s var(--ease) forwards .15s;
}
.seal path:last-child{
  animation:drawSeal .5s var(--ease) forwards 1.1s;
}
@keyframes drawSeal{ to{ stroke-dashoffset:0; } }

.card h2{
  font-family:var(--display); font-weight:500; font-size:1.5rem; text-align:center;
  color:var(--text); letter-spacing:-0.01em;
}

.card .lead{
  margin-top:8px; text-align:center;
  font-size:0.92rem; color:var(--text-muted);
}

.stagger{ opacity:0; animation:fadeUp .7s var(--ease) forwards; animation-delay:var(--d, 0s); }

.field{ margin-top:22px; }
.field label{
  display:block; margin-bottom:8px;
  font-size:0.82rem; font-weight:600; color:var(--text-muted);
  letter-spacing:0.01em;
}

.field-input{
  position:relative;
  display:flex; align-items:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg-alt);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field-input:focus-within{
  border-color:var(--violet);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(244,102,27,0.12);
}
.field-input.invalid{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(214,69,107,0.1); }

.icon-left{
  padding-left:14px;
  color:var(--text-faint);
  font-size:0.85rem;
}

.field-input input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  padding:13px 14px;
  font-family:var(--body); font-size:0.95rem; color:var(--text);
}
.field-input input::placeholder{ color:var(--text-faint); }

.toggle-visibility{
  background:none; border:none; cursor:pointer;
  padding:0 14px;
  color:var(--text-faint);
  transition:color .2s ease;
}
.toggle-visibility:hover{ color:var(--violet-bright); }

.field-hint{
  display:none;
  align-items:center; gap:6px;
  margin-top:7px;
  font-size:0.78rem; color:var(--danger);
}
.field-hint.show{ display:flex; }

.capslock{
  display:none;
  align-items:center; gap:6px;
  margin-top:7px;
  font-size:0.78rem; color:var(--amber);
}
.capslock.show{ display:flex; }

.row-between{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px;
}
.remember{
  display:flex; align-items:center; gap:8px;
  font-size:0.85rem; color:var(--text-muted); cursor:pointer;
}
.remember input{ accent-color:var(--violet-bright); width:15px; height:15px; }

.error-banner, .lockout-banner{
  display:none;
  align-items:flex-start; gap:9px;
  margin-top:18px; padding:12px 14px;
  border-radius:10px;
  font-size:0.84rem; line-height:1.5;
}
.error-banner.show, .lockout-banner.show{ display:flex; }
.error-banner{ background:var(--danger-bg); color:var(--danger); }
.lockout-banner{ background:var(--amber-bg); color:var(--amber); }
.error-banner i, .lockout-banner i{ margin-top:2px; }

.btn-primary{
  position:relative;
  width:100%; margin-top:24px;
  padding:14px 20px;
  border:none; border-radius:11px; cursor:pointer;
  font-family:var(--body); font-size:0.95rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--violet-bright), var(--violet-glow));
  box-shadow:0 10px 28px -10px rgba(244,102,27,0.55);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .2s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(232,93,4,0.65); }
.btn-primary:disabled{ cursor:not-allowed; opacity:0.75; transform:none; }

.btn-primary .spinner{
  display:none;
  position:absolute; left:50%; top:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn-primary.loading .btn-label{ opacity:0; }
.btn-primary.loading .spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.success-box{
  display:none;
  flex-direction:column; align-items:center;
  text-align:center;
  padding:20px 0 8px;
  animation:fadeUp .5s var(--ease) forwards;
}
.success-box.show{ display:flex; }
.success-box svg{
  width:52px; height:52px;
  stroke:var(--violet-bright); stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:14px;
}
.success-box svg circle{
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:drawSeal .6s var(--ease) forwards;
}
.success-box svg path{
  stroke-dasharray:30; stroke-dashoffset:30;
  animation:drawSeal .4s var(--ease) forwards .5s;
}
.success-box h3{
  font-family:var(--display); font-weight:500; font-size:1.2rem; color:var(--text);
}
.success-box p{
  margin-top:6px; font-size:0.88rem; color:var(--text-muted);
}

.divider{
  display:flex; align-items:center; gap:12px;
  margin-top:28px;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em;
  color:var(--text-faint);
}
.divider::before, .divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}

.security-note{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:18px; padding:13px 14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px;
  font-size:0.82rem; line-height:1.55; color:var(--text-muted);
}
.security-note i{ margin-top:2px; color:var(--violet-bright); }

@media (max-width: 1024px){
  .brand{ padding:44px 40px; }
  .brand-heading{ max-width:14ch; }
}

@media (max-width: 860px){
  .shell{ grid-template-columns:1fr; height:auto; }
  html, body{ height:auto; overflow-y:auto; }

  .brand{
    min-height:280px;
    padding:32px 28px;
    justify-content:flex-start;
  }
  .brand-sub{ display:none; }
  .brand-foot{ font-size:0.68rem; white-space:normal; line-height:1.4; max-width:80%; }
  .brand-copyright{ display:none; }
  .brand-logo-text{ font-size:2.6rem; }
  .brand-heading{ font-size:1.55rem; max-width:22ch; margin-top:16px; }

  .panel{ padding:32px 20px 56px; align-items:flex-start; }
  .card{ margin-top:-28px; }
}

@media (max-width: 480px){
  .brand{ min-height:230px; padding:26px 22px; }
  .brand-heading{ font-size:1.32rem; }
  .brand-logo-text{ font-size:2.2rem; }
  .card{ padding:32px 22px 26px; border-radius:16px; margin-top:-20px; }
  .field-input input{ font-size:16px; } /* keeps iOS Safari from zooming on focus */
  .remember input{ width:18px; height:18px; }
}