/* Login / signup screen styling.
   Split from index.html — see palabra-file-split-plan.md. */

  .auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
  .auth-tab {
    flex: 1;
    padding: 10px 0;
    border-radius: 16px;
    border: 1px solid var(--outline);
    background: rgba(255,255,255,0.06);
    color: var(--cream-dim);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .auth-tab.active { background: var(--ochre); color: #241608; border-color: var(--ochre); }

  .login-screen .prompt-card { padding: 24px 20px; text-align: left; }
  .login-screen .btn-secondary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }

  .auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 0; color: var(--cream-dim); font-size: 12px;
  }
  .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--outline); }

  #confirm-field, #username-field {
    max-height: 0; overflow: hidden; opacity: 0; margin-bottom: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease;
  }
  #confirm-field.shown, #username-field.shown { max-height: 90px; opacity: 1; margin-bottom: 12px; }