/* ── theme tokens ─────────────────────────────────────── */
:root{
  --bg:#0c0f14; --panel:#12161d; --panel2:#171d27; --inset:#0e131b;
  --line:#232b38; --line2:#2f3a4b; --line3:#43536b;
  --text:#e2e9f4; --mut:#8b98ad; --dim:#5c6c85;
  --acc:#17c3b2; --warn:#f5b83d; --sel:#57d7c9;
  /* second-layer neutrals (were hardcoded) */
  --card1:#171e29; --card2:#121824;
  --float:#0d1117f2; --float2:#10151df5; --solid:#10151d;
  --edge:#8494ad; --edge-off:#4a5468; --edge-hi:#bccadb; --edge-flow:#7fd8cc;
  
  --dot-hi: rgba(102, 120, 143, 0.6); /* Исходный #66788f с прозрачностью 40% */
  --dot-lo: rgba(43, 54, 72, 0.4);
  --mix:#26303f; --mix2:#12181f; --chip:#1c2430; --plate:#10151d;
  --fd:'Space Grotesk',sans-serif; --fb:'IBM Plex Sans',sans-serif; --fm:'JetBrains Mono',monospace;
}
/* ── LIGHT THEME ──────────────────────────────────────── */
html.light{
  --bg:#edf0f5; --panel:#f8f9fb; --panel2:#ffffff; --inset:#eef1f6;
  --line:#dbe1ea; --line2:#c2cbd9; --line3:#97a4b8;
  --text:#18202e; --mut:#46536a; --dim:#7d8ba1;
  --acc:#0d9488; --warn:#a16207; --sel:#0f766e;
  --card1:#ffffff; --card2:#f1f4f9;
  --float:#fffffff2; --float2:#fffffff8; --solid:#ffffff;
  --edge:#5d6b84; --edge-off:#b3bdcc; --edge-hi:#31405a; --edge-flow:#0d9488;
  --dot-hi:#b6c1d2; --dot-lo:#e2e7ef;
  --mix:#d7dee8; --mix2:#edf1f7; --chip:#e7ecf3; --plate:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--fb);font-size:13px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font-family:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--acc) 33%,transparent)}

#app{display:flex;flex-direction:column;height:100vh}
#stage{flex:1;display:flex;min-height:0}

/* ── generic controls ─────────────────────────────────── */
.tbtn{
  height:30px;padding:0 11px;border-radius:8px;font-size:11.5px;font-weight:600;letter-spacing:.3px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--mut);
  display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;
}
.tbtn:hover{color:var(--text);border-color:var(--line3);transform:translateY(-1px)}
.tbtn:active{transform:translateY(0)}
.tbtn.ic{width:30px;padding:0;justify-content:center;font-size:15px}
.tbtn.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,var(--line2));background:color-mix(in srgb,var(--acc) 12%,var(--panel2))}
.tbtn.danger:hover{color:#e5484d;border-color:color-mix(in srgb,#e5484d 50%,var(--line2))}
.tbtn.play{min-width:78px;justify-content:center;background:color-mix(in srgb,var(--acc) 12%,var(--panel2));border-color:color-mix(in srgb,var(--acc) 45%,var(--line2));color:var(--acc);font-family:var(--fm);font-size:10.5px;letter-spacing:1.5px}
.tbtn.play.live{background:var(--warn);border-color:color-mix(in srgb,#00000030,var(--warn));color:#241a02;box-shadow:0 0 18px color-mix(in srgb,var(--warn) 30%,transparent)}
.tbtn[disabled]{opacity:.35;pointer-events:none}
.tsel{height:30px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--mut);font-size:11px;padding:0 6px;font-family:var(--fm)}

/* ── tooltip ──────────────────────────────────────────── */
#tip{
  position:fixed;z-index:90;max-width:250px;pointer-events:none;
  background:var(--float);border:1px solid var(--line2);border-radius:9px;padding:9px 11px;
  box-shadow:0 12px 32px #00000040;
}
#tip .tip-name{font-family:var(--fd);font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:7px;margin-bottom:3px}
#tip .tip-dot{width:8px;height:8px;border-radius:3px;flex:none}
#tip .tip-desc{font-size:11px;line-height:1.5;color:var(--mut)}

/* ── context menu ─────────────────────────────────────── */
#ctx{position:fixed;z-index:95;min-width:172px;background:var(--float2);border:1px solid var(--line2);border-radius:10px;padding:5px;box-shadow:0 16px 40px #00000060;backdrop-filter:blur(6px)}
.ctx-i{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:7px;font-size:12px;color:var(--text);text-align:left;transition:background .12s}
.ctx-i:hover{background:var(--chip)}
.ctx-i.danger{color:#e5484d}
.ctx-k{margin-left:auto;font-family:var(--fm);font-size:9px;color:var(--dim)}
.ctx-sep{height:1px;background:var(--line);margin:5px 4px}

/* ── toast ────────────────────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:52px;transform:translateX(-50%);z-index:99;
  background:var(--solid);border:1px solid color-mix(in srgb,var(--acc) 45%,var(--line2));border-radius:9px;padding:9px 16px;
  font-family:var(--fm);font-size:10.5px;letter-spacing:1px;color:var(--acc);
  box-shadow:0 10px 30px #00000040;pointer-events:none;
}
body.dragging, body.dragging *{cursor:grabbing !important;user-select:none !important}
body.space-pan #canvas{cursor:grab}

/* ── share dialog ─────────────────────────────────────── */
#shareDlg{position:fixed;inset:0;z-index:97;display:grid;place-items:center;background:#05080c80}
html.light #shareDlg{background:#33415530}
#shareDlg[hidden]{display:none}
.sd-card{position:relative;width:min(560px,92vw);background:var(--solid);border:1px solid var(--line2);border-radius:14px;padding:20px;box-shadow:0 24px 60px #00000060}
.sd-title{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:2.5px;color:var(--acc)}
.sd-sub{font-size:11px;color:var(--mut);margin:6px 0 14px}
.sd-row{display:flex;gap:8px}
.sd-row input{flex:1;font-family:var(--fm);font-size:10.5px}
.sd-note{margin-top:10px;font-family:var(--fm);font-size:9px;letter-spacing:1px;color:var(--dim);min-height:12px}
.sd-note.ok{color:var(--acc)}
.sd-note.err{color:#e5484d}
.sd-close{position:absolute;top:10px;right:12px;color:var(--dim);font-size:14px;padding:4px}
.sd-close:hover{color:var(--text)}