@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

  :root{
    --bg:            #FFFFFF;
    --bg-deep:       #FFFFFF;
    --panel:         #F7F8FA;
    --panel-raised:  #FFFFFF;
    --grid-line:     #E7E9EE;
    --line-soft:     #D6DAE1;
    --ink:           #1F2430;
    --ink-muted:     #767E8C;
    --ink-faint:     #A2A9B3;
    --amber:         #2F6FED;
    --amber-dim:     #9DB6F5;
    --teal:          #2F6FED;
    --danger:        #D0453A;
    --mono: 'IBM Plex Mono', monospace;
    --sans: 'IBM Plex Sans', sans-serif;
    --rail-w: 52px;
    --panel-w: 260px;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg-deep);
    color:var(--ink);
    font-family:var(--sans);
    overflow:hidden;
  }

  .app{
    display:grid;
    grid-template-rows:auto 1fr;
    height:100vh;
  }

  .app-body{
    display:flex;
    min-height:0;
  }

  /* ---------- top bar ---------- */
  .topbar{
    display:flex;
    align-items:center;
    gap:18px;
    padding:12px 20px;
    background:var(--bg);
    border-bottom:1px solid var(--grid-line);
    z-index:5;
  }
  .brand{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-right:8px;
  }
  .brand .mark{
    font-family:var(--mono);
    font-size:13px;
    color:var(--bg-deep);
    background:var(--amber);
    padding:3px 7px;
    border-radius:3px;
    font-weight:600;
    letter-spacing:0.5px;
  }
  .brand .name{
    font-family:var(--sans);
    font-weight:700;
    font-size:16px;
    letter-spacing:0.2px;
  }
  .brand .sub{
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-muted);
    letter-spacing:0.5px;
  }

  .type-tabs{
    display:flex;
    gap:2px;
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:6px;
    padding:2px;
    flex-shrink:0;
  }
  .type-tab{
    font-family:var(--sans);
    font-weight:600;
    font-size:12.5px;
    color:var(--ink-muted);
    background:transparent;
    border:none;
    padding:6px 12px;
    border-radius:4px;
    cursor:pointer;
    transition:all .12s ease;
  }
  .type-tab:hover{ color:var(--ink); }
  .type-tab.active{ background:var(--panel-raised); color:var(--amber); box-shadow:0 1px 3px rgba(20,30,50,0.12); }

  .toolbar{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .tbtn{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-muted);
    background:var(--panel);
    border:1px solid var(--line-soft);
    padding:6px 10px;
    border-radius:4px;
    cursor:pointer;
    transition:all .12s ease;
    white-space:nowrap;
  }
  .tbtn:hover{ color:var(--ink); border-color:var(--amber-dim); background:var(--panel-raised); }
  .tbtn:active{ transform:translateY(1px); }

  .spacer{ flex:1; }
  .hidden-control{ display:none !important; }

  .spacing-control{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-muted);
    white-space:nowrap;
  }
  .spacing-control label{ letter-spacing:0.3px; }
  .spacing-control input[type="range"]{
    width:110px;
    accent-color:var(--amber);
    cursor:pointer;
  }
  .spacing-control span{
    min-width:44px;
    color:var(--ink);
    font-weight:600;
  }

  .toggle-control{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-muted);
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
  }
  .toggle-control input{
    accent-color:var(--amber);
    cursor:pointer;
  }
  .toggle-control span{ letter-spacing:0.3px; }

  .stepper-control{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-muted);
    white-space:nowrap;
  }
  .stepper-control > span:first-child{ letter-spacing:0.3px; }
  .stepper-control #stepper2-val{
    min-width:14px;
    text-align:center;
    color:var(--ink);
    font-weight:600;
  }
  .stepper-btn{
    width:20px;
    height:20px;
    border-radius:5px;
    border:1px solid var(--line-soft,#D6DAE1);
    background:var(--panel,#F7F8FA);
    color:var(--ink);
    font-family:var(--mono);
    font-size:13px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
  .stepper-btn:hover{ border-color:var(--amber); color:var(--amber); }
  .stepper-btn:active{ transform:translateY(1px); }

  .action-group{ display:flex; gap:8px; }
  .abtn{
    font-family:var(--sans);
    font-weight:600;
    font-size:13px;
    padding:8px 14px;
    border-radius:5px;
    border:1px solid transparent;
    cursor:pointer;
    transition:all .12s ease;
  }
  .abtn.primary{
    background:var(--amber);
    color:var(--bg-deep);
  }
  .abtn.primary:hover{ background:#1E54D6; }
  .abtn.ghost{
    background:transparent;
    color:var(--ink-muted);
    border-color:var(--line-soft);
  }
  .abtn.ghost:hover{ color:var(--ink); border-color:var(--amber-dim); }

  /* ---------- main split ---------- */
  .main{
    position:relative;
    flex:1;
    min-width:0;
    min-height:0;
    overflow:hidden;
  }

  .editor-pane{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:380px;
    max-width:85vw;
    background:var(--bg);
    border-right:1px solid var(--grid-line);
    box-shadow:6px 0 24px rgba(20,30,50,0.18);
    display:flex;
    flex-direction:column;
    min-height:0;
    z-index:15;
    transform:translateX(-100%);
    transition:transform .18s ease;
  }
  .main:not(.script-hidden) .editor-pane{
    transform:translateX(0);
  }
  .editor-resize-handle{
    position:absolute;
    top:0;
    right:-4px;
    bottom:0;
    width:8px;
    cursor:ew-resize;
    z-index:16;
  }
  .editor-resize-handle::after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:3px;
    width:2px;
    background:transparent;
    transition:background .12s ease;
  }
  .editor-resize-handle:hover::after,
  .editor-resize-handle.dragging::after{ background:var(--amber); }

  .editor-label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink-muted);
    padding:12px 16px 6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .editor-label .count{ color:var(--ink-faint,#4a6386); }

  textarea#dsl{
    flex:1;
    resize:none;
    border:none;
    outline:none;
    background:var(--panel);
    color:var(--ink);
    font-family:var(--mono);
    font-size:13.5px;
    line-height:1.65;
    padding:14px 16px 60px;
    margin:0 16px 16px;
    border-radius:6px;
    border:1px solid var(--grid-line);
    tab-size:2;
  }
  textarea#dsl:focus{ border-color:var(--amber-dim); }

  .error-bar{
    margin:0 16px 14px;
    padding:8px 12px;
    background:rgba(208,69,58,0.08);
    border:1px solid rgba(208,69,58,0.35);
    color:var(--danger);
    font-family:var(--mono);
    font-size:12px;
    border-radius:5px;
    display:none;
  }
  .error-bar.show{ display:block; }

  .help{
    margin:0 16px 16px;
    padding:10px 12px;
    background:var(--panel);
    border-radius:5px;
    font-family:var(--mono);
    font-size:11px;
    line-height:1.8;
    color:var(--ink-muted);
  }
  .help b{ color:var(--amber); font-weight:600; }

  /* ---------- canvas pane ---------- */
  .canvas-pane{
    position:absolute;
    inset:0;
    overflow:auto;
    background:var(--bg);
  }
  .canvas-scroll{
    min-width:100%;
    min-height:100%;
    display:flex;
    align-items:flex-start;
    /* plain "center" lets a diagram wider than the pane overflow equally on
       both sides -- but a scroll container can only ever scroll toward the
       end, so the portion overflowing past the *start* becomes permanently
       unreachable. "safe center" is the standard fix: center when it fits,
       fall back to start-aligned (fully scrollable) once it doesn't. */
    justify-content:safe center;
    padding:40px;
  }
  #diagram-holder{
    background:transparent;
  }

  .empty-state{
    margin:auto;
    text-align:center;
    color:var(--ink-muted);
    font-family:var(--mono);
    font-size:13px;
  }

  ::-webkit-scrollbar{ width:12px; height:12px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:var(--line-soft); border-radius:6px; border:3px solid var(--bg); }

  #diagram-holder [data-node]{ cursor:grab; }
  #diagram-holder [data-node]:active{ cursor:grabbing; }

  #diagram-holder .add-hotzone{ cursor:pointer; }
  #diagram-holder .add-hotzone .add-btn{ opacity:0; transition:opacity .12s ease; }
  #diagram-holder .add-hotzone:hover .add-btn{ opacity:1; }

  #diagram-holder .remove-btn{ opacity:0; transition:opacity .12s ease; cursor:pointer; }
  #diagram-holder .has-remove:hover .remove-btn{ opacity:1; }

  /* Whatever the user just clicked (a participant, a step, a lane/row --
     any [data-node]/[data-lane] the shared selection system marks with
     .is-selected, see properties-panel.js) keeps its close button visible
     even after the mouse moves away, instead of requiring the user to keep
     hovering exactly over it to find the delete control. */
  #diagram-holder .is-selected > .remove-btn{ opacity:1; }

  /* A connector's delete badge is rendered as its own top-level element,
     separate from the connector line/label it belongs to (see
     connectorBadgeParts in swimlane.js / sequence.js) -- so it isn't ever
     covered by another connector's invisible click-hit stroke -- and is
     therefore keyed to a data-line match in JS rather than DOM nesting, so
     it needs its own visibility class instead of the .is-selected > rule
     above. */
  #diagram-holder .connector-hit-badge.is-shown{ opacity:1; }
  #diagram-holder .connector-hit{ cursor:pointer; }

  #diagram-holder .link-handle{ cursor:pointer; }
  #diagram-holder .link-handle .link-add-btn{ opacity:0; transition:opacity .1s ease; }
  #diagram-holder .link-handle:hover .link-add-btn{ opacity:1; }

  #diagram-holder .step-hitzone{ cursor:pointer; }
  #diagram-holder .step-hitzone .step-add-btn{ opacity:0; transition:opacity .1s ease; }
  #diagram-holder .step-hitzone:hover .step-add-btn{ opacity:1; }

  /* Sankey: clicking a flow ribbon splits it, inserting a new node right
     there -- this highlight (overriding the inline stroke-opacity="0.35")
     is the only hint that a ribbon is clickable, so it needs to read as an
     affordance on its own rather than just reacting to a hover a user found
     by accident. */
  #diagram-holder .sankey-link{ cursor:pointer; transition:stroke-opacity .12s ease; }
  #diagram-holder .sankey-link:hover{ stroke-opacity:0.65; }

  #diagram-holder .editable-label{ cursor:text; }

  #diagram-holder .inline-remove-btn{ opacity:0; transition:opacity .12s ease; cursor:pointer; }
  #diagram-holder .editable-label:hover .inline-remove-btn{ opacity:1; }
  #diagram-holder .diagram-bg{ cursor:crosshair; }

  .label-edit-input{
    position:fixed;
    z-index:60;
    font-family:var(--mono);
    font-size:12.5px;
    padding:2px 6px;
    border:2px solid var(--amber);
    border-radius:4px;
    outline:none;
    background:#FFFFFF;
    color:var(--ink);
    box-shadow:0 6px 18px rgba(20,30,50,0.2);
  }

  .canvas-pane.linking-mode{ cursor:crosshair; }
  .canvas-pane.linking-mode .link-handle{ cursor:crosshair; }

  .link-hint{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    background:#1F2430;
    color:#FFFFFF;
    font-family:var(--mono);
    font-size:12px;
    padding:7px 16px;
    border-radius:20px;
    display:none;
    z-index:20;
    pointer-events:none;
    box-shadow:0 8px 20px rgba(20,30,50,0.25);
  }
  .link-hint.show{ display:block; }

  .history-controls{
    position:absolute;
    top:12px;
    right:12px;
    display:flex;
    gap:6px;
    z-index:20;
  }
  .history-controls .icon-toggle-btn:disabled{
    opacity:0.35;
    cursor:not-allowed;
  }
  .history-controls .icon-toggle-btn:disabled:hover{
    border-color:var(--line-soft);
    background:var(--panel);
    color:var(--ink-muted);
  }

  .popup-menu{
    position:fixed;
    z-index:50;
    background:#FFFFFF;
    border:1px solid var(--line-soft);
    border-radius:9px;
    box-shadow:0 10px 28px rgba(20,30,50,0.2);
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:172px;
  }
  .popup-menu .pm-label{
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink-muted);
    letter-spacing:0.6px;
    text-transform:uppercase;
    padding:3px 8px 5px;
  }
  .popup-menu button{
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    background:transparent;
    border:none;
    padding:7px 8px;
    border-radius:6px;
    cursor:pointer;
    color:var(--ink);
    font-family:var(--mono);
    font-size:12.5px;
  }
  .popup-menu button:hover{ background:var(--panel); color:var(--amber); }
  .popup-menu svg{ flex-shrink:0; }

  @media (max-width: 860px){
    .editor-pane{ width:85vw; border-right:none; box-shadow:6px 0 24px rgba(20,30,50,0.25); }
  }

  /* ---------- icon rail (always narrow) + swappable side panel ---------- */
  .app-rail{
    flex:0 0 var(--rail-w);
    width:var(--rail-w);
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--panel-raised);
    border-right:1px solid var(--grid-line);
    padding:8px 0;
    gap:2px;
  }

  .rail-icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:7px;
    border:none;
    background:transparent;
    color:var(--ink-muted);
    cursor:pointer;
    transition:all .12s ease;
  }
  .rail-icon-btn:hover{ background:var(--panel); color:var(--ink); }
  .rail-icon-btn.active{ background:rgba(47,111,237,0.12); color:var(--amber); }
  .rail-icon-spacer{ flex:1; }

  .side-panel{
    flex:0 0 0;
    width:0;
    display:flex;
    flex-direction:column;
    background:var(--panel-raised);
    border-right:1px solid var(--grid-line);
    overflow:hidden;
    transition:flex-basis .16s ease, width .16s ease;
  }
  .side-panel.open{
    flex-basis:var(--panel-w);
    width:var(--panel-w);
  }
  .side-panel.right{
    border-right:none;
    border-left:1px solid var(--grid-line);
  }

  .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid var(--grid-line);
    flex-shrink:0;
    white-space:nowrap;
  }
  .panel-head .title{
    font-family:var(--sans);
    font-weight:700;
    font-size:14px;
    letter-spacing:0.2px;
  }
  .panel-close{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    border:none;
    background:transparent;
    color:var(--ink-muted);
    cursor:pointer;
    flex-shrink:0;
  }
  .panel-close:hover{ color:var(--ink); background:var(--panel); }

  .panel-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 0 16px;
    white-space:nowrap;
  }
  .panel-view{ display:none; flex-direction:column; }
  .panel-view.active{ display:flex; }

  .panel-section{
    padding:10px 10px 4px 16px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink-faint);
  }

  .panel-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:36px;
    padding:0 16px;
    background:transparent;
    border:none;
    text-align:left;
    font-family:var(--sans);
    font-size:13px;
    color:var(--ink);
    cursor:pointer;
    flex-shrink:0;
    transition:background .1s ease;
  }
  .panel-item:hover{ background:var(--panel); }
  .panel-item svg{ flex-shrink:0; color:var(--ink-muted); }
  .panel-item:hover svg{ color:var(--amber); }
  .panel-item.active{ background:rgba(47,111,237,0.1); color:var(--amber); }
  .panel-item.active svg{ color:var(--amber); }
  .panel-item.panel-item-danger:hover{ background:rgba(208,69,58,0.08); color:var(--danger); }
  .panel-item.panel-item-danger:hover svg{ color:var(--danger); }

  .panel-divider{
    height:1px;
    background:var(--grid-line);
    margin:8px 16px;
    flex-shrink:0;
  }

  .icon-toggle-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:6px;
    border:1px solid var(--line-soft);
    background:var(--panel);
    color:var(--ink-muted);
    cursor:pointer;
    flex-shrink:0;
    transition:all .12s ease;
  }
  .icon-toggle-btn:hover{ border-color:var(--amber-dim); background:var(--panel-raised); color:var(--ink); }
  .icon-toggle-btn.active{ border-color:var(--amber); background:var(--panel-raised); color:var(--amber); }

  /* ---------- saved drawings tree ---------- */
  .current-file-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0 16px 10px;
    padding:7px 10px;
    background:rgba(47,111,237,0.07);
    border:1px solid var(--amber-dim);
    border-radius:6px;
  }
  .current-file-bar .cf-name{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .current-file-bar .cf-saved{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--ink-faint);
    flex-shrink:0;
  }

  .drawings-tree{
    padding:0 6px 6px;
  }
  .drawings-empty{
    padding:10px 16px 4px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ink-faint);
    line-height:1.6;
  }

  .tree-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 8px;
    border-radius:5px;
    cursor:pointer;
    font-family:var(--sans);
    font-size:13.5px;
    color:var(--ink);
  }
  .tree-row:hover{ background:var(--panel); }
  .tree-row.tree-file.active{ background:rgba(47,111,237,0.1); color:var(--amber); }

  .tree-toggle, .tree-spacer{
    width:16px;
    height:16px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-faint);
    transition:transform .12s ease;
  }
  .tree-toggle.expanded{ transform:rotate(90deg); }

  .tree-icon{
    flex-shrink:0;
    display:flex;
    color:var(--ink-muted);
  }
  .tree-row.tree-file:hover .tree-icon,
  .tree-row.tree-file.active .tree-icon{ color:var(--amber); }

  .tree-label{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .tree-type-tag{
    flex-shrink:0;
    font-family:var(--mono);
    font-size:9px;
    font-weight:600;
    letter-spacing:0.4px;
    color:var(--ink-faint);
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:3px;
    padding:1px 4px;
  }
  .tree-row.tree-file.active .tree-type-tag{ color:var(--amber); border-color:var(--amber-dim); }

  .tree-row.tree-new{ cursor:default; }
  .tree-new-input{
    flex:1;
    min-width:0;
    font-family:var(--sans);
    font-size:13.5px;
    color:var(--ink);
    background:var(--panel-raised);
    border:1px solid var(--amber);
    border-radius:4px;
    padding:3px 6px;
    outline:none;
  }

  /* Positioned out of the row's flex flow entirely (rather than reserving
     space and just fading opacity) so the label always gets the row's full
     width instead of permanently losing ~60-120px to invisible buttons --
     it overlays the row's right edge only while hovered. */
  .tree-actions{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:2px;
    padding-left:14px;
    background:linear-gradient(to right, transparent, var(--panel) 14px);
    opacity:0;
    pointer-events:none;
    transition:opacity .1s ease;
  }
  .tree-row:hover .tree-actions{ opacity:1; pointer-events:auto; }
  .tree-row.tree-file.active .tree-actions{ background:linear-gradient(to right, transparent, rgba(47,111,237,0.1) 14px); }

  .tree-action-btn{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    border-radius:4px;
    color:var(--ink-muted);
    cursor:pointer;
  }
  .tree-action-btn:hover{ background:var(--panel-raised); color:var(--amber); }
  .tree-action-btn.danger:hover{ color:var(--danger); }

  /* ---------- "New diagram" modal ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(20,30,50,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:20px;
  }
  .modal-card{
    width:420px;
    max-width:100%;
    max-height:88vh;
    background:var(--panel-raised);
    border-radius:12px;
    box-shadow:0 20px 60px rgba(20,30,50,0.3);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--grid-line);
    flex-shrink:0;
  }
  .modal-title{
    font-family:var(--sans);
    font-weight:700;
    font-size:15px;
  }
  .modal-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow-y:auto;
  }
  .modal-field-label{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:7px;
  }
  .modal-input{
    width:100%;
    font-family:var(--sans);
    font-size:13.5px;
    color:var(--ink);
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:6px;
    padding:9px 11px;
    outline:none;
  }
  .modal-input:focus{ border-color:var(--amber-dim); }
  .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:14px 18px;
    border-top:1px solid var(--grid-line);
    flex-shrink:0;
  }

  .type-card-group{ display:flex; gap:10px; }
  .type-card{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:10px 8px 12px;
    border:1.5px solid var(--line-soft);
    border-radius:9px;
    background:var(--panel);
    cursor:pointer;
    transition:all .12s ease;
  }
  .type-card:hover{ border-color:var(--amber-dim); }
  .type-card.selected{ border-color:var(--amber); background:rgba(47,111,237,0.06); }
  .type-card span{
    font-family:var(--sans);
    font-weight:600;
    font-size:12.5px;
    color:var(--ink);
  }

  [hidden]{ display:none !important; }

  /* ---------- right panel: diagram / element properties ---------- */
  .prop-section{
    padding:14px 16px;
    border-bottom:1px solid var(--grid-line);
  }
  .prop-section:last-child{ border-bottom:none; }
  .prop-label{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:8px;
  }
  .prop-kind-badge{
    display:inline-block;
    font-family:var(--mono);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.4px;
    color:var(--amber);
    background:rgba(47,111,237,0.1);
    border-radius:4px;
    padding:2px 7px;
    margin-bottom:10px;
  }
  .prop-name{
    font-family:var(--sans);
    font-weight:700;
    font-size:14px;
    color:var(--ink);
    margin-bottom:14px;
    word-break:break-word;
  }
  .prop-input{
    width:100%;
    font-family:var(--sans);
    font-size:13px;
    color:var(--ink);
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:6px;
    padding:8px 10px;
    outline:none;
    margin-bottom:14px;
  }
  .prop-input:focus{ border-color:var(--amber-dim); }

  .swatch-group{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:4px; }
  .swatch{
    width:26px;
    height:26px;
    border-radius:50%;
    cursor:pointer;
    border:2px solid transparent;
    padding:0;
    position:relative;
  }
  .swatch:hover{ transform:scale(1.08); }
  .swatch.selected{ border-color:var(--ink); }
  .swatch.selected::after{
    content:'';
    position:absolute;
    inset:5px;
    border-radius:50%;
    border:1.5px solid #FFFFFF;
  }
  .swatch-auto{
    width:26px;
    height:26px;
    border-radius:50%;
    cursor:pointer;
    border:1.5px dashed var(--line-soft);
    background:var(--panel-raised);
    color:var(--ink-faint);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-family:var(--mono);
  }
  .swatch-auto:hover{ border-color:var(--ink-muted); color:var(--ink-muted); }
  .swatch-auto.selected{ border-style:solid; border-color:var(--ink); color:var(--ink); }

  .shape-toggle{
    display:flex;
    gap:2px;
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:6px;
    padding:2px;
    margin-bottom:14px;
  }
  .shape-toggle button{
    flex:1;
    font-family:var(--sans);
    font-weight:600;
    font-size:12px;
    color:var(--ink-muted);
    background:transparent;
    border:none;
    padding:6px 8px;
    border-radius:4px;
    cursor:pointer;
  }
  .shape-toggle button.active{ background:var(--panel-raised); color:var(--amber); box-shadow:0 1px 3px rgba(20,30,50,0.12); }

  .prop-empty-hint{
    padding:14px 16px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ink-faint);
    line-height:1.7;
  }
  .prop-deselect{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    color:var(--ink-muted);
    background:transparent;
    border:none;
    cursor:pointer;
    padding:0;
    margin-bottom:2px;
  }
  .prop-deselect:hover{ color:var(--amber); }

  .prop-delete-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:600;
    color:var(--danger);
    background:rgba(208,69,58,0.08);
    border:1px solid rgba(208,69,58,0.25);
    border-radius:6px;
    padding:8px 10px;
    cursor:pointer;
  }
  .prop-delete-btn:hover{ background:rgba(208,69,58,0.15); border-color:var(--danger); }