/* ==========================================================================
   Sourcing & Logistics — Auth Pages Stylesheet
   Plain CSS. No build step. Link directly via <link rel="stylesheet">.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy-950: #0a1628;
  --navy-900: #0e1f38;
  --navy-800: #142a4a;
  --navy-700: #1c3a63;
  --steel-500: #3d5a80;
  --amber-500: #f2994a;
  --amber-400: #f4a962;
  --amber-600: #d97e2e;
  --ink-900: #0f172a;
  --ink-600: #475569;
  --ink-400: #94a3b8;
  --paper-0: #ffffff;
  --paper-50: #f7f8fa;
  --paper-100: #eef1f5;
  --line-200: #e2e8f0;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #991b1b;
  --ok-500: #2fae66;

  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --shadow-card: 0 20px 60px -20px rgba(10, 22, 40, 0.35), 0 4px 16px -4px rgba(10, 22, 40, 0.12);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-900);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand-word{ font-family: 'Sora', 'Inter', sans-serif; }

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

/* ---------------------------------------------------------------------- */
/* Shell: split screen                                                    */
/* ---------------------------------------------------------------------- */
.auth-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* ---------------------------------------------------------------------- */
/* Left panel — brand / route visual                                      */
/* ---------------------------------------------------------------------- */
.auth-visual{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(61, 90, 128, 0.55), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(242, 153, 74, 0.18), transparent 40%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color: var(--paper-0);
}

/* grid backdrop, like a shipping map graticule */
.auth-visual::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 45%, black 40%, transparent 85%);
  animation: grid-drift 40s linear infinite;
}
@keyframes grid-drift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 42px 84px, 42px 84px; }
}

.auth-visual-top{ position: relative; z-index: 2; }
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.brand-mark{
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
  display: grid; place-items: center;
  box-shadow: 0 6px 18px -4px rgba(242, 153, 74, 0.55);
  flex-shrink: 0;
}
.brand-mark svg{ width: 18px; height: 18px; }
.brand-word b{ color: var(--amber-400); font-weight: 700; }

