:root { color-scheme: dark; --bg:#0d1117; --panel:#161b22; --border:#30363d; --fg:#e6edf3; --muted:#8b949e; --accent:#2f81f7; --green:#3fb950; --red:#f85149; --amber:#d29922; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 system-ui, -apple-system, sans-serif; }
a { color:var(--accent); }
header { display:flex; align-items:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--panel); position:sticky; top:0; z-index:5; }
header h1 { font-size:15px; margin:0; }
.spacer { flex:1; }
.btn { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:7px 12px; cursor:pointer; font-weight:600; }
.btn.secondary { background:#21262d; color:var(--fg); border:1px solid var(--border); }
.btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn.small { padding:4px 9px; font-size:12px; }
.btn.danger { background:var(--red); }
.wrap { max-width:1080px; margin:20px auto; padding:0 20px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:14px; }
.grid { display:grid; gap:14px; }
.muted { color:var(--muted); }
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600; border:1px solid var(--border); }
.tag.NEW{color:#58a6ff}.tag.ASSIGNED{color:#d29922}.tag.IN_PROGRESS{color:#bc8cff}.tag.READY_FOR_QA{color:#79c0ff}.tag.VERIFIED{color:#3fb950}.tag.DONE{color:#3fb950}.tag.REOPENED{color:#f85149}.tag.BLOCKED{color:#f85149}.tag.DUPLICATE{color:#8b949e}.tag.NOT_AN_ISSUE{color:#8b949e}
.critical{color:#f85149;font-weight:700}.high{color:#ff7b72}.medium{color:#d29922}.low{color:#8b949e}
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px; }
th { color:var(--muted); font-weight:600; }
.comp { border:1px solid var(--border); border-radius:8px; margin-bottom:12px; overflow:hidden; }
.comp-head { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#1c2129; }
.comp-head b { flex:1; }
.comp-body { padding:6px 14px 12px; }
.item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border); }
.item:last-child { border-bottom:none; }
.item .txt { flex:1; }
.item .qtext { color:var(--muted); font-size:12px; }
.done-mark { color:var(--green); font-weight:700; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal .box { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px; width:min(640px, 92vw); max-height:92vh; overflow:auto; }
label { display:block; margin:12px 0 4px; color:var(--muted); font-size:12px; }
input,select,textarea { width:100%; background:#0d1117; border:1px solid var(--border); color:var(--fg); border-radius:6px; padding:8px 10px; font:inherit; }
textarea { min-height:70px; resize:vertical; }
.meter { background:#21262d; border-radius:6px; height:10px; overflow:hidden; }
.meter > span { display:block; height:100%; background:var(--accent); }

.svgbox { max-height: 340px; overflow: auto; border: 1px solid #ddd; border-radius: 8px; padding: 8px; background: #fff; margin-top: 6px; }
.svgbox svg { max-width: 100%; height: auto; }
.unavailable { padding: 10px; border: 1px dashed #c9a; border-radius: 8px; color: #866; background: #fdf7f7; margin-top: 6px; font-size: 12px; }

/* collapsible assignment tree */
.lvl { margin: 0; }
.lvl > .lvl { margin-left: 16px; }
.lvl-sum { cursor: pointer; padding: 3px 0; user-select: none; list-style: none; }
.lvl-sum::-webkit-details-marker { display: none; }
.lvl-sum:hover { opacity: .75; }
.lvl-sum .chev { display: inline-block; width: 14px; color: #999; transition: transform .12s; font-size: 12px; }
details[open] > .lvl-sum .chev { transform: rotate(90deg); }
.lesson-row { display: flex; align-items: center; gap: 10px; padding: 3px 0 3px 20px; }
.lesson-row a { flex: 1; }
.meter { display: inline-block; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.meter span { display: block; height: 100%; background: #2f9e44; }