---

### 3. `style.css` (Voliteľný, ale odporúčaný základný štýl)
Aby aplikácia ihneď dobre vyzerala, ukladala položky zarovnane a správne skrývala neaktívne prvky, pridajte si do priečinka tento základný moderný CSS súbor:

```css
/* style.css */
body { font-family: sans-serif; background-color: #f4f6f9; color: #333; margin: 0; padding: 20px; }
.container { max-width: 1000px; margin: 0 auto; }
.hidden { display: none !important; }
.card { background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; }
h1 { font-family: sans-serif; background-color: #f4f6f9; color: #333; margin: 0; padding: 10px; }
h2 { font-family: sans-serif; background-color: #f4f6f9; color: #333; margin: 0; padding: 10px; text-align: center;}
p { font-family: sans-serif; background-color: #f4f6f9; color: #333; margin: 0; padding: 10px; }
header { display: flex; justify-content: space-between; align-items: center; background: #2c3e50; color: white; padding: 15px 25px; border-radius: 8px; margin-bottom: 20px; font-family: sans-serif;}
.form-group { margin-bottom: 15px; display: flex; flex-direction: column; }
.form-group-row { display: flex; gap: 15px; }
.form-group-row .form-group { flex: 1; }
label { font-weight: bold; margin-bottom: 5px; font-size: 14px; font-family: sans-serif; }
input, select, textarea { padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; font-family: sans-serif; }
.btn { padding: 10px 18px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; }
.btn-primary { background: #3498db; color: white; }
.btn-success { background: #2ecc71; color: white; }
.btn-secondary { background: #95a5a6; color: white; }
.btn-danger { background: #e74c3c; color: white; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.alert { padding: 15px; border-radius: 4px; margin-bottom: 20px; font-weight: bold; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
.table th { background-color: #f8f9fa; }
.text-truncate { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-header, .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.timeline { position: relative; margin: 20px 0; padding-left: 20px; border-left: 3px solid #3498db; }
.timeline-item { margin-bottom: 20px; position: relative; }
.timeline-date { font-size: 12px; color: #7f8c8d; font-weight: bold; }
.timeline-content { background: #f8f9fa; padding: 10px 15px; border-radius: 4px; margin-top: 5px; }
.timeline-content h4 { margin: 0 0 5px 0; color: #2c3e50; }
.timeline-content p { margin: 0; font-size: 14px; }