/* "My topics" — student view (js/student-topics.js) */
.st-topics-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(1, 4, 9, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.st-topics-overlay.hidden { display: none; }
.st-topics-modal { width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: #161b22; border: 1px solid #30363d; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); color: #e6edf3; font-family: 'Space Grotesk', system-ui, sans-serif; }
.st-topics-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #30363d; }
.st-topics-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: #e6edf3; }
.st-topics-close { background: none; border: 1px solid #30363d; color: #c9d1d9; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.st-topics-close:hover { background: #21262d; color: #fff; }
.st-topics-body { overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.st-topics-card { background: #1c2128; border: 1px solid #30363d; border-radius: 12px; padding: 14px 16px; }
.st-topics-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.st-topics-group { font-size: 17px; font-weight: 700; color: #e6edf3; }
.st-topics-level { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(88, 166, 255, .15); color: #7dd3fc; font-size: 12px; font-weight: 600; }
.st-topics-progress { display: flex; align-items: center; gap: 8px; }
.st-topics-bar { width: 120px; height: 6px; border-radius: 3px; background: #30363d; overflow: hidden; }
.st-topics-fill { height: 100%; background: #3fb950; }
.st-topics-count { font-size: 13px; color: #c9d1d9; }
.st-topics-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-topic { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #161b22; font-size: 15px; line-height: 1.4; color: #c9d1d9; }
.st-topic-mark { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #484f58; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.st-topic.done { color: #e6edf3; }
.st-topic.done .st-topic-mark { background: #238636; border-color: #3fb950; color: #fff; }
.st-topics-empty { margin: 8px 0; color: #c9d1d9; font-size: 15px; }