body { background-color: #f2f2f2; font-family: "Microsoft YaHei", Arial, sans-serif; margin: 0; padding: 0; }
.top-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.header-top { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.system-title { font-size: 22px; font-weight: 600; display: flex; align-items: center; }
.system-title i { margin-right: 10px; font-size: 24px; }
.header-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.user-info { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.user-info i { margin-right: 5px; }
.course-topic-dropdown { position: relative; }
.course-topic-toggle { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; font-size: 14px; cursor: pointer; transition: all .2s ease; }
.course-topic-toggle:hover, .course-topic-dropdown:focus-within .course-topic-toggle { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.55); }
.course-topic-toggle .dropdown-arrow { margin-left: 2px; transition: transform .2s ease; }
.course-topic-dropdown:hover .dropdown-arrow, .course-topic-dropdown:focus-within .dropdown-arrow { transform: rotate(180deg); }
.course-topic-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 6px 0; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; }
.course-topic-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.course-topic-dropdown:hover .course-topic-menu, .course-topic-dropdown:focus-within .course-topic-menu { display: block; }
.course-topic-item { display: block; padding: 10px 14px; color: #333; text-decoration: none; white-space: nowrap; }
.course-topic-item:hover { background: #f5f7ff; color: #4c6ef5; }
.main-container { padding: 20px; }
.page-header { background: #fff; padding: 10px; height: 50px; margin-bottom: 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; }
.page-header h2 { margin: 0; font-size: 20px; color: #333; }
.content-card { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.layui-table th { background: #f8f8f8; }
.layui-table td { vertical-align: middle; }
.cover-thumb { width: 60px; height: 40px; object-fit: cover; border-radius: 4px; }
.action-link { margin-right: 10px; }
.back-link { color: #667eea; }