html.login-page,
      body.login-page {
        background: #e0e0e0 !important;
      }
      body.login-page {
        display: grid;
        place-items: center;
        min-height: 100vh;
        padding: 24px 16px;
      }
      main.login-card {
        position: relative;
        overflow: hidden;
        width: min(440px, calc(100vw - 32px));
        margin: 0;
        padding: 36px 28px 56px;
        border: none !important;
        border-radius: 36px;
        background: #e0e0e0 !important;
        box-shadow:
          20px 20px 60px #bebebe,
          -20px -20px 60px #ffffff;
      }
      .login-card > :not(.login-logo) {
        position: relative;
        z-index: 1;
      }
      .login-card h1 {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: center;
      }
      .login-logo {
        position: absolute;
        z-index: 0;
        left: 50%;
        bottom: -8%;
        width: min(320px, 88%);
        height: auto;
        object-fit: contain;
        transform: translate(-50%, -18%);
        pointer-events: none;
        user-select: none;
        opacity: 0.88;
      }
      .login-form-area {
        position: relative;
        z-index: 2;
        margin-top: 8px;
      }
      #loginForm {
        display: grid;
        gap: 20px;
      }
      #loginForm .input-group {
        position: relative;
        display: block;
        margin: 0;
      }
      #loginForm .input-group .input {
        width: 100%;
        height: auto;
        min-height: 3.25rem;
        border: none !important;
        border-radius: 1rem;
        background: #e0e0e0;
        box-shadow:
          inset 6px 6px 12px #bebebe,
          inset -6px -6px 12px #ffffff;
        padding: 1.15rem 1rem 0.8rem;
        font-size: 1rem;
        color: #111827;
        transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      #loginForm .input-group.has-password-toggle .input {
        padding-right: 3rem;
      }
      #loginForm .password-toggle-btn {
        position: absolute;
        right: 12px;
        top: calc(3.25rem / 2);
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        color: #6b7280 !important;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: none !important;
        transition: color 150ms ease, background-color 150ms ease, transform 120ms ease;
        z-index: 2;
      }
      #loginForm .password-toggle-btn:hover {
        color: #111827 !important;
        background: rgba(0, 0, 0, 0.05) !important;
        transform: translateY(-50%) scale(1.06);
      }
      #loginForm .password-toggle-btn:active {
        transform: translateY(-50%) scale(0.95);
        background: rgba(0, 0, 0, 0.08) !important;
      }
      #loginForm .password-toggle-btn:focus-visible {
        outline: 2px solid var(--btt-color-accent-focus, #e86339);
        outline-offset: 2px;
      }
      #loginForm .input-group .user-label {
        position: absolute;
        left: 15px;
        top: 0;
        display: inline-block;
        margin: 0;
        color: #6b7280;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1;
        pointer-events: none;
        transform: translateY(1.2rem);
        transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: left center;
      }
      #loginForm .input-group .input:focus {
        outline: none;
        box-shadow:
          inset 4px 4px 10px #bebebe,
          inset -4px -4px 10px #ffffff,
          0 0 0 3px var(--btt-color-accent-focus);
      }
      #loginForm .input-group .input:focus ~ .user-label,
      #loginForm .input-group .input:not(:placeholder-shown) ~ .user-label {
        transform: translateY(-50%) scale(0.82);
        background: #e0e0e0;
        padding: 0 0.35em;
        color: var(--btt-color-accent-text);
      }
      #loginForm button[type="submit"] {
        height: 48px;
        min-height: 48px;
        margin-top: 4px;
        border: none !important;
        border-radius: 1rem;
        background: #e0e0e0 !important;
        color: var(--btt-color-accent-text) !important;
        font-family: inherit;
        font-weight: 700;
        box-shadow:
          8px 8px 16px #bebebe,
          -8px -8px 16px #ffffff;
        transition: box-shadow 120ms ease, transform 120ms ease;
      }
      #loginForm button[type="submit"]:hover:not(:disabled) {
        background: #e0e0e0 !important;
        transform: translateY(-1px);
        box-shadow:
          10px 10px 20px #bebebe,
          -10px -10px 20px #ffffff;
      }
      #loginForm button[type="submit"]:active:not(:disabled) {
        transform: translateY(1px);
        box-shadow:
          inset 6px 6px 12px #bebebe,
          inset -6px -6px 12px #ffffff;
      }
      .login-form-area #result {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        z-index: 3;
        width: 100%;
        margin: 0;
        padding: 10px 12px;
        border-radius: 12px;
        background: #e0e0e0;
        box-shadow:
          6px 6px 14px #bebebe,
          -4px -4px 10px #ffffff;
        color: #b42318;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
        text-align: left;
        white-space: pre-wrap;
      }
      #result:empty {
        display: none;
      }
      @media (max-width: 480px) {
        main.login-card {
          padding: 28px 20px 72px;
        }
        .login-logo {
          bottom: -12%;
          opacity: 0.5;
        }
        .login-form-area #result {
          font-size: 13px;
        }
      }