/* ============================================================
   ASCENCIA · AUTH PAGES
   Shared by login / registration / forgot-password / reset-password
   / error-404 / expired-link. Reuses the same design tokens as
   dashboard.css so these feel like the same product, but doesn't
   pull in the sidebar/asset-card rules those pages don't need.
   ============================================================ */

:root{
  --page-bg:#f4f6f9;
  --card-bg:#ffffff;
  --card-bg-raise:#fbfcfe;
  --text-body:#4a4a4a;
  --text-header:#2d2a26;
  --text-muted:#8b8478;
  --border-color:#e6e9ef;
  --border-strong:#d8dce4;
  --input-bg:#ffffff;
  --input-border:#dfe3ea;
  --card-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 24px -8px rgba(15,23,42,.08);
  --panel-shadow:0 18px 44px -12px rgba(15,23,42,.22), 0 4px 14px rgba(15,23,42,.08);
  --chip-bg:#eef1f6;

  --accent-sky:#0575E6;
  --accent-ocean:#003b5c;
  --accent-gradient:linear-gradient(135deg,#0575E6 0%,#003b5c 100%);
  --accent-gradient-soft:linear-gradient(135deg, rgba(5,117,230,.10) 0%, rgba(0,59,92,.10) 100%);

  --success:#198754;
  --danger:#dc3545;
  --danger-soft:rgba(220,53,69,.12);
  --warn:#f5b400;
  --warn-soft:rgba(245,180,0,.12);

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:26px;
  --radius-pill:999px;

  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms var(--ease);
  --t-base:240ms var(--ease);
}
body.dark-theme{
  --page-bg:#0b0f19;
  --card-bg:#1e293b;
  --card-bg-raise:#243349;
  --text-body:#f8fafc;
  --text-header:#f8fafc;
  --text-muted:#93a0b8;
  --border-color:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --input-bg:#182234;
  --input-border:rgba(255,255,255,.14);
  --chip-bg:#1a2434;
  --card-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -8px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box;}
.d-none{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--page-bg);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  transition:background var(--t-base), color var(--t-base);
}
h1,h2,h3,.brand-word{font-family:'Space Grotesk',sans-serif;}
a{color:var(--accent-sky);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;}
::selection{background:rgba(5,117,230,.18);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ============================================================
   SHELL — split brand panel + form panel
   ============================================================ */

.ascencia-topnav-logo {
  max-height: 55px;
}

.auth-shell{
  display:flex;
  min-height:100vh;
}
.auth-brand-panel{
  flex:1 1 46%;
  position:relative;
  overflow:hidden;
  background:var(--accent-gradient);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3rem;
}
.auth-brand-panel::before,
.auth-brand-panel::after{
  content:'';
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.auth-brand-panel::before{width:420px;height:420px;top:-140px;right:-140px;animation:brand-float-1 9s ease-in-out infinite;}
.auth-brand-panel::after{width:280px;height:280px;bottom:-100px;left:-80px;background:rgba(255,255,255,.06);animation:brand-float-2 11s ease-in-out infinite;}
@keyframes brand-float-1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-18px,22px) scale(1.06);}
}
@keyframes brand-float-2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(16px,-18px) scale(1.08);}
}
@media (prefers-reduced-motion:reduce){
  .auth-brand-panel::before,.auth-brand-panel::after{animation:none;}
}

.auth-brand-top{position:relative;z-index:1;display:flex;align-items:center;gap:.7rem;animation:brand-content-in .6s var(--ease) both;}
.auth-brand-mark{
  width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.15rem;
  backdrop-filter:blur(4px);
}
.auth-brand-name{font-weight:700;font-size:1.15rem;}
.auth-brand-tagline{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-top:1px;}

