使用 frontend-design 改进课程资料管理页面。
读取 docs/brief.md、src/style.css、src/app.js 和 prepare.py 中的页面结构，先预览现有产物。
用户是个人学习者，重点任务是按课程、分类和关键词找到资料。
保持原生 HTML、CSS、JavaScript 和现有生成方式；保留六条输入记录及其含义。
采用系统字体，不加载外部字体、图片或 CDN。先提出信息层级、配色与布局方案，暂不改代码。
方案确认后的实现范围是页面模板、src/style.css 和 src/app.js，不修改 data/materials.csv。
页面需要在 390px 和 1440px 宽度下可读，支持键盘、可见焦点、空结果和缺失日期提示。
实现后生成新的产物目录，检查分类与关键词组合筛选，并提供实际桌面、移动端截图。
无法完成的浏览器检查请单独记录。
