body {
            font-family: 'Google Sans', Roboto, Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            min-height: 100vh;
            margin: 0;
            color: #202124;
            font-size: 14px;
        }
        .main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
        .login-box {
            background-color: #ffffff;
            border: 1px solid #dadce0;
            border-radius: 8px;
            padding: 48px 40px 36px;
            width: 100%;
            max-width: 448px;
            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
            box-sizing: border-box;
            text-align: left;
            position: relative;
            overflow: hidden;
            transition: max-width 0.3s ease-in-out, padding 0.3s ease-in-out;
        }
        .login-box.step1-active,
        .login-box.step2-active,
        .login-box.step3-active,
        .login-box.step4-active {
            max-width: 800px;
        }

        .horizontal-loading-bar {
            display: none;
            position: absolute; top: 0; left: 0; width: 100%; height: 3px;
            background-color: transparent; overflow: hidden; z-index: 21;
        }
        .horizontal-loading-bar .bar-segment {
            position: absolute; top: 0; bottom: 0;
            background-color: #1a73e8; width: 35%;
            animation: indeterminate-progress-bar 1.5s linear infinite;
        }
        @keyframes indeterminate-progress-bar {
            0% { left: -35%; width: 35%; } 50% { width: 40%; } 100% { left: 100%; width: 30%; }
        }

        .form-content-overlay {
            display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(255, 255, 255, 0.75); z-index: 20;
        }

        .logo-area { margin-bottom: 24px; }
        .logo { width: 40px; height: auto; display: block; }

        .login-box h1 { font-size: 24px; font-weight: 400; line-height: 1.3333; margin-top: 0; margin-bottom: 16px; color: #202124; }

        .login-box .subheading {
            font-size: 16px; font-weight: 400; line-height: 1.5;
            margin-top: 0; margin-bottom: 24px; color: #202124;
        }
        .left-column-2fa .user-identifier-display {
            margin-top: 16px;
            margin-bottom: 16px;
        }

        .input-wrapper { position: relative; margin-bottom: 4px; }
        .input-field {
            width: 100%; padding: 13px 15px; font-size: 16px;
            border: 1px solid #dadce0; border-radius: 4px;
            box-sizing: border-box; color: #202124;
            background-color: transparent; line-height: 24px; height: 52px;
        }
        .input-label {
            position: absolute; left: 16px; top: 14px; font-size: 16px;
            color: #5f6368; pointer-events: none;
            transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
            background-color: #fff; padding: 0 4px;
            z-index: 1;
        }
        .input-field:focus + .input-label,
        .input-field.has-value + .input-label {
             top: -9px;
             font-size: 12px;
        }
        .input-field:focus + .input-label {
            color: #1a73e8;
        }

        .input-wrapper.error .input-field { border-color: #d93025; border-width: 2px; padding-left: 14px; padding-right: 14px;}
        .input-wrapper.error .input-label,
        .input-wrapper.error .input-field:focus + .input-label { color: #d93025; }
        .input-error-message {
            display: none; align-items: center; color: #d93025;
            font-size: 12px; margin-top: 4px; padding-left: 16px;
        }
        .input-error-message.visible { display: flex; }
        .input-error-message svg { width: 16px; height: 16px; margin-right: 8px; fill: #d93025; }

        .link-container { margin-top: 8px; margin-bottom: 30px; }
        .text-link { color: #1a73e8; font-weight: 500; text-decoration: none; font-size: 14px; padding: 4px 2px; border-radius: 4px; display: inline-block; }
        .text-link:hover { text-decoration: underline; background-color: rgba(26,115,232,0.04); }
        .guest-mode-info { color: #3c4043; font-size: 14px; line-height: 1.4286; margin-top: 0; margin-bottom: 30px; }
        .guest-mode-info a { color: #1a73e8; text-decoration: none; font-weight: 500; }
        .guest-mode-info a:hover { text-decoration: underline; }
        .actions-container {
            display: flex;
            align-items: center;
            margin-top: 40px;
            width: 100%;
            justify-content: flex-end;
        }

        .next-button { background-color: #1a73e8; color: #ffffff; font-size: 14px; font-weight: 500; border: none; border-radius: 4px; padding: 0 24px; cursor: pointer; text-decoration: none; height: 36px; line-height: 36px; min-width: 88px; text-align: center; }
        .next-button:hover { background-color: #1869cf; box-shadow: 0 1px 1px 0 rgba(66,133,244,0.45), 0 1px 3px 1px rgba(66,133,244,0.3); }

        .user-identifier-display { display: inline-flex; align-items: center;  border: 1px solid #dadce0; border-radius: 16px; padding: 4px 12px 4px 8px; font-size: 14px; color: #3c4043; margin-bottom: 24px; cursor: pointer; }
        .user-identifier-display:hover { background-color: rgba(60,64,67,0.04); }
        .user-identifier-display .icon-person { width: 16px; height: 16px; margin-right: 8px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235f6368"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'); background-repeat: no-repeat; background-size: contain; }
        .user-identifier-display .dropdown-arrow { font-size: 12px; margin-left: 8px; color: #5f6368; }
        .show-password-container { margin-top: 16px; margin-bottom: 24px; display: flex; align-items: center; }
        .show-password-container input[type="checkbox"] { margin-right: 8px; width: 16px; height: 16px; accent-color: #1a73e8; }
        .show-password-container label { font-size: 14px; color: #202124; cursor: pointer; }

        .content-wrapper-2fa { display: flex; gap: 32px; margin-top: 0; align-items: flex-start; }
        .left-column-2fa {
            flex: 6;
            display: flex; flex-direction: column; min-width: 0;
        }
        .right-column-2fa {
            flex: 4;
            text-align: left;
            padding-top: 5px;
        }
        #login-step4 .right-column-2fa {
             text-align: center;
             padding-top: 20px;
        }

        #login-step3 .phone-image {
            width: 100%; max-width: 80px;
            height: auto; margin-bottom: 20px; display: block; margin-left:auto; margin-right:auto;
        }
        #login-step3 .instruction-heading-2fa,
        #login-step4 .right-column-2fa .instruction-heading-2fa {
            font-size: 18px;
            font-weight: 400;
            color: #202124; margin-bottom: 16px;
        }
         #login-step3 .instruction-heading-2fa {
             font-size: 16px; font-weight: bold;
         }

        #login-step3 .instruction-text-2fa,
        #login-step4 .right-column-2fa .instruction-text-2fa {
            font-size: 14px; color: #5f6368; line-height: 1.6;
            margin-bottom: 20px;
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
        }
         #login-step3 .instruction-text-2fa {
             max-width: none;
             margin-left: 0;
             margin-right: 0;
         }

        #login-step4 .verification-code-display {
            font-size: 72px;
            font-weight: 400;
            color: #202124;
            margin-top: 30px;
            margin-bottom: 24px;
            line-height: 1;
        }

        footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 448px;
            padding: 0;
            margin: 24px auto 24px auto;
            box-sizing: border-box;
            transition: max-width 0.3s ease-in-out;
        }
        .login-box.step1-active + footer,
        .login-box.step2-active + footer,
        .login-box.step3-active + footer,
        .login-box.step4-active + footer {
            max-width: 800px;
        }

        .language-selector-wrapper { }
        .language-selector { font-size: 12px; color: #3c4043; background-color: transparent; border: 1px solid transparent; padding: 7px 8px; position: relative; cursor: pointer; border-radius: 4px; margin-left: -8px; }
        .language-selector:hover { background-color: rgba(60,64,67,0.08); border-color: rgba(60,64,67,0.08); }
        .language-selector select { opacity: 0; position: absolute; left:0; top:0; width:100%; height:100%; cursor: pointer; }
        .language-selector .dropdown-arrow { margin-left: 8px; font-size: 10px; color: #5f6368; }
        .footer-links { display: flex; gap: 24px; }
        .footer-links a { font-size: 12px; color: #5f6368; text-decoration: none; padding: 8px 0; }
        .footer-links a:hover { color: #202124; }

        @media (max-width: 800px) {
            .login-box.step1-active,
            .login-box.step2-active,
            .login-box.step3-active,
            .login-box.step4-active {
                max-width: 95%; padding-left: 24px; padding-right: 24px;
            }
            .login-box.step1-active + footer,
            .login-box.step2-active + footer,
            .login-box.step3-active + footer,
            .login-box.step4-active + footer { max-width: 95%; }

            .content-wrapper-2fa {
                flex-direction: column; align-items: stretch; gap: 24px;
            }
            .left-column-2fa, .right-column-2fa {
                flex-basis: auto !important;
                width:100%;
                text-align: center;
            }
            .left-column-2fa .logo-area,
            .left-column-2fa .user-identifier-display {
                margin-left: auto; margin-right: auto;
            }
            .right-column-2fa { padding-top: 0; }

            .right-column-2fa .phone-image,
            .right-column-2fa .verification-code-display { margin-left: auto; margin-right: auto; }

            .right-column-2fa .instruction-heading-2fa,
            .right-column-2fa .instruction-text-2fa { text-align: center; }

            .right-column-2fa .input-wrapper { text-align: left; }

            .right-column-2fa .actions-container {
                justify-content: center; flex-direction: column; gap: 16px;
            }
        }

        @media (max-width: 480px) {
            .login-box, .login-box.step1-active, .login-box.step2-active, .login-box.step3-active, .login-box.step4-active {
                border: none; box-shadow: none; padding: 24px 24px 36px; max-width: 100%;
            }
            body { background-color: #ffffff; }
            footer, .login-box.step1-active + footer, .login-box.step2-active + footer, .login-box.step3-active + footer, .login-box.step4-active + footer {
                padding: 0 24px; max-width: 100%; margin-top: 24px;
            }
            .main-container { justify-content: center; padding-top: 20px; padding-bottom: 20px;}
            #login-step4 .right-column-2fa .instruction-text-2fa { max-width: 90%; }
        }