:root { --ink:#182432; --muted:#718096; --line:#c9d6e2; --panel:#fff; --bg:#f4f7fa; --accent:#7856ee; }
* { box-sizing:border-box; }
body { margin:0; min-width:900px; overflow:hidden; background:var(--bg); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.topbar { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#fff; border-bottom:1px solid #e9eef3; }
.brand { display:flex; align-items:center; gap:9px; font:700 22px Outfit,sans-serif; letter-spacing:-.8px; }.brand>span:last-child span { color:#6c4de3; }.brand-mark { display:grid; place-items:center; width:29px; height:29px; color:#fff; background:linear-gradient(135deg,#886df4,#5540c4); border-radius:9px; font:600 19px Outfit; }
.topbar-actions { display:flex; gap:9px; align-items:center; }.ghost-btn,.primary-btn { border-radius:9px; border:1px solid #dbe3ec; padding:9px 13px; background:#fff; color:#536273; font-size:13px; font-weight:600; }.ghost-btn:hover { background:#f7f9fc; }.primary-btn { color:#fff; border-color:#6a4bdd; background:#7353e5; box-shadow:0 5px 12px #7353e538; }.primary-btn:hover { background:#6545db; }.upload-label input { display:none; }
.app-shell { height:calc(100vh - 70px); display:grid; grid-template-columns:295px minmax(0,1fr); }.sidebar { z-index:2; display:flex; flex-direction:column; padding:30px 24px 20px; background:#fff; border-right:1px solid #e7edf3; overflow-y:auto; }.eyebrow { margin:0 0 7px; color:#9487cc; font-size:10px; font-weight:700; letter-spacing:1.5px; }.sidebar h1 { margin:0; font:600 23px Outfit,sans-serif; letter-spacing:-.5px; }.muted { margin:10px 0 23px; color:var(--muted); font-size:12.5px; line-height:1.5; }
.tool-section { text-align:center; padding:35px 8px; color:#718096; }.tool-section h2,.canvas-empty h2 { margin:11px 0 5px; font:600 16px Outfit; color:#405064; }.tool-section p,.canvas-empty p { margin:0; font-size:12.5px; line-height:1.5; }.empty-icon { display:grid; place-items:center; margin:auto; width:36px; height:36px; border-radius:12px; background:#f0edff; color:#7961dd; font-size:20px; }
.hidden { display:none!important; }.editor { display:flex; flex-direction:column; gap:14px; }.selected-title { font-size:12px; color:#617082; font-weight:600; margin-bottom:2px; }.status-dot { display:inline-block; width:8px; height:8px; border-radius:100%; background:#65bd8d; margin-right:5px; }.editor label,.field-label { display:flex; flex-direction:column; gap:6px; color:#637184; font-size:11px; font-weight:700; }.editor input[type=text] { width:100%; padding:10px 11px; border:1px solid #dbe3eb; border-radius:8px; outline:0; color:#263443; font-size:13px; font-weight:500; }.editor input[type=text]:focus { border-color:#947cf0; box-shadow:0 0 0 3px #7856ee12; }.color-row { display:flex; gap:8px; }.color-row button { width:24px; height:24px; padding:0; border:2px solid #fff; outline:1px solid transparent; border-radius:100%; background:var(--color); }.color-row button.active { outline-color:var(--color); }.photo-control { display:flex; align-items:center; gap:9px; height:42px; padding:5px; border:1px dashed #cfd9e5; border-radius:8px; cursor:pointer; color:#69788a; font-size:12px; font-weight:500; }.photo-control img { width:30px; height:30px; border-radius:7px; object-fit:cover; background:#e9eef5; }.photo-control input { display:none; }.divider { height:1px; background:#e8edf2; margin-top:2px; }.node-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.node-actions button { padding:9px 3px; border:1px solid #ded8fb; border-radius:8px; background:#faf9ff; color:#6754bd; font-size:11px; font-weight:700; }.node-actions button:hover { background:#f1efff; }.node-actions b { font-size:14px; }.delete-btn { margin-top:2px; border:0; background:transparent; color:#d45a6a; padding:5px 0; text-align:left; font-size:11px; font-weight:700; }.help-box { margin-top:auto; padding:13px 14px; border-radius:10px; background:#f6f8fb; color:#718094; font-size:11px; line-height:1.45; }.help-box span { color:#6651c6; font-weight:700; }.help-box p { margin:4px 0 0; }
.workspace { position:relative; min-width:0; overflow:hidden; background:radial-gradient(circle at 10% 10%,#fff 0,#f7f9fb 42%,#f1f5f8 100%); }.canvas-toolbar { position:absolute; z-index:4; top:20px; left:26px; right:25px; display:flex; justify-content:space-between; pointer-events:none; }.chart-label { color:#8a99aa; font-size:10px; letter-spacing:1.2px; font-weight:700; }.chart-label i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:100%; background:#70c898; }.zoom-controls { display:flex; overflow:hidden; pointer-events:auto; border:1px solid #dfe7ee; border-radius:8px; background:#fff; box-shadow:0 3px 8px #4050600e; }.zoom-controls button { width:29px; border:0; background:#fff; color:#5f7080; font-size:18px; }.zoom-controls button:hover { background:#f4f7fa; }.zoom-controls span { display:grid; place-items:center; width:48px; border-inline:1px solid #e5ebf0; color:#657586; font-size:10px; font-weight:700; }
.canvas-wrap { position:absolute; inset:0; overflow:hidden; }.chart-stage { position:relative; transform-origin:top left; min-width:100%; min-height:100%; }.chart-stage svg { position:absolute; inset:0; overflow:visible; pointer-events:none; }.org-card { position:absolute; display:flex; overflow:hidden; width:205px; height:76px; border:0; border-radius:11px; padding:0; text-align:left; color:#fff; background:var(--card-color); box-shadow:0 7px 13px #324b6033, inset 0 1px #ffffff55; transition:transform .15s,box-shadow .15s; touch-action:none; user-select:none; cursor:grab; }.org-card:active { cursor:grabbing; }.org-card:hover { transform:translateY(-2px); box-shadow:0 11px 17px #324b6038, inset 0 1px #ffffff55; }.org-card.selected { outline:3px solid #a897f4; outline-offset:3px; }.org-card::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,#fff0 20%,#ffffff27 53%,#fff0 69%); pointer-events:none; }.avatar { width:76px; height:76px; flex:none; background:#dde5ec; object-fit:cover; }.avatar-placeholder { display:grid; place-items:center; width:76px; height:76px; flex:none; color:#fff; background:#0003; font:600 23px Outfit; }.card-info { position:relative; z-index:1; flex:1; padding:12px 10px; display:flex; flex-direction:column; justify-content:center; min-width:0; }.card-name { font-size:11px; line-height:1.15; font-weight:500; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.card-title { margin-top:4px; font:700 12px/1.12 Outfit; text-transform:uppercase; }.connection { fill:none; stroke:#7790a3; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }.connection.selected-connection { stroke:#8c77e8; }.canvas-empty { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:0; }.toast { position:fixed; z-index:10; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; padding:10px 14px; border-radius:8px; background:#263747; color:#fff; font-size:12px; font-weight:600; transition:.2s; pointer-events:none; }.toast.show { transform:translate(-50%,0); opacity:1; }
@media(max-width:1000px) { body{min-width:760px}.app-shell{grid-template-columns:260px minmax(0,1fr)}.sidebar{padding-inline:18px}.topbar{padding-inline:18px}.topbar-actions .ghost-btn:nth-child(1){display:none} }

.history-controls { display:flex; gap:0; }
.record-controls { display:flex; gap:7px; align-items:center; padding-right:5px; border-right:1px solid #e5ebf0; }
.record-controls select { max-width:175px; height:36px; padding:0 30px 0 11px; border:1px solid #dbe3ec; border-radius:9px; outline:0; background:#fff; color:#425366; font-size:12px; font-weight:700; }
.record-controls select:focus { border-color:#947cf0; }.icon-btn { width:36px; padding:9px 0; font-size:15px; }
.history-controls .ghost-btn { border-radius:0; }
.history-controls .ghost-btn:first-child { border-radius:9px 0 0 9px; }
.history-controls .ghost-btn:last-child { border-left:0; border-radius:0 9px 9px 0; }
.ghost-btn:disabled { color:#b7c1cc; background:#f8fafb; cursor:not-allowed; }
.ghost-btn:hover:not(:disabled) { background:#f7f9fc; }
.position-actions { grid-template-columns:1fr 1fr; }.position-actions button { color:#2f7d91; border-color:#c5e9ef; background:#f4fcfd; }
.position-actions button:hover { background:#e8f9fb; }
.reset-position { border:0; padding:0; text-align:left; background:transparent; color:#718096; font-size:11px; font-weight:600; }
.reset-position:hover { color:#4e5f71; text-decoration:underline; }