:root{--bg:#0f1115;--bg2:#161a22;--bg3:#1e2430;--fg:#e6e9ef;--muted:#8b93a3;--accent:#7c5cff;--accent2:#22c55e;--warn:#f59e0b;--danger:#ef4444;--border:#2a3140;--radius:10px}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}code{background:var(--bg3);padding:1px 5px;border-radius:4px}
h1,h2,h3{margin:.2em 0 .6em;font-weight:600}h2{font-size:1.25rem}h3{font-size:1rem}
.muted{color:var(--muted)}.small{font-size:.85rem}.hidden{display:none!important}.warn{color:var(--warn)}.error{color:var(--danger)}
button,.button{background:var(--bg3);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit;text-decoration:none;display:inline-block}
button:hover,.button:hover{border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{filter:brightness(1.1)}
button.ghost{background:transparent}button.danger{border-color:var(--danger);color:var(--danger)}button.small,.button.small{padding:5px 10px;font-size:.85rem}button.big{padding:12px 28px;font-size:1.05rem}
input,select,textarea{background:var(--bg2);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;width:100%}
textarea{resize:vertical}input[type=range]{padding:0}input[type=number]{width:100%}
label{display:block;margin:6px 0}label>span.row{display:flex;gap:6px}label.check{display:flex;align-items:center;gap:8px}label.check input{width:auto}
.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.grow{flex:1}.inline{display:inline}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:1.1rem}.brand span{color:var(--accent)}.topbar-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.status{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.pill{background:var(--bg3);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:.8rem;white-space:nowrap}
.pill.ok{border-color:var(--accent2);color:var(--accent2)}.pill.warn{border-color:var(--warn);color:var(--warn)}.pill.bad{border-color:var(--danger);color:var(--danger)}.pill.video{border-color:var(--accent);color:#c9bcff}.pill.sites{border-color:var(--warn);color:#fcd34d}.pill.mine{border-color:#06b6d4;color:#67e8f9}
.mode-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.switch-log{background:#000;color:#9ae6b4;font-family:ui-monospace,Menlo,monospace;font-size:.8rem;padding:8px 16px;max-height:140px;overflow:auto;white-space:pre-wrap;border-bottom:1px solid var(--border)}
.layout{display:flex;min-height:calc(100vh - 54px)}
.sidenav{width:190px;padding:14px 8px;border-right:1px solid var(--border);background:var(--bg2);display:flex;flex-direction:column;gap:2px;position:sticky;top:54px;align-self:flex-start;height:calc(100vh - 54px)}
.sidenav a{color:var(--fg);text-decoration:none;padding:8px 12px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}.sidenav a.active,.sidenav a:hover{background:var(--bg3)}
.badge{background:var(--accent);color:#fff;border-radius:999px;font-size:.7rem;padding:1px 7px}
main{flex:1;padding:18px 22px;min-width:0}
.cols{display:flex;gap:22px;align-items:flex-start}.col{flex:1;min-width:0}.col.form{flex:1.4}.col.side{flex:.9;position:sticky;top:70px}
.tabs{display:flex;gap:4px;margin-bottom:10px}.tabs button{border-radius:8px 8px 0 0}.tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);min-height:120px;flex:1;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden;background:var(--bg2)}
.dropzone img{max-height:220px;max-width:100%;object-fit:contain}.dropzone.has img+.dz-label{display:none}.dropzone.drag{border-color:var(--accent)}.dz-label{color:var(--muted);pointer-events:none}
.lora-list{display:flex;flex-direction:column;gap:4px}.lora{display:grid;grid-template-columns:auto 1fr 90px 90px 80px;gap:8px;align-items:center;padding:4px 6px;border:1px solid var(--border);border-radius:8px;background:var(--bg2)}
.lora .nsfw{color:#ff7ab6;font-size:.75rem}.lora input[type=number]{padding:4px 6px}.lora .trig{font-size:.8rem;color:var(--muted)}
.grid.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.grid.thumbs.big{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.thumb{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative}
.thumb img,.thumb .noimg{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#000}.thumb .noimg{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.thumb .cap{padding:6px 8px;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thumb .fav{position:absolute;top:6px;right:8px;color:#facc15;text-shadow:0 0 4px #000}
.thumb .kind{position:absolute;top:6px;left:8px;background:rgba(0,0,0,.6);font-size:.7rem;padding:1px 6px;border-radius:4px}
.joblist{display:flex;flex-direction:column;gap:6px}.job{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px}
.job .bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:6px 0}.job .bar i{display:block;height:100%;background:var(--accent);transition:width .5s}
.job.done .bar i{background:var(--accent2)}.job.failed .bar i{background:var(--danger)}.job .err{color:var(--danger);font-size:.8rem;white-space:pre-wrap}
.job .head{display:flex;justify-content:space-between;gap:8px;align-items:center}.job .title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.list{display:flex;flex-direction:column;gap:6px}.list .item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:flex;gap:10px;align-items:center}.list .item .txt{flex:1;min-width:0}.list .item .txt p{margin:2px 0;white-space:pre-wrap}
.log{background:#000;color:#cfd6e4;font-family:ui-monospace,Menlo,monospace;font-size:.78rem;padding:10px;border-radius:8px;max-height:70vh;overflow:auto;white-space:pre-wrap}
.chat{display:flex;flex-direction:column;gap:8px;max-height:65vh;overflow:auto;padding:6px 0;margin-bottom:10px}.chat .msg{padding:8px 12px;border-radius:10px;max-width:85%;white-space:pre-wrap}.chat .user{align-self:flex-end;background:var(--accent);color:#fff}.chat .assistant{align-self:flex-start;background:var(--bg3)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px}
.modal.dialog{z-index:40}   /* Remake / Sound dialogs open on top of the video viewer */
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:min(1200px,100%);max-height:95vh;overflow:auto;padding:14px 18px}
.modal-body{display:flex;gap:18px;flex-wrap:wrap}.modal-body video,.modal-body img{max-width:min(620px,100%);max-height:78vh;background:#000;border-radius:8px}.m-side{flex:1;min-width:260px}.meta{font-size:.82rem;color:var(--muted);white-space:pre-wrap;word-break:break-word;max-height:38vh;overflow:auto;margin-bottom:10px}.m-actions{margin:8px 0}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:28px 30px;width:min(380px,92vw)}.login-box h1{margin:0 0 4px}.login-box label{margin:12px 0}.login-box button{width:100%;margin-top:8px}
.small-form label{margin:4px 0}
@media (max-width:900px){.layout{flex-direction:column}.sidenav{flex-direction:row;flex-wrap:wrap;width:auto;border-right:0;border-bottom:1px solid var(--border);position:static;height:auto}.cols{flex-direction:column}.col.side{position:static}.grid2{grid-template-columns:1fr}.lora{grid-template-columns:auto 1fr;grid-auto-rows:auto}}

.hint{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;background:var(--bg3);color:var(--muted);font-size:.7rem;cursor:help;border:1px solid var(--border)}
[title]{cursor:help}button[title],a[title],.tabs button,.thumb[title],[data-open][title],[data-job][title],[data-id][title],.pic-opt[title],.dropzone[title],label[title]{cursor:pointer}input[title],textarea[title],select[title]{cursor:auto}
details.help{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;margin-bottom:14px}details.help summary{cursor:pointer;color:var(--accent);font-weight:600}details.help ol,details.help p{margin:8px 0 4px}details.help li{margin:3px 0}

.cap{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.lora-section{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;background:var(--bg2);margin:8px 0}
.lora-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lora{display:grid;grid-template-columns:auto 1fr 200px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.lora.on{border-color:var(--accent)}.lora .name{font-weight:600}.lora .desc{font-size:.8rem;color:var(--muted)}.lora .nsfw{color:#ff7ab6;font-size:.7rem;margin-left:6px}.lora .kinds{color:var(--muted);font-size:.7rem;margin-left:6px}
.lora .strength{display:flex;align-items:center;gap:6px}.lora .strength input[type=range]{width:110px}.lora .strength input[type=number]{width:62px;padding:4px 6px}
.lora .adv{grid-column:2/4;display:flex;gap:10px;align-items:center;font-size:.8rem;color:var(--muted)}.lora .adv input[type=number]{width:70px;padding:3px 6px}
.switch{position:relative;width:38px;height:22px;flex:none}.switch input{opacity:0;width:0;height:0}.switch i{position:absolute;inset:0;background:var(--bg3);border:1px solid var(--border);border-radius:22px;cursor:pointer;transition:.15s}.switch i:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.15s}.switch input:checked+i{background:var(--accent);border-color:var(--accent)}.switch input:checked+i:before{transform:translateX(16px);background:#fff}
.pill.auto{border-color:var(--accent2);color:var(--accent2)}.pill.auto button{padding:1px 8px;font-size:.75rem;margin-left:6px}
@media (max-width:900px){.lora{grid-template-columns:auto 1fr}.lora .strength{grid-column:1/3}.lora .adv{grid-column:1/3}}

details.lora-cat{border:1px solid var(--border);border-radius:8px;padding:4px 8px;margin-top:6px;background:var(--bg2)}
details.lora-cat>summary{cursor:pointer;padding:4px 0;list-style:none}details.lora-cat>summary::-webkit-details-marker{display:none}
details.lora-cat>summary::before{content:"▸";display:inline-block;width:14px;color:var(--muted)}details.lora-cat[open]>summary::before{content:"▾"}
details.lora-cat>summary .cap{display:block;margin-left:14px}details.lora-cat .lora{margin:4px 0}
#lora-filter{width:170px;padding:4px 8px}
.thumb .cap.time{padding-top:0;font-size:.72rem;opacity:.8}
:root{--fam-wan:#60a5fa;--fam-ltx:#c084fc;--fam-sound:#34d399;--fam-tool:#9ca3af}
.thumb{border-top:3px solid var(--fam-tool)}.thumb.fam-wan{border-top-color:var(--fam-wan)}.thumb.fam-ltx{border-top-color:var(--fam-ltx)}.thumb.fam-sound{border-top-color:var(--fam-sound)}
.thumb .pic{position:relative}.thumb .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.75);color:#fff;font-size:.78rem;font-weight:600;padding:1px 6px;border-radius:4px;font-variant-numeric:tabular-nums}
.thumb .num{position:absolute;top:6px;left:8px;background:rgba(0,0,0,.72);color:#fff;font-weight:700;font-size:.85rem;padding:1px 7px;border-radius:6px}
.thumb .cap.model{color:var(--fg);font-size:.76rem;padding-bottom:0}.thumb .cap.model .fam-dot{margin-right:5px}
.fam-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fam-tool);vertical-align:middle;margin:0 3px}.fam-dot.wan{background:var(--fam-wan)}.fam-dot.ltx{background:var(--fam-ltx)}.fam-dot.sound{background:var(--fam-sound)}
.model-chip{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;border:1px solid var(--border);border-radius:999px;padding:1px 9px}
.model-chip.wan{border-color:var(--fam-wan)}.model-chip.ltx{border-color:var(--fam-ltx)}.model-chip.sound{border-color:var(--fam-sound)}
.m-head{position:sticky;top:-14px;z-index:3;background:var(--bg2);display:flex;align-items:center;gap:10px;margin:-14px -18px 10px;padding:10px 18px;border-bottom:1px solid var(--border)}
.m-head .num-badge{font-weight:800;font-size:1.25rem;white-space:nowrap}.m-titles{flex:1;min-width:0}.m-titles h3{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sub{display:flex;gap:10px;align-items:center;margin-top:2px;flex-wrap:wrap}#m-prev,#m-next{font-size:1.3rem;padding:2px 12px}#m-prev:disabled,#m-next:disabled{opacity:.25}
.job .model-chip{margin-right:6px}
.thumb .snd{position:absolute;top:28px;right:8px;background:rgba(0,0,0,.6);border-radius:4px;padding:1px 5px;font-size:.75rem}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.seg button{border:0;border-radius:0;background:transparent;padding:5px 10px;font-size:.85rem}.seg button.on{background:var(--accent);color:#fff}
.desc-box{margin-top:8px}.desc-box b.small{font-size:.8rem}#m-desc{width:100%;font-size:.8rem;margin-top:4px;font-family:inherit}
.job textarea.review{width:100%;min-height:74px;font-size:.8rem;margin:6px 0;font-family:inherit}#sound-dialog textarea{width:100%;font-family:inherit}#sound-dialog label{display:block;margin:6px 0}#sound-dialog label.check{display:inline-flex}
.thumb.selected{outline:2px solid var(--accent);outline-offset:-2px}.thumb .order{position:absolute;top:32px;left:8px;background:var(--accent);color:#fff;border-radius:12px;padding:0 8px;font-size:.8rem;font-weight:600}
#lib-bar{margin:6px 0 10px;padding:6px 10px;border:1px solid var(--accent);border-radius:8px;background:var(--bg2)}
.warn{border:1px solid #f59e0b;color:#fbbf24;background:rgba(245,158,11,.08);border-radius:8px;padding:6px 10px;font-size:.8rem;margin-top:8px}
#assist-status{min-width:120px}
.job{display:flex;gap:10px;align-items:flex-start}.job .jthumb{flex:none;width:64px;height:84px;border-radius:6px;overflow:hidden;background:#000;cursor:pointer;border:1px solid var(--border)}.job .jthumb img{width:100%;height:100%;object-fit:cover;display:block}.job .jthumb.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.7rem;cursor:default}
.job .jbody{flex:1;min-width:0}.job .title.link{cursor:pointer;text-decoration:underline dotted}
.tool-pick{margin-bottom:12px}.tool-pick label{display:flex;align-items:center;gap:8px;flex:1;min-width:280px}#tool-thumb{height:84px;border-radius:6px}

.pack-field{margin:6px 0 10px}.pack-field label{margin:0 0 4px}.pack-note{margin-top:6px;line-height:1.4}.pack-field .warn{display:block}
.pack-help{margin-top:6px}.pack-help summary{cursor:pointer}.pack-help p{margin:4px 0 0}.pack-help ul{margin:6px 0 0;padding-left:18px;line-height:1.6}

/* groups (Library, Tools picker) */
.grp{margin:0 0 16px}.grp-head{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;margin-bottom:8px;border-left:3px solid var(--accent);background:var(--bg2);border-radius:0 8px 8px 0}
.grp-singles>.grp-head{border-left-color:var(--border)}.grp-t{flex:1;min-width:0}.grp-t .model-chip{margin-left:4px}
.grp-prompt{display:block;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#library .grp-prompt{cursor:pointer}
.grp-prompt.open{white-space:pre-wrap;word-break:break-word;overflow:visible;color:var(--fg)}
.grp-err{font-size:.76rem;color:#fca5a5;margin-top:3px}.bad{color:var(--danger)}
.latest{display:inline-block;margin-left:8px;background:var(--accent2);color:#04150a;font-weight:700;font-size:.7rem;padding:0 7px;border-radius:999px;vertical-align:1px;text-transform:uppercase;letter-spacing:.03em}
.grp-btns{display:flex;gap:4px;flex:none}.grp-sel{display:none}#library.selecting .grp-sel{display:inline-block}
.grp.collapsed>.grid{display:none}.grp-pic{width:44px;height:58px;object-fit:cover;border-radius:6px;flex:none}
.batch-chip{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:0 8px;margin-right:6px;font-size:.74rem;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
/* tools page */
.tools-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,1.15fr);gap:14px;align-items:start}
.tp-pick{padding:10px}.tp-bar{margin-bottom:8px}.tp-bar #tp-q{width:auto;min-width:140px}.tp-bar label.check{margin:0}
.tp-grid{max-height:calc(100vh - 190px);overflow:auto;padding-right:4px}.tp-grid .grp{margin-bottom:10px}.tp-grid .grp-head{padding:5px 8px;margin-bottom:6px}.tp-grid .grp-prompt{display:none}
.grid.thumbs.mini{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}.grid.thumbs.mini .thumb .num{font-size:.75rem;padding:0 5px;top:4px;left:4px}.grid.thumbs.mini .thumb .dur{font-size:.7rem;right:4px;bottom:4px}
.grid.thumbs.mini .thumb .snd{top:4px;right:4px}.grid.thumbs.mini .thumb .order{top:auto;bottom:4px;left:4px}
.thumb.selected{outline:3px solid var(--accent);outline-offset:-3px}
.tp-side{position:sticky;top:66px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 80px);overflow:auto}
.tp-sel{padding:10px}.tp-one{display:flex;gap:12px;align-items:flex-start}.tp-one video{width:150px;max-height:220px;border-radius:8px;background:#000;flex:none;object-fit:contain}
.tp-info{display:flex;flex-direction:column;gap:5px;min-width:0}.tp-title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.num-badge{font-weight:800;font-size:1.2rem}
.tp-strip{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.tp-chip{display:flex;align-items:center;gap:5px;background:var(--bg3);border-radius:8px;padding:3px 8px 3px 3px;font-size:.8rem}.tp-chip img{width:30px;height:40px;object-fit:cover;border-radius:4px}.tp-chip b{background:var(--accent);color:#fff;border-radius:10px;padding:0 6px}
.tool-groups{display:flex;flex-direction:column;gap:10px}.tool-group{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px}.tool-group h3{margin:2px 0 6px;font-size:.95rem}
.tool{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--border)}.tool-group h3+.tool{border-top:0}
.tool>div{min-width:0}.tool .cap{margin-top:1px}.tool>.row,.tool>button{flex:none}.tool input[type=number]{padding:3px 6px}
.tag{display:inline-block;font-size:.7rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:0 7px;margin-left:4px;font-weight:400}
@media (max-width:1000px){.tools-layout{grid-template-columns:1fr}.tp-side{position:static;max-height:none}.tp-grid{max-height:45vh}}
@media (max-width:520px){.tool{flex-direction:column;align-items:flex-start}.tp-one{flex-direction:column}.tp-one video{width:100%}}
/* viewer actions in labelled rows */
.m-actions{display:flex;flex-direction:column;gap:6px;margin:10px 0}.act-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.act-h{width:96px;flex:none;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:520px){.act-h{width:100%}}
/* loop dialog */
#loop-dialog label.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:8px 0;cursor:pointer}
#loop-dialog label.opt input[type=radio]{width:auto;margin-top:4px}#loop-dialog label.opt>span{display:flex;flex-direction:column;gap:4px}
#loop-dialog label.opt .row label{display:inline-flex;align-items:center;gap:4px;margin:0}#loop-dialog label.opt.off{opacity:.45;cursor:default}
#loop-dialog input[type=number],#loop-dialog select{width:auto}
.draft-row{margin:4px 0 10px}.draft-row input{margin-top:3px}.draft-row{align-items:flex-start}
/* toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;background:var(--bg3);color:var(--fg);border:1px solid var(--accent2);border-radius:10px;padding:10px 16px;max-width:min(680px,92vw);box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:.9rem}
.toast.bad{border-color:var(--danger)}
/* toolbars: controls keep their natural width instead of one full-width row each */
.lib-tools{gap:8px}.lib-tools>input,.lib-tools>select{width:auto}.lib-tools>#lib-q{min-width:220px;flex:1 1 220px;max-width:340px}
.lib-tools>label.check{margin:0}
#loop-dialog label.opt>span>.tag{align-self:flex-start;margin-left:0}
label.check.draft-row{align-items:flex-start}
@media (max-width:700px){.topbar{flex-wrap:wrap;position:static;gap:8px}.status{flex:1 1 100%}.pill{white-space:normal}.topbar-right{margin-left:0;flex-wrap:wrap}.sidenav{top:0}}

/* start picture in the viewer */
.start-box{display:flex;gap:12px;align-items:flex-start;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:10px}
.start-pics{display:flex;gap:8px;flex:none}.start-pics figure{margin:0;text-align:center}.start-pics img{width:96px;height:128px;object-fit:contain;background:#000;border-radius:6px;display:block;cursor:zoom-in}
.start-pics figcaption{font-size:.7rem;color:var(--muted);margin-top:3px}.start-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.start-text a{color:var(--accent)}
@media (max-width:520px){.start-box{flex-direction:column}}
.tp-startpic{display:flex;gap:8px;align-items:center}.tp-startpic img{width:40px;height:54px;object-fit:cover;border-radius:4px}

/* queue groups and times */
.qgrp>.joblist{display:flex;flex-direction:column;gap:6px}.qgrp.collapsed>.joblist{display:none}
.grp-bar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-top:6px;max-width:420px}.grp-bar i{display:block;height:100%;background:var(--accent2)}.grp-bar i.part{background:var(--warn)}
.jtimes{color:var(--muted);margin-top:2px}.jtimes b{color:var(--fg);font-weight:600}
.jstat{display:inline-block;border-radius:999px;padding:0 8px;font-size:.74rem;border:1px solid var(--border)}.jstat.done{border-color:var(--accent2);color:var(--accent2)}
.jstat.failed{border-color:var(--danger);color:var(--danger)}.jstat.running,.jstat.submitted{border-color:var(--accent);color:#c9bcff}.jstat.queued{color:var(--muted)}
.filter-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--accent);border-radius:999px;padding:1px 4px 1px 10px;font-size:.8rem;background:var(--bg2)}.filter-chip button{padding:0 6px}

.continue-row{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--accent2);border-radius:8px;padding:6px 10px;margin:4px 0 10px;background:rgba(34,197,94,.06)}
.continue-row label.check{align-items:flex-start;margin:0;flex:1}.continue-row input{margin-top:3px}

/* the shared tool menu: controls, and inside the viewer */
.tool-ctl{flex:none;gap:6px;align-items:center}.tool-ctl select{width:auto;padding:4px 6px}.tool-ctl label{margin:0}
.tool-groups.in-viewer{margin:10px 0}.in-viewer .tool-group{background:var(--bg3);padding:6px 10px}.in-viewer .tool{padding:5px 0}.in-viewer .tool .cap{font-size:.74rem}
.m-file{margin:8px 0}

/* ---------- 👍 / 👎 ---------- */
.rate{display:inline-flex;gap:2px;align-items:center}.rate button{background:rgba(0,0,0,.55);border:1px solid transparent;border-radius:999px;padding:1px 7px;font-size:.8rem;line-height:1.3;filter:grayscale(1);opacity:.75}
.rate button:hover{opacity:1;filter:none;border-color:var(--border)}.rate button.on{filter:none;opacity:1;border-color:var(--accent2);background:rgba(34,197,94,.18)}.rate button.r-down.on{border-color:var(--danger);background:rgba(239,68,68,.18)}
.rate small{font-size:.7rem;margin-left:2px}
.thumb .rate.ov{position:absolute;left:6px;bottom:6px;opacity:0;transition:opacity .12s}.thumb:hover .rate.ov,.thumb .rate.ov.has{opacity:1}
.grid.thumbs.mini .thumb .rate.ov{left:4px;bottom:22px}.grid.thumbs.mini .rate button{padding:0 5px;font-size:.72rem}
.thumb.disliked,.qt.disliked,.cmp-cell.disliked{opacity:.45}.thumb.disliked:hover,.qt.disliked:hover{opacity:.85}
.rate.big button{font-size:1.05rem;padding:4px 14px;background:var(--bg3)}
/* ---------- viewer: media | details | tools ---------- */
.modal-box.viewer{width:min(1720px,98vw);height:94vh;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;padding:0}
.viewer .m-head{position:static;margin:0;padding:10px 16px}
.m-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(360px,1.25fr) minmax(300px,1fr) minmax(330px,1fr);gap:16px;padding:12px 16px;flex-wrap:nowrap}
.m-media{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.m-grid .m-media video,.m-grid .m-media img{width:100%;max-width:none;flex:1 1 auto;min-height:0;max-height:none;object-fit:contain;background:#000;border-radius:8px}
.m-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.m-keys{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}.m-keys label{margin:0}
.m-pane{overflow:auto;min-height:0;min-width:0;padding-right:4px}.m-info .meta{max-height:none}.m-tabbar{display:none}
.m-tabbar button{border-radius:8px 8px 0 0}.m-tabbar button.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:1279px){.m-grid{grid-template-columns:minmax(320px,1.1fr) minmax(320px,1fr);grid-template-rows:auto 1fr}.m-media{grid-row:1 / span 2}
  .m-tabbar{display:flex;gap:4px;grid-column:2}.m-pane{grid-column:2;display:none}.m-pane.on{display:block}}
@media (max-width:820px){.modal-box.viewer{height:auto;max-height:96vh;overflow:auto}.m-grid{display:flex;flex-direction:column}.m-grid .m-media video{max-height:60vh}.m-pane{overflow:visible}}
/* ---------- compare ---------- */
.compare-box{width:min(1720px,98vw);max-height:96vh}.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.cmp-cell{display:flex;flex-direction:column;gap:6px;background:var(--bg3);border-radius:10px;padding:6px}.cmp-cell video{width:100%;max-height:74vh;object-fit:contain;background:#000;border-radius:6px}
.cmp-grid[data-n="5"] video,.cmp-grid[data-n="6"] video,.cmp-grid[data-n="7"] video,.cmp-grid[data-n="8"] video{max-height:40vh}
.cmp-foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* ---------- queue ---------- */
.q-tools{gap:8px}.q-tools label.check{margin:0}
.q-needs{border:1px solid var(--warn);border-radius:var(--radius);padding:10px 12px;margin:10px 0;background:rgba(245,158,11,.06)}.q-needs h3{margin:0 0 4px}.q-needs .job{margin-top:6px}
.q-now{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin:10px 0 16px;display:flex;flex-direction:column;gap:12px}
.q-now.idle{flex-direction:row;gap:8px;align-items:center}
.q-paused{border:1px solid var(--warn);color:#fbbf24;background:rgba(245,158,11,.08);border-radius:8px;padding:8px 12px}.q-paused .small{color:var(--fg)}
.q-run{display:flex;gap:14px;align-items:flex-start}.q-run-pic{width:120px;height:160px;object-fit:cover;border-radius:8px;flex:none;background:#000}
.q-run-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.q-run-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar.big{height:10px;background:var(--bg3);border-radius:5px;overflow:hidden}.bar.big i{display:block;height:100%;background:var(--accent);transition:width .5s}
.q-next ol{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.q-next-row{display:flex;gap:10px;align-items:center;background:var(--bg3);border-radius:8px;padding:5px 8px}.q-next-row img,.q-noimg{width:34px;height:46px;object-fit:cover;border-radius:4px;flex:none;background:#000}
.q-pos{font-weight:800;color:var(--muted);width:18px;text-align:center;flex:none}.q-next-t{flex:1;min-width:0}.q-next-t>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-eta{text-align:right;flex:none;line-height:1.3}.q-next-acts{display:flex;gap:2px;flex:none}
.qt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.qt{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.qt.failed{border-color:rgba(239,68,68,.55)}.qt.running,.qt.submitted{border-color:var(--accent)}
.qt-pic{position:relative;aspect-ratio:3/4;background:#000;cursor:pointer}.qt-pic.pending{cursor:default}.qt-pic img{width:100%;height:100%;object-fit:cover;display:block}
.qt-pic.pending img{opacity:.35;filter:grayscale(.6)}.qt-pic .noimg{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.qt-pic .num{position:absolute;top:5px;left:6px;background:rgba(0,0,0,.72);color:#fff;font-weight:700;font-size:.8rem;padding:0 6px;border-radius:6px}
.qt-pic .dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.75);color:#fff;font-size:.74rem;font-weight:600;padding:0 5px;border-radius:4px}
.qt-pic .snd{position:absolute;top:5px;right:6px;background:rgba(0,0,0,.6);border-radius:4px;padding:0 4px;font-size:.72rem}
.qt-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.78);color:#fff;border-radius:999px;padding:2px 10px;font-size:.78rem;white-space:nowrap}
.qt-badge.bad{color:#fca5a5}.qt-badge.run{color:#c9bcff}.qt-prog{position:absolute;left:0;bottom:0;height:4px;background:var(--accent)}
.qt-foot{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;gap:4px}.qt-foot .rate button{background:var(--bg3)}
.qt-label{font-size:.72rem;color:var(--muted);padding:0 6px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qt-err{font-size:.7rem;color:#fca5a5;padding:0 6px 6px;line-height:1.3}
/* ---------- insights ---------- */
.ins-dims{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;margin-top:16px}.ins-card h3{margin:0 0 8px}
.ins-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 42px;gap:10px;align-items:center;padding:5px 4px;border-top:1px solid var(--border)}.ins-row:first-of-type{border-top:0}
.ins-row.link{cursor:pointer}.ins-row.link:hover{background:var(--bg3);border-radius:6px}.ins-row.none{opacity:.55}
.ins-l{display:flex;flex-direction:column;min-width:0}.ins-l span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-bar{display:flex;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}.ins-bar .up{background:var(--accent2)}.ins-bar .down{background:var(--danger)}.ins-pct{text-align:right;font-size:.85rem}
/* latest results on the Generate page: compact tiles */
#recent.grid.thumbs.mini{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
/* narrow columns (viewer panes, small screens): picture strip above its text; tool controls wrap under the description */
.m-info .start-box{flex-direction:column}.m-info .start-pics img{width:84px;height:112px}
.tool{flex-wrap:wrap}.tool>div{flex:1 1 220px}.tool>.row,.tool>button{margin-left:auto}
/* ---------- the clip's details in sections ---------- */
.details{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.d-sec{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.d-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}.d-h b{font-size:.86rem}.d-h button{margin-left:auto;padding:1px 8px}
.d-text{font-size:.84rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}.d-text.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.d-more{padding:0;margin-top:2px;color:var(--accent);border:0}
.d-text.clamp.over{cursor:pointer;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 1.6em),transparent)}
.d-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:.84rem}.d-grid dt{color:var(--muted);white-space:nowrap}.d-grid dd{margin:0;min-width:0;word-break:break-word}
.d-grid code{font-size:.82rem}.d-grid dd button{padding:0 6px;font-size:.72rem}
.d-chips{display:flex;flex-wrap:wrap;gap:6px}.d-chip{display:inline-flex;gap:6px;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:.8rem;margin:2px}
.d-chip.bad{border-color:rgba(239,68,68,.5)}.d-chip.good{border-color:rgba(34,197,94,.5)}
.d-neg summary{cursor:pointer}.d-neg .d-text{margin-top:6px;color:var(--muted)}
.d-hist{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.d-hist li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.82rem}
.ins-model{padding:5px 0;border-top:1px solid var(--border)}.ins-model:first-of-type{border-top:0}
/* ---------- why the 👍 / 👎 ---------- */
.why{position:fixed;z-index:55;width:min(420px,calc(100vw - 16px));background:var(--bg2);border:1px solid var(--danger);border-radius:12px;padding:10px 12px;box-shadow:0 10px 36px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:8px}
.why.up{border-color:var(--accent2)}.why.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:100%;border-radius:14px 14px 0 0;max-height:70vh;overflow:auto;padding-bottom:18px}
.why-cats,.why-tags{display:flex;flex-wrap:wrap;gap:6px}.why-cat{border-radius:999px;padding:5px 12px}.why-cat.open{background:var(--accent);border-color:var(--accent);color:#fff}.why-cat.has:not(.open){border-color:var(--accent2)}
.why-cat b{background:rgba(255,255,255,.18);border-radius:999px;padding:0 6px;font-size:.75rem}
.why-tag{border-radius:999px;padding:5px 12px;font-size:.84rem}.why-tag.on{background:rgba(239,68,68,.22);border-color:var(--danger)}.why.up .why-tag.on{background:rgba(34,197,94,.2);border-color:var(--accent2)}
.why input{width:100%}
/* ---------- picture preview window ---------- */
.lightbox-box{width:auto;max-width:96vw;display:flex;flex-direction:column;gap:8px;align-items:stretch}.lightbox-box img{max-width:92vw;max-height:78vh;object-fit:contain;background:#000;border-radius:8px}
.start-pics a{display:block;cursor:zoom-in}
/* ---------- phones ---------- */
@media (hover:none){.thumb .rate.ov{opacity:1}}
@media (max-width:600px){
  main{padding:12px}
  .grid.thumbs.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.grid.thumbs.big .thumb .cap.time{display:none}
  .thumb .cap{font-size:.72rem;padding:4px 6px}
  .qt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lib-tools>select,.lib-tools>#lib-q{flex:1 1 45%;max-width:none}
}
@media (max-width:820px){
  #modal{padding:0;align-items:stretch}
  .modal-box.viewer{width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0;border:0;overflow:auto}
  .viewer .m-head{position:sticky;top:0;z-index:4;padding:6px 8px;gap:6px}
  .viewer .m-head .num-badge{font-size:1.05rem}.viewer .m-titles h3{font-size:.9rem}
  #m-prev,#m-next,#m-close{min-width:44px;min-height:44px;font-size:1.3rem}
  .m-grid{display:flex;flex-direction:column;gap:10px;padding:0 0 16px}
  .m-media{gap:6px}
  .m-grid .m-media video,.m-grid .m-media img{width:100vw;height:auto;max-height:72vh;min-height:40vh;border-radius:0}
  .m-bar,.m-keys{padding:0 10px}.m-keys>span{display:none}
  .m-bar button,.m-bar .button{min-height:40px;font-size:.95rem;padding:8px 12px}
  .rate.big button{min-height:44px;min-width:56px;font-size:1.25rem}
  .m-tabbar{display:flex;position:sticky;top:56px;z-index:3;background:var(--bg2);padding:4px 10px 0;gap:6px}
  .m-tabbar button{flex:1;min-height:42px;font-size:.95rem}
  .m-pane{display:none;padding:0 10px}.m-pane.on{display:block}
  .tool button,.tool .button{min-height:38px}.tool select{min-height:38px}
  .d-grid{font-size:.9rem}.d-text{font-size:.9rem}
}
@media (max-width:820px){
  .viewer .m-sub{display:none}.viewer .m-titles h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-tabbar{position:static;padding-top:6px}
  .m-grid .m-media video,.m-grid .m-media img{flex:none}
}
@media (max-width:820px){.m-grid{flex:none;min-height:auto}.m-grid>*,.m-media>*{flex-shrink:0}.m-pane{overflow:visible;min-height:auto}}
@media (max-width:520px){.tool>div{flex:0 0 auto;width:100%}.tool>.row,.tool>button{align-self:flex-end;margin-left:0}}
/* phones: a short top bar and a one-row, swipeable menu */
@media (max-width:600px){
  .topbar{padding:8px 10px}.brand{font-size:1rem}.pill-hw{display:none}.pill{font-size:.72rem;padding:2px 8px}
  .topbar-right{width:100%;gap:6px}.topbar-right .mode-btn,.topbar-right form button{padding:5px 10px;font-size:.8rem}
  .sidenav{flex-wrap:nowrap;overflow-x:auto;padding:6px 8px;gap:2px;-webkit-overflow-scrolling:touch}.sidenav a{white-space:nowrap;padding:8px 10px;flex:none}
}
@media (max-width:600px){.sidenav{align-self:stretch;max-width:100vw;min-width:0}}
@media (max-width:600px){.q-run{gap:10px}.q-run-pic{width:72px;height:96px}.q-run .row.between.small{flex-direction:column;align-items:flex-start;gap:2px}
  .q-next-row{flex-wrap:wrap}.q-eta{text-align:left}}
/* the clip's buttons (👍 👎, favorite, download...) sit above the details on wide screens, next to "New video from this picture" */
.m-grid>.m-bar{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:6px 8px;align-self:start}
@media (min-width:1280px){
  .m-grid{grid-template-rows:auto minmax(0,1fr)}
  .m-grid>.m-media{grid-column:1;grid-row:1 / span 2}
  .m-grid>.m-bar{grid-column:2 / span 2;grid-row:1}
  .m-grid>.m-info{grid-column:2;grid-row:2}
  .m-grid>.m-toolpane{grid-column:3;grid-row:2}
}
@media (min-width:821px) and (max-width:1279px){
  .m-grid{grid-template-rows:auto auto minmax(0,1fr)}
  .m-grid>.m-media{grid-row:1 / span 3}
  .m-grid>.m-bar{grid-column:2;grid-row:1}
  .m-grid>.m-tabbar{grid-row:2}
  .m-grid>.m-pane{grid-row:3}
}
/* phones: video, then the buttons, then "next clip after rating", then the tabs (the video column's box dissolves so they can be ordered) */
@media (max-width:820px){
  .m-grid>.m-media{display:contents}
  .m-media>video,.m-media>img{order:0}
  .m-grid>.m-bar{order:1;background:none;border:0;border-radius:0;padding:0 10px}
  .m-media>.m-keys{order:2}
  .m-grid>.m-tabbar{order:3}
  .m-grid>.m-pane{order:4}
}
/* the assistant's line and wake-up: a small bar under the assistant buttons and above the chat input */
.assist-status{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
#chat-status{display:flex;min-height:1.3em;margin:6px 0}
.abar{display:inline-block;position:relative;width:120px;height:6px;border-radius:3px;background:var(--bg3);overflow:hidden;flex:none}
.abar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px;transition:width .8s linear}
.abar.busy i{width:35%;animation:abar-slide 1.3s ease-in-out infinite}
@keyframes abar-slide{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.abar.busy i{animation:none;left:0;width:100%;opacity:.5}}
/* ---------- whole-clip dialog (continue with motion / retake a part): the clip, the retaken part as a bar under it ---------- */
#vd-video{width:100%;max-height:34vh;background:#000;border-radius:8px;display:block}
.vd-range{position:relative;height:12px;background:var(--bg3);border-radius:6px;margin:6px 0 10px;cursor:pointer;overflow:hidden}
.vd-range i{position:absolute;top:0;bottom:0;background:var(--accent);opacity:.85;border-radius:6px}
#v2v-dialog .row.wrap{gap:8px 12px;align-items:center}
@media (max-width:600px){#vd-video{max-height:32vh}}

/* model menus: what the chosen pack's emojis mean, and the legend of all of them */
.pack-badges{display:flex;flex-wrap:wrap;gap:2px 12px;margin:2px 0 4px;color:var(--fg)}
.pack-legend{margin:2px 0 4px}.pack-badges .emo,#pack-legend .emo{font-style:normal;margin-right:5px}.pack-legend summary{cursor:pointer}
#pack-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 14px;margin:4px 0 2px;color:var(--muted)}
/* phones: stacked columns take the full width (a queued job's long one-line title used to widen the whole Generate page) */
@media (max-width:900px){.cols{align-items:stretch}}
.job .head>.title{min-width:0;flex:1 1 auto}
/* 2026-09-25: the start picture's own tool box in the viewer; Variations on other models; the Queue's job window, prompts, tries */
.pic-tools{margin:0 0 10px}.pic-tools .pic-note{margin:0 0 4px}.pic-tools .tool-group h3{margin-bottom:2px}
.pack-full{display:block;font-size:.76rem;color:var(--muted);margin-bottom:3px}
.t-var{flex-wrap:wrap}.t-var-models{flex:1 0 100%;display:flex;flex-direction:column;gap:4px;margin-top:2px}
.t-var-on select{width:auto;max-width:100%;padding:3px 6px}.t-var-list{display:flex;flex-wrap:wrap;gap:2px 12px;padding:4px 0 2px}.t-var-list label{margin:0}
.t-var-how:empty{display:none}
.q-prompt{font-size:.8rem;line-height:1.4;color:var(--fg);opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.q-next-t>div.q-prompt{white-space:normal}.q-next-row{cursor:pointer;align-items:flex-start}.q-next-row:hover{background:#252c3a}.q-next-row .q-eta,.q-next-row .q-next-acts{align-self:center}
.q-next-t>div{margin:1px 0}.q-next-t .model-chip{margin-right:2px}.q-diff{color:#fcd34d}.job .q-prompt{margin:3px 0}
.qt-pic.pending{cursor:pointer}.qt-pic.pending:hover img{opacity:.6}
.qt-pick{position:absolute;right:6px;bottom:6px;background:var(--accent);color:#fff;font-weight:700;font-size:.78rem;border-radius:999px;padding:1px 8px}
.qt.picked{outline:2px solid var(--accent);outline-offset:-1px}#jobs.picking .qt[data-aid] .qt-pic{cursor:copy}
#q-pick.on{border-color:var(--accent);color:#c9bcff}
.q-cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--bg2);border:1px solid var(--accent);border-radius:var(--radius);padding:8px 12px;margin:8px 0;position:sticky;top:58px;z-index:4}
.q-cmp-bar .cap{flex:1 1 260px;margin:0}
#jobs .grp-prompt{cursor:pointer}
.cmp-model{display:flex;gap:5px;align-items:center;font-size:.8rem;font-weight:600;padding:0 2px;overflow-wrap:anywhere}.cmp-model.vary{color:#fcd34d}.cmp-cell .pchips.sm{margin-top:0}
#cmp-title{margin-bottom:2px}#cmp-note:empty{display:none}
.jd-box{width:min(760px,100%)}.jd-box .d-sec{margin:8px 0}.jd-box .d-text{max-height:40vh;overflow:auto}
.jd-top{display:flex;gap:12px;align-items:flex-start;margin:6px 0 4px}.jd-top figure{margin:0;flex:none;text-align:center}
.jd-top img{width:96px;height:128px;object-fit:cover;border-radius:6px;background:#000;display:block}.jd-top figcaption{font-size:.7rem;color:var(--muted);margin-top:2px}
.jd-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.jd-diff{margin-top:4px;color:#fcd34d}.jd-acts{margin-top:10px;gap:8px}
.jd-edit{display:flex;flex-direction:column;gap:10px;margin-top:6px}.jd-edit textarea{min-height:140px}
.je-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 14px;align-items:end}.je-grid label{margin:0}
.je-size input{width:90px}.je-size span{align-self:center}.je-fast-row{align-self:center}
.je-loras-sec{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:8px 10px}.je-loras-sec .cap{display:inline;margin-left:4px}
.je-lora{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:5px 0;border-top:1px solid var(--border)}.je-lora:first-child{border-top:0}
.je-lname{flex:1 1 180px;min-width:0;font-size:.86rem}.je-lora label{display:flex;align-items:center;gap:4px;margin:0}.je-lora input{width:70px;padding:3px 6px}
.je-lora.off .je-lname{text-decoration:line-through;color:var(--muted)}.je-lora.off input{opacity:.4}
.edit-banner{border:1px solid var(--accent);background:rgba(124,92,255,.08);border-radius:var(--radius);padding:10px 12px;margin:8px 0;display:flex;flex-direction:column;gap:6px}
@media (max-width:600px){.jd-top img{width:72px;height:96px}.q-next-row{cursor:default}.je-grid{grid-template-columns:1fr 1fr}}
.qt-label{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.je-grid>label:first-child{grid-column:span 2}@media (max-width:600px){.je-grid>label:first-child{grid-column:1 / -1}}
.job .jfoot{flex-wrap:wrap;gap:4px 8px}.job .jacts{flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-left:auto}.job .jacts button{white-space:nowrap}
.t-var-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 10px}
@media (max-width:600px){
  .q-next-row{flex-wrap:wrap}.q-next-t{flex:1 1 calc(100% - 70px)}
  .q-next-row .q-eta{order:3;flex:1 1 auto;text-align:left;margin-left:28px}.q-next-row .q-next-acts{order:4}
  .grp-head{flex-wrap:wrap}.grp-head>.grp-t{flex:1 1 100%}.grp-head>.grp-btns{flex-wrap:wrap;margin-left:auto}
  .q-cmp-bar{position:static}
}
@media (max-width:600px){.je-grid>label:nth-child(n+4){grid-column:1 / -1}.je-size input{width:100%}}
/* 2026-09-25 (2): the viewer's picture picker; steps menus in Iterate */
.pic-pick{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
button.pic-opt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;border-radius:8px;background:var(--bg2);width:88px}
.pic-opt img,.pic-opt video{width:78px;height:104px;object-fit:cover;border-radius:5px;background:#000;display:block;pointer-events:none}
.pic-opt span{font-size:.72rem;line-height:1.2;text-align:center;white-space:nowrap}
button.pic-opt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:rgba(124,92,255,.14)}
.pic-what{margin:2px 0 6px;line-height:1.45}.pic-what a{color:var(--accent)}
.t-var-steps{width:auto;max-width:190px}.t-var-best{display:block}.t-var-best a{color:var(--accent);font-weight:600}
.t-final-steps{width:auto}
@media (max-width:600px){button.pic-opt{width:calc(33% - 4px)}.pic-opt img,.pic-opt video{width:100%;height:auto;aspect-ratio:3/4}}
button.pic-opt{flex:1 1 0;min-width:62px;max-width:96px;width:auto}.pic-opt img,.pic-opt video{width:100%;height:auto;aspect-ratio:3/4}
.pic-opt span{white-space:normal}
.t-var .tool-ctl{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;margin-left:0}
.m-grid .m-media video,.m-grid .m-media img{max-width:100%}   /* 100vw overflowed by the scrollbar's width in narrow desktop windows */
/* "Same prompt on more models" (Generate page, under the Model menu) */
.also-models{margin-top:6px}.also-models summary{cursor:pointer}.also-list{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 2px}.also-list label.check{font-size:.85rem;gap:6px}
/* 2026-09-25 (3): 🩹 fix what went wrong */
.fx-box{width:min(780px,100%)}.fx-sec{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin:8px 0}
.fx-sec h4{margin:0 0 2px;font-size:.92rem}.fx-sec>.cap{margin-bottom:6px}
.fx-tags{display:flex;flex-direction:column;gap:5px;margin:6px 0}.fx-cat{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.fx-cat>span{min-width:64px}
.fx-change{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--border);cursor:pointer;margin:0}.fx-change:first-child{border-top:0}
.fx-change input{width:auto;margin-top:3px;flex:none}.fx-change:not(.on) b{color:var(--muted);font-weight:500}
.fx-hint{margin:6px 0 0}#fx-ai-box{margin-top:6px}#fx-ai-box.off{opacity:.4;pointer-events:none}.fx-why{margin:4px 0}#fx-prompt{margin-top:4px}
.fx-old{margin-top:6px}.fx-old .d-text{max-height:24vh;overflow:auto;color:var(--muted);margin-top:4px}
/* CFG explained: the "?" buttons open a setting's Help card on top of any window (openExplain); the notes say what a value does */
button.hint{padding:0;margin:0 2px;font-size:.7rem;line-height:14px;width:16px;height:16px;vertical-align:1px;border-radius:50%;cursor:pointer}
button.hint:hover{border-color:var(--accent);color:var(--fg)}
.modal.explain{z-index:50}.ex-box{width:min(620px,100%)}.ex-box h3{margin:0}
.ex-text p{margin:0 0 8px}.ex-text p:last-child{margin-bottom:0}#ex-body{margin-top:8px;line-height:1.5}
.cfg-why{display:block;margin-top:2px}.cfg-bad{color:#fbbf24}.cap.cfg-bad{color:#fbbf24}
/* ⚡ Iterate: 👎 next to 🩹 Fix, 👍 next to ✨ Better (the rating unlocks the tool); the ✨ dialog is the 🩹 one with a green edge */
.tool .t-rate{min-width:38px;padding:3px 8px;background:var(--bg3)}
.tool .t-rate.on{border-color:var(--accent2);background:rgba(34,197,94,.18)}.tool .t-rate.r-down.on{border-color:var(--danger);background:rgba(239,68,68,.18)}
#fix-dialog.better .fx-box{border-color:rgba(34,197,94,.5)}#fix-dialog.better #fx-title{color:#86efac}#fix-dialog.better .why-tag.on{background:rgba(34,197,94,.2);border-color:var(--accent2)}
/* 📏 prompt check under each Generate prompt box, and 🎬 Story in parts (app.js runChecks / addPart) */
.pcheck{display:flex;flex-direction:column;gap:3px;margin:2px 0 6px;font-size:.8rem;line-height:1.4}.pcheck:empty{display:none}
.pcheck .pc{display:flex;gap:6px;align-items:flex-start}.pcheck .pc .emo{font-style:normal;flex:none}
.pcheck .pc-ok{color:var(--muted)}.pcheck .pc-warn{color:#fbbf24}.pcheck .pc-bad{color:#f87171}
.pcheck .pc-split{margin:2px 0 0 6px;padding:2px 9px;font-size:.78rem;border-color:#fbbf24;color:var(--fg)}.pcheck .hint{margin-left:4px;vertical-align:1px}
.story{margin:8px 0}.story h3 a{font-weight:400;margin-left:8px}
.story-parts{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px}.story-parts:empty{display:none}
.sp{border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--bg)}
.sp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}.sp-btns{margin-left:auto;display:flex;gap:4px}.sp-btns button{padding:3px 9px}
.sp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:2px}.sp-row label{display:flex;align-items:center;gap:6px;margin:0}.sp-row select{width:auto}
.sp .dropzone.sp-pic{min-height:52px;flex:1 1 180px}.sp .dropzone.sp-pic img{max-height:90px}.sp .dz-label{font-size:.8rem}
@media (max-width:520px){.sp-btns{margin-left:0}.sp .dropzone.sp-pic{flex-basis:100%}}
/* the Library card (thumbHTML): number + 🆕 NEW top left, ★ 🔊 top right; the model's full name wraps instead of being cut; add-on chips */
.thumb.card{display:flex;flex-direction:column}
.thumb.card .c-tl{position:absolute;top:6px;left:6px;right:34px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;pointer-events:none}
.thumb.card .c-tl .num{position:static}
.thumb.card .c-tr{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:3px;align-items:flex-end;pointer-events:none}
.thumb.card .c-tr .fav,.thumb.card .c-tr .snd{position:static}
.new-tag{background:#22c55e;color:#04210f;font-weight:800;font-size:.68rem;letter-spacing:.05em;padding:1px 6px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.thumb.card.is-new{box-shadow:0 0 0 2px #22c55e,0 0 14px rgba(34,197,94,.35)}
.thumb.card .c-body{padding:6px 8px 7px;display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.thumb.card .c-model{display:flex;gap:6px;align-items:flex-start;font-size:.82rem;font-weight:600;color:var(--fg);line-height:1.25;overflow-wrap:anywhere}
.thumb.card .c-model .fam-dot{margin-top:4px;flex:none}
.thumb.card .c-what{font-size:.74rem;color:var(--muted);line-height:1.3}
.thumb.card .c-title{font-size:.76rem;color:var(--muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thumb.card .c-time{font-size:.7rem;color:var(--muted);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto}
.badge.new{background:#22c55e;color:#04210f;font-weight:700}
.lib-head{gap:10px;align-items:center}.lib-head h2{margin:0}
.lib-new{display:inline-flex;gap:6px;align-items:center}#lib-new-go{border-color:#22c55e;color:#86efac}
.grp-new{margin-left:8px;color:#86efac;font-size:.8rem}
@media (max-width:600px){.thumb.card .c-time{display:none}.thumb.card .c-title{-webkit-line-clamp:1}.thumb.card .c-body{padding:5px 6px}.thumb.card .c-model{font-size:.76rem}}
/* 🖼 Pictures (Qwen-Image-2.1): their own family colour on cards, dots and model chips */
:root{--fam-pic:#fbbf24}
.thumb.fam-pic{border-top-color:var(--fam-pic)}.fam-dot.pic{background:var(--fam-pic)}.model-chip.pic{border-color:var(--fam-pic)}
#pic-addon-list .tool-ctl input[type=range]{width:110px}
.pw-form{margin:0}
/* 👀 Continue with motion: how much of the clip the model watches (app.js paintV2VWatch). The track turns red from --zs on
   (windows over 10 s, where a longer continuation may lose quality); the thumb is 18px wide, as the --zs calc() assumes. */
.vd-watch{margin:4px 0 8px}
.zone-range{--zs:101%;-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:4px 0 0;padding:0;background:transparent;border:0;cursor:pointer}
.zone-range:focus{outline:none}.zone-range:disabled{opacity:.5;cursor:default}
.zone-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--zs),var(--danger) var(--zs),var(--danger) 100%)}
.zone-range::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--zs),var(--danger) var(--zs),var(--danger) 100%)}
.zone-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:18px;height:18px;margin-top:-5px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.zone-range::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.zone-range.in-red::-webkit-slider-thumb{border-color:var(--danger);background:#fecaca}
.zone-range.in-red::-moz-range-thumb{border-color:var(--danger);background:#fecaca}
.zone-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(124,92,255,.5)}
.zone-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(124,92,255,.5)}
.zone-scale{display:flex;justify-content:space-between;gap:10px;font-size:.75rem;color:var(--muted)}
.zone-red b,.cap.zone-warn{color:#f87171}.cap.zone-warn{font-weight:500}
/* 🖼 Pictures: the ✨ prompt assistant box (its 🔞 box only steers the assistant) and the adult-look check under the prompt */
.pic-assist-box{margin:4px 0 8px}.pic-assist-box .tool label.check{margin:0;align-items:flex-start}.pic-assist-box .tool label.check input{margin-top:3px}
.pic-assist-box .assist-status{margin-top:4px}.pic-assist-box .assist-status:empty{display:none}
#pic-check .pc-bad span{font-weight:500}
/* Generate: ⚙️ Settings holds the Model menu with the size, length, steps, CFG and shift; the time per size under the menu */
.settings-box{margin:10px 0}.settings-box .pack-field{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
#size-eta:empty{display:none}
/* 🩹 / ✨: your own words, in 1️⃣ (fix) or above the Write button in 3️⃣ (better) */
.fx-note-wrap{display:block;margin:8px 0 6px}.fx-note-wrap textarea{margin-top:4px}
/* a clip's picture is a link (#clip=ID): the mouse wheel / "Open link in new tab" opens it in its own tab */
.clip-a{display:block;color:inherit;text-decoration:none;-webkit-user-drag:none}.qt-pic>.clip-a,.jthumb>.clip-a{height:100%}
/* the card's text is the same link: it keeps its own colours, and text can still be selected */
.thumb.card a.c-body,.qt a.qt-label{color:inherit;text-decoration:none;cursor:pointer;-webkit-user-select:text;user-select:text}.thumb.card a.c-body:hover .c-title{color:var(--fg)}
.job a.title.link{color:inherit;display:block}.qt a.qt-label{display:-webkit-box}
/* 🎞 long video: the story box steps back while the long-video menu is on (one prompt vs a prompt per part) */
.story.dim { opacity: .55; }
label.off input[type=range] { opacity: .45; }
.pic-desc-drop{flex:none;width:96px;min-height:64px}.pic-desc-drop img{max-height:88px}
#size-crop{display:block;line-height:1.45}#size-crop button{margin-top:6px}
/* 🩺 a failed job's error in plain words (failures.explain, night D68); the Shift box where the model ignores it */
.err-why{font-size:.82rem;line-height:1.45;margin:6px 0 2px;padding:7px 10px;border-radius:8px;background:var(--bg3);border-left:3px solid var(--warn);color:var(--fg)}
#shift:disabled{opacity:.5;cursor:not-allowed}
/* 🖼 the Queue names its pictures (night D69): a caption on a waiting tile, under the running job's picture, in the rows */
.qt-pic .pic-what{position:absolute;left:5px;right:5px;bottom:7px;background:rgba(0,0,0,.75);color:#fff;font-size:.7rem;padding:1px 5px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.q-run-picbox{flex:none;display:flex;flex-direction:column;gap:3px;width:120px}.q-run-picbox .pic-cap{color:var(--muted);line-height:1.2;text-align:center}
.pic-what-t{white-space:nowrap}
@media (max-width:600px){.q-run-picbox{width:72px}}
/* viewer title strip: the settings that made the clip; amber = not the same on every clip of its batch (paintParams) */
.pchips{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px}
.pchip{display:inline-flex;align-items:baseline;gap:5px;background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:2px 8px;font-size:.8rem;line-height:1.4;white-space:nowrap;cursor:default}
.pchip .pi{font-size:.85rem;align-self:center}.pchip i{font-style:normal;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
.pchip b{font-weight:650;font-variant-numeric:tabular-nums}.pchip small{color:var(--muted);font-size:.72rem}
.pchip[data-explain]{cursor:help}.pchip[data-explain]:hover,.pchip.seed:hover{border-color:var(--accent)}
.pchip.seed{cursor:copy}.pchip.seed b{font-family:ui-monospace,Menlo,monospace;font-weight:500;font-size:.76rem}
.pchip.bad b{color:#fbbf24}.pchip.bad b::after{content:" ⚠"}
.pchip.lora{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.35)}.pchip.lora small{color:#c9bcff;font-weight:600}
.pchip.lora.none{background:var(--bg3);border-color:var(--border);color:var(--muted)}.pchip.lora.none b{font-weight:400}
.pchip.off{opacity:.75}.pchip.off b{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.45)}
.pchip.vary{background:rgba(245,158,11,.16);border-color:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.18)}
.pchip.vary b,.pchip.vary small{color:#fcd34d}.pchip.vary i{color:#fbbf24}
.padds{display:inline-flex;flex-wrap:wrap;gap:5px;padding-left:7px;margin-left:2px;border-left:2px solid rgba(124,92,255,.45)}
.thumb.card .c-model.vary span:last-child{color:#fcd34d}.model-chip.vary{border-color:#f59e0b;background:rgba(245,158,11,.16);color:#fcd34d}
.pchip.made{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.45)}.pchip.made b{color:#67e8f9}.pchip.made i{color:#22d3ee}
/* the same chips, smaller: Library cards (sm) and Queue tiles (xs, no names: the viewer shows them, the tooltip says them) */
.pchips.sm,.pchips.xs{margin-top:2px;gap:3px}.pchips.sm .pchip,.pchips.xs .pchip{font-size:.7rem;padding:0 5px;border-radius:5px;gap:3px;line-height:1.5}
.pchips.sm .pchip i{font-size:.58rem}.pchips.sm .pchip .pi,.pchips.xs .pchip .pi{font-size:.68rem}.pchips.sm .pchip small,.pchips.xs .pchip small{font-size:.64rem}
.pchips.sm .padds,.pchips.xs .padds{flex-basis:100%;gap:3px;padding-left:0;margin-left:0;border-left:0}
.pchips.sm .pchip.vary,.pchips.xs .pchip.vary{box-shadow:none}
.pchips.xs{padding:0 6px 5px}.pchips.xs .pchip{font-size:.66rem;padding:0 4px}.pchips.xs .pchip i,.pchips.xs .pchip.steps small{display:none}
.pchips.sm .pchip,.pchips.xs .pchip{max-width:100%}.pchips.sm .pchip.lora b,.pchips.xs .pchip.lora b{white-space:normal;overflow-wrap:anywhere}.q-next-t .pchips.sm,.q-run-body .pchips.sm,.job .pchips.sm{margin:3px 0}
.m-batch{color:var(--muted)}.m-batch b{color:var(--fg)}.m-batch .m-batch-d{color:#fcd34d;font-weight:600}
@media (max-width:820px){
  .viewer .pchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:4px;gap:4px;padding-bottom:1px}.viewer .pchips::-webkit-scrollbar{display:none}
  .viewer .pchip{font-size:.72rem;padding:1px 6px;flex:none}.viewer .padds{flex:none;flex-wrap:nowrap;gap:4px}
  .viewer .pchips>.pchip.vary,.viewer .padds>.pchip.vary{order:-1}   /* one swipeable row: what differs in the batch comes first */
}
/* 🔊 Sound tools (paintSoundTools) and the Add sound dialog's plan (paintSoundPlan) */
.tg-sound .snd-now{margin:0 0 6px;padding:6px 9px;background:var(--bg3);border-radius:8px;line-height:1.4}
.tg-sound .t-snd .cap b{color:var(--fg);font-weight:600}.tg-sound .t-snd-eta{border-color:rgba(6,182,212,.45);color:#67e8f9}
.sd-plan{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin:10px 0 6px;font-size:.88rem}
.sd-plan:empty{display:none}.sd-plan ol{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:5px}
.sd-plan li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}.sd-plan .sd-i{flex:none;width:1.4em;text-align:center}
.sd-plan .sd-total{border-top:1px solid var(--border);padding-top:6px;line-height:1.4}.sd-plan .sd-total b{color:#67e8f9}.sd-tip{margin:4px 0 8px}
/* Tools page: wider tiles for the settings chips */
.tp-grid .grid.thumbs.mini,#ins-top.grid.thumbs.mini{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.thumb .pchips.xs{padding:4px 5px 5px;margin:0}
.tp-info .pchips.sm{margin:2px 0}
/* why the 👍 / 👎: one row per part with its own 👍 / 👎, what exactly under the open one (app.js paintWhy) */
.why-parts{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px}#why-sub{margin:2px 0 6px}
.why-part{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--border);border-radius:9px;background:var(--bg2)}
.why-part.up{border-color:rgba(34,197,94,.55)}.why-part.down{border-color:rgba(239,68,68,.55)}
.why-part .wp-name{flex:1;text-align:left;background:transparent;border:0;padding:4px 4px;font-weight:600}.why-part .wp-name b{background:rgba(255,255,255,.15);border-radius:999px;padding:0 6px;font-size:.75rem;font-weight:600}
.why-part .wp-btns{display:flex;gap:4px}.why-part .wp-v{padding:3px 10px;border-radius:8px;opacity:.55}.why-part .wp-v:hover{opacity:1}
.why-part .wp-v.up.on{opacity:1;background:rgba(34,197,94,.25);border-color:var(--accent2)}.why-part .wp-v.down.on{opacity:1;background:rgba(239,68,68,.25);border-color:var(--danger)}
.why-part .wp-more{flex-basis:100%;display:flex;flex-direction:column;gap:5px;padding:2px 0 3px}.wp-tags{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.why .why-tag.up.on{background:rgba(34,197,94,.2);border-color:var(--accent2)}.why .why-tag.down.on{background:rgba(239,68,68,.22);border-color:var(--danger)}
#m-why.has-parts{border-color:var(--border);color:var(--fg)}
.why{max-height:calc(100vh - 16px);overflow:auto}