:root{--bg:#0f172a;--card:#ffffff;--accent:#6d28d9}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#e6f0ff,#f8eafe);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#0f172a;
}
.card{
  width:100%; max-width:520px; background:var(--card); border-radius:14px; padding:22px;
  box-shadow:0 12px 40px rgba(16,24,40,0.12);
}
header h1{margin:0; color:var(--accent)}
.muted{color:#475569;margin-top:6px}
.form{display:grid;gap:8px;margin-top:12px}
.form input[type="text"], .form input[type="time"], .form select {
  padding:10px;border:1px solid #e6e9ef;border-radius:8px;font-size:1rem;outline:none;
}
.row{display:flex;gap:10px;align-items:center;margin-top:6px}
small{font-size:0.85rem;color:#64748b}
button#addBtn{
  margin-top:8px;background:linear-gradient(90deg,var(--accent),#4f46e5);
  color:white;padding:10px;border:0;border-radius:10px;cursor:pointer;font-weight:700;
  box-shadow:0 10px 18px rgba(79,70,229,0.12);
}
.list{margin-top:14px}
#list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.item{
  display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;
  background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid #eef2ff;
}
.controls button{background:transparent;border:0;margin-left:8px;cursor:pointer;color:#374151;font-weight:600}
.small{font-size:0.9rem;color:#475569}