:root {
    color-scheme: dark;
    --bg: #0c1424;
    --panel: #162236;
    --panel2: #101c2d;
    --border: #30415a;
    --text: #edf3fc;
    --muted: #a7b7cf;
    --accent: #56c5e6;
    --green: #5ee2a0;
    --danger: #f88a94;
    --surface: #f8fafc;
    --surfaceText: #253349;
    --shadow: 0 12px 30px #060d1d22
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Arial, sans-serif
}

button,
input,
select,
textarea {
    font: inherit
}
code{
    font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
}

button,
select,
input[type=text],
input[type=number],
input[type=color],
textarea {
    border: 1px solid var(--border);
    border-radius: 8px
}

button,
select,
input:not([type=checkbox]),
textarea {
    color: var(--text);
    background: var(--panel)
}

button {
    cursor: pointer;
    padding: 8px 11px;
    white-space: nowrap;
    transition: border-color .12s, background .12s
}

button:hover:not(:disabled) {
    border-color: var(--accent);
    background: #20334a
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

button:disabled {
    opacity: .42;
    cursor: not-allowed
}

.primary {
    background: #126a8b;
    border-color: #1f97bf;
    font-weight: 700
}

.primary:hover:not(:disabled) {
    background: #177e9f
}

.danger {
    color: #ffabb1
}

.icon {
    padding: 8px 10px
}

.muted {
    color: var(--muted)
}

.small {
    font-size: 12px
}

.tag {
    font-size: 11px;
    color: #95e7ff;
    border: 1px solid #285670;
    border-radius: 999px;
    padding: 2px 8px
}

.spacer {
    flex: 1
}

.button-group {
    display: flex;
    gap: 1px
}

.button-group button {
    border-radius: 0
}

.button-group button:first-child {
    border-radius: 8px 0 0 8px
}

.button-group button:last-child {
    border-radius: 0 8px 8px 0
}

.button-group .active {
    background: #164c64;
    border-color: #32acd0;
    color: #fff
}

#app {
    height: 100dvh;
    min-height: 500px;
    display: flex;
    flex-direction: column
}

header {
    background: var(--panel2);
    border-bottom: 1px solid var(--border)
}

.topbar,
.toolbar {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    padding: 9px 14px
}

.topbar {
    border-bottom: 1px solid #25364a
}

.title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 13px
}

.logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #002b36;
    background: linear-gradient(130deg, #4ec9dd, #65edba)
}

h1 {
    font-size: 16px;
    margin: 0;
    letter-spacing: -.3px
}

.topbar select {
    max-width: 260px;
    min-width: 140px;
    padding: 8px
}

.separator {
    width: 1px;
    height: 26px;
    background: var(--border);
    margin: 0 3px
}

.toolbar .mermaid-only,
.toolbar .visual-only {
    display: none
}

body[data-mode=mermaid] .toolbar .mermaid-only {
    display: inline-flex
}

body[data-mode=visual] .toolbar .visual-only {
    display: inline-flex
}

.tool-label {
    color: var(--muted);
    font-size: 12px
}

.toolbar details {
    position: relative
}

.toolbar summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--border);
    padding: 8px 11px;
    border-radius: 8px
}



.settings-panel {
    position: absolute;
    z-index: 25;
    top: calc(100% + 10px);
    right: 0;
    width: 265px;
    background: #14243a;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 14px;
    border-radius: 12px
}

.settings-panel label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.settings-panel input[type=color] {
    width: 36px;
    height: 30px;
    padding: 2px
}

.settings-panel select {
    max-width: 140px
}

#workspace {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(250px, 39%) 7px minmax(300px, 1fr)
}

#workspace.with-inspector {
    grid-template-columns: minmax(250px, 33%) 7px minmax(300px, 1fr) 280px
}

#workspace.source-hidden {
    grid-template-columns: minmax(300px, 1fr)
}

#workspace.source-hidden.with-inspector {
    grid-template-columns: minmax(300px, 1fr) 280px
}

#workspace.source-hidden #sourcePane,
#workspace.source-hidden #splitter {
    display: none
}

#sourcePane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #111d2d
}

#splitter {
    background: #22314a;
    cursor: col-resize;
    position: relative;
    touch-action: none
}

#splitter:after {
    content: '⋮';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8b9bb2
}

#canvasPane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--surface);
    color: var(--surfaceText)
}

.panehead {
    height: 43px;
    min-height: 43px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted)
}