.auth-brand-mid{position:relative;z-index:1;max-width:400px;animation:brand-content-in .6s var(--ease) .1s both;}
.auth-brand-mid h2{font-size:1.9rem;font-weight:700;line-height:1.25;margin:0 0 .9rem;}
.auth-brand-mid p{font-size:.92rem;line-height:1.6;opacity:.88;margin:0 0 1.6rem;}
.auth-feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.auth-feature-list li{display:flex;align-items:center;gap:.6rem;font-size:.86rem;animation:brand-content-in .5s var(--ease) both;transition:transform var(--t-fast);}
.auth-feature-list li:nth-child(1){animation-delay:.25s;}
.auth-feature-list li:nth-child(2){animation-delay:.34s;}
.auth-feature-list li:nth-child(3){animation-delay:.43s;}
.auth-feature-list li:hover{transform:translateX(3px);}
@keyframes brand-content-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .auth-brand-top,.auth-brand-mid,.auth-feature-list li{animation:none;}
}
.auth-feature-list i{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;
}

.auth-brand-bottom{position:relative;z-index:1;display:flex;align-items:center;gap:1.2rem;font-size:.68rem;opacity:.75;}
.auth-brand-bottom span{text-transform:uppercase;letter-spacing:.05em;}

.auth-form-panel{
  flex:1 1 54%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.5rem;
  position:relative;
}
.auth-theme-toggle{
  position:absolute;top:1.5rem;right:1.5rem;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--card-bg);
  color:var(--text-header);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast);
}
.auth-theme-toggle:hover{background:var(--chip-bg);transform:translateY(-1px);}
.auth-theme-toggle:active{transform:translateY(0) scale(.92);}
.auth-theme-toggle i{display:block;transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.auth-theme-toggle:hover i{transform:rotate(20deg);}

.auth-card{
  width:100%;max-width:400px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius-xl);
  padding:2.2rem 2rem;
  box-shadow:var(--panel-shadow);
  animation:auth-card-in .5s var(--ease) both;
}
@keyframes auth-card-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (max-width:480px){
  .auth-card{padding:1.7rem 1.4rem;border-radius:var(--radius-lg);}
}

.auth-mobile-brand{
  display:none;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.8rem;
}
.auth-mobile-brand .auth-brand-mark{background:var(--accent-gradient-soft);color:var(--accent-sky);}
.auth-mobile-brand .auth-brand-name{color:var(--text-header);}
.auth-mobile-brand .auth-brand-tagline{color:var(--text-muted);}

