/* Sign-in page (/Account/Login). Two halves: the dark "desk" with today's round of
   four sites, and the sign-in card with the crew above it. Built from the UPGEAR Login
   design (Oct 2026); LoginPage.tsx draws it. The page carries its own colours because the
   Serenity theme loaded by the layout would otherwise restyle labels, buttons and links. */

/* Kalam is the handwritten face of the notes and the crew's speech bubble. Only weight 400
   is used. The other faces (Archivo, IBM Plex Sans, IBM Plex Mono) come from fonts.css. */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body#s-LoginPage {
  margin: 0;
  padding: 0;
  background: #F6F2EA;
  color: #16141F;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
body#s-LoginPage { overflow-x: clip; }

/* Bootstrap makes everything border-box. The design was drawn on the browser defaults, where
   inputs and spans are content-box, so the few boxes that differ carry the design's outer size. */
.lg-page, .lg-page * { box-sizing: border-box; }
.lg-page a { color: #4A2FC9; }
.lg-page a:hover { color: #241463; }
.lg-page input::placeholder { color: #A39E8F; opacity: 1; }

.lg-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #16141F;
  font-size: 16px;
  line-height: normal;
}

@keyframes lg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lg-pop { 0% { opacity: 0; transform: translateY(6px) scale(.94); } 70% { transform: translateY(-1px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes lg-spin { to { transform: rotate(360deg); } }
@keyframes lg-lcd { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lg-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ── 01 Your desk ───────────────────────────────────────────────────── */
.lg-desk {
  position: relative;
  background: #07060D;
  color: #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lg-desk::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(183, 169, 255, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.lg-desk-in {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.4vh, 40px);
  padding: clamp(22px, 4vw, 56px) clamp(20px, 4.4vw, 64px) clamp(28px, 4vw, 48px);
  max-width: 760px;
  width: 100%;
  margin-left: auto;
}
.lg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lg-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lg-brand svg { display: block; }
.lg-stamp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: #B7A9FF;
  text-transform: uppercase;
}
.lg-stamp::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7FE3A1;
  animation: lg-lcd 2s infinite;
}

.lg-hero { display: flex; flex-direction: column; gap: 16px; animation: lg-rise .5s ease both; }
.lg-hero h1 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 68px);
  letter-spacing: -.05em;
  line-height: .98;
  color: #FFFFFF;
}
.lg-hero h1 span { color: #FFC94D; }
.lg-hero p { margin: 0; max-width: 500px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: #B5AFD0; }
.lg-hand {
  font-family: 'Kalam', cursive;
  font-size: 21px;
  line-height: 1.3;
  color: #FFE58A;
  transform: rotate(-1.5deg);
  transform-origin: 0 50%;
}

.lg-stack { display: flex; flex-direction: column; gap: 18px; margin-top: auto; }
.lg-scene { position: relative; width: 100%; aspect-ratio: 600 / 340; }
.lg-sun {
  position: absolute;
  left: 24%;
  top: 2%;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(255, 201, 77, .08), 0 0 0 22px rgba(255, 201, 77, .04);
}
.lg-ground { position: absolute; left: 0; right: 0; bottom: 12%; height: 2px; background: #2A2640; }
.lg-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  background: repeating-linear-gradient(90deg, #2A2640 0 18px, transparent 18px 40px) 0 50% / 100% 2px no-repeat;
}
.lg-house {
  position: absolute;
  bottom: 12%;
  border-radius: 8px 8px 0 0;
  background: #16131F;
  transition: box-shadow .4s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 14px 0;
}
.lg-windows { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.lg-window { display: block; width: 100%; aspect-ratio: 1 / 1.2; border-radius: 2px; transition: background .4s; }
.lg-door {
  align-self: center;
  width: 30%;
  aspect-ratio: 1 / 1.5;
  border-radius: 6px 6px 0 0;
  transition: background .4s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16141F;
  font-weight: 700;
  font-size: 13px;
}
.lg-house-name {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: #8E88AC;
  white-space: nowrap;
}
.lg-note-wrap { position: absolute; z-index: 5; transition: opacity .3s; }
.lg-note {
  position: relative;
  box-sizing: content-box;
  width: max-content;
  max-width: 190px;
  padding: 12px 14px;
  color: #16141F;
  font-family: 'Kalam', cursive;
  font-size: 16px;
  line-height: 1.25;
  box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .7);
  animation: lg-pop .4s ease both;
}
.lg-note::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 46px;
  height: 16px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 255, 255, .55);
}
.lg-note-tag {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: #4A465C;
  margin-bottom: 3px;
}
.lg-walker { position: absolute; bottom: 11.4%; transform: translateX(-50%); z-index: 4; display: flex; }
.lg-office { position: absolute; bottom: 11.4%; left: 2%; z-index: 3; display: flex; align-items: flex-end; gap: 8px; }

.lg-caption-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lg-caption { flex: 1; min-width: 240px; display: flex; align-items: baseline; gap: 12px; animation: lg-pop .4s ease both; }
.lg-caption-n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #B7A9FF; }
.lg-caption-text { display: flex; flex-direction: column; gap: 2px; }
.lg-caption-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.lg-caption-sub { font-size: 14px; color: #B5AFD0; line-height: 1.45; }
.lg-dots { display: flex; gap: 6px; }
.lg-dot { height: 8px; padding: 0; border: none; border-radius: 99px; cursor: pointer; transition: width .3s, background .3s; }

/* ── 02 Sign in ─────────────────────────────────────────────────────── */
.lg-signin {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) 24px;
  gap: 22px;
}
.lg-col { flex: 1; width: 100%; max-width: 440px; display: flex; flex-direction: column; justify-content: center; }

.lg-crew { display: flex; flex-direction: column; align-items: flex-start; padding: 0 18px; }
.lg-bubble-row { min-height: 58px; display: flex; align-items: flex-end; }
.lg-bubble {
  position: relative;
  box-sizing: content-box;
  max-width: 300px;
  padding: 9px 14px;
  border-radius: 14px 14px 14px 4px;
  background: #FFFFFF;
  border: 2px solid #16141F;
  color: #16141F;
  font-family: 'Kalam', cursive;
  font-size: 17px;
  line-height: 1.3;
  animation: lg-pop .35s ease both;
}
.lg-crew-row { height: 84px; width: 100%; overflow: hidden; display: flex; align-items: flex-end; padding-left: 6px; }
.lg-crew-member { display: flex; flex: none; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }

.lg-card {
  position: relative;
  z-index: 1;
  margin: 0;
  background: #FFFFFF;
  border: 2px solid #16141F;
  border-radius: 22px;
  box-shadow: 0 6px 0 #16141F;
  overflow: hidden;
  animation: lg-rise .5s .1s ease both;
}
.lg-card.is-shaking { animation: lg-shake .4s ease; }
.lg-card-body { display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 32px); }
.lg-card-head { display: flex; flex-direction: column; gap: 6px; }
.lg-card-head h2 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: #16141F;
}
.lg-card-head p { margin: 0; font-size: 15px; line-height: 1.5; color: #4A465C; }

.lg-field { display: flex; flex-direction: column; gap: 7px; margin: 0; font-weight: normal; }
.lg-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lg-label { font-size: 13.5px; font-weight: 600; color: #16141F; }
.lg-caps {
  padding: 2px 8px;
  border-radius: 6px;
  background: #FFF3CF;
  color: #8A5A00;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  animation: lg-pop .3s ease both;
}
.lg-input {
  width: 100%;
  height: 55px;
  margin: 0;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid #D8D0BD;
  background: #FBF9F4;
  font-family: inherit;
  font-size: 16px;
  color: #16141F;
  outline: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.lg-input.is-bad { border-color: #D6336C; }
.lg-input:focus { border-color: #4A2FC9; box-shadow: 0 0 0 4px rgba(102, 71, 240, .16); background: #FFFFFF; }
.lg-pass { position: relative; display: flex; }
.lg-pass .lg-input { flex: 1; min-width: 0; padding-right: 84px; }
.lg-show {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: #F0EADF;
  color: #4A465C;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
}
.lg-show:hover { background: #E4DCCB; color: #16141F; }
.lg-field-error { font-size: 13px; color: #C2255C; }

/* The design pairs this with "Forgot password?", which the portal does not offer, so the
   checkbox stands alone and takes less height than the paired row did. */
.lg-remember { align-self: flex-start; display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 32px; margin: -4px 0; font-weight: normal; }
.lg-remember input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lg-box {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2px solid #16141F;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.lg-remember input:focus-visible + .lg-box { box-shadow: 0 0 0 4px rgba(102, 71, 240, .16); }
.lg-remember-text { font-size: 14.5px; color: #4A465C; }

.lg-alert {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  animation: lg-pop .3s ease both;
}
.lg-alert.is-error { background: #FDECF2; color: #A61E4D; border: 1.5px solid #F3B5CB; }
.lg-alert.is-info { background: #E6F6F3; color: #0B6E62; border: 1.5px solid #A8DCD3; }

.lg-submit {
  height: 56px;
  border: none;
  border-radius: 14px;
  background: #4A2FC9;
  color: #FFFFFF;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 0 #241463;
  transition: background .2s, transform .1s, box-shadow .1s;
}
.lg-submit:hover { background: #3A22A8; }
.lg-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 #241463; }
.lg-submit:disabled { cursor: default; }
.lg-submit.is-done, .lg-submit.is-done:hover { background: #0E9E8C; }
.lg-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  animation: lg-spin .7s linear infinite;
}

.lg-help {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px clamp(14px, 2vw, 22px) 14px;
  background: #F6F2EA;
  border-top: 2px dashed #D8D0BD;
}
.lg-page a.lg-help-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: #16141F;
  text-decoration: none;
}
.lg-page a.lg-help-link:hover { background: #FFFFFF; color: #16141F; }
.lg-help-tile {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 11px;
}
.lg-help-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lg-help-title { font-weight: 600; font-size: 14.5px; }
.lg-help-sub { font-size: 13.5px; color: #4A465C; }
.lg-help-arrow { color: #4A2FC9; font-size: 18px; }

.lg-demo { margin: 22px 0 0; text-align: center; font-size: 15px; color: #4A465C; }
.lg-demo a { font-weight: 600; text-decoration: none; }
.lg-demo a:hover { text-decoration: underline; }

.lg-foot {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: #6B6678;
}
.lg-page .lg-foot a { color: #6B6678; text-decoration: none; }
.lg-page .lg-foot a:hover { color: #16141F; }

/* Shown when the licence has run out (the server answers RedirectUserTo). */
.lg-modal-back {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 6, 13, .55);
}
.lg-modal {
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border: 2px solid #16141F;
  border-radius: 22px;
  box-shadow: 0 6px 0 #16141F;
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #16141F;
  animation: lg-pop .35s ease both;
}
.lg-modal h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.03em; line-height: 1.1; }
.lg-modal p { margin: 0; font-size: 15px; line-height: 1.55; color: #4A465C; }
.lg-modal-links { display: flex; gap: 10px; flex-wrap: wrap; }
.lg-modal-links a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 2px solid #16141F;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
}
.lg-page .lg-modal-links a.is-wa, .lg-modal-links a.is-wa { background: #0E9E8C; border-color: #0E9E8C; color: #FFFFFF; }
.lg-modal-close {
  align-self: flex-start;
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  background: #F0EADF;
  color: #4A465C;
  font-weight: 600;
  cursor: pointer;
}
.lg-modal-close:hover { background: #E4DCCB; color: #16141F; }

/* ── Fielder: the drawn crew member (Fielder.tsx) ───────────────────── */
@keyframes fldBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6%); } }
@keyframes fldJoy { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-5%) rotate(-3deg); } 60% { transform: translateY(-5%) rotate(3deg); } }
@keyframes fldFret { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.5%); } 75% { transform: translateX(1.5%); } }
@keyframes fldBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes fldWave { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-178deg); } }
@keyframes fldLegA { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes fldLegB { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes fldArmA { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes fldArmB { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes fldCheerL { 0%, 100% { transform: rotate(150deg); } 50% { transform: rotate(168deg); } }
@keyframes fldCheerR { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-168deg); } }
@keyframes fldGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes fldHead { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 65% { transform: rotate(4deg); } }
@keyframes fldSwayL { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(14deg); } }
@keyframes fldSwayR { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-14deg); } }
@keyframes fldStep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }
@keyframes fldPoke { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-14%) scale(1.04, .96); } 50% { transform: translateY(0) scale(1.06, .94); } 75% { transform: translateY(-6%); } }
@keyframes fldDrop { 0% { transform: translateY(0) rotate(-45deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(60%) rotate(-45deg); opacity: 0; } }

.fld { position: relative; flex: none; cursor: pointer; }
.fld span, .fld div { position: absolute; display: block; }
.fld-shadow { left: 16%; bottom: -1.5%; width: 68%; height: 4%; border-radius: 50%; background: rgba(11, 10, 22, .18); }
.fld-body { inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .lg-page *, .lg-page *::before, .lg-modal { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}