#canvasPane .panehead {
    color: #60708a;
    border-color: #d8e0e9;
    background: #f1f5f9
}

#canvasPane .panehead button {
    background: white;
    color: #35465c;
    border-color: #cbd5e1;
    padding: 5px 10px
}

#source {
    flex: 1;
    width: 100%;
    resize: none;
    border: 0;
    border-radius: 0;
    background: #111d2d;
    padding: 18px 16px;
    color: #dceafa;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre;
    tab-size: 2;
    outline: 0
}

#sourceHint {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px
}

#previewScroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 28px;
    background: white
}

#preview {
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center
}

#preview svg {
    max-width: none;
    height: auto
}

.error-card {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #981b2b;
    padding: 15px;
    border-radius: 9px;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 850px
}

.loading-card {
    margin: auto;
    color: #64748b
}

#networkWrap {
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #fff
}

#network {
    height: 100%;
    width: 100%;
    background: radial-gradient(#d9e0e9 .7px, transparent .7px) 0 0 / 22px 22px
}

#networkWrap {
    display: flex;
    flex-direction: column
}

#groupFilters {
    flex: none
}

#network {
    flex: 1;
    min-height: 0;
    height: auto
}

#previewScroll[hidden],
#networkWrap[hidden],
#inspector[hidden] {
    display: none !important
}

#network:focus {
    outline: 0
}

#rubberBand {
    position: absolute;
    border: 1px dashed #0c81ba;
    background: #0b8ecc28;
    pointer-events: none;
    display: none;
    z-index: 5
}

#contextMenu {
    position: fixed;
    z-index: 50;
    display: none;
    padding: 5px;
    background: #14243a;
    color: white;
    border: 1px solid #39526c;
    border-radius: 9px;
    box-shadow: 0 12px 36px #0006;
    min-width: 200px
}

#contextMenu button {
    display: block;
    width: 100%;
    border: 0;
    text-align: left;
    border-radius: 5px;
    background: transparent;
    padding: 8px
}

#contextMenu button:hover {
    background: #29435c
}

#networkBadge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #ffffffed;
    color: #4b5c71;
    border: 1px solid #dde4ed;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 11px;
    pointer-events: none
}

#inspector {
    background: #f3f6fa;
    color: #253349;
    min-width: 0;
    border-left: 1px solid #d8e0eb;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

#inspector .panehead {
    border-color: #d8e0e9;
    color: #53677d
}

#properties {
    flex: 1;
    overflow: auto;
    padding: 12px 14px
}

#properties h3 {
    font-size: 14px;
    margin: 4px 0 12px
}

#properties label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    color: #56667d;
    margin-top: 12px;
    margin-bottom: 5px
}

#properties .fields-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#properties .fields-label-row label {
    margin-bottom: 0
}

#properties .fields-label-row .checkline {
    flex: none;
    margin-top: 12px;
}

#properties input:not([type=checkbox]),
#properties textarea,
#properties select {
    width: 100%;
    border-radius: 7px;
    border: 1px solid #c7d3e0;
    background: #fff;
    color: #1a2940;
    padding: 7px 9px;
    font-size: 13px
}

#properties input[type=color] {
    height: 36px;
    padding: 3px
}

#properties textarea {
    min-height: 88px;
    resize: vertical
}

#properties .twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

#properties .checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px
}

#properties .checkline input {
    width: auto
}

#properties .inspector-btn {
    margin-top: 13px;
    white-space: normal;
    color: #1a4763;
    background: #e6f4fa;
    border-color: #bddeea;
    width: 100%
}

#properties .inspector-btn.danger {
    background: #fff0f1;
    color: #ad2633;
    border-color: #fecdd3
}

#groupFilters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e1e8f0;
    max-height: 90px;
    overflow: auto
}

#groupFilters[hidden] {
    display: none
}

.group-chip {
    border: 1px solid #d5dfe8;
    background: #fff;
    color: #34465e;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    gap: 5px;
    font-size: 11px;
    cursor: pointer
}

.group-chip.off {
    opacity: .48;
    text-decoration: line-through
}

.group-chip strong {
    font-size: 10px;
    color: #64748b
}

.group-chip input {
    margin: 0;
    accent-color: #0e80a9
}

#inspector .empty {
    font-size: 13px;
    color: #718096;
    padding: 8px 0;
    line-height: 1.6
}

footer {
    background: var(--panel2);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--muted);
    min-height: 32px
}

