*{box-sizing:border-box}:root{--blue:#2563eb;--green:#16a34a;--red:#dc2626;--text:#1f2937;--muted:#64748b;--line:#d7e0ea;--wire:#475569}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:#eef2f7;overflow:hidden}button,input,textarea,select{font:inherit}
button{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:8px 11px;cursor:pointer;transition:.15s}button:hover{background:#f8fafc}.primary{background:var(--blue)!important;color:#fff;border-color:var(--blue)!important}.success{background:var(--green)!important;color:#fff;border-color:var(--green)!important}.danger{background:var(--red)!important;color:#fff;border-color:var(--red)!important}.danger-soft{background:#fff1f2!important;color:#be123c!important;border-color:#fecdd3!important}.full{width:100%}
.topbar{height:80px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:10px 18px;gap:20px}.brand{min-width:280px;display:flex;align-items:center;gap:11px}.brand-icon{width:44px;height:44px;border-radius:10px;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800}.brand-title{font-size:18px;font-weight:800}.brand-subtitle{font-size:12px;color:var(--muted)}.toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.divider{height:30px;border-left:1px solid #dbe3ed;margin:0 3px}.mode-btn.active{background:#e8f0ff;border-color:#93b4ff;color:#1749b5;font-weight:700}
.app{height:calc(100vh - 80px);display:grid;grid-template-columns:225px minmax(580px,1fr) 340px}.left-panel,.right-panel{background:white;overflow:auto;padding:14px}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}
.panel-title{font-weight:800;font-size:14px;margin:4px 0 10px}.mt{margin-top:20px}.symbol-card{width:100%;display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:7px;padding:10px}.symbol-card span:last-child{display:flex;flex-direction:column}.symbol-card small{font-size:11px;color:var(--muted)}.icon{width:38px;height:22px;border:2px solid #334155;background:white;display:inline-block;flex:none}.oval{border-radius:50%}.rect{border-radius:2px}.para{transform:skew(-18deg)}.diamond{width:24px;height:24px;transform:rotate(45deg);margin:0 7px}
.tip{font-size:12px;line-height:1.45;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:10px}.tip b,.tip code{display:block}.tip code{margin:3px 0 9px;background:#e9eef5;padding:4px;border-radius:5px}
.workspace-area{display:flex;flex-direction:column;min-width:0}.workspace-head{height:48px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:7px 12px}.badge{margin-left:12px;font-size:12px;padding:4px 8px;border-radius:999px;font-weight:700}.badge.select{background:#e8f0ff;color:#1749b5}.badge.connect{background:#fff7ed;color:#c2410c}
#workspace{position:relative;flex:1;overflow:auto;background-color:#fff;background-image:radial-gradient(#d5dde7 1px,transparent 1px);background-size:18px 18px}#wires,#nodes{position:absolute;left:0;top:0;width:2400px;height:2000px}#wires{pointer-events:none}.node{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;cursor:grab;user-select:none;background:white;border:2px solid #334155;box-shadow:0 4px 12px #0f172a12;z-index:2}.node .label{pointer-events:none;padding:7px 10px;max-width:170px;overflow-wrap:anywhere}.node.start,.node.end{border-radius:50%}.node.process{width:180px;height:66px}.node.input,.node.output{clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);border:0;background:#334155;padding:2px}.node.input .shape-inner,.node.output .shape-inner{width:100%;height:100%;clip-path:inherit;background:#fff;display:flex;align-items:center;justify-content:center}.node.decision{transform:rotate(45deg)}.node.decision .label{transform:rotate(-45deg);width:100px}.node.selected{outline:5px solid #60a5fa55;border-color:#2563eb}.node.connect-source{outline:6px solid #f59e0b55;border-color:#f59e0b}.node.running{outline:7px solid #22c55e55;border-color:#16a34a}.node.input.running,.node.output.running{filter:drop-shadow(0 0 7px #16a34a)}
.edge{fill:none;stroke:var(--wire);stroke-width:2.2;marker-end:url(#arrow)}.edge.active{stroke:#16a34a;stroke-width:4}.edge-label{font-size:12px;font-weight:800;fill:#334155;paint-order:stroke;stroke:white;stroke-width:5px}
#emptyState{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#94a3b8}.empty-icon{font-size:38px}
.right-panel section{border-bottom:1px solid #e2e8f0;padding-bottom:14px;margin-bottom:14px}.right-panel label{display:block;font-size:12px;font-weight:700;color:#475569;margin:8px 0 4px}.right-panel input,.right-panel textarea,.right-panel select{width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:8px;background:white}.right-panel textarea{resize:vertical}
table{border-collapse:collapse;width:100%;font-size:12px}th,td{border:1px solid #dbe3ed;padding:6px;text-align:left}th{background:#f8fafc}.muted{color:#94a3b8;text-align:center}#console{min-height:110px;max-height:190px;overflow:auto;background:#111827;color:#d1fae5;border-radius:8px;padding:10px;font:12px Consolas,monospace;white-space:pre-wrap}.status{font-size:12px;line-height:1.5;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:9px;white-space:pre-line}
.dialog{position:fixed;inset:0;background:#0f172a55;display:grid;place-items:center;z-index:50}.dialog.hidden{display:none}.dialog-card{width:360px;background:white;border-radius:12px;padding:20px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
@media(max-width:1180px){.app{grid-template-columns:210px 1fr}.right-panel{display:none}.brand{min-width:220px}.toolbar button{padding:7px 8px}}

.brand-author{font-size:11px;color:#475569;margin-top:2px}
.author-card{margin-top:18px;padding:10px;border:1px solid #dbe3ed;border-radius:9px;background:#f8fafc}
.author-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;font-weight:700}
.author-name{font-size:12px;font-weight:800;margin-top:4px;line-height:1.35}
.author-copy{font-size:11px;color:#64748b;margin-top:5px}

.workspace-actions{display:flex;gap:7px}
.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.size-actions{display:flex;gap:6px;margin:8px 0}
.size-actions button{flex:1;padding:7px 5px;font-size:12px}
.connector-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px}
.connector-info div{display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #2563eb}
.helper{font-size:11px;color:#64748b;line-height:1.45;margin-top:8px}
.resize-handle{position:absolute;width:14px;height:14px;border-radius:50%;background:#2563eb;border:2px solid #fff;right:-8px;bottom:-8px;cursor:nwse-resize;z-index:8;box-shadow:0 1px 4px #0002}
.port{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #2563eb;z-index:7;opacity:0}
.node.selected .port,.node.connect-source .port{opacity:1}
.port.top{top:-6px;left:50%;transform:translateX(-50%)}
.port.bottom{bottom:-6px;left:50%;transform:translateX(-50%)}
.port.left{left:-6px;top:50%;transform:translateY(-50%)}
.port.right{right:-6px;top:50%;transform:translateY(-50%)}
.node.decision .resize-handle{transform:rotate(-45deg);right:-10px;bottom:-10px}
.node.decision .port.top{transform:translateX(-50%) rotate(-45deg)}
.node.decision .port.bottom{transform:translateX(-50%) rotate(-45deg)}
.node.decision .port.left{transform:translateY(-50%) rotate(-45deg)}
.node.decision .port.right{transform:translateY(-50%) rotate(-45deg)}

.value-cell{font-family:Consolas,monospace;white-space:normal;overflow-wrap:anywhere;max-width:210px}


/* FlowLearn v7: loop symbols + undo */
button:disabled{opacity:.45;cursor:not-allowed;background:#f1f5f9}
.symbol-group-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b;margin:13px 0 7px;padding-top:8px;border-top:1px solid #e2e8f0}
.icon.hex{position:relative;border:0;clip-path:polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%);background:#334155;height:25px}
.icon.hex::after{content:"";position:absolute;inset:2px;clip-path:inherit;background:#fff}
.node.while,.node.for,.node.do{border:0;clip-path:polygon(13% 0,87% 0,100% 50%,87% 100%,13% 100%,0 50%);background:#334155;padding:2px}
.node.while .shape-inner,.node.for .shape-inner,.node.do .shape-inner{width:100%;height:100%;clip-path:inherit;background:#fff;display:flex;align-items:center;justify-content:center}
.node.while.selected,.node.for.selected,.node.do.selected{filter:drop-shadow(0 0 5px #2563eb)}
.node.while.connect-source,.node.for.connect-source,.node.do.connect-source{filter:drop-shadow(0 0 6px #f59e0b)}
.node.while.running,.node.for.running,.node.do.running{filter:drop-shadow(0 0 7px #16a34a)}
.node.while .label,.node.for .label,.node.do .label{max-width:185px}

/* FlowLearn v7.1: dialog simpan / ekspor */
.export-card{width:min(620px,94vw);max-height:92vh;overflow:auto}
.export-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.export-head h3{margin:0}
.icon-btn{border:0;background:#f1f5f9;width:32px;height:32px;padding:0;border-radius:8px;font-size:14px}
.export-help{margin:8px 0 14px;font-size:13px;color:var(--muted);line-height:1.5}
.export-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.export-fields label{display:block;font-size:12px;font-weight:700;color:#475569;margin-bottom:4px}
.export-fields label span{font-weight:500;color:#94a3b8}
.export-fields input{width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:8px}
.export-preview{position:relative;margin:14px 0;height:260px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;display:grid;place-items:center;overflow:hidden}
.export-preview img{display:block;max-width:calc(100% - 16px);max-height:244px;width:auto;height:auto;object-fit:contain;background:#fff;box-shadow:0 2px 10px #0f172a14}
.export-empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#94a3b8;font-size:13px}
.export-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.export-actions button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px}
.export-actions small{font-size:11px;opacity:.75}
.export-status{min-height:18px;margin-top:10px;font-size:12.5px;color:#15803d}
.export-status.err{color:#b91c1c}
@media(max-width:560px){.export-fields,.export-actions{grid-template-columns:1fr}}