:root{ --bg:#f6f7fb; --ink:#1b1f27; --muted:#5f6779; --line:#d7dbe5; --card:#ffffff; --flow:#cc6c00; --org:#f09a2a; --mgr:#0d63a5; --pre:#6b3aa6; --ind:#117a38; --note:#ffd54f; --note-stroke:#b48a00; --sidebar-w:400px; --frame-pad:12px; --stick-top:0px; --mode-red:#e36060;  --mode-green:#28a35a; --sidebar-red:#c83d3d; --sidebar-green:#1f7f4c; --branch:#dcdfe6; } *{box-sizing:border-box} html,body{height:100%} body{margin:0; font:14px/1.45 'Segoe UI', Arial, sans-serif; color:var(--ink); background:var(--bg); display:flex; flex-direction:column; min-height:100vh} header{display:flex; gap:.75rem; align-items:center; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30} .brand{display:flex; align-items:center; gap:.5rem} .brand img{height:28px; width:auto; display:block} .brand h1{font-size:16px; margin:0; letter-spacing:.3px} .toolbar{margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap} .select,.button{appearance:none; border:1px solid var(--line); background:#fff; color:#1b1f27; padding:.5rem .65rem; border-radius:.6rem; font-size:14px} .button{cursor:pointer} .thin{padding:6px .65rem !important} .select.chevron{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px 14px; padding-right:30px} /* Mobile hamburger */ .hamburger{display:none; margin-left:auto} .hamburger-btn{border:1px solid var(--line); background:#fff; border-radius:.6rem; padding:.45rem .6rem; font-size:15px; cursor:pointer} .mobile-menu{position:fixed; top:60px; right:8px; left:8px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); padding:10px; display:none; z-index:35} .mobile-menu.show{display:block} .mobile-menu h3{margin:0 0 6px 0; font-size:14px} .mobile-menu .menu-list{display:flex; flex-direction:column; gap:8px} .mobile-menu .menu-item{appearance:none; border:1px solid var(--line); background:#fff; border-radius:.6rem; padding:.6rem .7rem; text-align:left; font-size:14px; cursor:pointer} .mobile-menu .menu-item:active{transform:scale(.99)} @media (max-width: 820px){ .toolbar{display:none} .hamburger{display:block} } .canvas-wrap{padding: 16px 0; flex:1 1 auto; overflow:auto} .page{display:grid; grid-template-columns:minmax(0, 1fr) var(--sidebar-w); gap:16px; align-items:start; width:min(2000px, 98vw); margin:0 auto} @media (max-width: 1200px){ .page{grid-template-columns:1fr} .sidecol{order:2} .frame{order:1} } .frame{max-width:1600px; width:100%; margin:0 auto; background:#fff; border:3px solid var(--mode-red); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); position:relative; padding:var(--frame-pad); overflow:hidden} .frame.mode-green{border-color:var(--mode-green)} .legend{position:absolute; top:6px; right:8px; font-size:13px; color:#333; display:flex; align-items:center; gap:1rem; padding:0 8px; border-radius:8px} .chart{width:100%; display:flex; justify-content:center} .chart-outer{width:100%} .chart-inner{transform-origin: top left} svg{display:block; border-radius:10px; width:100%; height:auto; font-family:'Segoe UI', Arial, sans-serif} .node rect{rx:10; ry:10; stroke:#333; stroke-width:1} .node .title{font-weight:700; user-select:none; -webkit-user-select:none; -ms-user-select:none; cursor:default;} .checkbox{cursor:pointer} .tick{display:none} .node.selected .tick{display:block} .flow{stroke:var(--flow); stroke-width:6; fill:none; opacity:.95; stroke-linecap:round; cursor:pointer} .flow.off{display:none} /* dashed preview while dragging in Draw paths mode */ .flow.temp{stroke-width:4; stroke-dasharray:6,6; cursor:default} .sidecol{display:flex; flex-direction:column; gap:12px; position:0px; top:var(--stick-top)} .title-card{border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 12px; transition:background .2s, border-color .2s, color .2s} .title-card label{display:block; font-weight:600; font-size:13px; margin-bottom:6px} .map-title{width:100%; padding:.45rem .6rem; border:1px solid var(--line); border-radius:.5rem; font-size:14px; font-family:'Segoe UI', Arial, sans-serif} .map-desc{width:100%; padding:.45rem .6rem; border:1px solid var(--line); border-radius:.5rem; font-size:14px; resize:vertical; min-height:60px; font-family:'Segoe UI', Arial, sans-serif} .title-card.mode-red{ background:var(--sidebar-red); border-color:var(--sidebar-red); color:#fff } .title-card.mode-green{ background:var(--sidebar-green); border-color:var(--sidebar-green); color:#fff } .title-card.mode-red label,.title-card.mode-green label{ color:#fff } .title-card.mode-red .map-title,.title-card.mode-green .map-title{ background:#fff; color:#111; border-color:#e6e6e6 } .title-card.mode-red .map-desc,.title-card.mode-green .map-desc{ background:#fff; color:#111; border-color:#e6e6e6 } /* Three-dots toggle + extra fields */ .expand-dots{ position: relative; height:0; line-height:0; margin:0; padding:0; text-align:center; font-weight:700; color:#fff; cursor:pointer; user-select:none; } .expand-dots::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); top:-6px; font-size:20px; } .expand-dots[aria-expanded="true"]::after{ content:''; opacity:.9 } .extra-fields{ margin-top:.6rem } .extra-fields[hidden]{ display:none } .extra-fields .field{ margin-bottom:.6rem } .extra-fields .field:last-child{ margin-bottom:0 } .sidebar{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fafbfe} .sidebar h2{margin:0; padding:10px 12px; background:var(--sidebar-red); color:#fff; font-size:14px; letter-spacing:.3px} .sidebar h2.mode-green{background:var(--sidebar-green)} .entries{max-height:calc(100dvh - 240px); overflow:auto; padding:10px} .entry{background:#fff; border:1px solid var(--line); border-radius:10px; margin:10px 0; box-shadow:0 2px 6px rgba(0,0,0,.05); overflow:hidden} .entry .ehead{display:flex; align-items:center; justify-content:space-between; color:#fff; font-weight:700; padding:8px 10px} .entry .ecode{font-weight:700; opacity:.9} .entry textarea{width:100%; border:0; border-top:1px solid var(--line); padding:10px; resize:vertical; min-height:72px; font:14px/1.45 'Segoe UI', Arial, sans-serif; outline:none; white-space:pre-wrap} .instructions{display:block; margin:10px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.04)} .overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.4); z-index:40; padding:16px} .overlay.show{display:flex} .modal{background:#fff; width:min(820px, 96vw); max-height:86vh; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:auto; border:1px solid var(--line)} .modal header{position:sticky; top:0; z-index:1; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:10px 12px} .modal h3{margin:0; font-size:16px} .modal .close{border:0; background:transparent; font-size:18px; cursor:pointer; padding:6px} .modal .content{padding:14px} .settings-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; align-items:start} .settings-col{display:grid; gap:.35rem} .settings-col label{font-weight:600; margin:0 0 .25rem 0} .settings-group{display:grid; gap:.30rem; font-size:13px;} .inputs-grid{display:grid; gap:.6rem; margin-top:.6rem} .button .icon{width:14px; height:14px; margin-right:4px; vertical-align:-2px} .path-menu{ position:fixed; z-index:50; min-width:170px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px; font-size:13px; } .path-menu button{ appearance:none; border:0; background:none; padding:6px 8px; width:100%; text-align:left; cursor:pointer; border-radius:6px; font-size:13px; } .path-menu button:hover{ background:rgba(0,0,0,.04); } .path-menu-section{ padding:4px 4px 2px 4px; border-radius:6px; margin:2px 0 4px 0; } .path-menu-label{ margin-bottom:4px; font-weight:600; font-size:12px; } .path-menu-colors{ display:flex; flex-wrap:wrap; gap:4px; } .path-menu-colors .color-swatch{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.2); padding:0; } .help-icon{cursor:pointer}