:root {
      color-scheme: light;
      --mm-blue: #0B7CF5;
      --mm-blue-deep: #0868E6;
      --mm-blue-soft: #43AFFF;
      --mm-ink: #10243F;
      --mm-muted: #7890AA;
      --mm-line: rgba(171, 195, 220, .56);
      --mm-surface: #FFFFFF;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    html {
      background: #EEF6FF;
    }

    body {
      min-height: 100%;
      font-family: 'Sarabun', sans-serif;
      color: var(--mm-ink);
      background: #EEF6FF;
      overflow: hidden;
      overscroll-behavior: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    button,
    input {
      font-family: inherit;
    }

    button {
      touch-action: manipulation;
    }

    /* Full-screen app surface: no phone mockup, no card shell. */
    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 1;
      width: 100%;
      min-height: 100vh;
      min-height: 100svh;
      height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
      padding:
        max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
      background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .98) 0 11%, rgba(255, 255, 255, .78) 31%, transparent 56%),
        radial-gradient(circle at 18% 18%, rgba(72, 169, 255, .13), transparent 28%),
        radial-gradient(circle at 84% 82%, rgba(28, 121, 235, .10), transparent 30%),
        linear-gradient(180deg, #F6FAFF 0%, #ECF5FE 50%, #F8FBFF 100%);
    }

    .login-screen::before {
      content: "";
      position: absolute;
      inset: -22%;
      z-index: -3;
      pointer-events: none;
      background:
        radial-gradient(circle at 49% 37%, rgba(52, 154, 255, .11), transparent 31%),
        radial-gradient(circle at 17% 72%, rgba(97, 181, 255, .10), transparent 24%),
        radial-gradient(circle at 83% 68%, rgba(27, 121, 235, .09), transparent 27%);
      animation: mmBgGlow 11s ease-in-out infinite alternate;
    }

    .login-screen::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(660px, 82vw);
      aspect-ratio: 1;
      z-index: -2;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px solid rgba(90, 165, 239, .07);
      background: radial-gradient(circle, rgba(80, 169, 255, .055), transparent 68%);
      pointer-events: none;
    }

    @keyframes mmBgGlow {
      from {
        transform: translate3d(-1.5%, 0, 0) scale(.98)
      }

      to {
        transform: translate3d(1.5%, -1%, 0) scale(1.04)
      }
    }

    .login-bg-art {
      position: absolute;
      inset: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: .82;
      animation: mmBgArt 13s ease-in-out infinite alternate;
    }

    @keyframes mmBgArt {
      from {
        transform: translate3d(0, 2px, 0)
      }

      to {
        transform: translate3d(0, -6px, 0)
      }
    }

    /* Mobile portrait artwork: separate composition so decorations are never cropped by xMidYMid slice. */
    .login-bg-art-mobile {
      display: none;
      position: absolute;
      inset: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    @media (max-width:991.98px) {
      .login-bg-art {
        display: none;
      }

      .login-bg-art-mobile {
        display: block;
        opacity: .92;
      }
    }

    @media (max-width:430px) {
      .login-bg-art-mobile {
        opacity: .96;
      }
    }

    .login-screen>.row {
      width: 100%;
      min-height: 100%;
      flex: 1 1 auto;
    }

    /* Same Messenger-style login, now sized as a real app screen. */
    .login-messenger {
      position: relative;
      z-index: 2;
      width: min(100%, 420px);
      margin: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-block: clamp(8px, 2.5vh, 24px);
    }

    .messenger-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 0 clamp(22px, 3.8vh, 32px);
    }

    /* Preserve the current ChatLee logo language; only refine scale/details. */
    .messenger-logo {
      position: relative;
      width: clamp(76px, 10.5vh, 92px);
      height: clamp(76px, 10.5vh, 92px);
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .86);
      border-radius: clamp(24px, 3.4vh, 30px);
      background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .35), transparent 31%),
        linear-gradient(145deg, #43AFFF 0%, #1688F7 48%, #0868E6 100%);
      color: #fff;
      box-shadow: 0 16px 36px rgba(11, 124, 245, .20);
      isolation: isolate;
    }

    .messenger-logo::before {
      content: "";
      position: absolute;
      left: 16px;
      bottom: -7px;
      width: 22px;
      height: 22px;
      z-index: -1;
      border-radius: 4px 4px 4px 14px;
      background: #0C72E9;
      transform: rotate(38deg);
    }

    .messenger-logo::after {
      content: "";
      position: absolute;
      right: 7px;
      bottom: 7px;
      width: 15px;
      height: 15px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: #2ED573;
      box-shadow: 0 0 0 4px rgba(46, 213, 115, .13);
    }

    .messenger-logo-icon {
      width: 58%;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 31%;
      background: rgba(255, 255, 255, .14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
      font-size: clamp(1.62rem, 4vh, 2rem);
      line-height: 1;
    }

    .messenger-logo-icon i {
      transform: translateY(-1px);
    }

    .messenger-name {
      margin: clamp(13px, 2vh, 18px) 0 0;
      color: var(--mm-ink);
      font-family: 'Kanit', sans-serif;
      font-size: clamp(1.82rem, 4.4vh, 2.22rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.035em;
    }

    #loginForm {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 1.6vh, 13px);
    }

    .messenger-field {
      position: relative;
      text-align: left;
    }

    .messenger-input-wrap {
      position: relative;
    }

    .messenger-input-icon {
      position: absolute;
      left: 20px;
      top: 50%;
      z-index: 3;
      transform: translateY(-50%);
      width: 18px;
      text-align: center;
      color: #6583A4;
      font-size: .92rem;
      pointer-events: none;
      transition: color .16s ease;
    }

    .messenger-input-wrap:focus-within .messenger-input-icon {
      color: var(--mm-blue);
    }

    .login-control.form-control {
      width: 100%;
      height: clamp(52px, 7vh, 56px);
      min-height: 52px;
      padding: 0 52px;
      border: 1px solid var(--mm-line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .96);
      color: var(--mm-ink);
      font-family: 'Sarabun', sans-serif;
      font-size: .94rem;
      outline: none;
      box-shadow: 0 8px 22px rgba(61, 101, 145, .07);
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .login-control.form-control::placeholder {
      color: #90A3B8;
      opacity: 1;
    }

    .login-control.form-control:hover {
      border-color: #BDD2E7;
      background: #fff;
    }

    .login-control.form-control:focus {
      border-color: rgba(11, 124, 245, .58);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(11, 124, 245, .075), 0 8px 22px rgba(61, 101, 145, .05);
    }

    .login-password-toggle {
      position: absolute;
      right: 11px;
      top: 50%;
      z-index: 4;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      transform: translateY(-50%);
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #7188A2;
      box-shadow: none !important;
    }

    .login-password-toggle:hover {
      background: #EDF5FE;
      color: var(--mm-blue);
    }

    .login-password-toggle:focus-visible {
      outline: 2px solid rgba(11, 124, 245, .28);
      outline-offset: 1px;
    }

    #loginForm .invalid-feedback {
      display: none;
      margin: 6px 18px 0;
      color: #DC4D5E;
      font-size: .73rem;
      text-align: left;
    }

    #loginForm.was-validated .messenger-field:has(.login-control:invalid) .invalid-feedback {
      display: block;
    }

    #loginForm.was-validated .login-control:invalid {
      border-color: #E36B78;
      background-image: none;
      box-shadow: 0 0 0 4px rgba(227, 107, 120, .07);
    }

    #loginForm.was-validated .login-control:valid {
      border-color: var(--mm-line);
      background-image: none;
    }

    #loginForm.was-validated .login-control:valid:focus {
      border-color: rgba(11, 124, 245, .58);
    }

    .login-options {
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 2px 8px 5px;
      color: #7389A2;
      font-size: .78rem;
    }

    .login-remember {
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }

    .login-remember input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--mm-blue);
    }

    .login-link {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--mm-blue);
      font-size: .78rem;
      font-weight: 600;
      box-shadow: none !important;
    }

    .login-link:hover {
      text-decoration: underline;
    }

    .login-submit {
      width: 100%;
      height: clamp(54px, 7.3vh, 58px);
      min-height: 54px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 6px;
      padding: 0 8px 0 50px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(100deg, #1495FF 0%, #0B7CF5 53%, #0866E3 100%);
      color: #fff;
      font-family: 'Kanit', sans-serif;
      font-size: .94rem;
      font-weight: 600;
      box-shadow: none !important;
      transition: filter .15s ease, transform .15s ease;
    }

    .login-submit:hover {
      filter: brightness(.975);
      transform: translateY(-1px);
    }

    .login-submit:active {
      transform: none;
      filter: brightness(.94);
    }

    .login-submit:focus-visible {
      outline: 3px solid rgba(11, 124, 245, .20);
      outline-offset: 3px;
    }

    .login-submit:disabled {
      opacity: .72;
      cursor: wait;
      transform: none;
    }

    .login-submit-label {
      white-space: nowrap;
    }

    .login-submit-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      justify-self: end;
      border-radius: 50%;
      background: #fff;
      color: var(--mm-blue);
      font-size: .83rem;
    }

    .login-submit-icon i {
      transform: translateX(-1px) rotate(-7deg);
    }

    /* Mobile/Tablet: actual full-screen app layout, not a device simulation. */
    @media (max-width:991.98px) {
      .login-screen {
        padding:
          max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
      }

      .login-screen>.row {
        min-height: 100%;
      }

      .login-messenger {
        width: min(100%, 430px);
        min-height: 100%;
        justify-content: center;
        padding-block: clamp(8px, 3vh, 24px);
      }

      .login-control.form-control {
        font-size: 16px;
      }
    }

    /* PC: same visual language, slightly wider and calmer. */
    @media (min-width:992px) {
      .login-screen {
        padding: 34px 28px;
      }

      .login-messenger {
        width: 430px;
        max-width: 430px;
      }

      .login-bg-art {
        opacity: .78;
      }
    }

    @media (max-width:430px) {
      .login-screen {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
      }

      .login-messenger {
        width: 100%;
        max-width: 390px;
      }

      .messenger-brand {
        margin-bottom: 20px;
      }

      .messenger-logo {
        width: 72px;
        height: 72px;
        border-radius: 23px;
      }

      .messenger-logo::before {
        left: 13px;
        bottom: -6px;
        width: 19px;
        height: 19px;
      }

      .messenger-logo::after {
        right: 6px;
        bottom: 6px;
        width: 13px;
        height: 13px;
        border-width: 2.5px;
      }

      .messenger-name {
        font-size: 1.78rem;
      }

      .login-control.form-control {
        height: 52px;
        min-height: 52px;
      }

      .login-submit {
        height: 54px;
        min-height: 54px;
        grid-template-columns: minmax(0, 1fr) 40px;
        padding-left: 47px;
      }

      .login-submit-icon {
        width: 38px;
        height: 38px;
      }

      .login-options {
        margin-left: 6px;
        margin-right: 6px;
        font-size: .74rem;
      }

      .login-link {
        font-size: .74rem;
      }
    }

    @media (max-width:360px) {
      .login-screen {
        padding-left: 12px;
        padding-right: 12px;
      }

      .messenger-brand {
        margin-bottom: 17px;
      }

      .messenger-logo {
        width: 66px;
        height: 66px;
        border-radius: 21px;
      }

      .messenger-name {
        margin-top: 11px;
        font-size: 1.65rem;
      }

      #loginForm {
        gap: 9px;
      }

      .login-control.form-control {
        height: 49px;
        min-height: 49px;
        padding-left: 48px;
      }

      .messenger-input-icon {
        left: 18px;
      }

      .login-options {
        gap: 8px;
        font-size: .7rem;
      }

      .login-link {
        font-size: .7rem;
      }

      .login-submit {
        height: 51px;
        min-height: 51px;
        padding-left: 44px;
        font-size: .9rem;
      }
    }

    /* Keep the screen centered on short viewports; compact instead of changing layout. */
    @media (max-width:991.98px) and (max-height:700px) {
      .login-messenger {
        padding-block: 4px;
      }

      .messenger-brand {
        margin-bottom: 14px;
      }

      .messenger-logo {
        width: 62px;
        height: 62px;
        border-radius: 20px;
      }

      .messenger-logo::before {
        left: 11px;
        bottom: -5px;
        width: 17px;
        height: 17px;
      }

      .messenger-logo::after {
        right: 5px;
        bottom: 5px;
        width: 12px;
        height: 12px;
        border-width: 2px;
      }

      .messenger-name {
        margin-top: 9px;
        font-size: 1.58rem;
      }

      #loginForm {
        gap: 8px;
      }

      .login-control.form-control {
        height: 48px;
        min-height: 48px;
      }

      .login-submit {
        height: 50px;
        min-height: 50px;
      }

      .login-options {
        margin-top: 0;
        margin-bottom: 1px;
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .login-screen::before,
      .login-bg-art,
      .ui-premium-signature .signature-badge,
      .ui-premium-signature .signature-badge::before,
      .ui-premium-signature .signature-badge::after,
      .ui-premium-signature .signature-ring,
      .ui-premium-signature .signature-core,
      .ui-premium-signature .signature-copy h1,
      .ui-premium-signature .signature-copy .brand-bot,
      .ui-premium-signature .signature-copy .brand-bot::after,
      .ui-premium-signature .signature-copy .brand-telegram,
      .ui-premium-signature .login-submit,
      .ui-premium-signature .login-submit::before {
        animation: none !important;
      }

      .login-submit,
      .login-control.form-control {
        transition: none !important;
      }
    }

    /* === Variant 01: Soft Aura === */
    :root {
      --mm-blue: #087CF0;
      --mm-blue-deep: #0668DC;
      --mm-blue-soft: #61B8FF;
      --mm-ink: #102A48;
      --mm-muted: #7890A9;
      --mm-line: rgba(160, 188, 217, .48);
    }

    .login-screen {
      background:
        radial-gradient(circle at 50% 37%, rgba(255, 255, 255, 1) 0 13%, rgba(255, 255, 255, .84) 31%, transparent 58%),
        radial-gradient(circle at 18% 20%, rgba(88, 183, 255, .16), transparent 31%),
        radial-gradient(circle at 82% 78%, rgba(38, 128, 239, .12), transparent 33%),
        linear-gradient(180deg, #F8FCFF 0%, #EDF6FF 50%, #F9FCFF 100%);
    }

    .login-screen::after {
      width: min(760px, 88vw);
      border: 1px solid rgba(73, 154, 235, .08);
      background: radial-gradient(circle, rgba(56, 157, 255, .065), transparent 68%);
    }

    .login-bg-art {
      opacity: .74;
      filter: saturate(1.08) contrast(1.06);
    }

    .login-messenger {
      width: min(100%, 410px);
    }

    .messenger-brand {
      margin-bottom: clamp(24px, 4vh, 34px);
    }

    .messenger-logo {
      border-radius: 29px;
      background: linear-gradient(145deg, #68C1FF 0%, #238FF8 46%, #0870E6 100%);
      box-shadow: 0 18px 42px rgba(8, 124, 240, .20);
    }

    .messenger-logo-icon {
      background: rgba(255, 255, 255, .16);
    }

    .messenger-name {
      font-weight: 700;
      color: #112D4B;
    }

    .login-control.form-control {
      border-color: rgba(164, 190, 217, .46);
      background: rgba(255, 255, 255, .93);
      box-shadow: 0 10px 26px rgba(48, 94, 142, .065);
    }

    .login-control.form-control:focus {
      box-shadow: 0 0 0 4px rgba(8, 124, 240, .07), 0 12px 30px rgba(48, 94, 142, .055);
    }

    .login-submit {
      background: linear-gradient(100deg, #22A0FF 0%, #0A80F2 48%, #086AE1 100%);
    }

    @media (min-width:992px) {
      .login-messenger {
        width: 420px;
        max-width: 420px;
      }
    }


    /* === Premium 08: Signature Mark — only inside .login-messenger === */
    .login-messenger.ui-premium-signature {
      width: min(100%, 400px);
      padding: 0;
      text-align: center
    }

    .ui-premium-signature .messenger-brand,
    .ui-premium-signature .messenger-logo,
    .ui-premium-signature .messenger-name {
      display: none !important
    }

    .ui-premium-signature .signature-badge {
      position: relative;
      width: 104px;
      height: 104px;
      margin: 0 auto 18px;
      display: grid;
      place-items: center;
      isolation: isolate;
      transform-origin: 50% 54%;
      will-change: transform;
      animation: signatureFloat 4.8s ease-in-out infinite;
    }

    .ui-premium-signature .signature-badge::before {
      content: "";
      position: absolute;
      inset: 4px;
      z-index: -2;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .96), rgba(225, 243, 255, .80) 46%, rgba(185, 222, 252, .58) 100%);
      border: 1px solid rgba(49, 143, 230, .30);
      box-shadow: 0 18px 46px rgba(31, 113, 187, .16), inset 0 1px 0 rgba(255, 255, 255, .94);
      animation: signatureHaloPulse 3.6s ease-in-out infinite;
    }

    .ui-premium-signature .signature-badge::after {
      content: "";
      position: absolute;
      inset: 13px;
      z-index: -1;
      border-radius: 50%;
      border: 1px dashed rgba(19, 126, 224, .24);
      animation: signatureOrbit 18s linear infinite;
    }

    .ui-premium-signature .signature-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(67, 154, 235, .16);
      background: radial-gradient(circle, transparent 58%, rgba(255, 255, 255, .44) 59%, rgba(255, 255, 255, .08) 73%, transparent 74%);
      animation: signatureRingBreath 3.6s ease-in-out infinite;
    }

    .ui-premium-signature .signature-core {
      position: relative;
      width: 76px;
      height: 76px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      background: linear-gradient(145deg, #43BFFF 0%, #229ED9 44%, #087FCE 100%);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .62);
      box-shadow: 0 13px 28px rgba(34, 158, 217, .28), inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 -10px 18px rgba(4, 105, 173, .10);
      animation: signatureCorePulse 4.8s ease-in-out infinite;
    }

    .ui-premium-signature .signature-core::after {
      content: "";
      position: absolute;
      left: 12px;
      top: 10px;
      width: 42px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0));
      transform: rotate(-16deg);
      pointer-events: none;
    }

    .ui-premium-signature .signature-core i {
      position: relative;
      z-index: 2;
      font-size: 2.55rem;
      line-height: 1;
      transform: translate(1px, -1px) rotate(-4deg);
      filter: drop-shadow(0 3px 3px rgba(0, 74, 123, .16));
    }

    @keyframes signatureFloat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
      }

      50% {
        transform: translate3d(0, -5px, 0) rotate(.7deg);
      }
    }

    @keyframes signatureHaloPulse {
      0%,
      100% {
        transform: scale(.985);
        box-shadow: 0 16px 40px rgba(31, 113, 187, .14), inset 0 1px 0 rgba(255, 255, 255, .94);
      }

      50% {
        transform: scale(1.025);
        box-shadow: 0 22px 52px rgba(31, 113, 187, .22), 0 0 0 7px rgba(67, 174, 255, .045), inset 0 1px 0 rgba(255, 255, 255, .98);
      }
    }

    @keyframes signatureRingBreath {
      0%,
      100% {
        opacity: .72;
        transform: scale(.98);
      }

      50% {
        opacity: 1;
        transform: scale(1.035);
      }
    }

    @keyframes signatureCorePulse {
      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.018);
      }
    }

    @keyframes signatureOrbit {
      to {
        transform: rotate(360deg)
      }
    }

    .ui-premium-signature .signature-copy h1 {
      margin: 0;
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      color: transparent;
      font: 700 1.96rem/1.08 'Kanit', sans-serif;
      letter-spacing: -.035em;
      background: linear-gradient(110deg, #102D4C 0%, #087FCE 30%, #229ED9 58%, #43BFFF 78%, #0877DE 100%);
      background-size: 180% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      filter: drop-shadow(0 4px 10px rgba(12, 122, 239, .10));
      animation: brandTitleShine 6s ease-in-out infinite alternate;
    }

    @keyframes brandTitleShine {
      from {
        background-position: 0% 50%;
      }

      to {
        background-position: 100% 50%;
      }
    }

    .ui-premium-signature .signature-copy p {
      margin: 9px 0 28px;
      color: #7990AA;
      font-size: .78rem;
      line-height: 1.55
    }

    .ui-premium-signature #loginForm {
      gap: 16px
    }

    .ui-premium-signature .messenger-field {
      margin: 0
    }

    .ui-premium-signature .field-label {
      display: block;
      margin: 0 0 8px 4px;
      color: #405D7B;
      font-family: 'Kanit', sans-serif;
      font-size: .8rem;
      font-weight: 600;
      line-height: 1.25;
      text-align: left
    }

    .ui-premium-signature .messenger-field:focus-within .field-label {
      color: #0C7AEF
    }

    .ui-premium-signature .login-control.form-control {
      height: 55px;
      border-radius: 17px;
      background: #fff;
      border: 1px solid #BFD3E6;
      box-shadow: none
    }

    .ui-premium-signature .login-control.form-control:hover {
      border-color: #9FC1DF;
      background: #fff
    }

    .ui-premium-signature .login-control.form-control:focus {
      border-color: #0C7AEF;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(12, 122, 239, .08)
    }

    .ui-premium-signature .login-options {
      margin: 0 5px 2px;
      min-height: 26px
    }

    .ui-premium-signature .login-submit {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      height: 54px;
      min-height: 54px;
      margin-top: 3px;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 8px;
      padding: 0 10px 0 46px;
      border: 1px solid rgba(6, 105, 177, .48);
      border-radius: 18px;
      background: linear-gradient(145deg, #43BFFF 0%, #229ED9 45%, #087FCE 100%);
      color: #fff;
      letter-spacing: .01em;
      box-shadow: none !important;
      filter: none;
      transform: translateY(0) scale(1);
      transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .18s ease, border-color .18s ease, border-radius .22s ease;
      animation: loginButtonEnter .56s cubic-bezier(.2,.8,.2,1) .16s both;
    }

    .ui-premium-signature .login-submit::before {
      content: "";
      position: absolute;
      inset: -45% auto -45% -32%;
      width: 34%;
      z-index: -1;
      border-radius: 50%;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
      transform: translateX(-160%) rotate(12deg);
      pointer-events: none;
    }

    .ui-premium-signature .login-submit::after {
      content: "";
      position: absolute;
      left: 14px;
      top: 6px;
      width: 58%;
      height: 38%;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0));
      transform: rotate(-14deg);
      pointer-events: none;
      z-index: -1;
      transition: opacity .18s ease, transform .24s ease;
    }

    .ui-premium-signature .login-submit:hover {
      filter: brightness(1.045);
      transform: translateY(-2px) scale(1.008);
      box-shadow: none !important;
      border-color: rgba(5, 94, 162, .64);
    }

    .ui-premium-signature .login-submit:hover::before {
      animation: loginButtonSheen .72s ease both;
    }

    .ui-premium-signature .login-submit:hover::after {
      opacity: .9;
      transform: translateX(3px) rotate(-14deg);
    }

    .ui-premium-signature .login-submit:active {
      filter: brightness(.97);
      transform: translateY(0) scale(.988);
      box-shadow: none !important;
      border-color: rgba(5, 94, 162, .72);
    }

    @keyframes loginButtonEnter {
      from {
        opacity: 0;
        transform: translateY(9px) scale(.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes loginButtonSheen {
      from { transform: translateX(-160%) rotate(12deg); }
      to { transform: translateX(560%) rotate(12deg); }
    }

    .ui-premium-signature .login-submit:focus-visible {
      outline: 3px solid rgba(12, 122, 239, .22);
      outline-offset: 3px;
    }

    .ui-premium-signature .login-submit:disabled {
      filter: none;
      transform: none;
      opacity: .72;
    }

    .ui-premium-signature .login-submit-icon {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, .56);
      border-radius: 50%;
      background: rgba(255, 255, 255, .13);
      color: #fff;
      box-shadow: none;
      transition: transform .16s ease, background-color .16s ease;
    }

    .ui-premium-signature .login-submit:hover .login-submit-icon {
      background: rgba(255, 255, 255, .20);
      transform: translateX(2px);
    }

    .ui-premium-signature .login-submit-icon i {
      transform: none
    }

    @media (min-width:992px) {
      .login-messenger.ui-premium-signature {
        width: 422px
      }

      .ui-premium-signature .signature-badge {
        width: 112px;
        height: 112px
      }

      .ui-premium-signature .signature-core {
        width: 80px;
        height: 80px
      }

      .ui-premium-signature .signature-core i {
        font-size: 2.72rem
      }
    }

    @media (max-width:991.98px) {
      .login-messenger.ui-premium-signature {
        width: min(100%, 374px)
      }

      .ui-premium-signature .login-control.form-control {
        font-size: 16px
      }
    }

    @media (max-width:991.98px) {
      .ui-premium-signature .signature-copy p {
        margin-bottom: 24px
      }

      .ui-premium-signature #loginForm {
        gap: 14px
      }
    }

    @media (max-width:430px) {
      .ui-premium-signature .signature-badge {
        margin-bottom: 16px
      }

      .ui-premium-signature .signature-copy p {
        margin-top: 7px;
        margin-bottom: 21px
      }

      .ui-premium-signature #loginForm {
        gap: 13px
      }

      .ui-premium-signature .field-label {
        margin-bottom: 7px
      }

      .ui-premium-signature .login-options {
        margin-top: 1px;
        margin-bottom: 1px
      }

      .ui-premium-signature .login-submit {
        height: 52px;
        min-height: 52px;
        margin-top: 2px;
        border-radius: 17px;
        padding-left: 42px;
        grid-template-columns: minmax(0, 1fr) 34px
      }

      .ui-premium-signature .login-submit-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%
      }
    }

    @media (max-width:430px) {
      .ui-premium-signature .signature-badge {
        width: 92px;
        height: 92px
      }

      .ui-premium-signature .signature-core {
        width: 68px;
        height: 68px
      }

      .ui-premium-signature .signature-core i {
        font-size: 2.28rem
      }

      .ui-premium-signature .signature-copy h1 {
        font-size: 1.8rem
      }
    }

/* Server integration only; preserves the original login visual. */
.login-server-error{margin:0 0 12px;padding:10px 13px;border:1px solid rgba(220,53,69,.18);border-radius:12px;background:rgba(255,240,240,.92);color:#B43B3B;font-size:.76rem;text-align:left;box-shadow:0 8px 20px rgba(180,59,59,.05)}