/* --- Global Styles & Resets --- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    font-family: 'Poppins', sans-serif;

    background-color: #f1f1f2; /* TikTok's light grey background */

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 20px;

}

/* --- Main Form Container --- */

.auth-container {

    width: 100%;

    max-width: 400px;

    background-color: #ffffff;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    padding: 40px 30px;

    text-align: center;

}

/* Hide all pages by default */

.page {

    display: none;

}

/* Show the active page */

.page.active {

    display: block;

}

/* --- Logo & Headings --- */

.logo {

    font-size: 50px;

    margin-bottom: 20px;

    color: #161823; /* TikTok's dark color */

}

.auth-title {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 10px;

    color: #161823;

}

.auth-subtitle {

    font-size: 14px;

    color: #8a8b91;

    margin-bottom: 20px;

}

/* NEW: Style for displaying Google email */

.google-info {

    font-size: 14px;

    margin-bottom: 20px;

    word-break: break-all;

}

.google-info strong {

    color: #161823;

}

/* --- Input Fields --- */

.input-group {

    position: relative;

    margin-bottom: 15px;

}

.input-field {

    width: 100%;

    padding: 12px 12px 12px 40px; /* Space for the icon */

    border: 1px solid #ddd;

    border-radius: 6px;

    background-color: #f1f1f2;

    font-size: 14px;

}

.input-field:focus {

    outline: none;

    border-color: #8a8b91;

}

.input-group i {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #8a8b91;

}

/* --- Buttons --- */

.btn {

    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 6px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.2s ease;

}

.btn-primary {

    background-color: #FE2C55; /* TikTok's red */

    color: #ffffff;

    margin-top: 10px;

}

.btn-primary:hover {

    background-color: #e4274c;

}

.btn-secondary {

    background-color: #f1f1f2;

    color: #161823;

    margin-top: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}

.btn-secondary:hover {

    background-color: #e0e0e2;

}

/* --- Links & Dividers --- */

.link {

    color: #161823;

    text-decoration: none;

    font-size: 12px;

    display: block;

    margin-top: 15px;

    cursor: pointer;

}

.link:hover {

    text-decoration: underline;

}

.divider {

    display: flex;

    align-items: center;

    text-align: center;

    color: #8a8b91;

    margin: 25px 0;

    font-size: 12px;

}

.divider::before,

.divider::after {

    content: '';

    flex: 1;

    border-bottom: 1px solid #ddd;

}

.divider:not(:empty)::before {

    margin-right: .5em;

}

.divider:not(:empty)::after {

    margin-left: .5em;

}

/* --- Switcher section at the bottom --- */

.switcher {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid #ddd;

    font-size: 14px;

}

.switcher-link {

    font-weight: 600;

    color: #FE2C55; /* TikTok's red */

    cursor: pointer;

}

.switcher-link:hover {

    text-decoration: underline;

}