/* ================================================================
   Teamline sign-in -- signin.css (2026-10-16)

   The animated sign-in page of Default.aspx: the night stage behind the
   flowing streams (signin.js draws them on #tl_si_canvas), the two-piece
   T logo intro, the glass card with a turning light on its border, the
   floating labels, the session note, the inline error, the 4 code boxes
   and the resend ring. Also styles the code step, the forced password
   change and the deduction justification screens.

   New classes use the tl-si- prefix; the older tl-login-* / tl-otp-* /
   tl-input* names Default.js knows keep working (the old rules were moved
   out of Default.css into this file).
   Dark by design. RTL-safe
   (logical properties). ASCII only.
   ================================================================ */

:root {
  --tl-si-night-0: #04060E;
  --tl-si-night-1: #0A0F24;
  --tl-si-cyan: #22D3EE;
  --tl-si-azure: #3B82F6;
  --tl-si-violet: #8B5CF6;
  --tl-si-magenta: #EC4899;
  --tl-si-text: #F8FAFC;
  --tl-si-muted: rgba(226, 232, 240, .72);
  --tl-si-faint: rgba(226, 232, 240, .58);
  --tl-si-line: rgba(255, 255, 255, .13);
  --tl-si-field: rgba(255, 255, 255, .055);
  --tl-si-focus: #67E8F9;
  --tl-si-ease: cubic-bezier(.22, 1, .36, 1);
  --tl-si-mark: 64px;
  --tl-si-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* The border light turns by animating this angle (a static border where
   @property is not supported). */
@property --tl-si-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ================================================================
   STAGE -- the night sky behind every sign-in screen (signin.js turns it
   on with html.tl-si-on and off as soon as the app shows)
   ================================================================ */
.tl-si-stage {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120vmax 80vmax at 28% 38%, rgba(37, 99, 235, .16), rgba(37, 99, 235, 0) 60%),
    radial-gradient(90vmax 70vmax at 88% 92%, rgba(139, 92, 246, .14), rgba(139, 92, 246, 0) 62%),
    linear-gradient(160deg, var(--tl-si-night-0) 0%, #070B1B 45%, var(--tl-si-night-1) 100%);
}
html.tl-si-on .tl-si-stage { display: block; }

.tl-si-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.tl-si-canvas[data-ready="true"] { opacity: 1; }

/* Two slow aurora clouds under the streams (transform-only, cheap). */
.tl-si-aurora {
  position: absolute;
  inset: -20%;
}
.tl-si-aurora::before,
.tl-si-aurora::after {
  content: "";
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  opacity: .55;
}
.tl-si-aurora::before {
  left: 0;
  top: 5%;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .16), rgba(34, 211, 238, 0));
  animation: tl-si-drift-a 26s ease-in-out infinite alternate;
}
.tl-si-aurora::after {
  right: 0;
  bottom: 0;
  background: radial-gradient(closest-side, rgba(236, 72, 153, .10), rgba(139, 92, 246, .06) 55%, rgba(139, 92, 246, 0));
  animation: tl-si-drift-b 32s ease-in-out infinite alternate;
}
@keyframes tl-si-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vmax, 8vmax, 0) scale(1.15); }
}
@keyframes tl-si-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-10vmax, -6vmax, 0) scale(.95); }
}

/* Film grain + vignette for depth (static). */
.tl-si-grain {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tl-si-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 45%, rgba(2, 4, 12, 0) 55%, rgba(2, 4, 12, .55) 100%);
}

/* Shared gradients / clip of the T (an always-rendered 0x0 SVG: a gradient
   inside a display:none screen would not paint). */
.tl-si-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ================================================================
   SCREENS (#login_screen, #otp_screen, #changepass_screen,
   #autodeduction_screen) -- each is a scrollable fixed layer
   ================================================================ */
.tl-login-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  color: var(--tl-si-text);
  font-family: var(--tl-si-font);
  -webkit-font-smoothing: antialiased;
  /* Without signin.js the screens still sit on the night gradient. */
  background:
    radial-gradient(110vmax 80vmax at 30% 35%, rgba(37, 99, 235, .18), rgba(37, 99, 235, 0) 60%),
    linear-gradient(160deg, var(--tl-si-night-0) 0%, #070B1B 45%, var(--tl-si-night-1) 100%);
}
html.tl-si-on .tl-login-bg { background: transparent; }

/* Default.js still adds floating blobs here; the canvas replaces them. */
.tl-login-particles { display: none !important; }

.tl-si-layout {
  position: relative;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  row-gap: 20px;
  padding: 24px 16px 20px;
}

/* ---------- Hero: the T, the wordmark, the line ---------- */
.tl-si-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
}
/* A soft night pool under the wordmark and the line, so the streams that
   rise into the T never run through the text. */
