* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 1rem; }
header nav { margin-bottom: 1rem; }
header nav a { margin-right: 1rem; }
.auth { margin-right: 1rem; }
main#content { min-height: 200px; }

.table { border-collapse: collapse; width: 100%; }
.table th, .table td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; }
.table th { background: #f0f0f0; }

.btn { padding: 0.4rem 0.8rem; cursor: pointer; border: 1px solid #ccc; background: #fff; border-radius: 4px; }
.btn.primary { background: #0066cc; color: #fff; border-color: #0066cc; }
.btn.small { padding: 0.2rem 0.5rem; font-size: 0.9rem; margin-right: 0.25rem; }

.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-box { max-width: 360px; width: 100%; }
.login-box h1 { font-size: 1.25rem; }
.login-box input { width: 100%; padding: 0.5rem; margin: 0.25rem 0; }
.login-box button { width: 100%; padding: 0.6rem; margin-top: 0.5rem; cursor: pointer; }
.error { color: #c00; font-size: 0.9rem; margin-top: 0.5rem; }

.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal .modal-content { background: #fff; padding: 1.5rem; border-radius: 8px; max-width: 480px; width: 90%; }
.modal .modal-content label { display: block; margin-top: 0.5rem; }
.modal .modal-content input[type=text] { width: 100%; padding: 0.5rem; }
.modal .modal-content .form-actions { margin-top: 1rem; }
.modal .modal-content .form-actions button { margin-right: 0.5rem; }