.auth-card h1{font-size:1.5rem;font-weight:700;color:var(--text-header);margin:0 0 .4rem;}
.auth-card .auth-sub{font-size:.86rem;color:var(--text-muted);margin:0 0 1.8rem;line-height:1.5;}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.auth-field{margin-bottom:1.1rem;animation:field-in .45s var(--ease) both;}
.auth-row-between,form > .auth-btn{animation:field-in .45s var(--ease) both;}
@keyframes field-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .auth-field,.auth-row-between,form > .auth-btn{animation:none;}
}
.auth-field-row{display:flex;gap:.9rem;animation:field-in .45s var(--ease) both;}
.auth-field-row .auth-field{flex:1;min-width:0;margin-bottom:0;animation:none;}
@media (max-width:420px){
  .auth-field-row{flex-direction:column;gap:0;}
}
.auth-label{
  display:block;font-size:.78rem;font-weight:700;color:var(--text-header);
  margin-bottom:.4rem;
}
.auth-input-wrap{position:relative;display:flex;align-items:center;}
.auth-input-icon-left{
  position:absolute;left:.9rem;
  color:var(--text-muted);
  font-size:.92rem;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--t-fast);
}
.auth-input-wrap:focus-within .auth-input-icon-left{color:var(--accent-sky);}
.auth-input.has-icon-left{padding-left:2.6rem;}
.auth-input{
  width:100%;
  padding:.72rem .9rem;
  font-size:.88rem;
  font-family:inherit;
  color:var(--text-body);
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  outline:0;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.auth-input:focus{border-color:var(--accent-sky);box-shadow:0 0 0 3px rgba(5,117,230,.14);}
.auth-input.has-icon-right{padding-right:2.6rem;}
.auth-input-icon-btn{
  position:absolute;right:.5rem;
  width:32px;height:32px;border-radius:8px;
  border:0;background:none;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.95rem;
  transition:background var(--t-fast), color var(--t-fast);
}
.auth-input-icon-btn:hover{background:var(--chip-bg);color:var(--text-header);}
.auth-hint{font-size:.72rem;color:var(--text-muted);margin-top:.4rem;}
.auth-hint.auth-error{color:var(--danger);}

.auth-strength{display:flex;gap:.3rem;margin-top:.5rem;}
.auth-strength span{flex:1;height:4px;border-radius:2px;background:var(--chip-bg);transition:background var(--t-fast);}
.auth-strength.s1 span:nth-child(1){background:var(--danger);}
.auth-strength.s2 span:nth-child(1),.auth-strength.s2 span:nth-child(2){background:var(--warn);}
.auth-strength.s3 span:nth-child(1),.auth-strength.s3 span:nth-child(2),.auth-strength.s3 span:nth-child(3){background:var(--success);}

.auth-row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem;font-size:.8rem;}
.auth-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;color:var(--text-body);}
.auth-checkbox input{position:absolute;opacity:0;width:0;height:0;}
.auth-checkbox-box{
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border-strong);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.auth-checkbox-box i{font-size:.65rem;color:#fff;opacity:0;transform:scale(.5);transition:opacity .15s var(--ease), transform .15s var(--ease);}
.auth-checkbox input:checked + .auth-checkbox-box{background:var(--accent-sky);border-color:var(--accent-sky);}
.auth-checkbox input:checked + .auth-checkbox-box i{opacity:1;transform:scale(1);}

.auth-btn{
  width:100%;
  padding:.8rem 1rem;
  font-size:.9rem;font-weight:700;
  color:#fff;
  background:var(--accent-gradient);
  border:0;border-radius:var(--radius-md);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  box-shadow:0 10px 24px -10px rgba(5,117,230,.55);
  transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}
.auth-btn:hover{transform:translateY(-1px);filter:brightness(1.06);}
.auth-btn:active{transform:translateY(0);}
.auth-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;}
.auth-btn .spinner{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:auth-spin .7s linear infinite;
  display:none;
}
.auth-btn.is-loading .spinner{display:inline-block;}
.auth-btn.is-loading .btn-label{opacity:.85;}
@keyframes auth-spin{to{transform:rotate(360deg);}}

.auth-divider{display:flex;align-items:center;gap:.8rem;margin:1.5rem 0;color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border-color);}

.auth-foot-note{text-align:center;font-size:.84rem;color:var(--text-muted);margin-top:1.6rem;}
.auth-foot-note a{font-weight:700;}

.auth-back-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:600;color:var(--text-muted);
  margin-bottom:1.6rem;
}
.auth-back-link:hover{color:var(--accent-sky);}

/* ---------- Alert banners (error / info) ---------- */
.auth-shake{animation:auth-shake .4s var(--ease);}
@keyframes auth-shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
@media (prefers-reduced-motion:reduce){.auth-shake{animation:none;}}

.auth-alert{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.75rem .9rem;
  border-radius:var(--radius-md);
  font-size:.8rem;line-height:1.5;
  margin-bottom:1.1rem;
}
.auth-alert.is-error{background:var(--danger-soft);color:var(--danger);}
.auth-alert.is-info{background:var(--accent-gradient-soft);color:var(--accent-sky);}
.auth-alert i{margin-top:1px;flex:0 0 auto;}

/* ---------- Success / sent state ---------- */
.auth-success-icon{
  width:64px;height:64px;border-radius:50%;
  background:rgba(25,135,84,.12);color:var(--success);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  margin:0 auto 1.3rem;
  animation:success-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes success-pop{
  0%{opacity:0;transform:scale(.4);}
  70%{opacity:1;transform:scale(1.08);}
  100%{opacity:1;transform:scale(1);}
}
.auth-state{display:none;}
.auth-state.is-visible{display:block;animation:state-in .45s var(--ease) both;}
@keyframes state-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .auth-success-icon,.auth-state.is-visible{animation:none;}
}
.auth-text-center{text-align:center;}

