:root{
  --bg:#080a13;--panel:rgba(255,255,255,.075);--panel-2:rgba(255,255,255,.11);--line:rgba(255,255,255,.13);--text:#f5f7ff;--muted:#9da7c2;--brand:#7c5cff;--brand2:#00e5ff;--hot:#ff4fd8;--ok:#33d69f;--warn:#ffd166;--danger:#ff6b6b;--shadow:0 24px 70px rgba(0,0,0,.38);--radius:24px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,rgba(124,92,255,.36),transparent 32rem),radial-gradient(circle at 80% 8%,rgba(0,229,255,.25),transparent 30rem),linear-gradient(180deg,#080a13,#0b1020 48%,#0a0c16);color:var(--text);min-height:100vh}a{color:#94e7ff;text-decoration:none}a:hover{text-decoration:underline}.app-shell{display:flex;min-height:100vh}.sidebar{width:280px;position:sticky;top:0;height:100vh;padding:24px;background:rgba(8,10,19,.72);backdrop-filter:blur(22px);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:14px;margin-bottom:34px}.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-weight:900;letter-spacing:-.08em;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 44px rgba(0,229,255,.28)}.brand-mark.big{width:74px;height:74px;border-radius:26px;font-size:26px}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.sidebar nav{display:grid;gap:8px}.sidebar nav a{padding:13px 14px;border-radius:16px;color:var(--muted);font-weight:650}.sidebar nav a:hover{background:var(--panel);color:var(--text);text-decoration:none}.logout-form{margin-top:auto}.main{flex:1;padding:26px 30px 44px;overflow:auto}.auth-main{display:grid;place-items:center}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.topbar h1{margin:3px 0 0;font-size:25px}.eyebrow{color:var(--brand2);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em}.user-chip{padding:12px 16px;border:1px solid var(--line);background:var(--panel);border-radius:18px;text-align:right}.user-chip span{display:block;font-weight:800}.user-chip small{color:var(--muted)}.panel{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.055));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);padding:22px;margin-bottom:22px;backdrop-filter:blur(20px)}.panel-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:18px}.panel h2,.panel h3{margin:0 0 8px}.panel p{color:var(--muted);margin:0}.grid.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat{padding:20px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,rgba(124,92,255,.15),rgba(0,229,255,.08))}.stat span{color:var(--muted);font-size:13px}.stat strong{display:block;font-size:34px;margin-top:8px}.stat.danger{background:linear-gradient(135deg,rgba(255,107,107,.18),rgba(255,79,216,.08))}.btn{border:0;border-radius:14px;padding:11px 16px;color:var(--text);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--panel-2)}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:white}.btn.secondary{background:linear-gradient(135deg,rgba(0,229,255,.22),rgba(124,92,255,.18));border:1px solid rgba(255,255,255,.14)}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}.btn.danger{background:rgba(255,107,107,.18);color:#ffd6d6}.btn.tiny{padding:7px 10px;border-radius:10px;font-size:12px}.btn.full{width:100%}input,select,textarea{width:100%;border:1px solid var(--line);background:rgba(6,9,18,.68);border-radius:14px;color:var(--text);padding:12px 13px;outline:0}textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}label{display:grid;gap:7px;color:#dce4ff;font-weight:700;font-size:13px}.cred-form{display:grid;grid-template-columns:1.1fr .8fr .7fr 1.3fr;gap:14px;align-items:end}.cred-form label:nth-child(6){grid-column:1/4}.inline-form{display:flex;gap:10px;align-items:center}.run-form{display:flex;gap:8px;align-items:center}.run-form textarea{min-width:260px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:780px}th,td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.badge,.pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(255,255,255,.1);color:#dfe7ff}.badge.success,.badge.active,.badge.done{background:rgba(51,214,159,.14);color:#9ff4d2}.badge.failed,.badge.error,.badge.locked,.badge.timeout{background:rgba(255,107,107,.16);color:#ffc1c1}.badge.running,.badge.pending{background:rgba(255,209,102,.16);color:#ffe4a3}.badge.draft{background:rgba(157,167,194,.16);color:#d5dcf2}.actions{display:flex;gap:8px}.actions form{margin:0}.flash{padding:13px 16px;border-radius:16px;margin-bottom:16px;border:1px solid var(--line);background:var(--panel)}.flash.success{border-color:rgba(51,214,159,.38);background:rgba(51,214,159,.1)}.flash.error{border-color:rgba(255,107,107,.38);background:rgba(255,107,107,.12)}.error-text{display:block;color:#ffc1c1;margin-top:5px}.muted{color:var(--muted)!important}.small{font-size:12px}.auth-card{display:grid;grid-template-columns:1fr 430px;gap:28px;max-width:980px;width:100%;align-items:center}.auth-hero{padding:36px}.auth-hero h1{font-size:54px;line-height:.98;margin:22px 0 14px;letter-spacing:-.055em}.auth-hero p{font-size:18px;color:var(--muted);max-width:520px}.form-panel{display:grid;gap:16px}.workflow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.workflow-card{padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.06)}.workflow-card h3{margin:14px 0 10px}.workflow-card code{font-size:11px;word-break:break-all}.card-top,.card-actions{display:flex;justify-content:space-between;gap:10px;align-items:center}.builder-shell{height:calc(100vh - 128px);display:flex;flex-direction:column}.builder-toolbar{display:flex;justify-content:space-between;gap:12px;padding:14px}.builder-toolbar form{display:flex;gap:10px;align-items:center}.workflow-title-input{min-width:280px;font-size:17px;font-weight:800}.builder-layout{display:grid;grid-template-columns:230px 1fr 320px;gap:16px;min-height:0;flex:1}.node-palette,.node-config,.canvas-wrap{margin-bottom:0;overflow:auto}.node-palette h4{margin:18px 0 9px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.node-add{width:100%;text-align:left;margin:4px 0;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}.node-add:hover{background:rgba(124,92,255,.18)}.canvas-wrap{position:relative;overflow:hidden;min-height:520px}.canvas-hint{position:absolute;top:12px;left:14px;color:var(--muted);font-size:12px;z-index:3;background:rgba(6,9,18,.55);padding:7px 10px;border-radius:12px;border:1px solid var(--line)}#workflow-canvas{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px}#edge-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.wf-node{position:absolute;width:190px;padding:13px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(18,23,44,.96),rgba(14,17,32,.94));box-shadow:0 18px 44px rgba(0,0,0,.28);z-index:2;cursor:grab}.wf-node.selected{outline:2px solid var(--brand2);box-shadow:0 0 0 6px rgba(0,229,255,.12)}.wf-node strong{display:block;font-size:13px}.wf-node small{color:var(--muted);font-size:11px}.node-config{display:grid;gap:12px;align-content:start}.cred-list{color:var(--muted);font-size:12px;padding-left:18px}.json-block{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:16px;padding:14px;overflow:auto;color:#d9f7ff}.json-block.small{max-height:320px}.log-item{border:1px solid var(--line);border-radius:18px;margin-bottom:12px;padding:12px;background:rgba(255,255,255,.05)}.log-item summary{cursor:pointer}.log-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}hr{border:0;border-top:1px solid var(--line);width:100%}@media(max-width:1100px){.sidebar{display:none}.main{padding:18px}.grid.cards{grid-template-columns:repeat(2,1fr)}.auth-card{grid-template-columns:1fr}.builder-layout{grid-template-columns:1fr}.node-palette,.node-config{max-height:none}.builder-shell{height:auto}.canvas-wrap{height:600px}.cred-form{grid-template-columns:1fr}.cred-form label:nth-child(6){grid-column:auto}}

.smart-config{gap:11px;padding:14px;border:1px solid rgba(0,229,255,.22);border-radius:18px;background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(124,92,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.smart-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.smart-head strong{display:block;font-size:14px}.smart-head span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.model-help{padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(0,0,0,.18);font-size:12px;color:#dfe7ff;line-height:1.45}.model-help span{color:var(--muted)}

/* Drag-to-connect workflow handles */
.wf-node{user-select:none}
.wf-handle{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 0 5px rgba(0,229,255,.08),0 0 24px rgba(0,229,255,.34);z-index:5}
.wf-input{left:-10px;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,#34405f,#6c789c);cursor:crosshair}
.wf-output{right:-10px;top:50%;transform:translateY(-50%);cursor:grab}
.wf-output:active{cursor:grabbing}
.wf-output-true{top:36%;background:linear-gradient(135deg,#10b981,#33d69f)}
.wf-output-false{top:66%;background:linear-gradient(135deg,#ef4444,#ff8a8a)}
.wf-output span{position:absolute;left:21px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:900;padding:2px 6px;border-radius:999px;background:rgba(6,9,18,.82);border:1px solid rgba(255,255,255,.12);color:#eaf4ff;white-space:nowrap;pointer-events:none}
.is-connecting .wf-input{box-shadow:0 0 0 7px rgba(51,214,159,.15),0 0 28px rgba(51,214,159,.45);border-color:#c6ffe9}
.is-connecting .wf-node{cursor:crosshair}
.canvas-hint kbd{font:inherit;font-size:11px;padding:2px 6px;border-radius:7px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#dfe7ff}

/* Simple node forms: hide raw JSON from non-technical users */
.node-form-card {
    display: grid !important;
    gap: 12px;
    margin: 12px 0 14px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(10,18,34,.72), rgba(14,31,47,.58));
}
.node-form-card .smart-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom: 4px;
}
.node-form-card .smart-head strong {display:block;font-size:16px;color:#fff;margin-bottom:4px;}
.node-form-card .smart-head span {display:block;font-size:12px;line-height:1.45;color:#aeb9d8;}
.node-form-card .pill {
    display:inline-flex !important;
    align-items:center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0,229,255,.12);
    color: #91f3ff !important;
    font-size: 11px !important;
    font-weight: 800;
    border:1px solid rgba(0,229,255,.24);
}
.node-form-card label,
.config-json-box label {
    display:grid;
    gap: 7px;
    color:#dfe7ff;
    font-weight:700;
    font-size: 13px;
}
.node-form-card input,
.node-form-card select,
.node-form-card textarea,
.config-json-box textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 11px 12px;
    background: rgba(7,11,24,.82);
    color: #fff;
    outline: none;
    font: inherit;
    font-weight: 600;
}
.node-form-card textarea,
.config-json-box textarea {
    min-height: 92px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
}
.node-form-card input:focus,
.node-form-card select:focus,
.node-form-card textarea:focus,
.config-json-box textarea:focus {
    border-color: rgba(0,229,255,.55);
    box-shadow: 0 0 0 4px rgba(0,229,255,.08);
}
.field-help {
    margin-top: -6px;
    color: #93a1c3;
    font-size: 12px;
    line-height: 1.45;
}
.info-box {
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(0,229,255,.08);
    border: 1px solid rgba(0,229,255,.18);
    color: #bfd6e8;
    font-size: 12px;
    line-height: 1.5;
}
.model-help {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(115,95,255,.12);
    border: 1px solid rgba(115,95,255,.22);
    color:#d7d1ff;
    font-size: 12px;
    line-height: 1.45;
}
.check-row {
    display:flex !important;
    grid-template-columns: auto 1fr;
    align-items:center;
    gap: 9px !important;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}
.check-row input { width: auto !important; }
.variable-chips {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: 7px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}
.variable-chips span {
    width:100%;
    color:#aeb9d8;
    font-size: 12px;
    font-weight: 800;
}
.var-chip {
    border: 1px solid rgba(0,229,255,.2);
    background: rgba(0,229,255,.08);
    color: #cdfaff;
    border-radius: 999px;
    padding: 7px 9px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.var-chip:hover { background: rgba(0,229,255,.16); }
.config-json-box {
    margin: 10px 0;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 16px;
    padding: 10px 12px;
    background: rgba(255,255,255,.035);
}
.config-json-box summary {
    cursor:pointer;
    color:#b8c5e6;
    font-weight:800;
    font-size: 13px;
}
.empty-config {
    color:#aeb9d8;
    font-size:13px;
    line-height:1.5;
}
.advanced-json { display:none; }

/* Canvas v2: large workspace, pan/zoom controls */
.builder-shell{height:calc(100vh - 104px)}
.builder-layout{grid-template-columns:240px minmax(720px,1fr) 380px;gap:16px;min-height:0;flex:1}.canvas-wrap{position:relative;overflow:hidden;min-height:680px;padding:0;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04))}.canvas-topbar{position:absolute;z-index:20;top:12px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.canvas-hint{position:static!important;max-width:min(720px,calc(100% - 270px));pointer-events:none}.canvas-controls{display:flex;align-items:center;gap:6px;padding:7px;border-radius:15px;border:1px solid rgba(255,255,255,.12);background:rgba(6,9,18,.72);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.2);pointer-events:auto}.canvas-btn{height:32px;min-width:36px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.08);color:#eaf4ff;font-weight:900;cursor:pointer}.canvas-btn:hover{background:rgba(0,229,255,.15);border-color:rgba(0,229,255,.28)}#zoom-label{min-width:54px;text-align:center;color:#d9e8ff;font-size:12px;font-weight:900}#workflow-viewport{position:absolute;left:0;top:0;width:8200px;height:5200px;transform-origin:0 0;will-change:transform;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(0,229,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.09) 1px,transparent 1px);background-size:28px 28px,28px 28px,140px 140px,140px 140px;background-position:0 0}#workflow-canvas{position:absolute;inset:0;background:transparent!important;width:8200px;height:5200px;overflow:visible}#edge-svg{position:absolute;left:0;top:0;width:8200px;height:5200px;pointer-events:none;z-index:1}.canvas-wrap.is-panning{cursor:grabbing}.canvas-wrap.can-pan{cursor:grab}.wf-node{width:210px;min-height:66px;touch-action:none}.wf-node strong{font-size:14px}.wf-node small{font-size:11px}.node-config{min-width:0}.node-form-card textarea{min-height:110px}.node-form-card textarea[data-field="prompt"]{min-height:190px}.node-form-card textarea[data-field="var_value"]{min-height:150px}.node-form-card textarea[data-field="body"]{min-height:170px}.node-form-card textarea[data-field="values_lines"]{min-height:150px}.media-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0 16px}.media-card{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:12px;background:rgba(255,255,255,.055);overflow:hidden}.media-card img,.media-card video{width:100%;max-height:320px;object-fit:contain;border-radius:14px;background:#050711;border:1px solid rgba(255,255,255,.08)}.media-card a{display:block;margin-top:8px;font-size:12px;word-break:break-all}.media-card .media-type{display:inline-flex;margin-bottom:9px;padding:4px 8px;border-radius:999px;background:rgba(0,229,255,.12);color:#aef7ff;font-size:11px;font-weight:900}.media-empty{padding:12px;border:1px dashed rgba(255,255,255,.16);border-radius:16px;color:var(--muted);font-size:13px}.log-item .media-preview-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}@media(max-width:1280px){.builder-layout{grid-template-columns:220px 1fr 340px}.canvas-wrap{min-height:620px}.canvas-hint{max-width:calc(100% - 245px)}}@media(max-width:1100px){.canvas-controls{position:relative}.canvas-hint{display:none}.builder-layout{grid-template-columns:1fr}.canvas-wrap{height:680px}.node-config{max-height:none}}

/* External media mode: no server-side render/proxy/transcode. Browser loads direct provider URL only on demand. */
.external-media-card .video-placeholder{min-height:180px;display:grid;place-items:center;gap:12px;text-align:center;border-radius:14px;border:1px dashed rgba(255,255,255,.18);background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(124,92,255,.08));color:#dbeafe;padding:18px}.external-media-card video{width:100%;max-height:320px;object-fit:contain;border-radius:14px;background:#050711;border:1px solid rgba(255,255,255,.08)}.media-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.media-url{display:block;margin-top:9px;padding:8px;border-radius:10px;background:rgba(0,0,0,.25);word-break:break-all;font-size:11px;color:#bfefff}.external-media-grid .media-card img{loading:lazy}.external-media-card{content-visibility:auto;contain-intrinsic-size:280px 260px}

/* Feature patch: schedule trigger, media preview node and batch AI */
.wf-node .node-extra{margin-top:8px;padding:6px 8px;border-radius:11px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.18);color:#bff8ff;font-size:11px;font-weight:800;line-height:1.25}.wf-node .schedule-extra{background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.22);color:#ffe9ad}.wf-node .ai-batch-extra{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.28);color:#e2dcff}.wf-node .media-extra{background:rgba(51,214,159,.12);border-color:rgba(51,214,159,.24);color:#b7ffe3}.node-media-thumb{margin-top:8px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#050711;height:86px}.node-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}.node-add[data-type="schedule_trigger"]{border-color:rgba(255,209,102,.24)}.node-add[data-type="media_preview"]{border-color:rgba(51,214,159,.26)}.node-add[data-type="ai_topic_batch"]{border-color:rgba(124,92,255,.35)}

/* UI polish patch: thương mại hóa thanh công cụ và panel cấu hình */
.builder-shell{
  height:calc(100vh - 92px) !important;
  min-height:760px;
  gap:14px;
}
.builder-toolbar.panel{
  padding:14px 16px !important;
  border-radius:22px !important;
  display:grid !important;
  grid-template-columns:minmax(560px,1fr) minmax(360px,520px) !important;
  align-items:center !important;
  gap:18px !important;
  overflow:visible !important;
}
.builder-toolbar form{
  min-width:0;
}
.builder-toolbar .toolbar-save{
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) 170px 148px !important;
  gap:12px !important;
  align-items:center !important;
}
.builder-toolbar .run-form{
  display:grid !important;
  grid-template-columns:minmax(220px,1fr) 118px !important;
  gap:12px !important;
  justify-self:end;
  width:100%;
  max-width:520px;
}
.workflow-title-input{
  min-width:0 !important;
  height:46px !important;
  border-radius:14px !important;
  font-size:17px !important;
}
.builder-toolbar select,
.builder-toolbar textarea{
  min-width:0 !important;
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  border-radius:14px !important;
  resize:none !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.btn,
.toolbar-btn,
.canvas-btn{
  white-space:nowrap !important;
  flex:0 0 auto;
}
.toolbar-btn{
  height:46px !important;
  min-width:118px !important;
  padding:0 18px !important;
  border-radius:15px !important;
  line-height:1 !important;
  font-size:14px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.builder-layout{
  grid-template-columns:250px minmax(780px,1fr) 460px !important;
  gap:16px !important;
  min-height:0;
}
.node-palette.panel,
.node-config.panel,
.canvas-wrap.panel{
  border-radius:22px !important;
}
.node-config{
  padding:20px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  min-width:0 !important;
  max-width:460px;
  gap:14px !important;
}
.node-config > *,
.node-config label,
.node-config details,
.node-config .smart-config,
.node-config .config-json-box,
.node-config .fallback-connect{
  min-width:0 !important;
  max-width:100% !important;
}
.node-config input,
.node-config select,
.node-config textarea{
  min-width:0 !important;
  max-width:100% !important;
}
.node-config .btn.full{
  height:44px !important;
  min-height:44px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  font-size:14px !important;
  line-height:1 !important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.node-config h3{
  font-size:20px !important;
  margin-bottom:4px !important;
}
.node-config code,
.node-config .muted.small{
  display:block;
  width:100%;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.45;
}
.node-config .muted.small{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.node-form-card{
  padding:16px !important;
  border-radius:18px !important;
}
.node-form-card label,
.config-json-box label,
.fallback-connect label{
  gap:8px !important;
}
.node-form-card input,
.node-form-card select,
.node-form-card textarea,
.config-json-box textarea,
.fallback-connect input,
.fallback-connect select{
  border-radius:13px !important;
  font-size:13px !important;
}
.node-form-card textarea[data-field="prompt"],
.node-form-card textarea[data-field="body"],
.node-form-card textarea[data-field="var_value"]{
  min-height:150px !important;
}
.config-json-box,
.fallback-connect{
  overflow:hidden !important;
}
.config-json-box summary,
.fallback-connect summary{
  padding:2px 0;
}
.canvas-wrap{
  min-height:720px !important;
}
.canvas-controls{
  flex-wrap:nowrap !important;
}
.canvas-btn{
  min-width:42px !important;
  padding:0 11px !important;
}
@media(max-width:1450px){
  .builder-toolbar.panel{grid-template-columns:1fr !important;}
  .builder-toolbar .run-form{justify-self:stretch;max-width:none;}
  .builder-layout{grid-template-columns:230px minmax(680px,1fr) 420px !important;}
  .node-config{max-width:420px;}
}
@media(max-width:1180px){
  .builder-shell{height:auto !important;}
  .builder-toolbar .toolbar-save{grid-template-columns:1fr 150px 138px !important;}
  .builder-layout{grid-template-columns:1fr !important;}
  .node-config{max-width:none;}
  .canvas-wrap{height:680px !important;}
}
@media(max-width:720px){
  .builder-toolbar .toolbar-save,
  .builder-toolbar .run-form{grid-template-columns:1fr !important;}
  .toolbar-btn{width:100%;}
}

/* Patch: thu gọn sidebar + thao tác nhanh trên canvas */
.sidebar{
  width:280px;
  transition:width .22s ease, padding .22s ease;
  overflow:visible;
}
.sidebar-toggle{
  position:absolute;
  top:18px;
  right:-15px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,rgba(124,92,255,.95),rgba(0,229,255,.9));
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  z-index:50;
  font-weight:900;
  line-height:1;
}
.sidebar-toggle:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sidebar-toggle .toggle-icon{display:block;font-size:22px;transition:transform .22s ease}
.sidebar nav a,
.logout-form .btn{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:46px;
  white-space:nowrap;
}
.nav-icon{
  width:22px;
  min-width:22px;
  display:inline-grid;
  place-items:center;
  color:#cfeaff;
  font-weight:900;
  opacity:.92;
}
.nav-text,.brand-text{transition:opacity .16s ease, transform .16s ease}
body.sidebar-collapsed .sidebar{
  width:82px;
  padding-left:16px;
  padding-right:16px;
}
body.sidebar-collapsed .brand{
  justify-content:center;
  margin-bottom:30px;
}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-text{
  opacity:0;
  width:0;
  overflow:hidden;
  pointer-events:none;
  transform:translateX(-6px);
}
body.sidebar-collapsed .sidebar nav a,
body.sidebar-collapsed .logout-form .btn{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}
body.sidebar-collapsed .logout-form .btn{min-width:0}
body.sidebar-collapsed .sidebar-toggle .toggle-icon{transform:rotate(180deg)}
body.sidebar-collapsed .main{padding-left:28px}
body.sidebar-collapsed .builder-layout{
  grid-template-columns:250px minmax(900px,1fr) 460px !important;
}
#edge-svg{pointer-events:auto !important;}
.wf-edge-visible{pointer-events:none;}
.wf-edge-hit{
  pointer-events:stroke;
  cursor:pointer;
}
.wf-edge-hit:hover + .wf-edge-visible,
.wf-edge-visible.edge-hover{
  stroke-width:4.5 !important;
  filter:drop-shadow(0 0 10px rgba(0,229,255,.9));
}
.wf-node{user-select:none;}
.wf-node:hover{box-shadow:0 18px 42px rgba(0,0,0,.36),0 0 0 1px rgba(0,229,255,.2)}
.context-hint{
  position:fixed;
  z-index:9999;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,10,19,.94);
  color:#eaf7ff;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}
@media(max-width:1180px){
  .sidebar{position:fixed;left:0;top:0;z-index:90;}
  body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
  body.sidebar-collapsed .sidebar-toggle{right:-46px;transform:translateX(100%)}
}

/* Patch: menu chuột phải nằm đúng vị trí click, không dùng alert/confirm */
.workflow-context-menu{
  position:fixed;
  z-index:99999;
  min-width:180px;
  padding:7px;
  display:grid;
  gap:6px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,10,19,.96);
  box-shadow:0 22px 60px rgba(0,0,0,.52),0 0 0 1px rgba(0,229,255,.08) inset;
  backdrop-filter:blur(18px);
}
.workflow-context-menu button{
  width:100%;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,.045);
  color:#eaf7ff;
  cursor:pointer;
  text-align:left;
  font-weight:800;
}
.workflow-context-menu button:hover{
  background:rgba(0,229,255,.14);
}
.workflow-context-menu button.danger{
  color:#ffd0d0;
}
.workflow-context-menu button.danger:hover{
  background:rgba(255,107,107,.16);
}
.workflow-context-menu button span{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  flex:0 0 20px;
}
.workflow-context-menu button strong{font-size:13px;}

/* Patch: sửa Set Variable + form prompt + tránh thanh cấu hình bị khuất */
.node-config.panel{
  padding-bottom:22px !important;
}
.node-form-card{
  overflow:visible !important;
}
.node-form-card textarea[data-field="prompt"]{
  min-height:190px !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  line-height:1.55 !important;
  font-size:14px !important;
  font-weight:650;
}
.node-form-card textarea[data-field="note"],
.node-form-card textarea[data-field="extra"]{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  line-height:1.5 !important;
  font-size:14px !important;
}
.strong-help{
  padding:10px 12px;
  border:1px solid rgba(0,229,255,.18);
  border-radius:13px;
  background:rgba(0,229,255,.07);
  color:#dffbff !important;
  line-height:1.5;
}
.strong-help code{
  display:inline !important;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(0,0,0,.22);
  color:#aef7ff;
  font-weight:900;
}
.form-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0 0;
  color:#9da7c2;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.form-divider:before,.form-divider:after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.1);
}
.config-json-box,
.fallback-connect{
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.045) !important;
  overflow:visible !important;
  min-height:44px !important;
}
.config-json-box summary,
.fallback-connect summary{
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 14px !important;
  font-size:14px !important;
  font-weight:900 !important;
  color:#dfe7ff !important;
  cursor:pointer;
}
.config-json-box[open],
.fallback-connect[open]{
  padding-bottom:14px;
}
.config-json-box[open] label,
.fallback-connect[open] label,
.fallback-connect[open] button{
  margin-left:14px;
  margin-right:14px;
  width:calc(100% - 28px);
}
.node-config .btn.full{
  flex-shrink:0;
}


/* Patch: fix advanced panel overlap + webhook copy button */
.node-config.panel{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  align-content:unset !important;
}
.node-config .config-json-box,
.node-config .fallback-connect{
  display:block !important;
  position:relative !important;
  width:100% !important;
  min-height:46px !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  z-index:1 !important;
}
.node-config .config-json-box[open],
.node-config .fallback-connect[open]{
  overflow:visible !important;
  padding-bottom:14px !important;
}
.node-config .config-json-box > summary,
.node-config .fallback-connect > summary{
  width:100% !important;
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 14px !important;
  line-height:1.2 !important;
}
.node-config .config-json-box label,
.node-config .fallback-connect label{
  position:static !important;
  display:grid !important;
  width:auto !important;
  max-width:none !important;
  margin:0 14px 12px !important;
}
.node-config .fallback-connect button{
  position:static !important;
  display:flex !important;
  width:calc(100% - 28px) !important;
  margin:0 14px !important;
}
.node-config .config-json-box textarea{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-height:220px !important;
  height:220px !important;
  max-height:360px !important;
  resize:vertical !important;
  overflow:auto !important;
}
.node-config #apply-node,
.node-config #delete-node{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  width:100% !important;
  margin:0 !important;
}
.webhook-copy-box{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  width:100%;
  min-width:0;
}
.webhook-copy-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#9da7c2;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.webhook-copy-btn{
  min-width:72px;
  height:30px;
  padding:0 12px !important;
  border-radius:10px !important;
  background:rgba(0,229,255,.12) !important;
  border:1px solid rgba(0,229,255,.24) !important;
  color:#c8fbff !important;
}
.webhook-copy-box code{
  display:block;
  width:100%;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
  color:#cdd8f6;
  font-size:12px;
}

.node-webhook-box{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid rgba(0,229,255,.22);border-radius:16px;background:rgba(0,229,255,.07);margin:10px 0 12px;min-width:0}.node-webhook-box div{min-width:0}.node-webhook-box strong{display:block;font-size:12px;margin-bottom:6px;color:#eaf7ff}.node-webhook-box code{display:block;white-space:normal;word-break:break-all;line-height:1.45;color:#9feaff}.node-webhook-box .btn{white-space:nowrap;flex:0 0 auto}.workflow-node[data-type="sticky_note"]{background:rgba(255,218,107,.12);border-color:rgba(255,218,107,.35)}.workflow-node[data-type="sticky_note"] .node-sub{color:#ffe7a3}

/* Admin user management */
.user-admin-table{min-width:1120px}.user-info-cell{min-width:260px}.mini-label{font-size:12px;margin-bottom:8px;display:grid;gap:5px}.mini-label input{padding:9px 10px;border-radius:11px}.mini-stat{font-size:12px;color:var(--muted);line-height:1.6}.mini-stat strong{color:#eaf4ff}.user-actions{flex-direction:column;align-items:stretch}.user-actions .btn{white-space:nowrap}.badge.pending{background:rgba(255,209,102,.16);color:#ffe4a3}

/* Credential UI polish: short key display, no horizontal break, compact actions */
.credential-table-wrap{
    overflow-x:auto;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.025);
}
.credential-table{
    min-width:980px;
    table-layout:fixed;
}
.credential-table .col-id{width:76px}
.credential-table .col-actions{width:210px}
.credential-table th,
.credential-table td{
    overflow:hidden;
}
.cred-name-cell{
    max-width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:800;
}
.credential-key{
    display:inline-flex;
    max-width:220px;
    min-width:150px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    background:rgba(7,11,24,.65);
    color:#d9f7ff;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:middle;
}
.provider-pill{
    white-space:nowrap;
    text-transform:none;
}
.credential-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:nowrap;
}
.credential-actions .btn{
    min-width:54px;
}
.credential-actions form{
    margin:0;
    flex:0 0 auto;
}
.test-date{
    white-space:nowrap;
    color:#cbd5f2;
    font-size:12px;
}
.compact-error{
    max-width:240px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.cred-form-actions{
    display:flex;
    align-items:end;
    gap:10px;
    grid-column:4/5;
}
.cred-form-actions .btn{
    height:46px;
}
.compact-head{
    margin-bottom:12px;
}
@media(max-width:1100px){
    .cred-form-actions{grid-column:auto;align-items:stretch}.cred-form-actions .btn{width:100%}
    .credential-table{min-width:860px}.credential-key{max-width:180px}
}

/* Schedule Trigger: hiển thị đúng trường theo kiểu chạy */
.schedule-field{
    margin-top:10px;
}
.field-block{
    display:block;
    margin:10px 0;
}
.field-label{
    display:block;
    font-size:13px;
    font-weight:900;
    color:#dfe7ff;
    margin-bottom:8px;
}
.weekday-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
}
.weekday-pill{
    margin:0 !important;
}
.weekday-pill input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.weekday-pill span{
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.055);
    color:#dbe4ff;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    user-select:none;
    transition:.16s ease;
}
.weekday-pill input:checked + span{
    color:#06111e;
    border-color:rgba(0,229,255,.75);
    background:linear-gradient(135deg,#8b5cf6,#22d3ee);
    box-shadow:0 8px 22px rgba(0,229,255,.18);
}
.schedule-summary{
    margin-top:14px;
    padding:12px 13px;
    border-radius:16px;
    border:1px solid rgba(0,229,255,.20);
    background:rgba(0,229,255,.08);
    color:#c9fbff;
    font-size:13px;
    font-weight:800;
    line-height:1.45;
}

/* Commercial cleanup: no helper notes under node fields */
.node-form-card .field-help,
.node-form-card .model-help,
.node-form-card .schedule-summary,
.node-config .field-help,
.node-config .model-help,
.node-config .schedule-summary {display:none!important;}
.node-form-card .smart-head span,
.node-config .smart-head span {display:none!important;}

.admin-create-user-form{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr)) auto;gap:12px;align-items:end}.admin-create-user-form .btn{height:46px;white-space:nowrap}.admin-create-user-form label{min-width:0}@media(max-width:1280px){.admin-create-user-form{grid-template-columns:repeat(3,minmax(180px,1fr))}.admin-create-user-form .btn{grid-column:1/-1}}@media(max-width:760px){.admin-create-user-form{grid-template-columns:1fr}}