html body #task-panel .multi-material-upload {
  --multi-bg:#f7f9fc; --multi-hover:#eef5ff; --multi-line:#d8e2f2; --multi-ink:#34435d; --multi-muted:#77859d; --multi-button:#fff;
  display:block!important; position:relative; box-sizing:border-box; width:100%!important; height:220px!important; min-height:220px!important;
  padding:0!important; border:1px dashed var(--multi-line)!important; border-radius:14px!important; background:var(--multi-bg)!important;
  margin:0!important; overflow:visible!important; cursor:pointer;
}
html[data-theme="dark"] body #task-panel .multi-material-upload { --multi-bg:#252a34; --multi-hover:#29364b; --multi-line:#424e62; --multi-ink:#e2e7f0; --multi-muted:#acb8cb; --multi-button:#252d3b; }
html body #task-panel .multi-material-upload[hidden] { display:none!important; }
html body #task-panel .multi-material-upload:hover { background:var(--multi-hover)!important; border-color:#6a98ff!important; }
html body #task-panel .multi-material-upload.multi-material-filled { height:320px!important; min-height:320px!important; }
html body #task-panel .multi-material-original { display:none!important; }
html body #task-panel .multi-material-heading { position:absolute; inset:28px 20px auto; display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none; text-align:center; }
html body #task-panel .multi-material-heading img { width:54px!important; height:54px!important; background:none!important; }
html body #task-panel .multi-material-heading span { display:block; font-size:16px!important; font-weight:500!important; color:var(--multi-ink)!important; }
html body #task-panel .multi-material-heading small { display:block; margin-top:8px; font-size:13px!important; font-weight:400!important; color:var(--multi-muted)!important; }
html body #task-panel .multi-material-filled .multi-material-heading { inset:20px 22px auto; flex-direction:row; gap:14px; text-align:left; }
html body #task-panel .multi-material-strip { position:absolute; left:15px; right:15px; top:96px; height:203px; display:flex; align-items:flex-start; gap:12px; padding:8px 7px 5px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; box-sizing:border-box; }
html body #task-panel .multi-material-upload:not(.multi-material-filled) .multi-material-strip { display:none; }
html body #task-panel .multi-material-item { flex:0 0 auto; margin:0!important; padding:0!important; width:auto!important; border:0!important; background:none!important; }
html body #task-panel .multi-material-frame { --rest-width:132px; --rest-height:176px; --hover-width:84px; --hover-height:112px; position:relative; width:var(--rest-width); height:var(--rest-height); transition:width 260ms ease,height 260ms ease; background:transparent!important; border:0!important; border-radius:3px; }
html body #task-panel .multi-material-open { display:block!important; width:100%!important; height:100%!important; padding:0!important; margin:0!important; border:0!important; border-radius:3px!important; box-shadow:none!important; background:transparent!important; cursor:zoom-in; overflow:hidden; }
html body #task-panel .multi-material-open :is(img,video) { display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; border-radius:3px!important; background:transparent!important; }
html body #task-panel .multi-material-item > figcaption { font-size:12px!important; font-weight:400!important; line-height:18px; text-align:center; padding:2px 0!important; color:var(--multi-muted)!important; }
html body #task-panel .multi-material-remove { position:absolute!important; top:-6px!important; right:-6px!important; width:22px!important; height:22px!important; min-width:22px!important; padding:0!important; border:1px solid white!important; border-radius:50%!important; background:#475569!important; color:white!important; font:20px/1 sans-serif!important; display:grid!important; place-items:center; cursor:pointer; }
html body #task-panel .multi-material-remove:hover { background:#e84258!important; }
html body #task-panel .multi-material-actions { position:absolute; left:20px; right:20px; bottom:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 120ms ease,visibility 0s linear 120ms; }
html body #task-panel .multi-material-actions > button { display:flex!important; align-items:center!important; justify-content:center!important; gap:7px; height:40px!important; min-width:0!important; padding:0 7px!important; margin:0!important; border:1px solid var(--multi-line)!important; border-radius:10px!important; background:var(--multi-button)!important; color:var(--multi-ink)!important; font-size:14px!important; font-weight:500!important; cursor:pointer; }
html body #task-panel .multi-material-actions svg { width:16px; height:16px; }
html body #task-panel .multi-material-actions button :is(span,svg) { color:inherit!important; }
html body #task-panel .multi-material-actions > button:is(:hover,:focus-visible) { background:#2678ff!important; color:white!important; border-color:#2678ff!important; }
html body #task-panel .multi-material-upload:not(.multi-material-pending):not(.multi-material-rest):is(:hover,:focus-visible,:has(:focus-visible)) .multi-material-frame { width:var(--hover-width); height:var(--hover-height); }
html body #task-panel .multi-material-upload:not(.multi-material-pending):not(.multi-material-rest):is(:hover,:focus-visible,:has(:focus-visible)) .multi-material-actions { visibility:visible; opacity:1; pointer-events:auto; transition-delay:180ms; }
html body #task-panel .multi-material-upload:not(.multi-material-filled):is(:hover,:focus-visible,:has(:focus-visible)) .multi-material-actions { transition-delay:0s; }
html body #task-panel .multi-material-upload:not(.multi-material-filled):is(:hover,:focus-visible,:has(:focus-visible)) .multi-material-heading small { visibility:hidden; }
html body #task-panel .multi-material-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:#17203355; color:white; }
html body #task-panel .multi-material-loading i { width:24px; height:24px; border:2px solid #ffffff70; border-top-color:white; border-radius:50%; animation:single-material-spin .8s linear infinite; }
html body #task-panel .multi-material-loading small { font-size:12px!important; font-weight:400!important; color:white!important; }
html body #task-panel .multi-material-audio { color:#5687ed; font-size:54px; }
html body #task-panel .multi-material-role-list { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:12px!important; width:100%!important; max-height:none!important; overflow:visible!important; margin:14px 0 0!important; }
html body #task-panel .multi-material-role-list.is-empty { display:none!important; }
html body #task-panel .multi-material-role-list > figure { display:block!important; width:100%!important; max-width:none!important; height:auto!important; margin:0!important; }
html body #task-panel .multi-material-role-list > figure > .video-free-reference-media { display:none!important; }
html body #task-panel .multi-material-role-list > figure::before { content:attr(data-multi-label); display:block; margin:8px 12px; font-size:13px; font-weight:500; }
html body #task-panel .multi-material-role-list figcaption { width:100%!important; box-sizing:border-box; }
html body #task-panel .multi-material-upload :focus-visible { outline:2px solid #5188ef!important; outline-offset:3px; }
.multi-source-kind-dialog { border:0; border-radius:16px; padding:24px; color:#34435d; background:white; }
.multi-source-kind-dialog::backdrop { background:#0008; }
.multi-source-kind-dialog button { padding:10px 16px; margin:8px 4px; cursor:pointer; }
html[data-theme="dark"] .multi-source-kind-dialog { background:#252a34; color:#e2e7f0; }
@media (hover:none),(pointer:coarse) {
 html body #task-panel .multi-material-upload:not(.multi-material-pending) .multi-material-actions { visibility:visible; opacity:1; pointer-events:auto; }
 html body #task-panel .multi-material-upload:not(.multi-material-pending) .multi-material-frame { width:var(--hover-width); height:var(--hover-height); }
 html body #task-panel .multi-material-upload:not(.multi-material-filled) .multi-material-heading small { visibility:hidden; }
}
@media (prefers-reduced-motion:reduce) {
 html body #task-panel .multi-material-upload :is(.multi-material-frame,.multi-material-actions) { transition:none!important; }
 html body #task-panel .multi-material-loading i { animation:none; }
}