/* ============================================================
   STANDALONE STATUS PAGES (404 / expired link)
   ============================================================ */
.status-shell{
  min-height:100vh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(60vw 60vw at 100% -10%, rgba(5,117,230,.07), transparent 60%),
    radial-gradient(50vw 50vw at 0% 110%, rgba(0,59,92,.06), transparent 55%),
    var(--page-bg);
}
.status-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem 2rem;
}
.status-brand{display:flex;align-items:center;gap:.6rem;}
.status-brand .auth-brand-mark{background:var(--accent-gradient-soft);color:var(--accent-sky);}
.status-brand .auth-brand-name{color:var(--text-header);}
.status-brand .auth-brand-tagline{color:var(--text-muted);}

.status-main{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem 1.5rem;
}
.status-figure{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(4.5rem,14vw,7.5rem);
  line-height:1;
  background:var(--accent-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.5rem;
  animation:success-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.status-icon-circle{
  width:84px;height:84px;border-radius:50%;
  background:var(--accent-gradient-soft);color:var(--accent-sky);
  display:flex;align-items:center;justify-content:center;font-size:2.1rem;
  margin:0 auto 1.4rem;
  animation:success-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.status-icon-circle.is-warn{background:var(--warn-soft);color:#b98104;}
.status-main h1{font-size:1.5rem;font-weight:700;color:var(--text-header);margin:0 0 .6rem;animation:brand-content-in .5s var(--ease) .15s both;}
.status-main p{font-size:.92rem;color:var(--text-muted);max-width:420px;margin:0 auto 1.8rem;line-height:1.6;animation:brand-content-in .5s var(--ease) .22s both;}
.status-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;animation:brand-content-in .5s var(--ease) .3s both;}
@media (prefers-reduced-motion:reduce){
  .status-figure,.status-icon-circle,.status-main h1,.status-main p,.status-actions{animation:none;}
}
.status-btn{
  padding:.72rem 1.3rem;
  font-size:.85rem;font-weight:700;
  border-radius:var(--radius-pill);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:transform var(--t-fast), filter var(--t-fast), background var(--t-fast);
  border:1px solid transparent;
}
.status-btn.is-primary{color:#fff;background:var(--accent-gradient);box-shadow:0 10px 24px -10px rgba(5,117,230,.55);}
.status-btn.is-primary:hover{transform:translateY(-1px);filter:brightness(1.06);}
.status-btn.is-secondary{color:var(--text-header);background:var(--card-bg);border-color:var(--border-strong);}
.status-btn.is-secondary:hover{background:var(--chip-bg);}

.status-footer{padding:1.2rem;text-align:center;}

/* ============================================================
   FOOTER (shared, injected via common/footer.js)
   ============================================================ */
.page-footer{
  padding:1.2rem 1rem;
  font-size:.72rem;color:var(--text-muted);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.page-footer-left{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.page-footer-powered{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;}
.page-footer-powered-label{
  font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);
}
.page-footer-powered-logo{
  display:flex;align-items:center;justify-content:center;
  height:30px;
  background:transparent;
}
.page-footer-powered-logo img{display:block;max-height:22px;width:auto;}
.page-footer-powered-logo .logo-light{display:block;}
.page-footer-powered-logo .logo-dark{display:none;}
body.dark-theme .page-footer-powered-logo .logo-light{display:none;}
body.dark-theme .page-footer-powered-logo .logo-dark{display:block;}

#message{
  display:none;
  margin-top:.75rem;
  padding:.85rem 1rem;
  border-radius:10px;
  background:var(--chip-bg);
  font-size:.8rem;
  color:var(--text-body);
}
#message h6{margin:0 0 .4rem;font-size:.82rem;}
#message .valid{color:var(--success);}
#message .invalid{color:var(--danger);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .auth-brand-panel{display:none;}
  .auth-mobile-brand{display:flex;}
  .auth-form-panel{padding:2.5rem 1.25rem;}
}
@media (max-width:520px){
  .status-actions{flex-direction:column;width:100%;max-width:280px;}
  .status-btn{width:100%;justify-content:center;}
}