* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-family-base);
  }
  
  .login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    padding: 2rem;
    padding-top: 100px;
  }
  
  .login-content {
    max-width: 450px;
    width: 100%;
    text-align: center;
  }
  
  
  .login-title {
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-semibold);
    color: var(--navy);
    margin-bottom: 1.5rem;
    line-height: var(--line-height-tight);
    text-align: center;
  }

  .login-title .brand {
    font-weight: var(--font-weight-semibold);
  }

  /* Subhead under the heading. Hidden by login.js once the page enters
     sign-in mode (heading already swaps to "Welcome back"). */
  .login-subhead {
    font-size: var(--text-base);
    color: #555;
    margin: 0 0 1.75rem;
    line-height: 1.4;
  }

  /* Sign-in-with-Google block. Sits above the email form so it's the
     first thing the eye lands on. */
  .oauth-options {
    margin: 0 0 1.25rem;
    display: flex;
    justify-content: center;
  }
  #googleSignInForm {
    width: 100%;
    max-width: 260px;
  }

  /* "or" divider between the Google button and the email form.
     Pure CSS — no extra divs needed. */
  .oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.25rem;
    color: var(--gray-mid);
    font-size: var(--text-sm);
  }
  .oauth-divider::before,
  .oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-light);
  }
  .oauth-divider span {
    text-transform: lowercase;
  }

  /* Google's official "Sign in with Google" Material button styles.
     Copied verbatim from Google's branding asset so the visual is
     identical to any other GIS button in the wild. Do not restyle —
     Google's brand guidelines require the button to look like this. */
  .gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    max-width: 400px;
    min-width: min-content;
  }
  .gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
  }
  .gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }
  .gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }
  .gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  .gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
  }
  .gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
  }
  .gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
  }
  .gsi-material-button:not(:disabled):active .gsi-material-button-state,
  .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
  }
  .gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  }
  .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
  }
  
  .login-form-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }
  
  .login-box {
    background: transparent;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .email-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-light);
    border-radius: 16px;
    padding: 16px;
    min-height: 56px;
  }
  
  .login-input,
  .name-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--navy);
    /* Defensive: Safari + some Chrome themes default
       -webkit-text-fill-color (which wins over `color`) to white
       on form inputs, producing white-text-on-white-box where the
       user can't see what they're typing. Pin it to --black to
       match `color`. */
    -webkit-text-fill-color: var(--navy);
    caret-color: var(--navy);
  }

  .login-input::placeholder,
  .name-input::placeholder {
    color: var(--gray-mid);
    -webkit-text-fill-color: var(--gray-mid);
    font-weight: 400;
  }

  /* Browser autofill (Chrome / Safari password manager) repaints
     the input background to its own pale yellow AND overrides text
     fill to the OS theme colour — on dark-mode-aware browsers that
     resolves to white, hiding the autofilled email. Lock both back
     to our tokens. The 5000s transition is the standard trick to
     mask the autofill background swap without breaking accessibility. */
  .login-input:-webkit-autofill,
  .login-input:-webkit-autofill:hover,
  .login-input:-webkit-autofill:focus,
  .name-input:-webkit-autofill,
  .name-input:-webkit-autofill:hover,
  .name-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--navy);
    -webkit-box-shadow: 0 0 0 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
  }
  
  .expandable-section {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
  }
  .expandable-section.visible {
    max-height: 500px;
    opacity: 1;
    margin-top: 16px;
  }
  
  .name-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }
  
  .name-input-wrapper {
    flex: 1;
    border: 1px solid var(--gray-light);
    border-radius: 16px;
    padding: 16px;
    min-height: 56px;
    display: flex;
    align-items: center;
  }
  
  .name-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--navy);
  }
  
  .name-input::placeholder {
    color: var(--gray-mid);
    font-weight: 400;
  }
  
  .password-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-light);
    border-radius: 16px;
    padding: 16px;
    min-height: 56px;
    margin-bottom: 16px;
  }
  
  .password-hint {
    font-size: var(--text-xs);
    color: var(--gray-mid);
    text-align: left;
    padding-left: 8px;
    margin-bottom: 16px;
  }
  
  .continue-btn {
    width: 100%;
    padding: 16px 24px;
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: 16px;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    min-height: 56px;
  }
  
  .continue-btn:hover {
    opacity: 0.9;
  }
  
  .continue-btn:active {
    transform: scale(0.98);
  }
  
  .continue-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .error-message {
    color: var(--negative);
    font-size: var(--text-sm);
    margin-top: 8px;
    text-align: left;
    padding-left: 8px;
    display: none;
  }
  
  .error-message.visible {
    display: block;
  }
  
  .login-link {
    margin-top: 16px;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--gray-mid);
  }
  
  .login-link a {
    color: var(--gray-mid);
    font-size: var(--text-xs);
    font-weight: 400;
    text-decoration: underline;
  }
  
  .divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--gray-mid);
    font-size: var(--text-sm);
  }
  
  .divider::before,
  .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-light);
  }
  
  .divider span {
    padding: 0 16px;
  }
  
  .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    border: 1px solid var(--gray-light);
    border-radius: 16px;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--navy);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    min-height: 56px;
  }
  
  .social-btn:hover {
    background: var(--gray-background);
    border-color: var(--gray-mid);
  }
  
  .legal-disclaimer {
    margin-top: 16px;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--ink-2);
    line-height: var(--line-height-normal);
  }
  
  .legal-disclaimer a {
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: 400;
    text-decoration: underline;
  }
  
  @media (max-width: 768px) {
    .login-page {
      padding: 1rem;
      padding-top: 80px;
    }
    
    .login-title {
      font-size: var(--text-4xl);
    }
    
    .name-row {
      flex-direction: column;
      gap: 12px;
    }
    
    .login-box {
      border-radius: 20px;
    }
  }