.tl-si-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(var(--tl-si-mark) * .92);
  width: max(calc(var(--tl-si-mark) * 3.4), 340px);
  height: calc(var(--tl-si-mark) * 1.15 + 76px);
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(4, 6, 16, .82), rgba(4, 6, 16, .5) 55%, rgba(4, 6, 16, 0));
}

.tl-si-logo {
  position: relative;
  width: var(--tl-si-mark);
  height: var(--tl-si-mark);
  flex: 0 0 auto;
}

.tl-si-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230%;
  height: 230%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(59, 130, 246, .42), rgba(99, 102, 241, .20) 42%, rgba(139, 92, 246, .07) 64%, rgba(139, 92, 246, 0) 76%);
  animation: tl-si-breathe 5.4s ease-in-out infinite;
}

.tl-si-mark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, .55)) drop-shadow(0 0 2px rgba(165, 243, 252, .55));
}

.tl-si-bar,
.tl-si-pill {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.tl-si-pill { transform-origin: 50% 100%; }
.tl-si-sweep { opacity: 0; }

.tl-si-wordmark {
  position: relative;
  width: calc(var(--tl-si-mark) * 1.85);
  margin-top: calc(var(--tl-si-mark) * .14);
  line-height: 0;
  overflow: hidden;
}
.tl-si-wordmark img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(4, 6, 16, .85));
}
.tl-si-wordmark::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  opacity: 0;
  background: linear-gradient(180deg, rgba(165, 243, 252, 0), #A5F3FC 30%, #ffffff 50%, #C4B5FD 70%, rgba(196, 181, 253, 0));
  box-shadow: 0 0 12px 3px rgba(34, 211, 238, .7);
}