#status[data-kind=error] {
    color: var(--danger)
}

#status[data-kind=ok] {
    color: var(--green)
}

#events {
    color: #849ab5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 38%
}

dialog {
    border: 1px solid #425a71;
    background: #132238;
    color: white;
    border-radius: 13px;
    box-shadow: 0 24px 70px #0009;
    max-width: min(92vw, 540px);
    min-width: min(90vw, 390px);
    padding: 22px
}

dialog::backdrop {
    background: #050d18b8
}

dialog h2 {
    font-size: 17px;
    margin: 0 0 16px
}

dialog label {
    display: block;
    margin: 13px 0 5px;
    font-size: 12px;
    color: #c2d3e8
}

dialog input,
dialog textarea,
dialog select {
    width: 100%;
    padding: 9px;
    background: #0f1a29;
    color: white
}

dialog .actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px
}

dialog p,
dialog li {
    color: #c2d3e8
}

#helpDialog {
    max-width: 620px
}

#helpDialog kbd {
    background: #0a1727;
    padding: 2px 5px;
    border: 1px solid #455670;
    border-radius: 4px;
    color: #ddf7ff
}

#helpDialog ul {
    padding-left: 22px;
    line-height: 1.9
}

.notice {
    font-size: 12px;
    background: #eaf5fa;
    border: 1px solid #cbe9f3;
    border-radius: 9px;
    padding: 10px;
    color: #37627b
}

@media(max-width:1050px) {
    #workspace.with-inspector {
        grid-template-columns: minmax(230px, 28%) 7px minmax(280px, 1fr) 240px
    }

    #workspace.source-hidden.with-inspector {
        grid-template-columns: minmax(300px, 1fr) 240px
    }

    .toolbar {
        gap: 5px
    }

    .toolbar button {
        padding: 7px 8px
    }
}

@media(max-width:760px) {
    #app {
        height: auto;
        min-height: 100dvh
    }

    #workspace,
    #workspace.with-inspector,
    #workspace.source-hidden,
    #workspace.source-hidden.with-inspector {
        height: calc(100dvh - 178px);
        min-height: 520px;
        display: flex;
        flex-direction: column
    }

    #sourcePane {
        min-height: 170px;
        max-height: 34%;
        height: 32%
    }

    #splitter {
        display: none
    }

    #canvasPane {
        flex: 1;
        min-height: 250px
    }

    #inspector {
        height: 210px;
        min-height: 210px;
        border-left: 0;
        border-top: 1px solid #cbd5e1
    }

    #workspace.source-hidden #sourcePane {
        display: none
    }

    .title {
        margin-right: 4px
    }

    .tag {
        display: none
    }

    .topbar,
    .toolbar {
        padding: 8px
    }

    .toolbar button {
        padding: 6px 8px
    }

    #events {
        display: none
    }
}


/* UI refresh: primary controls stay visible; secondary controls live in native menus. */
:root {
    color-scheme: light;
    --bg: #f1f5f9;
    --panel: #fff;
    --panel2: #fff;
    --border: #dbe4ee;
    --text: #17283e;
    --muted: #607187;
    --accent: #1676ac;
    --green: #138367;
    --danger: #b92f49;
    --surface: #fff;
    --surfaceText: #253349;
    --shadow: 0 18px 42px #16283d1b
}

body {
    background: var(--bg)
}

#app {
    min-height: 480px
}

header {
    background: #fff;
    border-color: #e0e8f1;
    box-shadow: 0 2px 14px #20334e08;
    z-index: 9
}

.topbar {
    min-height: 68px;
    padding: 11px 20px;
    gap: 14px;
    border-color: #e8edf3
}

.toolbar {
    min-height: 54px;
    gap: 11px;
    padding: 8px 20px;
    flex-wrap: nowrap;
    background: #f9fbfd;
    border-color: #e4ebf2
}

.title {
    min-width: 202px;
    margin-right: 2px
}

.logo {
    width: 38px;
    height: 38px;
    font-size: 21px;
    border-radius: 11px;
    background: #dff4fc;
    color: #0b6d9b
}

.title h1 {
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.25px;
    line-height: 1.2
}

.title .small {
    font-size: 11px
}

.project-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.project-picker details {
    position: relative
}

.project-picker .tool-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    color: #94a3b8
}

