.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
/* ==== Sam Quiz Flow Editor - correcao de enquadramento ==== */
/* O CSS base do Drawflow nao define transform-origin: sem isto, zoom/encaixe escalam a partir do centro e deslocam o conteudo. */
.parent-drawflow > .drawflow { transform-origin: 0 0; }

/* ==== Sam Quiz Flow Editor - tema (prefixo sqfe-, nao colide com o painel) ==== */
.sqfe-shell { border-radius: 12px; overflow: hidden; border: 1px solid #26262e; background: #0b0b10; color: #f3f3f5; margin-top: 8px; font-family: inherit; }
.sqfe-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; background: #12121a; border-bottom: 1px solid #26262e; }
.sqfe-toolbar-title { font-weight: 600; font-size: 13px; }
.sqfe-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sqfe-toolbar-actions button, .sqfe-start-label select { min-height: 36px; border-radius: 8px; border: 1px solid #34343f; background: #1b1b25; color: #f3f3f5; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.sqfe-toolbar-actions button:hover { border-color: #e02030; }
.sqfe-toolbar-actions button:focus-visible, .sqfe-start-label select:focus-visible { outline: 2px solid #e02030; outline-offset: 1px; }
.sqfe-start-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9a9aa5; }
.sqfe-status { padding: 9px 14px; font-size: 13px; border-bottom: 1px solid #26262e; display: flex; align-items: center; gap: 8px; }
.sqfe-status-icon { display: inline-flex; flex: 0 0 auto; }
.sqfe-status-ok { background: #0e2418; color: #7ee2a8; }
.sqfe-status-warn { background: #2a2107; color: #f5c86b; }
.sqfe-status-err { background: #2a0e12; color: #ff8f9a; }
.sqfe-canvas { height: 560px; background: #0b0b10; background-image: radial-gradient(circle, #22222c 1px, transparent 1px); background-size: 22px 22px; }
@media (max-width: 600px) { .sqfe-canvas { height: 440px; } }

/* Nos */
.sqfe-shell .drawflow .drawflow-node { width: 250px; padding: 0; border-radius: 12px; border: 1.5px solid #34343f; background: #17171f; color: #f3f3f5; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.sqfe-shell .drawflow .drawflow-node.selected { border-color: #e02030; background: #17171f; }
.sqfe-shell .drawflow .drawflow-node.sqfe-is-start { border-color: #e02030; box-shadow: 0 0 0 3px rgba(224,32,48,.25), 0 6px 18px rgba(0,0,0,.45); }
.sqfe-shell .drawflow .drawflow-node.sqfe-result { width: 210px; background: #10231a; border-color: #24573c; }
.sqfe-shell .drawflow .drawflow-node.sqfe-result.sqfe-tone-score { background: #241d0a; border-color: #6b5316; }
.sqfe-shell .drawflow .drawflow-node.sqfe-result.sqfe-tone-bad { background: #241012; border-color: #6b2424; }
.sqfe-inner { width: 100%; }
.sqfe-title { font-size: 13px; font-weight: 600; line-height: 1.35; padding: 10px 12px 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sqfe-res-inner .sqfe-title { padding-bottom: 2px; }
.sqfe-sub { font-size: 11px; color: #9a9aa5; padding: 0 12px 10px; }
.sqfe-badge { display: inline-flex; align-items: center; background: #e02030; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; }
.sqfe-opts { padding: 0 12px 4px; display: grid; gap: 5px; }
.sqfe-opt { display: flex; gap: 7px; align-items: baseline; font-size: 11.5px; color: #c9c9d2; line-height: 1.3; }
.sqfe-letter { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; background: #e02030; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; position: relative; top: 2px; }
.sqfe-timeout { font-size: 10.5px; color: #77777f; padding: 6px 12px 10px; }

/* Portas e ligacoes */
.sqfe-shell .drawflow .drawflow-node .input, .sqfe-shell .drawflow .drawflow-node .output { width: 16px; height: 16px; background: #fff; border: 2.5px solid #e02030; }
.sqfe-shell .drawflow .drawflow-node.sqfe-result .input { border-color: #37b06b; }
.sqfe-shell .drawflow .drawflow-node.sqfe-result.sqfe-tone-score .input { border-color: #d9a520; }
.sqfe-shell .drawflow .drawflow-node.sqfe-result.sqfe-tone-bad .input { border-color: #e02030; }
.sqfe-shell .drawflow .drawflow-node .output:hover { background: #e02030; }
.sqfe-shell .drawflow .connection .main-path { stroke: #8a8a96; stroke-width: 2.5px; }
.sqfe-shell .drawflow .connection .main-path:hover, .sqfe-shell .drawflow .connection .main-path.selected { stroke: #e02030; }

/* Legenda */
.sqfe-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 9px 14px; font-size: 12px; color: #9a9aa5; border-top: 1px solid #26262e; }
.sqfe-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.sqfe-dot-q { background: #e02030; }
.sqfe-dot-r { background: #37b06b; }
.sqfe-dot-s { background: #d9a520; }
.sqfe-legend-hint { margin-left: auto; }
@media (max-width: 600px) { .sqfe-legend-hint { margin-left: 0; width: 100%; } }
.sqfe-timeout-sel { display: block; width: 100%; margin-top: 4px; min-height: 28px; border-radius: 6px; border: 1px solid #34343f; background: #1b1b25; color: #c9c9d2; font-size: 11px; padding: 3px 6px; font-family: inherit; }

/* referencia invalida/sem destino: bloco e resposta ficam visiveis ate o usuario escolher novo destino */
.drawflow-node.sqfe-missing{box-shadow:0 0 0 2px #e05252,0 6px 18px rgba(0,0,0,.35) !important}
.sqfe-missing-opt{background:rgba(224,82,82,.16);border-radius:8px}