.tl-login-bg .tl-si-tagline {
  margin: calc(var(--tl-si-mark) * .16) 0 0;
  max-width: 34ch;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .03em;
  color: rgba(226, 232, 240, .78) !important;
  text-shadow: 0 1px 12px rgba(4, 6, 16, .95), 0 0 2px rgba(4, 6, 16, .8);
}
.tl-si-tagline b {
  font-weight: 600;
  background: linear-gradient(90deg, #A5F3FC, #93C5FD 45%, #C4B5FD);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

/* ---------- The intro (login screen only) ---------- */
.tl-si-hero--intro .tl-si-halo {
  animation: tl-si-halo-in 1.1s ease-out .05s both, tl-si-breathe 5.4s ease-in-out 2.2s infinite;
}
.tl-si-hero--intro .tl-si-bar {
  animation: tl-si-bar-in .85s var(--tl-si-ease) .15s both;
}
.tl-si-hero--intro .tl-si-pill {
  animation: tl-si-pill-in .66s cubic-bezier(.3, .7, .4, 1) .7s both;
}
.tl-si-hero--intro .tl-si-sweep {
  animation: tl-si-sweep 1.05s cubic-bezier(.45, 0, .2, 1) 1.25s both, tl-si-sweep-loop 9s ease-in-out 4s infinite;
}
.tl-si-hero--intro .tl-si-wordmark img {
  animation: tl-si-wipe .95s cubic-bezier(.65, 0, .35, 1) 1.2s both;
}
.tl-si-hero--intro .tl-si-wordmark::after {
  animation: tl-si-wipe-edge .95s cubic-bezier(.65, 0, .35, 1) 1.2s both;
}
.tl-si-hero--intro .tl-si-tagline {
  animation: tl-si-rise .8s var(--tl-si-ease) 1.85s both;
}
.tl-si-hero--static .tl-si-sweep {
  animation: tl-si-sweep-loop 9s ease-in-out 1.5s infinite;
}

@keyframes tl-si-halo-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes tl-si-breathe {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.09); }
}
/* The bar draws out from the centre with a small spring. */
@keyframes tl-si-bar-in {
  0%   { opacity: 0; transform: scaleX(0) scaleY(.6); }
  18%  { opacity: 1; }
  68%  { transform: scaleX(1.035) scaleY(1); }
  100% { opacity: 1; transform: scaleX(1) scaleY(1); }
}
/* The pill drops into place and settles (squash on landing). */
@keyframes tl-si-pill-in {
  0%   { opacity: 0; transform: translateY(-250px) scale(.96, 1.06); }
  40%  { opacity: 1; }
  60%  { transform: translateY(0) scale(1.08, .9); }
  80%  { transform: translateY(-34px) scale(.98, 1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}
/* A light sweeps across both pieces (SVG user units). */
@keyframes tl-si-sweep {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(2700px); }
}
@keyframes tl-si-sweep-loop {
  0%, 82% { opacity: 0; transform: translateX(0); }
  86%     { opacity: .8; }
  97%     { opacity: .8; }
  100%    { opacity: 0; transform: translateX(2700px); }
}
/* The wordmark reveals left to right, a light edge leading it. */
@keyframes tl-si-wipe {
  from { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
}
@keyframes tl-si-wipe-edge {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: calc(100% - 2px); opacity: 0; }
}
@keyframes tl-si-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   PANEL + CARD
   ================================================================ */
.tl-login-center,
.tl-si-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.tl-si-card {
  position: relative;
  width: 100%;
  padding: 28px 22px 24px;
  border-radius: 24px;
  color: var(--tl-si-text);
  text-align: start;
  background: linear-gradient(165deg, rgba(22, 30, 64, .72) 0%, rgba(9, 13, 32, .68) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 40px 90px -30px rgba(1, 4, 15, .9);
  isolation: isolate;
  animation: tl-si-card-in .8s var(--tl-si-ease) .3s both;
}

/* The turning light on the border: a conic gradient shown only on a 1px ring. */
.tl-si-card::before,
.tl-si-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--tl-si-angle),
    rgba(34, 211, 238, 0) 0deg,
    rgba(34, 211, 238, .95) 50deg,
    rgba(59, 130, 246, .9) 85deg,
    rgba(139, 92, 246, .85) 120deg,
    rgba(139, 92, 246, 0) 165deg,
    rgba(139, 92, 246, 0) 205deg,
    rgba(236, 72, 153, .55) 245deg,
    rgba(236, 72, 153, 0) 290deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tl-si-turn 9s linear infinite;
}
/* The same ring, blurred: the light leaks around the edge. */
.tl-si-card::after {
  z-index: -1;
  padding: 2px;
  filter: blur(10px);
  opacity: .5;
}
@keyframes tl-si-turn { to { --tl-si-angle: 360deg; } }
@keyframes tl-si-card-in {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tl-si-shake { animation: tl-si-shake .42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes tl-si-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* The card's busy overlay (Default.js ShowLoginLoad / HideLoginLoad). */
.tl-login-spinner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(4, 7, 20, .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tl-spinner-mini {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .12);
  border-top-color: var(--tl-si-cyan);
  border-right-color: var(--tl-si-violet);
  animation: tl-si-spin .8s linear infinite;
}
@keyframes tl-si-spin { to { transform: rotate(360deg); } }

#login_card_inner { transition: opacity .25s ease; }

/* ---------- Card head ---------- */
.tl-si-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
}

.tl-si-chip {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(165, 243, 252, .85);
  background: linear-gradient(150deg, rgba(34, 211, 238, .16), rgba(139, 92, 246, .16));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 30px -12px rgba(34, 211, 238, .55);
}
.tl-si-chip > svg { width: 26px; height: 26px; }

.tl-login-company-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: inherit;
  object-fit: contain;
  background: #ffffff;
  opacity: 0;
  transition: opacity .45s ease;
}
.tl-login-company-logo.is-loaded { opacity: 1; }
.tl-login-company-logo:not([src]),
.tl-login-company-logo[src=""] { visibility: hidden; }

.tl-login-bg .tl-login-title,
.tl-login-bg .tl-otp-title {
  margin: 0;
  font-family: var(--tl-si-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #ffffff !important;
}
.tl-login-bg .tl-login-subtitle,
.tl-login-bg .tl-otp-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(226, 232, 240, .72) !important;
}
.tl-login-bg .tl-otp-subtitle b,
.tl-login-bg .tl-otp-subtitle strong,
.tl-otp-channels {
  font-weight: 600;
  color: #ffffff;
}

/* ---------- Session note (above the card): calm, informative ---------- */
.tl-session-note,
.tl-login-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: start;
}
.tl-session-note[hidden],
.tl-login-error[hidden],
.tl-si-caps[hidden] { display: none !important; }

.tl-session-note {
  color: #CFFAFE;
  background: linear-gradient(135deg, rgba(34, 211, 238, .13), rgba(59, 130, 246, .10));
  border: 1px solid rgba(103, 232, 249, .32);
  box-shadow: 0 12px 34px -16px rgba(34, 211, 238, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.tl-session-note.is-in { animation: tl-si-note-in .55s var(--tl-si-ease) both; }
@keyframes tl-si-note-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tl-si-msg-ic {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
}
.tl-session-note .tl-si-msg-ic { color: #67E8F9; }
.tl-si-msg-txt { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Inline error (inside the card, under the fields) ---------- */
.tl-login-error {
  color: #FFE4E6;
  background: rgba(244, 63, 94, .12);
  border: 1px solid rgba(251, 113, 133, .38);
}
.tl-login-error .tl-si-msg-ic { color: #FDA4AF; }
.tl-login-error.is-in { animation: tl-si-note-in .4s var(--tl-si-ease) both; }

/* ---------- Fields with floating labels ---------- */
.tl-login-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tl-input-group {
  position: relative;
  display: block;
}

.tl-login-bg .tl-input {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 20px 16px 6px;
  padding-inline: 46px 16px;
  font-family: var(--tl-si-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
  caret-color: var(--tl-si-cyan);
  background: var(--tl-si-field);
  border: 1px solid var(--tl-si-line);
  border-radius: 14px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .25s ease;
}
.tl-si-field--eye .tl-input { padding-inline-end: 52px; }
.tl-login-bg .tl-input::placeholder { color: transparent; }
.tl-login-bg .tl-input:hover { border-color: rgba(255, 255, 255, .22); }
.tl-login-bg .tl-input:focus {
  border-color: rgba(103, 232, 249, .8);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .14), 0 0 26px -6px rgba(34, 211, 238, .55);
}
/* Browser autofill keeps the dark field. */
.tl-login-bg .tl-input:-webkit-autofill,
.tl-login-bg .tl-input:-webkit-autofill:hover,
.tl-login-bg .tl-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #121A3A inset;
  box-shadow: 0 0 0 1000px #121A3A inset;
  caret-color: var(--tl-si-cyan);
  transition: background-color 9999s ease-out 0s;
}

.tl-login-bg .tl-si-label {
  position: absolute;
  top: 50%;
  inset-inline-start: 46px;
  inset-inline-end: 16px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--tl-si-faint);
  pointer-events: none;
  transform: translateY(-50%);
  transition: top .2s var(--tl-si-ease), font-size .2s var(--tl-si-ease), color .2s ease, letter-spacing .2s ease;
}
.tl-login-bg .tl-input:focus + .tl-si-label,
.tl-login-bg .tl-input:not(:placeholder-shown) + .tl-si-label,
.tl-login-bg .tl-input:-webkit-autofill + .tl-si-label {
  top: 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(165, 243, 252, .92);
}

.tl-input-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 16px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: rgba(226, 232, 240, .5);
  pointer-events: none;
  transform: translateY(-50%);
  transition: color .2s ease;
}
.tl-input:focus ~ .tl-input-icon { color: var(--tl-si-cyan); }

/* Show / hide password. */
.tl-login-bg .tl-si-eye {
  position: absolute;
  top: 50%;
  inset-inline-end: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: rgba(226, 232, 240, .6);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease, background-color .2s ease;
}
.tl-login-bg .tl-si-eye:hover { color: #ffffff; background: rgba(255, 255, 255, .07); }
.tl-si-eye svg { width: 19px; height: 19px; }
.tl-si-eye .tl-si-eye-off { display: none; }
.tl-si-eye.is-on .tl-si-eye-on { display: none; }
.tl-si-eye.is-on .tl-si-eye-off { display: block; }

.tl-login-bg .tl-si-caps {
  margin: -6px 0 0;
  padding-inline-start: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #FDE68A !important;
}

/* ---------- Primary button: gradient + moving sheen + busy ---------- */
.tl-login-bg .tl-login-btn {
  position: relative;
  width: 100%;
  height: 52px;
  margin: 6px 0 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  font-family: var(--tl-si-font);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #ffffff !important;
  cursor: pointer;
  background: linear-gradient(115deg, #0E7490 0%, #2563EB 48%, #7C3AED 100%);
  background-size: 160% 100%;
  background-position: 0% 50%;
  box-shadow: 0 14px 34px -14px rgba(37, 99, 235, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .2s var(--tl-si-ease), box-shadow .25s ease, background-position .6s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tl-login-bg .tl-login-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: tl-si-sheen 3.6s ease-in-out 2.4s infinite;
}
@keyframes tl-si-sheen {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.tl-login-bg .tl-login-btn:hover {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow: 0 18px 40px -14px rgba(124, 58, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .26);
}
.tl-login-bg .tl-login-btn:active { transform: translateY(0) scale(.99); }
.tl-login-bg .tl-login-btn:focus { color: #ffffff !important; }
.tl-login-bg .tl-login-btn:focus-visible {
  box-shadow: 0 0 0 2px #04060E, 0 0 0 4px var(--tl-si-focus), 0 14px 34px -14px rgba(37, 99, 235, .85);
}
.tl-si-btn-label,
.tl-si-btn-ic { transition: opacity .2s ease, transform .25s var(--tl-si-ease); }
.tl-si-btn-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.tl-login-bg .tl-login-btn:hover .tl-si-btn-ic { transform: translateX(3px); }
[dir="rtl"] .tl-si-btn-ic--arrow { transform: scaleX(-1); }
[dir="rtl"] .tl-login-bg .tl-login-btn:hover .tl-si-btn-ic--arrow { transform: scaleX(-1) translateX(3px); }

.tl-si-btn-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .28);
  border-top-color: #ffffff;
  opacity: 0;
  pointer-events: none;
}
.tl-login-bg .tl-login-btn.is-busy,
.tl-login-bg .tl-login-btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
  transform: none;
}
.tl-login-btn.is-busy .tl-si-btn-label,
.tl-login-btn.is-busy .tl-si-btn-ic { opacity: 0; }
.tl-login-btn.is-busy .tl-si-btn-spin { opacity: 1; animation: tl-si-spin .75s linear infinite; }
.tl-login-btn.is-busy::after { animation-duration: 1.2s; animation-delay: 0s; }
.tl-login-bg .tl-login-btn:disabled:not(.is-busy) { opacity: .55; cursor: not-allowed; }

.tl-login-bg .tl-login-footer {
  margin: 4px 0 0;
  font-size: 12px;
  text-align: center;
  letter-spacing: .02em;
  color: rgba(226, 232, 240, .62) !important;
}

/* ================================================================
   CODE STEP (#otp_screen)
   ================================================================ */
.tl-otp-card { text-align: center; }

.tl-otp-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #A5F3FC;
  background: linear-gradient(140deg, rgba(34, 211, 238, .25), rgba(139, 92, 246, .28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 32px -12px rgba(34, 211, 238, .6);
}
.tl-otp-icon-wrap svg { width: 30px; height: 30px; }
.tl-otp-icon-wrap::before,
.tl-otp-icon-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(103, 232, 249, .45);
  animation: tl-si-ping 2.8s ease-out infinite;
}
.tl-otp-icon-wrap::after { animation-delay: 1.4s; }
@keyframes tl-si-ping {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.75); }
}

.tl-otp-card .tl-otp-subtitle { margin-bottom: 22px; }

.tl-otp-inputs { display: flex; justify-content: center; }

.tl-otp-boxes {
  display: flex;
  justify-content: center;
  gap: 12px;
  direction: ltr;
}
.tl-login-bg .tl-otp-box {
  width: 58px;
  height: 66px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--tl-si-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  caret-color: var(--tl-si-cyan);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease, transform .2s var(--tl-si-ease);
}
.tl-login-bg .tl-otp-box:focus {
  border-color: rgba(103, 232, 249, .85);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .15), 0 0 26px -6px rgba(34, 211, 238, .6);
  transform: translateY(-2px);
}
.tl-login-bg .tl-otp-box.is-filled {
  border-color: rgba(147, 197, 253, .6);
  background: linear-gradient(160deg, rgba(59, 130, 246, .16), rgba(139, 92, 246, .14));
}
.tl-otp-boxes.is-complete .tl-otp-box {
  border-color: rgba(103, 232, 249, .75);
  box-shadow: 0 0 22px -8px rgba(34, 211, 238, .8);
}
.tl-otp-boxes.is-error .tl-otp-box {
  border-color: rgba(251, 113, 133, .75);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .14);
}