.project-picker select {
    max-width: min(32vw, 270px);
    width: clamp(175px, 18vw, 270px);
    background: #fff;
    color: #24354a;
    padding: 7px 10px;
    border: 1px solid #d7e1ec
}

.tag {
    color: #356f8f;
    border-color: #ddeaf0
}

.separator {
    height: 24px;
    background: #dce4ec;
    margin: 0 3px;
    flex: none
}

button,
select,
input:not([type=checkbox]),
textarea {
    color: #24354a;
    background: #fff;
    border-color: #d7e1ec
}

button {
    border-radius: 8px;
    padding: 7px 11px;
    font-weight: 550
}

button:hover:not(:disabled) {
    background: #edf5fa;
    border-color: #a4c7dd
}

.primary,
.export-button {
    color: #fff;
    background: #0e7eaf;
    border-color: #0e7eaf;
    font-weight: 650
}

.primary:hover:not(:disabled),
.export-button:hover:not(:disabled) {
    background: #0d668f;
    border-color: #0d668f
}

button:focus-visible,
summary:focus-visible {
    outline: 2px solid #1684bd;
    outline-offset: 2px
}

.danger {
    color: #bf3752 !important
}

.button-group {
    background: #eff4f9;
    padding: 3px;
    border-radius: 11px;
    gap: 2px
}

.button-group button {
    background: transparent;
    border: 0;
    border-radius: 8px !important;
    color: #637389;
    padding: 8px 13px
}

.button-group .active {
    background: #fff;
    border: 0;
    box-shadow: 0 1px 4px #13334d18;
    color: #115b84
}

.topbar>.icon {
    background: #fff;
    font-size: 17px;
    width: 35px;
    height: 35px;
    padding: 5px;
    color: #4b627a
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0
}

.toolbar-left {
    min-width: 0
}

.toolbar-right {
    gap: 7px
}

.toolbar .mermaid-only,
.toolbar .visual-only {
    display: none
}

body[data-mode=mermaid] .toolbar .mermaid-only {
    display: inline-flex
}

body[data-mode=visual] .toolbar .visual-only {
    display: inline-flex
}

.toolbar .icon {
    width: 35px;
    justify-content: center;
    padding: 7px
}

.search-wrap {
    min-width: 140px;
    flex: 0 1 220px
}

.search-wrap input {
    width: 100%;
    min-width: 120px;
    padding: 8px 11px;
    border: 1px solid #dbe4eb;
    border-radius: 9px;
    font-size: 13px;
    background: #fff;
    color: #26374c
}

.toolbar details {
    position: relative;
    flex: none
}

.toolbar details>summary,
.project-picker details>summary {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    list-style: none;
    border: 1px solid #d7e1ec;
    border-radius: 8px;
    padding: 7px 11px;
    background: #fff;
    color: #31455f;
    font-weight: 550;
    white-space: nowrap;
    min-height: 34px
}

.project-picker details>summary {
    font-size: 20px;
    width: 34px;
    line-height: 1;
    padding: 2px 9px
}

.project-picker details>summary::after {
    content: none
}

.toolbar details>summary::-webkit-details-marker,
.project-picker details>summary::-webkit-details-marker {
    display: none !important
}

.toolbar details > summary::marker,
.project-picker details > summary::marker {
    content: ""
}

.toolbar details > summary > i:first-child {
    margin-right: 7px
}

.toolbar details > summary > .summary-caret {
    margin-left: 7px;
    color: #7890a5;
    font-size: 10px
}

.toolbar details[open]>summary,
.project-picker details[open]>summary {
    background: #eaf4fa;
    border-color: #9ec7df
}

.dropdown-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 9px);
    right: 0;
    width: 220px;
    max-height: min(65vh, 560px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dce6f0;
    box-shadow: 0 15px 35px #20334e22;
    padding: 6px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.dropdown-menu-left {
    right: auto;
    left: 0
}

.dropdown-menu button {
    width: 100%;
    border: 0;
    text-align: left;
    justify-content: flex-start;
    white-space: normal;
    padding: 9px 11px;
    border-radius: 7px;
    background: #fff;
    color: #293f56;
    font-weight: 500
}

.dropdown-menu button:hover:not(:disabled) {
    background: #f1f6fa;
    border: 0
}

.menu-divider {
    height: 1px;
    background: #e8edf3;
    margin: 5px 4px
}

.menu-caption {
    padding: 7px 10px 1px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    color: #8b9bad
}

.style-dropdown {
    width: 275px;
    padding: 15px
}

.style-dropdown label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #536779;
    margin: 0 0 13px
}

.style-dropdown label:last-child {
    margin-bottom: 0
}

.style-dropdown select {
    min-width: 95px;
    max-width: 132px;
    padding: 5px
}

.style-dropdown input[type=color] {
    height: 29px;
    width: 38px;
    padding: 2px
}

.toolbar button:disabled {
    opacity: .4
}

#workspace {
    grid-template-columns: minmax(250px, 36%) 7px minmax(300px, 1fr)
}

#workspace.with-inspector {
    grid-template-columns: minmax(250px, 31%) 7px minmax(300px, 1fr) 286px
}

#workspace.source-hidden.with-inspector {
    grid-template-columns: minmax(300px, 1fr) 286px
}

#sourcePane {
    background: #142238
}

#source {
    background: #142238;
    color: #e3efff;
    padding: 18px;
    font-size: 13px;
    line-height: 1.6
}

#sourcePane .panehead {
    background: #192940;
    color: #bdcee3;
    border-color: #2d3e56
}

#sourceHint {
    background: #192940;
    border-color: #2d3e56;
    color: #90a5be
}

#splitter {
    background: #e7edf3;
    border: 0
}

#splitter:after {
    color: #8da1b8
}

.panehead {
    min-height: 44px;
    height: 44px
}

.panehead strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em
}

#canvasPane .panehead {
    background: #fbfcfe;
    border-color: #e4ebf2;
    color: #475d73
}

#canvasPane .panehead .small {
    font-size: 11px;
    color: #9aa7b8
}

#canvasPane,
#previewScroll,
#networkWrap {
    background: #fff
}

#previewScroll {
    padding: 22px
}

#network {
    background: radial-gradient(#d9e4ee .8px, transparent .8px) 0 0/24px 24px
}

#networkBadge {
    bottom: 12px;
    left: 12px;
    border: 1px solid #e6ebf1;
    background: #fffffff0;
    color: #728196;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10px
}

#groupFilters {
    background: #f9fbfe;
    border-color: #e7edf3
}

#inspector {
    background: #f8fafc;
    border-color: #e0e7f0
}

#inspector .panehead {
    background: #f8fafc;
    color: #41566d
}

#properties {
    padding: 14px
}

#properties .inspector-btn {
    background: #ecf5fa;
    border-color: #c9e3ef;
    color: #2b617d
}

#contextMenu {
    background: #fff;
    color: #273b53;
    border: 1px solid #dce7f0;
    box-shadow: 0 16px 36px #1e344d33
}

#contextMenu button {
    color: #293e55
}

#contextMenu button:hover {
    background: #edf4fa
}

footer {
    background: #fff;
    color: #708197;
    border-color: #e1eaf3;
    padding: 8px 18px
}

#events {
    color: #98a5b5
}

#status[data-kind=error] {
    color: #c93450
}

#status[data-kind=ok] {
    color: #148367
}

dialog {
    background: #fff;
    color: #263c55;
    border-color: #dae4ee;
    box-shadow: 0 24px 70px #0d223943
}

dialog::backdrop {
    background: #10243c99
}

dialog label,
dialog p,
dialog li {
    color: #4c647c
}

dialog input,
dialog textarea,
dialog select {
    background: #fff;
    color: #20364b;
    border: 1px solid #d2dfe9
}

dialog h2 {
    color: #182d43
}

#helpDialog kbd {
    background: #eaf3fa;
    border: 1px solid #b8d8e8;
    color: #145879
}

@media(max-width:1320px) {
    .project-picker .tool-label {
        display: none
    }

    .title {
        min-width: 181px
    }

    .toolbar {
        padding: 8px 13px;
        gap: 7px
    }

    .topbar {
        padding: 9px 13px
    }

    .toolbar-left,
    .toolbar-right {
        gap: 4px
    }

    .search-wrap {
        flex: 0 1 160px
    }

    .toolbar button {
        padding: 7px 8px
    }
}

@media(max-width:1320px) {
    .topbar {
        flex-wrap: wrap
    }

    .title {
        min-width: 185px
    }

    .toolbar {
        flex-wrap: wrap
    }

    .toolbar .spacer {
        flex: 1
    }

    .search-wrap {
        flex: 0 1 160px
    }

    #workspace.with-inspector {
        grid-template-columns: minmax(240px, 27%) 7px minmax(280px, 1fr) 250px
    }

    #workspace.source-hidden.with-inspector {
        grid-template-columns: minmax(280px, 1fr) 250px
    }
}

@media(max-width:760px) {
    .topbar {
        gap: 7px
    }

    .title {
        min-width: 0
    }

    .project-picker select {
        width: 190px
    }

    .modes {
        margin-left: auto
    }

    .toolbar {
        gap: 8px
    }

    #workspace,
    #workspace.with-inspector,
    #workspace.source-hidden,
    #workspace.source-hidden.with-inspector {
        height: calc(100dvh - 215px)
    }

    #events {
        display: none
    }
}

.topbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    min-height: 60px;
    padding: 8px 14px;
    overflow-x: auto;
    scrollbar-width: thin
}

.topbar > .spacer {
    display: block;
    flex: 1 1 8px;
    min-width: 8px
}

.topbar > .spacer:nth-of-type(2) {
    display: none
}

.topbar .project-picker {
    flex: 0 0 auto
}

.topbar .toolbar {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 38px;
    padding: 0;
    border: 0;
    background: transparent
}

.topbar .modes {
    flex: 0 0 auto;
    margin-left: 0
}

.topbar > .icon {
    flex: 0 0 36px
}

.toolbar-left,
.toolbar-right {
    gap: 6px
}

.toolbar-left .icon,
.toolbar-right button,
.toolbar details > summary {
    min-width: 36px;
    min-height: 36px
}

.toolbar .icon {
    height: 36px;
    font-size: 14px
}

.toolbar-left button,
.toolbar-right > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.project-picker details > summary i {
    font-size: 14px
}

.button-group button i {
    margin-right: 5px;
    font-size: 12px
}

.topbar > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid #d7e1ec;
    border-radius: 8px
}

button {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .12s ease
}

button:active:not(:disabled) {
    transform: translateY(1px)
}

#sourcePane .panehead {
    background: #192940;
    color: #d3e2f2
}

#sourcePane .panehead .small {
    color: #91a8c1;
    font-size: 11px
}

#source {
    caret-color: #63cbe8
}

#splitter:hover {
    background: #d4e5ef
}

#splitter:hover:after {
    color: #1676ac
}

#previewScroll {
    background: #f7f9fc
}

@media(max-width:760px) {
    .topbar {
        gap: 6px;
        padding: 7px 10px
    }

    .project-picker select {
        width: 150px;
        min-width: 120px
    }

    .topbar .toolbar {
        gap: 6px
    }
}

header {
    position: relative;
    z-index: 20
}

.topbar {
    overflow: visible
}

.topbar .toolbar {
    position: relative;
    z-index: 1
}

.toolbar details[open] {
    z-index: 2
}

@media(max-width:1320px) {
    .topbar {
        flex-wrap: wrap;
        overflow: visible
    }

    .topbar > .spacer {
        display: none
    }

    .topbar .project-picker {
        margin-right: auto
    }

    .topbar .toolbar {
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        order: 2
    }

    .topbar .toolbar-left,
    .topbar .toolbar-right {
        flex-wrap: wrap
    }
}

@media(prefers-reduced-motion: reduce) {
    button {
        transition: none
    }
}

/* Multiple Mermaid diagrams in one workspace */
#preview.multi-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-content: start;
    justify-content: stretch;
    gap: 18px;
    width: 100%;
}
.mermaid-card {
    min-width: 0;
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px #1e36520b;
}
.mermaid-card-title {
    background: #f6f9fd;
    padding: 11px 14px;
    border-bottom: 1px solid #e3eaf3;
    color: #29445e;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mermaid-card-title small { color: #8291a5; font-size: 11px; font-weight: 500; }
.mermaid-card-body { overflow: auto; padding: 20px 14px; min-height: 140px; }
.mermaid-card-body svg { max-width: none; height: auto; }
#diagramNetworks {
    display: flex;
    gap: 7px;
    align-items: center;
    flex: none;
    padding: 8px 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e4ebf2;
    background: #f7fafd;
}
#diagramNetworks[hidden] { display: none; }
.diagram-networks-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #7a90a7; margin-right: 3px; }
.network-pill { background: white; color: #476176; border: 1px solid #d3dce9; font-size: 11px; padding: 6px 10px; border-radius: 7px; }
.network-pill.current { border-color: #2685a9; color: #176a87; background: #edf9ff; }
.network-pill:hover { border-color: #2685a9; }