:root {
    --top-h: 30px;
    --palette-w: 101px /* prior: 101px */
}

html {
  font-size: 100%; /* Respects browser setting */
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fa;
max-width: 100%; overflow-x: hidden;
}

.topbar {
    height: var(--top-h);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    background: #0a66c2;
    color: #fff 
}

.toptitlebar {
    height: 15px;
    display: flex;
    align-items: right;
    gap: 1px;
    padding: 1px 3px; 

    background: lightbrown;
  /*  color: lightpink ; */

    font-size: 8px;

   justify-content: right; 
   /* font-weight:bold; */

font-style: italic;
}

.tool-btn {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 2px 2px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 4px
}

.page {
    display: flex;
    height: calc(100vh - var(--top-h));
    overflow: hidden
}

.pane-left {
    width: var(--palette-w);
    background: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee
}

.categories {
    padding: 6px;
    overflow: auto
}

.category {
    margin-bottom: 8px;
    padding-bottom: 0
}

.cat-title {
    font-size: 12px;
    font-weight: regular;
    color: darkslateblue;
    padding: 1px 1px;
    margin-left: 0;
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: honeydew
}

.icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 2px
}

.icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab
}

.icon img {
    max-width: 22px;
    max-height: 22px;
    pointer-events: none
}

.divider {
    width: 4px; /* original 6px */
    cursor: col-resize;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center
}

.graph-pane {
    flex: 1;
    position: relative;
    background: linear-gradient(180deg, #fff, #f6f9ff);
    overflow: hidden
}

.svg-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
 container-type: inline-size;
}

#svgroot {
    width: 100%;
    height: 100%;
    display: block;
  max-width: 100vw;
 max-height: 80vh; /* Prevent overflow on small screens */
}

.node rect {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1;
    rx: 8;
    ry: 8
}

.group-box {
    fill: transparent;
    stroke: gray;
    stroke-width: 1;
    stroke-dasharray: 4 2;
    pointer-events: all
}

.domain-box {
    fill: transparent;
    stroke: gray;
    stroke-width: 1;
    pointer-events: all
}

.group .corner-handle {
    opacity: 0;
    pointer-events: none;
    transition: opacity .08s
}

.group.is-selected .corner-handle {
    opacity: 1;
    pointer-events: all
}

.node-label,
.group-label,
.link-label {
    font: 13px Arial, Helvetica, sans-serif;
    fill: #1f2937;
    user-select: none
}

.node-label {
    text-anchor: middle;
    dominant-baseline: hanging
}

.group-label {
    text-anchor: middle;
    dominant-baseline: middle
}

.link-label {
    font-size: x-small;
    font-style: italic;
    text-anchor: middle;
    dominant-baseline: middle
}

.link {
    stroke: gray;
    stroke-width: 1;
    fill: none;
    marker-end: url(#arrow);
    cursor: pointer
}

.link.straight {
    marker-end: none
}

.link-hit {
    stroke: transparent;
    stroke-width: 14;
    fill: none;
    cursor: grab
}

.link-hit:active {
    cursor: grabbing
}

.hotspot {
    fill: #0a66c2;
    opacity: 0;
    transition: opacity .08s
}

.node:hover .hotspot {
    opacity: 1
}

.tooltip {
    position: absolute;
    background: #111;
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    z-index: 30;
    display: none
}

@media(max-width:45rem) {  /* ~720px */
 
}

 .container {
  width: min(100% - 2rem, 720px);
  margin-inline: auto;
}

.tool-btn {
    position: relative;
    cursor: pointer
}

.tool-btn::after {
    content: attr(data-tooltip);
    visibility: hidden;
    opacity: 0;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    white-space: nowrap;
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 100%;
    margin-top: 5px;
    margin-left: -100%;
    pointer-events: none;
    display: block;
    transition: opacity .2s ease
}

.tool-btn:hover::after {
    visibility: visible;
    opacity: 1
}