.wrap.wide{max-width:1100px}
.bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end}
.bar label,.f{display:grid;gap:4px;font-size:12px;color:var(--muted)}.bar select,.bar input,.f select,.f input,.f textarea{width:100%}
.f textarea,textarea.tx{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 12px;resize:vertical}
.list{display:grid;gap:10px;margin-top:12px}
.course>summary,.module>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.course>summary::-webkit-details-marker,.module>summary::-webkit-details-marker{display:none}
.course>summary::before,.module>summary::before{content:"▸";color:var(--muted);width:1em}
.course[open]>summary::before,.module[open]>summary::before{content:"▾"}
.course{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.course>summary{font-size:16px;font-weight:800}
.module{margin:10px 0 0 6px;padding-left:12px;border-left:3px solid var(--line)}
.module>summary{font-size:14px;font-weight:700}
.cnt{font-size:12px;font-weight:600;color:var(--muted)}
.it{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);margin-top:8px}
.it b{display:block;word-break:break-word}.it .m{font-size:12px;color:var(--muted);word-break:break-word}
.it .a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.it .a button,.it .a a.btn{padding:4px 10px;font-size:13px}
a.btn{display:inline-block;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);text-decoration:none;padding:8px 12px}
a.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--line);margin-left:6px}
.badge.lib{background:var(--accent);color:#fff;border-color:var(--accent)}.badge.warn{border-color:var(--danger);color:var(--danger)}
.viewer{height:68vh;min-height:360px;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.swatches{display:flex;gap:6px;flex-wrap:wrap}.swatches label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text)}
.sw{width:18px;height:18px;border-radius:50%;border:2px solid #1d2330;display:inline-block}
.note{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.note .h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.note .num{min-width:26px;height:26px;border-radius:13px;background:#1d2330;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.note .q{font-size:12px;color:var(--muted);word-break:break-word}
.note.shown{border-color:var(--ok)}
.pending{border:2px dashed var(--accent);border-radius:10px;padding:10px;display:grid;gap:8px;background:var(--surface)}
.copyfield{display:flex;gap:6px}.copyfield input{flex:1;min-width:0;font:12px ui-monospace,Menlo,Consolas,monospace}
dialog{max-width:min(560px,94vw);width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);padding:16px}
dialog::backdrop{background:rgba(0,0,0,.45)}
.prog{height:10px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:6px}.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
@media (max-width:640px){.it{grid-template-columns:1fr}.it .a{justify-content:flex-start}}

.seg{display:flex;gap:0}.seg button{border-radius:0;flex:1}.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0;margin-left:-1px}.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}