body { font-family: 'Poppins', sans-serif; background: #f4f6f9; margin: 0; padding: 0; }
.header { background: #d32f2f; color: white; padding: 15px; text-align: center; }
.container { padding: 20px; max-width: 500px; margin: 0 auto; background: white; margin-top: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.input-group { margin-bottom: 15px; }
.input-group input { width: 92%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; margin-bottom: 10px; }
.btn-primary { background: #d32f2f; color: white; border: none; padding: 12px; width: 100%; border-radius: 5px; font-size: 16px; cursor: pointer; }
.btn-secondary { background: #333; color: white; border: none; padding: 12px; width: 100%; border-radius: 5px; font-size: 16px; cursor: pointer; }
.or-divider { text-align: center; margin: 15px 0; color: #888; font-weight: bold; }

/* Modal Styles */
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 85%; max-width: 400px; border-radius: 10px; text-align: center; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }

.alert-box { padding: 10px; border-radius: 5px; margin-bottom: 15px; font-weight: bold; color: white; }
.warning { background: #ff9800; }
.success { background: #4caf50; }
hr { border: 0; border-top: 1px solid #eee; margin: 15px 0; }