.tl-otp-card .tl-login-error { margin-top: 16px; }

.tl-otp-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 22px auto 0;
  max-width: 300px;
}

/* Resend: hidden until the sign-in logic starts a countdown. */
.tl-login-bg .tl-otp-resend {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 2px 0 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 12px;
  font-family: var(--tl-si-font);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(226, 232, 240, .62);
  background: transparent;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.tl-login-bg .tl-otp-resend.is-armed { display: inline-flex; }
.tl-login-bg .tl-otp-resend:disabled { cursor: default; }
.tl-login-bg .tl-otp-resend.is-ready { color: #A5F3FC; }
.tl-login-bg .tl-otp-resend.is-ready:hover { background: rgba(34, 211, 238, .1); color: #ffffff; }
.tl-si-ring { flex: 0 0 auto; transform: rotate(-90deg); }
.tl-si-ring-bg { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 2.5; }
.tl-si-ring-fg {
  fill: none;
  stroke: var(--tl-si-cyan);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .3s linear;
}
.tl-otp-resend.is-ready .tl-si-ring { display: none; }
.tl-si-resend-txt { font-variant-numeric: tabular-nums; }

.tl-login-bg .tl-otp-cancel {
  min-height: 40px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  font-family: var(--tl-si-font);
  font-size: 13px;
  font-weight: 500;
  color: rgba(226, 232, 240, .6);
  background: transparent;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.tl-login-bg .tl-otp-cancel:hover { color: #FDA4AF; background: rgba(244, 63, 94, .08); }

/* ================================================================
   DEDUCTION JUSTIFICATION (#autodeduction_screen): a paper card, the
   server's Bootstrap form inside stays readable
   ================================================================ */
.tl-si-layout--solo { grid-template-columns: minmax(0, 1fr); }
.tl-si-panel--wide { max-width: 640px; }
.tl-si-card--paper {
  color: #1E293B;
  background: rgba(248, 250, 252, .96);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tl-si-card--paper::after { opacity: .35; }
.tl-si-card--paper label { color: #334155; font-weight: 600; }
.tl-si-card--paper textarea { color: #0F172A; background: #ffffff; }

/* ================================================================
   Visible focus (MDB removes the outline of every button)
   ================================================================ */
.tl-login-bg .tl-si-eye:focus-visible,
.tl-login-bg .tl-otp-resend:focus-visible,
.tl-login-bg .tl-otp-cancel:focus-visible {
  box-shadow: 0 0 0 2px var(--tl-si-focus);
}

/* ================================================================
   SIZES
   ================================================================ */
@media (min-width: 400px) {
  .tl-si-card { padding: 30px 26px 26px; }
}

@media (min-width: 640px) {
  :root { --tl-si-mark: 92px; }
  .tl-si-layout { row-gap: 26px; padding: 40px 24px 28px; }
  .tl-login-bg .tl-si-tagline { font-size: 14px; }
  .tl-si-card { padding: 34px 32px 30px; }
}

/* Wide screens: the logo on one side, the card on the other. The streams
   converge on the logo and run under the glass of the card. */
@media (min-width: 1024px) {
  :root { --tl-si-mark: 176px; }
  .tl-si-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    justify-items: stretch;
    align-items: center;
    column-gap: clamp(40px, 6vw, 120px);
    padding: 48px clamp(40px, 7vw, 128px);
  }
  .tl-si-layout--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .tl-si-hero { justify-self: center; }
  .tl-si-panel { justify-self: end; }
  .tl-si-layout--solo .tl-si-panel { justify-self: center; }
  .tl-login-bg .tl-si-tagline { font-size: 16px; }
}

@media (min-width: 1024px) and (max-height: 640px) {
  :root { --tl-si-mark: 132px; }
}

/* Small phones: tighter boxes. */
@media (max-width: 359px) {
  .tl-otp-boxes { gap: 9px; }
  .tl-login-bg .tl-otp-box { width: 52px; height: 60px; font-size: 25px; }
  .tl-si-card { padding: 24px 18px 20px; }
}

/* Lighter effects on phones (the glass blur is the costly part). */
@media (max-width: 639px) {
  .tl-si-card {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  .tl-si-card::after { display: none; }
}