:root {
  --cream: #f5f5f5;
  --navy: #4a4a4a;
  --maroon: #a89f91;
  --success-green: #6a6a6a;
}

body {
  background-color: var(--cream);
  font-family: 'Graduate', serif;
}

.app-container {
  max-width: 900px;
  margin: 2rem auto;
}

.header {
  position: relative;
}

.pennant {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 60px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.pennant-left { left: 20px; background-color: var(--navy); }
.pennant-right { right: 20px; background-color: var(--maroon); }

.form-container {
  border: 2px solid var(--navy);
}

input {
  border: none;
  border-bottom: 2px solid var(--maroon);
  padding: 0.75rem;
  background-color: rgba(255,255,255,0.7);
  transition: all 0.3s;
}

input:focus {
  outline: none;
  border-bottom-width: 3px;
  background-color: #fff;
}

.error-message { color: #d9534f; font-size: 0.85rem; display: none; }
input.error + .error-message { display: block; }
input.error { border-bottom-color: #d9534f; }

.btn-signup { 
  background-color: var(--maroon);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}

.btn-signup:hover { background-color: var(--navy); }
.btn-signup:disabled { opacity: 0.7; cursor: not-allowed; }

.spinner { display: none; animation: spin 1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.success-message { display: none; }
.success-message.show { display: block; }

body { font-family: Arial, sans-serif; background: #f4f4f4; }
.container { max-width: 400px; margin: 50px auto; padding: 20px; background: #fff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
input, button { width: 100%; margin: 8px 0; padding: 8px; }
button { cursor: pointer; }
#message { margin-top: 10px; font-weight: bold; }