/* R39 task card: independently moving liquid layers without a dark selected-state rim. */
.task-node{width:350px;min-height:474px;padding-bottom:14px;border-color:#dfe1e6;border-radius:18px;box-shadow:0 2px 4px rgba(21,29,42,.05),0 14px 34px rgba(21,29,42,.07);overflow:visible}
.task-node>header{height:52px;padding:0 16px;border-bottom-color:#e8eaf0}
.task-node>header span{color:#1e2229;font-size:15px;font-weight:700;letter-spacing:-.02em}
.task-node .node-delete{color:#8b9099;font-size:18px}
.task-node .mode-tabs{gap:7px;padding:14px 14px 12px}
.task-node .mode-tabs button{position:relative;isolation:isolate;overflow:hidden;height:34px;padding:0 14px;border-color:#dfe2e8;border-radius:10px;background:#fff;color:#707680;font-size:10px;font-weight:550;box-shadow:0 1px 2px rgba(20,28,40,.03)}
.task-node .mode-tabs button.active{border:0!important;outline:0!important;background:#03040a!important;color:transparent!important;box-shadow:none!important;animation:none!important}
.task-node .task-summary{min-height:48px;margin:0 14px;padding:0 2px;border-bottom:1px solid #eceef2;border-radius:0;background:transparent;align-items:center;color:#747a84;font-size:10px}
.task-node .task-summary strong{color:#3f444c;font-size:10px;font-weight:500}
.task-node .control-row{grid-template-columns:58px minmax(0,1fr);min-height:56px;margin:0 14px;border-top:0;border-bottom:1px solid #eceef2;color:#626872;font-size:10px}
.task-node .control-row.ratio-row{min-height:98px;padding-top:12px;align-items:start}
.task-node .ratio-row>span{padding-top:10px}
.task-node .choice-group{gap:7px}
.task-node .choice-group.ratio-group{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.task-node .choice-group.resolution-group{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.task-node .choice-group button{position:relative;isolation:isolate;overflow:hidden;min-width:42px;height:34px;padding:0 9px;border-color:#dde1e7;border-radius:10px;background:#fff;color:#626872;font-size:10px;font-weight:520;box-shadow:0 1px 2px rgba(20,28,40,.025)}
.task-node .choice-group button.selected{border:0!important;outline:0!important;background:#03040a!important;color:transparent!important;box-shadow:none!important;animation:none!important}
.task-node .mode-tabs button.active::before,.task-node .choice-group button.selected::before{content:"";z-index:0;position:absolute;inset:-78%;pointer-events:none;background:radial-gradient(circle at 20% 24%,rgba(255,111,149,.98) 0 7%,rgba(236,83,224,.72) 12%,transparent 27%),radial-gradient(circle at 79% 72%,rgba(22,220,244,.98) 0 7%,rgba(54,139,255,.76) 13%,transparent 29%),radial-gradient(circle at 68% 18%,rgba(151,94,255,.96) 0 6%,rgba(235,238,49,.58) 12%,transparent 26%);transform-origin:50% 50%;will-change:transform;animation:var(--yz-task-orbit-name,yz-task-liquid-orbit) var(--yz-task-orbit-duration,10.6s) cubic-bezier(.45,0,.55,1) var(--yz-task-orbit-delay,0s) infinite var(--yz-task-orbit-direction,alternate)!important}
.task-node .mode-tabs button.active::after,.task-node .choice-group button.selected::after{content:attr(data-yz-label);z-index:2;position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;color:#fff;font:inherit;text-shadow:0 1px 5px rgba(0,0,0,.42)}
.task-node .control-row select{width:122px;height:36px;padding:0 12px;border-color:#dfe2e8;border-radius:10px;background:#fff;color:#4f555e;font-size:10px}
.task-node .yz-model-select{position:relative;justify-self:end;width:100%;min-width:0;z-index:12}
.task-node .yz-model-select>select{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.task-node .yz-model-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:38px;padding:0 13px;border:1px solid #d8dce5;border-radius:12px;background:#fff;color:#353b45;font-family:inherit;font-size:11px;font-weight:500;line-height:1.2;cursor:pointer;box-shadow:0 1px 2px rgba(20,28,40,.025);transition:border-color 140ms ease,box-shadow 140ms ease}
.task-node .yz-model-select-trigger:hover{border-color:#c8cdd8}
.task-node .yz-model-select.is-open .yz-model-select-trigger,.task-node .yz-model-select-trigger:focus-visible{outline:0;border-color:#79a1ff;box-shadow:0 0 0 3px rgba(83,130,255,.13)}
.task-node .yz-model-select-trigger:disabled{cursor:not-allowed;color:#a2a7b0;background:#fafafa}
.task-node .yz-model-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-node .yz-model-select-chevron{width:7px;height:7px;flex:0 0 auto;border-right:1.7px solid #78808d;border-bottom:1.7px solid #78808d;transform:translateY(-2px) rotate(45deg);transition:transform 140ms ease}
.task-node .yz-model-select.is-open .yz-model-select-chevron{transform:translateY(2px) rotate(225deg)}
.task-node .yz-model-select-menu{position:absolute;z-index:100;top:calc(100% + 7px);right:0;display:none;width:100%;max-height:220px;padding:7px;border:1px solid #e1e4ea;border-radius:13px;background:rgba(255,255,255,.98);overflow:auto;box-shadow:0 12px 32px rgba(31,39,55,.15),0 2px 7px rgba(31,39,55,.08);backdrop-filter:blur(12px)}
.task-node .yz-model-select.is-open .yz-model-select-menu{display:grid;gap:2px}
.task-node .yz-model-select-option{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:#343a44;text-align:left;font-family:inherit;font-size:11px;font-weight:500;line-height:1.25;cursor:pointer}
.task-node .yz-model-select-option:hover,.task-node .yz-model-select-option:focus-visible{outline:0;background:#f3f5f8}
.task-node .yz-model-select-option[aria-selected="true"]{background:#f1f3f7;color:#272d36}
.task-node .yz-model-select-option:disabled{opacity:.48;cursor:not-allowed}
.task-node .yz-model-select-check{visibility:hidden;color:#5c82ff;text-align:center;font-size:17px;font-weight:700}
.task-node .yz-model-select-option[aria-selected="true"] .yz-model-select-check{visibility:visible}
.task-node .primary-run{width:calc(100% - 28px);height:46px;margin:12px 14px 0;padding:0 15px;border-radius:11px;font-size:14px;font-weight:750;letter-spacing:.02em}
.task-node .primary-run>b{display:none!important}
.task-node .task-input-handle{top:126px}
.task-node .task-output{top:105px}
@keyframes yz-task-liquid-orbit{0%{transform:translate3d(-7%,-5%,0) rotate(0deg) scale(1)}25%{transform:translate3d(7%,-8%,0) rotate(92deg) scale(1.06)}50%{transform:translate3d(8%,7%,0) rotate(184deg) scale(.96)}75%{transform:translate3d(-8%,8%,0) rotate(274deg) scale(1.08)}100%{transform:translate3d(-7%,-5%,0) rotate(360deg) scale(1)}}
@keyframes yz-task-liquid-orbit-b{0%{transform:translate3d(9%,-8%,0) rotate(360deg) scale(1.04)}28%{transform:translate3d(-8%,-2%,0) rotate(252deg) scale(.95)}61%{transform:translate3d(4%,9%,0) rotate(138deg) scale(1.09)}100%{transform:translate3d(9%,-8%,0) rotate(0deg) scale(1.04)}}
@keyframes yz-task-liquid-orbit-c{0%{transform:translate3d(-3%,9%,0) rotate(24deg) scale(.96)}22%{transform:translate3d(9%,3%,0) rotate(118deg) scale(1.08)}54%{transform:translate3d(-6%,-9%,0) rotate(228deg) scale(1.01)}78%{transform:translate3d(-9%,4%,0) rotate(306deg) scale(1.1)}100%{transform:translate3d(-3%,9%,0) rotate(384deg) scale(.96)}}
@keyframes yz-task-selected-shell{0%,100%{box-shadow:0 0 0 1px rgba(38,215,239,.16),0 4px 12px rgba(151,103,244,.08)}50%{box-shadow:0 0 0 2px rgba(38,215,239,.26),0 7px 20px rgba(151,103,244,.2)}}

/* Reference-role library: connected images stay visible beside the prompt. */
.prompt-clean{height:auto!important;min-height:144px;overflow:visible}
.yz-prompt-reference-strip{display:flex;align-items:center;gap:7px;min-height:44px;margin:0 13px 12px;padding:7px 0 0;border-top:1px solid #eceef2;overflow-x:auto;scrollbar-width:thin}
.yz-prompt-reference-chip{position:relative;flex:0 0 auto;width:50px;height:38px;border:1px solid #dfe3ea;border-radius:9px;background:#f7f8fa;overflow:hidden;box-shadow:0 2px 7px rgba(20,28,40,.08)}
.yz-prompt-reference-chip img{width:100%;height:100%;display:block;object-fit:cover}
.yz-prompt-reference-chip b{position:absolute;left:3px;right:3px;bottom:3px;padding:2px 3px;border-radius:4px;background:rgba(12,15,20,.75);color:#fff;font-size:7px;font-weight:650;line-height:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.image-input-card footer{gap:8px}
.image-input-card footer>div{min-width:0;flex:1}
.yz-reference-role{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.yz-reference-role>span{color:#8a9099;font-size:7px}
.yz-reference-role select{width:75px;height:28px;padding:0 5px;border:1px solid #dfe2e8;border-radius:8px;background:#fff;color:#4f555e;font-size:8px;cursor:pointer}

/* Canvas editing affordances: subtle multi-selection, marquee, and true ratio previews. */
.white-canvas .graph-node.is-multi-selected{outline:2px solid rgba(58,130,246,.72);outline-offset:3px}
.canvas-marquee{position:absolute;z-index:30;pointer-events:none;border:1px solid rgba(45,112,235,.78);border-radius:5px;background:rgba(75,139,244,.12);box-shadow:0 0 0 1px rgba(255,255,255,.34) inset}
.task-node .control-row.ratio-row{min-height:116px}
.task-node .choice-group.ratio-group button{height:46px;padding:4px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.task-node .ratio-preview-shell{position:relative;z-index:2;display:grid;place-items:center;width:26px;height:20px;flex:0 0 auto}
.task-node .ratio-preview-shape{display:block;box-sizing:border-box;border:1.5px solid #79808b;border-radius:2px;background:rgba(116,125,139,.08)}
.task-node .ratio-preview-label{position:relative;z-index:2;display:block;line-height:1}
.task-node .ratio-group button.selected{color:#fff!important}
.task-node .ratio-group button.selected::after{display:none!important}
.task-node .ratio-group button.selected .ratio-preview-shape{border-color:#fff;background:rgba(255,255,255,.18)}