* { box-sizing: border-box; }
body { font-family: system-ui, Arial, sans-serif; margin:0; background:#f9fafb; color:#1f2937; }
header { background:#111827; color:#fff; padding:1rem 1.25rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
h1 { font-size:1.25rem; margin:0; }
#auth-section { display:flex; gap:0.5rem; align-items:center; }
#user-info { font-size:0.85rem; opacity:0.9; }
main { display:grid; gap:2rem; padding:1.5rem; grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr); }
footer { text-align:center; padding:1rem; font-size:0.7rem; background:#e5e7eb; }

button { cursor:pointer; border:1px solid #374151; background:#fff; color:#111827; padding:0.5rem 0.75rem; border-radius:6px; font-size:0.9rem; transition:background .15s; }
button:hover:not(:disabled) { background:#f3f4f6; }
button:disabled { opacity:0.5; cursor:not-allowed; }
button.primary { background:#2563eb; color:#fff; border-color:#1d4ed8; }
button.primary:hover:not(:disabled) { background:#1d4ed8; }
button.secondary { background:#6b7280; color:#fff; border-color:#4b5563; }
button.secondary:hover:not(:disabled) { background:#4b5563; }

#calendar-picker { background:#fff; padding:1rem; border:1px solid #d1d5db; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,.06); }
.calendar-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
#month-label { font-weight:600; }
#calendar-grid { width:100%; border-collapse: collapse; table-layout:fixed; }
#calendar-grid th { font-size:0.75rem; font-weight:600; text-transform:uppercase; padding:0.3rem; color:#374151; }
#calendar-grid td { text-align:center; padding:0.4rem 0.25rem; position:relative; }
#calendar-grid button.date-btn { width:100%; aspect-ratio:1/1; border:1px solid transparent; background:transparent; border-radius:8px; font-size:0.85rem; line-height:1; }
#calendar-grid button.date-btn:hover { background:#e5e7eb; }
#calendar-grid button.date-btn.selected { background:#2563eb; color:#fff; font-weight:600; }
#calendar-grid button.date-btn.today { outline:2px solid #2563eb; }
#calendar-grid button.date-btn.past { opacity:0.35; }

.legend { display:flex; gap:1rem; font-size:0.65rem; margin-top:0.5rem; }
.legend-item { display:flex; align-items:center; gap:0.25rem; }
.swatch { width:14px; height:14px; border-radius:4px; display:inline-block; background:#e5e7eb; border:1px solid #9ca3af; }
.swatch.selected { background:#2563eb; border-color:#1d4ed8; }
.swatch.today { background:#93c5fd; border-color:#3b82f6; }

#selected-dates-wrapper { margin-top:0.75rem; }
#selected-dates { list-style:none; padding:0; margin:0.5rem 0; max-height:120px; overflow:auto; border:1px solid #e5e7eb; border-radius:8px; }
#selected-dates li { padding:0.35rem 0.6rem; font-size:0.75rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f3f4f6; }
#selected-dates li:last-child { border-bottom:none; }
.remove-date { background:#ef4444; border-color:#dc2626; color:#fff; font-size:0.65rem; padding:0.25rem 0.45rem; }
.remove-date:hover { background:#dc2626; }

#event-form-section { background:#fff; padding:1rem 1.25rem; border:1px solid #d1d5db; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,.06); }
#event-form { display:flex; flex-direction:column; gap:0.75rem; }
#event-form label { display:flex; flex-direction:column; font-size:0.75rem; gap:0.25rem; font-weight:600; }
#event-form input[type=text], #event-form input[type=time], #event-form textarea, #event-form select { padding:0.5rem; border:1px solid #9ca3af; border-radius:8px; font-size:0.85rem; background:#f9fafb; }
#event-form textarea { min-height:80px; resize:vertical; }
.time-row { display:flex; gap:0.75rem; flex-wrap:wrap; }
.checkbox { flex-direction:row; align-items:center; font-weight:500; }
.checkbox input { margin-right:0.4rem; }
.actions { display:flex; justify-content:flex-end; }
#feedback { margin-top:0.75rem; font-size:0.75rem; min-height:1.2rem; }
.success { color:#065f46; }
.error { color:#b91c1c; }
.info { color:#1e3a8a; }

@media (max-width: 860px) {
  main { grid-template-columns:1fr; }
}