:root {
  --maroon: #4a0404;
  --maroon2: #6b0606;
  --gold: #c8960c;
  --gold2: #f0b429;
  --cream: #fff9f0;
  --shadow-dark: #2a0202;
  --green: #1b5e20;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--cream); color: #222; min-height: 100vh; }

/* PHYSICAL BUTTONS */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.03em; border-radius: 10px;
  padding: 11px 22px; cursor: pointer; border: none; outline: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  position: relative; top: 0; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: linear-gradient(145deg, #8b2020 0%, var(--maroon) 60%);
  color: #fff9e6;
  box-shadow: 0 6px 0 0 var(--shadow-dark), 0 8px 12px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.18);
}
.btn-primary:hover { background: linear-gradient(145deg, #a02020 0%, var(--maroon2) 60%); box-shadow: 0 7px 0 0 var(--shadow-dark), 0 10px 16px rgba(0,0,0,0.5); top: -1px; }
.btn-primary:active { transform: translateY(4px); top: 4px; box-shadow: 0 2px 0 0 var(--shadow-dark), 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 3px rgba(0,0,0,0.35); }

.btn-secondary {
  background: linear-gradient(145deg, #e6b020 0%, var(--gold) 60%);
  color: var(--maroon);
  box-shadow: 0 6px 0 0 #7a5500, 0 8px 12px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.3);
}
.btn-secondary:hover { background: linear-gradient(145deg, #f0c030 0%, var(--gold2) 60%); box-shadow: 0 7px 0 0 #7a5500, 0 10px 16px rgba(0,0,0,0.4); top: -1px; }
.btn-secondary:active { transform: translateY(4px); top: 4px; box-shadow: 0 2px 0 0 #7a5500, inset 0 2px 3px rgba(0,0,0,0.3); }

.btn-green {
  background: linear-gradient(145deg, #2e7d32 0%, #1b5e20 60%);
  color: #fff;
  box-shadow: 0 6px 0 0 #0a3d0c, 0 8px 12px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.2);
}
.btn-green:hover { background: linear-gradient(145deg, #388e3c 0%, #2e7d32 60%); box-shadow: 0 7px 0 0 #0a3d0c, 0 10px 16px rgba(0,0,0,0.45); top: -1px; }
.btn-green:active { transform: translateY(4px); top: 4px; box-shadow: 0 2px 0 0 #0a3d0c, inset 0 2px 3px rgba(0,0,0,0.3); }

.btn-outline {
  background: transparent; color: var(--maroon); border: 2px solid var(--maroon);
  box-shadow: 0 5px 0 0 var(--maroon), 0 7px 10px rgba(0,0,0,0.2);
}
.btn-outline:hover { background: rgba(74,4,4,0.06); box-shadow: 0 6px 0 0 var(--maroon); top: -1px; }
.btn-outline:active { transform: translateY(4px); top: 4px; box-shadow: 0 1px 0 0 var(--maroon), inset 0 2px 3px rgba(0,0,0,0.15); }

.btn-block { width: 100%; text-align: center; display: block; }

/* HEADER */
.page-header {
  background: linear-gradient(135deg, var(--maroon) 0%, #2a0202 100%);
  color: white; text-align: center; padding: 22px 20px 18px;
}
.page-header img { width: 70px; border-radius: 50%; border: 2px solid var(--gold); margin-bottom: 8px; }
.page-header h1 { font-size: 1.1rem; font-weight: 900; color: var(--gold2); }
.page-header p { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 3px; }

/* FORM STYLES */
.form-wrap { max-width: 520px; margin: 0 auto; padding: 20px 16px; }
.form-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 3px 16px rgba(74,4,4,0.1); margin-bottom: 16px; }
.form-title { font-size: 1rem; font-weight: 800; color: var(--maroon); border-left: 4px solid var(--gold); padding-left: 10px; margin-bottom: 16px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: #444; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px;
  font-size: 0.88rem; outline: none; transition: border 0.2s; font-family: inherit; background: #fafafa;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--maroon); background: white; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group .hint { font-size: 0.7rem; color: #888; margin-top: 3px; }
.required-star { color: #c00; }

/* CHECKBOX */
.check-wrap { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; }
.check-wrap input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--maroon); flex-shrink: 0; }
.check-wrap label { font-size: 0.78rem; color: #555; line-height: 1.5; }

/* SUCCESS / ERROR */
.msg-box { border-radius: 10px; padding: 14px 16px; font-size: 0.85rem; text-align: center; margin-top: 12px; display: none; }
.msg-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.msg-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* BACK LINK */
.back-link { text-align: center; padding: 18px; }
.back-link a { color: var(--maroon); font-size: 0.85rem; font-weight: 600; text-decoration: none; }

/* SECTION TITLE */
.section-title { font-size: 1rem; font-weight: 800; color: var(--maroon); border-left: 4px solid var(--gold); padding-left: 10px; margin-bottom: 14px; }

/* LOADING SPINNER */
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }