/* v4.25.440: the tool's own sign in page in the tool's theme (login.php). */
*, *::before, *::after { box-sizing: border-box; }
/* v4.25.444 (his 12 Oct report): one flat navy behind the card, no glow, so the band and the page are the same colour and the corners vanish into it; on a phone the card is the page, edge to edge from the top. */
body.tb-login { margin: 0; min-height: 100vh; background: #16233A; font-family: "DM Sans", system-ui, sans-serif; color: #16233A; display: flex; align-items: center; justify-content: center; padding: 24px 16px; -webkit-font-smoothing: antialiased; }
.lg-card { width: 100%; max-width: 420px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: hidden; margin: 0; }
/* v4.25.443 (sheet 29, his ruling): the band carries the standard reversed logo, tassie and the cord in the new yellow, blinds and the tagline white; logo-signin.png is made from logo-reversed.png and used on this page and Forgot password only. */
.lg-band { background: #16233A; padding: 30px 28px 26px; }
.lg-logo { display: block; width: 100%; max-width: 250px; height: auto; }
.lg-body { padding: 24px 28px 26px; }
.lg-body h1 { font-size: 19px; margin: 0 0 4px; font-family: Manrope, "DM Sans", sans-serif; font-weight: 700; }
.lg-body h1::after { content: ""; display: block; width: 30px; height: 3px; background: #F2B632; margin-top: 8px; border-radius: 2px; }
.lg-hint { font-size: 13px; color: #6B7686; margin: 10px 0 18px; line-height: 1.45; }
.lg-body label { display: block; font-size: 13px; font-weight: 700; color: #3C4757; margin: 0 0 6px; }
.lg-box { width: 100%; height: 42px; border: 1px solid #D5DAE3; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 15px; color: #16233A; margin-bottom: 14px; background: #FFFFFF; }
.lg-box:focus { outline: none; border-color: #F2B632; box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.35); }
.lg-pw { position: relative; margin-bottom: 14px; }
.lg-pw .lg-box { margin-bottom: 0; padding-right: 64px; }
.lg-pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: 0; background: transparent; color: #6E5808; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; border-radius: 6px; }
.lg-pw-toggle:hover { background: #FFF7DF; }
.lg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin: 2px 0 18px; font-size: 13px; }
.lg-keep { display: flex; flex: none; white-space: nowrap; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: #3C4757; cursor: pointer; }
.lg-keep input { width: 18px; height: 18px; accent-color: #16233A; margin: 0; }
.lg-row a { margin-left: auto; color: #6E5808; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.lg-btn { width: 100%; height: 44px; border: 0; border-radius: 9px; background: #F2B632; color: #16233A; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.lg-btn:hover { background: #E9AD2A; }
.lg-btn:focus-visible { outline: 3px solid rgba(242, 182, 50, 0.5); outline-offset: 2px; }
.lg-err { background: #FDECEC; border: 1px solid #E7B4B4; color: #9B2C2C; border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.lg-foot { margin-top: 18px; text-align: center; font-size: 12px; color: #8A94A3; }
.lg-btn-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 600px) {
  body.tb-login { padding: 0; align-items: flex-start; }
  .lg-card { max-width: none; min-height: 100vh; border-radius: 0; box-shadow: none; }
  .lg-band { padding: 34px 24px 26px; }
  .lg-body { padding: 24px 22px 28px; }
}