.login-container { max-width: 24rem; margin: 2rem auto; padding: 0 1rem; }
  .login-card {
    background: white; border-radius: 1rem; padding: 2rem;
    box-shadow: 0 10px 40px rgb(0 0 0 / .08); border: 1px solid #e2e8f0;
  }
  .dark .login-card { background: rgb(15 23 42 / .8); border-color: rgb(51 65 85 / .6); }
  .login-field input {
    width: 100%; border-radius: .75rem; border: 1px solid #e2e8f0; background: white;
    color: #0f172a; padding: .75rem 1rem; font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
  }
  .dark .login-field input { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .2); color: white; }
  .login-field input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgb(99 102 241 / .15); }
  .login-field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .375rem; color: #1e293b; }
  .dark .login-field label { color: #e2e8f0; }
  .login-btn {
    width: 100%; padding: .75rem; background: linear-gradient(to right, #4f46e5, #4338ca);
    color: white; font-weight: 600; border-radius: .75rem; border: none; cursor: pointer;
    font-size: .875rem; box-shadow: 0 4px 12px rgb(99 102 241 / .3); transition: .15s;
  }
  .login-btn:hover { filter: brightness(1.1); box-shadow: 0 6px 20px rgb(99 102 241 / .4); }
  .login-error {
    padding: .75rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: .75rem;
    color: #b91c1c; font-size: .875rem; margin-bottom: 1rem;
  }
  .dark .login-error { background: rgb(239 68 68 / .15); border-color: rgb(239 68 68 / .3); color: #fca5a5; }

  .signup-container { max-width: 28rem; margin: 2rem auto; padding: 0 1rem; }
  .signup-card {
    background: white; border-radius: 1rem; padding: 2rem;
    box-shadow: 0 10px 40px rgb(0 0 0 / .08); border: 1px solid #e2e8f0;
  }
  .dark .signup-card { background: rgb(15 23 42 / .8); border-color: rgb(51 65 85 / .6); }
  .signup-field input, .signup-field select {
    width: 100%; border-radius: .75rem; border: 1px solid #e2e8f0; background: white;
    color: #0f172a; padding: .625rem 1rem; font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
  }
  .dark .signup-field input, .dark .signup-field select {
    background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .2); color: white;
  }
  .signup-field input:focus, .signup-field select:focus {
    outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgb(99 102 241 / .15);
  }
  .signup-field label {
    display: block; font-size: .875rem; font-weight: 500; margin-bottom: .25rem;
    color: #1e293b;
  }
  .dark .signup-field label { color: #e2e8f0; }
  .signup-btn {
    width: 100%; padding: .75rem; background: linear-gradient(to right, #4f46e5, #4338ca);
    color: white; font-weight: 600; border-radius: .75rem; border: none; cursor: pointer;
    font-size: .875rem; box-shadow: 0 4px 12px rgb(99 102 241 / .3); transition: .15s;
  }
  .signup-btn:hover { filter: brightness(1.1); box-shadow: 0 6px 20px rgb(99 102 241 / .4); }
  .signup-error { padding: .75rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: .75rem; color: #b91c1c; font-size: .875rem; margin-bottom: 1rem; }
  .dark .signup-error { background: rgb(239 68 68 / .15); border-color: rgb(239 68 68 / .3); color: #fca5a5; }
  .field-error { color: #dc2626; font-size: .75rem; margin-top: .25rem; }
  .dark .field-error { color: #fca5a5; }