.auth-visual-headline{
  position: relative;
  z-index: 2;
  margin-top: 40px;
  max-width: 420px;
}
.auth-visual-headline h1{
  font-size: 2.15rem;
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.auth-visual-headline p{
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* signature element: animated route line connecting supply-chain nodes */
.route-map{
  position: relative;
  z-index: 2;
  margin: 44px 0 8px;
  width: 100%;
  max-width: 440px;
}
.route-map svg{ width: 100%; height: auto; display: block; }

.route-path{
  fill: none;
  stroke: rgba(242, 153, 74, 0.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  animation: route-flow 6s linear infinite;
}
@keyframes route-flow{
  to{ stroke-dashoffset: -140; }
}
.route-path-ghost{
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 2;
  stroke-linecap: round;
}
.route-node{ fill: var(--navy-900); stroke: var(--amber-400); stroke-width: 2; }
.route-node.is-active{ fill: var(--amber-400); }
.route-pulse{
  fill: rgba(242, 153, 74, 0.55);
  animation: pulse-ring 2.6s var(--ease-out) infinite;
  transform-origin: center;
}
.route-pulse.delay-1{ animation-delay: .9s; }
.route-pulse.delay-2{ animation-delay: 1.8s; }
@keyframes pulse-ring{
  0%{ opacity: 0.6; transform: scale(0.4); }
  70%{ opacity: 0; transform: scale(2.6); }
  100%{ opacity: 0; transform: scale(2.6); }
}

.auth-visual-stats{
  position: relative;
  z-index: 2;
  display: flex;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.auth-visual-stats div b{
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--paper-0);
}
.auth-visual-stats div span{
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------- */
/* Right panel — form                                                     */
/* ---------------------------------------------------------------------- */
.auth-formside{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: var(--paper-50);
}

.auth-card{
  width: 100%;
  max-width: 400px;
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 38px 34px 32px;
  animation: card-enter 0.6s var(--ease-out) both;
}
@keyframes card-enter{
  from{ opacity: 0; transform: translateY(14px) scale(0.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.auth-card-header{ margin-bottom: 26px; }
.auth-eyebrow{
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 8px;
}
.auth-card-header h2{
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.auth-card-header p{
  margin: 0;
  font-size: 0.89rem;
  color: var(--ink-600);
}

/* alert */
.auth-alert{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.84rem;
  margin-bottom: 20px;
  animation: alert-in 0.35s var(--ease-out) both;
}
@keyframes alert-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.auth-alert ul{ margin: 0; padding-left: 16px; }
.auth-alert svg{ flex-shrink: 0; margin-top: 1px; }

.auth-status{
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.84rem;
  margin-bottom: 20px;
}

/* form fields */
.field{ margin-bottom: 18px; position: relative; }
.field label{
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.field .optional-tag{
  font-weight: 400;
  color: var(--ink-400);
  font-size: 0.76rem;
}

.input-wrap{ position: relative; }
.input-wrap svg{
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--ink-400);
  transition: color 0.2s var(--ease-out);
  pointer-events: none;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"]{
  width: 100%;
  padding: 11px 14px 11px 40px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: var(--paper-50);
  border: 1.5px solid var(--line-200);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.field input::placeholder{ color: var(--ink-400); }
.field input:hover{ border-color: #cbd5e1; }
.field input:focus{
  border-color: var(--amber-500);
  background: var(--paper-0);
  box-shadow: 0 0 0 4px rgba(242, 153, 74, 0.14);
}
.field input:focus + svg,
.input-wrap:focus-within svg{ color: var(--amber-600); }

.field-row-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.field-row-between label{ margin-bottom: 0; }
.link-quiet{
  font-size: 0.8rem;
  color: var(--steel-500);
  text-decoration: none;
  font-weight: 500;
}
.link-quiet:hover{ color: var(--amber-600); text-decoration: underline; }

.checkbox-row{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 22px;
  font-size: 0.86rem;
  color: var(--ink-600);
}
.checkbox-row input[type="checkbox"]{
  width: 17px; height: 17px;
  accent-color: var(--amber-500);
  cursor: pointer;
}

/* button */
.btn-primary{
  position: relative;
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Sora', sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--amber-400), var(--amber-500) 55%, var(--amber-600));
  background-size: 160% 160%;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-position 0.5s var(--ease-out);
  box-shadow: 0 10px 24px -10px rgba(217, 126, 46, 0.65);
}
.btn-primary::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
}
.btn-primary:hover{
  transform: translateY(-1px);
  background-position: 100% 0%;
  box-shadow: 0 14px 28px -10px rgba(217, 126, 46, 0.75);
}
.btn-primary:hover::before{ transform: translateX(120%); }
.btn-primary:active{ transform: translateY(0); }
.btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,1), 0 0 0 6px rgba(242, 153, 74, 0.65);
}

.auth-switch{
  margin: 22px 0 0;
  text-align: center;
  font-size: 0.87rem;
  color: var(--ink-600);
}
.auth-switch a{
  color: var(--amber-600);
  font-weight: 600;
  text-decoration: none;
}
.auth-switch a:hover{ text-decoration: underline; }

/* mobile brand shown only on small screens */
.auth-formside-mobile-brand{ display: none; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-visual{ display: none; }
  .auth-formside{ padding: 32px 20px; min-height: 100vh; }
  .auth-formside-mobile-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: var(--navy-900);
  }
  .auth-formside-mobile-brand .brand-mark{
    box-shadow: 0 6px 16px -4px rgba(242,153,74,0.45);
  }
  .auth-formside-mobile-brand b{ color: var(--amber-600); }
}

@media (max-width: 480px){
  .auth-card{ padding: 30px 22px 26px; border-radius: var(--radius-md); }
  .auth-card-header h2{ font-size: 1.3rem; }
}

@media (min-width: 981px) and (max-width: 1180px){
  .auth-visual{ padding: 40px 40px; }
  .auth-visual-headline h1{ font-size: 1.85rem; }
}