*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--parch);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
/* Time-of-day wash over the backdrop photo. Four tints, all of them dull:
   the backdrop sits behind body copy all day and is meant to be noticed
   only if you look for it. Dusk used to be rgba(150,72,22,.42) — twice the
   strength of the other three, and it turned the whole page orange for
   four hours every evening. It is now the quietest of the four: the
   backdrop photo is already a warm desert scene, so any warmth in the wash
   lands on top of warmth that is there anyway. Repeated inline on every
   dashboard page — change all of them together. */
.tod{position:absolute;inset:0;z-index:0;pointer-events:none;transition:background 1s ease}
.stage.tod-night .tod{background:rgba(20,28,56,.54)}
.stage.tod-dawn .tod{background:rgba(78,44,66,.42)}
.stage.tod-day .tod{background:rgba(64,46,26,.20)}
.stage.tod-dusk .tod{background:rgba(58,40,34,.34)}
.brand{display:flex;align-items:baseline;gap:13px}
.brand .mark{font-size:24px;font-weight:900;letter-spacing:.02em}
.brand .mark em{font-style:normal;color:var(--gold)}
.brand .tag{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--text-faint);border:1px solid var(--border);border-radius:6px;padding:4px 9px;position:relative;top:-3px}
.navbtns{margin-left:auto;display:flex;gap:10px}
.navbtn{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-dim);padding:9px 16px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.015);transition:.18s cubic-bezier(.2,.8,.2,1)}
.navbtn .fa{font-size:12px;color:var(--text-faint);transition:.18s}
.navbtn:hover{border-color:rgba(212,146,58,.55);background:rgba(212,146,58,.07);color:var(--parch)}
.navbtn:hover .fa{color:var(--gold)}
.foot .links{margin-left:auto;display:flex;align-items:center;gap:22px}
.foot .links a:hover{color:var(--gold)}
/* background extracted from the mockups' inline base64 */
.scene{background-image:url('../img/bg-sandy.jpg')!important}


/* ---------------------------------------------------------------------
   Sign in <-> Create UCP transition

   The two tabs are separate documents, so the "switch" is a cross-fade
   across the whole centre column — the intro copy on the left AND the
   card on the right move together. The backdrop, header and footer stay
   put, so it reads as one continuous page rather than a reload.
   --------------------------------------------------------------------- */
@keyframes bsCenterIn{
  from{opacity:0;transform:translateY(10px) scale(.994)}
  to  {opacity:1;transform:none}
}

.stage .center{
  animation:bsCenterIn .38s cubic-bezier(.22,.61,.36,1) both;
  will-change:opacity,transform;
}

/* Once the entry animation has played, JS clears it. This matters: an
   animation with fill-mode "both" keeps controlling opacity forever, and
   would override the fade-out transition below — making the exit snap
   instantly to invisible instead of easing. */
.stage .center.bs-anim-done{animation:none}

/* Set the moment the other tab is clicked, just before we navigate. */
.stage.is-leaving .center{
  opacity:0;
  transform:translateY(-8px) scale(.994);
  transition:opacity .24s ease, transform .24s ease;
}

/* The underline and label slide to the clicked tab before the page
   changes, so the tab bar itself animates rather than jumping. */
.tabs .tab{transition:color .22s ease, border-color .22s ease, background .22s ease}

@media (prefers-reduced-motion: reduce){
  .stage .center,
  .stage.is-leaving .center{animation:none;transition:none;opacity:1;transform:none}
}


/* ---------------------------------------------------------------------
   Auth-page form shell
   ---------------------------------------------------------------------
   These rules were duplicated inline in login / create / reset /
   reset-confirm, and had drifted apart: the SAME .field carried a
   margin-top of 18px, 16px, 20px and 18px on the four pages, .alt was
   18/16/18/16, only login gave .alt a a pointer cursor, and only create
   centred its label row. Nothing about those pages justifies the
   differences — they're four copies of one component that were edited at
   different times.

   Defined once here so they can't drift again. Anything genuinely
   page-specific (the two-column layout on login/create, the larger badge
   and heading on verify/welcome) stays inline on the page that needs it.
   --------------------------------------------------------------------- */
.field{margin-top:18px}
.field label{display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:8px}
.alt{text-align:center;font-size:13px;color:var(--text-dim);margin-top:18px}
.alt a{color:var(--gold);font-weight:700;cursor:pointer}