/* Shared application shell, themes, diagram cards and reusable controls. */
@font-face { font-family: "Google Sans"; src: url("/static/vendor/fonts/google-sans.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Google Sans Code"; src: url("/static/vendor/fonts/google-sans-code.ttf") format("truetype"); font-style: normal; font-weight: 300 800; font-display: swap; }
:root{font-family: "Google Sans", Arial, sans-serif; font-optical-sizing: auto; color: var(--ink); background: var(--canvas); font-synthesis: none; --canvas: #f1f1f1; --surface: #f3f4f6; --surface-raised: #ffffff; --field: #ffffff; --ink: #384055; --muted: #697485; --subtle: #919baa; --border: #e1e5eb; --border-strong: #b9c2cf; --accent: #b74638; --accent-hover: #963729; --accent-soft: #faede9; --accent-border: #cc8a76; --on-accent: #ffffff; --line: #a0a3aa; --dot: #c5c7ca; --shadow: 40 45 55;}
*{box-sizing: border-box;}
body{margin: 0px; overflow: hidden;}
button,input,select{font: inherit;}
button{cursor: pointer;}
button,input,select{outline: none;}
button:focus-visible,input:focus-visible,select:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
button{transition: background 0.15s, color 0.15s;}
button:disabled{cursor: default; opacity: 0.35;}
button svg{pointer-events: none;}
svg.icon{width: 19px; height: 19px; vertical-align: middle; flex-shrink: 0; stroke-width: 1.7;}
button{border: 0px; background: none; color: inherit;}
input,select{min-width: 0px;}
input::placeholder{color: var(--subtle);}
button:hover{background: var(--accent-soft);}
[hidden]{display: none !important;}
.topbar{height: 56px; background: var(--surface-raised); display: flex; align-items: center; padding: 0px 20px; gap: 20px; color: var(--ink); box-shadow: 0 2px 10px rgb(var(--shadow) / .08); position: relative; z-index: 20;}
.brand{display: flex; align-items: center; color: var(--ink); text-decoration: none; font-size: 23px; font-weight: 750; letter-spacing: -1.1px; gap: 0px;}
.brand > span:nth-child(2){color: var(--accent);}
.brand-icon{margin-right: 10px; display: flex;}
.brand-icon .icon{width: 30px; height: 30px;}
.beta{font-size: 8px; font-weight: 600; letter-spacing: 1px; background: var(--surface); border: 1px solid var(--border-strong); padding: 4px 5px; border-radius: 4px; margin-left: 10px;}
.top-divider{height: 24px; width: 1px; background: var(--border-strong);}
.top-link{display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); padding: 8px 0px;}
.top-link svg{width: 13px;}
.top-link:hover{background: none; color: var(--accent);}
.file-wrap{position: relative;}
.mode-switch{display: flex; align-items: center; padding: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; gap: 4px;}
.mode-switch button{font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 5px;}
.mode-switch button:hover{background: var(--surface);}
.mode-switch button.active{color: var(--on-accent); background: var(--accent); box-shadow: 0 1px 4px rgb(var(--shadow) / .08);}
.mode-switch svg{width: 16px; height: 16px;}
.soon{font-size: 7px; letter-spacing: 0.6px; opacity: 0.75; border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 3px;}
.top-spacer{flex: 1 1 0%;}
.export-button{background: var(--accent); color: var(--on-accent); border-radius: 7px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 3px rgb(var(--shadow) / .12);}
.export-button svg{width: 15px; height: 15px;}
.menu{position: absolute; top: 43px; left: -12px; min-width: 190px; padding: 6px; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border); box-shadow: 0 8px 32px rgb(var(--shadow) / .12); border-radius: 9px; z-index: 50;}
.menu button{display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-size: 12px; padding: 11px; border-radius: 5px;}
.menu-separator{height: 1px; background: var(--border); margin: 5px;}
.workspace{display: flex; height: calc(100dvh - 56px);}
.sidebar{width: 330px; flex-shrink: 0; background: var(--surface-raised); display: flex; flex-direction: column; border-right: 1px solid var(--border); z-index: 10;}
.sidebar-heading{height: 46px; min-height: 46px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0px 13px 0px 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 4px 11px rgb(var(--shadow) / .18); position: relative; z-index: 2;}
.sidebar-heading h1{font-size: 18px; color: var(--ink); margin: 0px; display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.2px;}
.sidebar-heading h1 .icon{width: 22px; height: 22px; color: var(--muted);}
.sidebar-heading-actions{display: flex; align-items: center; gap: 9px;}
.sidebar-heading-actions .icon-button{color: var(--ink); width: 30px; height: 32px;}
.sidebar-heading-actions .icon{width: 22px; height: 22px;}
.icon-button{width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; flex-shrink: 0; color: var(--muted);}
.icon-button.accent{background: var(--accent-soft); color: var(--accent); width: 28px; height: 28px;}
.search-wrap{display: flex; align-items: center; flex: 1 1 0%; min-width: 0px;}
.search-wrap input{width: 100%; height: 34px; border: 1px solid var(--border); border-radius: 5px; padding: 6px 9px; background: var(--surface-raised); color: var(--ink); font-size: 14px;}
.class-list{flex: 1 1 0%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;}
.class-editor,.node{--accent: var(--class-color); --accent-hover: var(--class-dark); --accent-soft: color-mix(in srgb,var(--class-color) 15%,var(--surface-raised)); --accent-border: color-mix(in srgb,var(--class-color) 65%,var(--surface-raised));}
.class-editor{border-bottom: 1px solid var(--border); border-left: 9px solid var(--class-color);}
.class-editor:first-child{border-top: 1px solid var(--border);}
.class-editor-header{display: flex; align-items: center; gap: 3px; min-height: 42px; padding: 4px 8px 4px 12px; background: var(--surface); cursor: pointer; transition: background 0.15s;}
.class-editor.selected .class-editor-header{background: color-mix(in srgb,var(--class-color) 20%,var(--surface-raised));}
.class-editor.selected .class-name-button{color: var(--class-dark);}
.class-list:has(.class-editor.selected) .class-editor:not(.selected){opacity: 0.5;}
.class-editor .class-editor-header:hover,.class-editor .class-editor-header:focus-within{background: color-mix(in srgb,var(--class-color) 20%,var(--surface-raised));}
.class-name-button,.class-name-input{flex: 1 1 0%; min-width: 0px; width: 0px; margin: 0px; padding: 5px 0px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 24px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.class-name-button:hover{background: transparent;}
.class-name-input{border: 0px; border-radius: 3px; background: var(--field); padding: 5px 6px; color: var(--ink);}
.class-editor-header .icon-button{width: 28px; height: 30px; color: var(--subtle); border: 1px solid transparent; border-radius: 5px;}
.class-editor-header .icon-button svg{width: 17px; height: 17px;}
.class-editor-header .icon-button:hover,.class-editor-header .icon-button[aria-expanded="true"]{color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft);}
.class-hover-action{opacity: 0; pointer-events: none;}
.class-editor-header:hover .class-hover-action,.class-editor-header:focus-within .class-hover-action{opacity: 1; pointer-events: auto;}
.class-editor-body{padding: 7px 7px 0px; background: var(--surface-raised);}
.member-row{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(66px, 0.72fr) 24px 22px 22px; gap: 4px; margin-bottom: 6px; align-items: center;}
.member-row input{width: 100%; height: 34px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--ink); background: var(--surface-raised); font-size: 14px; box-shadow: 0 1px 2px rgb(var(--shadow) / .08);}
.member-row .type-input{font-size: 13px; color: var(--ink);}
.nullable,.delete-member{display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; border: 0px; border-radius: 4px; padding: 0px; background: transparent; color: var(--muted);}
.nullable{font-size: 12px; font-weight: 650;}
.nullable.on{color: var(--accent); background: var(--accent-soft);}
.nullable:hover{background: var(--surface); color: var(--muted);}
.delete-member svg{width: 17px; height: 17px;}
.delete-member:hover{color: var(--accent); background: var(--accent-soft);}
.class-editor-body [data-member]{position: relative;}
.member-drag-handle{position: absolute; left: -15px; top: 5px; width: 15px; height: 24px; padding: 0px; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: grab; opacity: 0; z-index: 1; border-radius: 3px;}
.member-drag-handle svg{pointer-events: none; flex-shrink: 0;}
.member-drag-handle,.member-drag-handle:hover{background: var(--surface);}
.member-selected > .member-drag-handle,.member-selected > .member-drag-handle:hover{background: var(--accent-soft);}
[data-member]:hover > .member-drag-handle,.member-drag-handle:focus-visible{opacity: 1;}
.member-drag-handle:focus-visible{outline-offset: -2px;}
.member-row input:focus{outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);}
.class-editor-body [data-member]:hover{background: var(--surface); box-shadow: 0 0 0 3px var(--surface); border-radius: 4px;}
.member-drag-handle:active{cursor: grabbing;}
.member-drag-source{opacity: 0.45;}
.member-drop-before::before,.member-drop-after::after{content: ""; position: absolute; left: 0px; right: 0px; height: 2px; background: var(--accent); z-index: 2; pointer-events: none;}
.member-drop-before::before{top: -3px;}
.member-drop-after::after{bottom: -3px;}
.class-editor-footer{display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 0px;}
.member-add-button{max-width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: 4px; padding: 6px 8px; background: var(--surface-raised); color: var(--ink); font-size: 12px; font-weight: 650; line-height: 16px; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgb(var(--shadow) / .08);}
.member-add-button:hover{background: var(--surface); border-color: var(--border-strong);}
.class-options-menu{position: fixed; min-width: 190px; z-index: 60;}
.class-options-menu .menu-colors{display: grid; grid-template-columns: repeat(6, 17px); gap: 12px; padding: 10px 12px;}
.class-options-menu .color-option{width: 17px; height: 17px; padding: 0px; border-radius: 50%; background: var(--swatch); border: 3px solid var(--surface-raised); box-shadow: transparent 0px 0px 0px 1px;}
.class-options-menu .color-option.active{box-shadow: 0 0 0 1px var(--swatch);}
.class-options-menu .delete-class-option{color: var(--accent);}
.sidebar-bottom{padding: 10px 14px 12px; border-top: 1px solid var(--border); background: var(--surface-raised);}
.add-class-button{width: 100%; display: flex; justify-content: center; gap: 7px; align-items: center; border: 1px dashed var(--accent-border); border-radius: 6px; padding: 11px; color: var(--accent); font-size: 13px; font-weight: 600;}
.add-class-button svg{width: 14px; height: 14px;}
.main-panel{flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column;}
.document-bar{height: 56px; flex-shrink: 0; background: var(--surface-raised); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0px 27px; gap: 17px;}
.document-name{display: flex; align-items: center; gap: 12px; flex: 1 1 0%; min-width: 0px;}
.document-icon{display: flex; align-items: center; justify-content: center; width: 34px; height: 38px; border: 1px solid var(--border); border-radius: 7px; color: var(--accent); background: var(--surface);}
.document-name > div{min-width: 0px;}
.document-name input{display: block; font-size: 15px; letter-spacing: -0.2px; font-weight: 650; color: var(--ink); border: 0px; background: transparent; padding: 2px 0px; width: 260px; max-width: 100%;}
.document-subtitle{font-size: 10px; color: var(--muted); display: flex; gap: 7px; margin-top: 5px;}
.save-status{display: flex; gap: 6px; align-items: center; font-size: 10px; white-space: nowrap; color: var(--muted);}
.save-status svg{width: 14px; height: 14px; color: var(--accent);}
.canvas{position: relative; overflow: hidden; flex: 1 1 0%; background-color: var(--canvas); background-image: radial-gradient(var(--dot) .8px,transparent .8px); background-size: 18px 18px; outline: 0px; touch-action: none;}
.canvas.pan-mode{cursor: grab;}
.canvas.dragging{cursor: grabbing;}
.world{position: absolute; top: 0px; left: 0px; transform-origin: 0px 0px; width: 1px; height: 1px;}
.icon-button.active{background: var(--accent-soft); color: var(--accent);}
.node{position: absolute; width: 290px; background: var(--surface-raised); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 3px solid var(--class-color); border-radius: 8px; box-shadow: 0 4px 14px rgb(var(--shadow) / .08); user-select: none; overflow: visible;}
.node.selected{box-shadow: 0 0 0 3px var(--accent-soft),0 5px 20px rgb(var(--shadow) / .12); border-color: var(--class-color);}
.node-header{height: 46px; border-radius: 5px 5px 0px 0px; background: var(--class-light); display: flex; align-items: center; padding: 0px 18px; gap: 10px; border-bottom: 1px solid color-mix(in srgb,var(--class-color) 18%,var(--surface-raised)); cursor: grab; touch-action: none;}
.node-name{text-align: center; font-size: 18px; font-weight: 750; letter-spacing: -0.15px; flex: 1 1 0%; color: var(--class-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.node-member{font-family: "Google Sans Code", monospace; font-size: 12px; display: flex; align-items: center; gap: 8px; min-height: 25px; color: var(--muted); white-space: nowrap;}
.node-member .member-name{overflow: hidden; text-overflow: ellipsis;}
.node-member .member-type{margin-left: auto; color: var(--muted); font-size: 11px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; padding-left: 8px;}
.empty-member{font-size: 10px; color: var(--subtle); padding: 6px 0px; font-style: italic;}
.connections{position: absolute; overflow: visible; top: 0px; left: 0px; width: 1px; height: 1px; pointer-events: none;}
.relation-line{fill: none; stroke: var(--line); stroke-width: 1.6;}
.relation-hit{fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer;}
.relation-hit:hover + .relation-line{stroke: var(--accent); stroke-width: 2.2;}
.relation-label{font: 10px "Google Sans", sans-serif; fill: var(--muted); paint-order: stroke; stroke: var(--canvas); stroke-width: 6; stroke-linejoin: round; pointer-events: none;}
.empty-state{position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; width: 80%; color: var(--subtle);}
.empty-state > svg{width: 45px; height: 45px; color: var(--accent);}
.empty-state h2{font-size: 20px; font-weight: 550; color: var(--ink);}
.empty-state p{font-size: 12px; margin-bottom: 22px;}
.primary-button{background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: 6px; padding: 10px 15px; font-size: 12px; font-weight: 600;}
.primary-button:hover{background: var(--accent-hover);}
.secondary-button{border: 1px solid var(--border); padding: 10px 15px; border-radius: 6px; font-size: 12px; background: var(--surface-raised);}
.danger-button{color: var(--accent); border: 1px solid var(--accent-border); padding: 10px 15px; border-radius: 6px; font-size: 12px;}
.toast{position: fixed; bottom: 55px; left: 50%; transform: translateX(-50%); background: rgb(37, 45, 59); color: var(--on-accent); padding: 12px 20px; border-radius: 8px; font-size: 12px; box-shadow: 0 5px 25px rgb(var(--shadow) / .18); z-index: 100; max-width: 90vw;}
.no-results{padding: 25px; font-size: 12px; color: var(--subtle); text-align: center;}
dialog{border: 1px solid var(--border); border-radius: 12px; padding: 27px; width: 440px; max-width: calc(-32px + 100vw); color: var(--ink); box-shadow: 0 20px 80px rgb(var(--shadow) / .18);}
dialog::backdrop{background: rgba(42, 37, 60, 0.267); backdrop-filter: blur(3px);}
.dialog-heading{display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;}
.dialog-heading h2{margin: 0px; font-size: 19px; letter-spacing: -0.4px;}
.dialog-description{font-size: 12px; line-height: 1.7; color: var(--muted); margin: 0px 0px 21px;}
.dialog-field{display: flex; flex-direction: column; gap: 7px; margin: 15px 0px; font-size: 11px; font-weight: 600;}
.dialog-field input,.dialog-field select{width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); color: var(--ink); font-size: 12px;}
.dialog-row{display: flex; gap: 15px;}
.dialog-row > *{flex: 1 1 0%; min-width: 0px;}
.dialog-actions{margin-top: 24px; display: flex; justify-content: flex-end; gap: 8px;}
.dialog-actions .danger-button{margin-right: auto;}
.shortcut{display: flex; justify-content: space-between; font-size: 12px; padding: 9px 0px; border-bottom: 1px solid var(--border);}
.shortcut kbd{font-family: inherit; color: var(--subtle); font-size: 11px;}
.help-copy{font-size: 12px; line-height: 1.8; color: var(--muted);}
@media (min-width: 1600px){
.sidebar{width: 350px;}
.node{width: 300px;}
}
@media (max-width: 1100px){
.topbar{gap: 16px; padding: 0px 18px;}
.mode-switch button{padding: 9px;}
.sidebar{width: 315px;}
.save-status{font-size: 0px; gap: 0px;}
.document-bar{padding: 0px 20px;}
.document-name input{width: 210px;}
}
@media (max-width: 760px){
.topbar{height: 60px; gap: 12px; padding: 0px 12px;}
.brand{font-size: 21px;}
.beta,.top-divider,.file-wrap,.mode-switch .soon,.mode-switch svg{display: none;}
.mode-switch button{font-size: 10px; padding: 7px;}
.mode-switch{gap: 1px; padding: 3px;}
.export-button{font-size: 0px; gap: 0px; padding: 9px;}
.export-button svg:last-child{display: none;}
.top-spacer{display: none;}
.workspace{height: calc(100dvh - 60px);}
.sidebar{width: 270px;}
.document-bar{height: 52px; padding: 0px 14px;}
.document-icon,.document-subtitle,.save-status{display: none;}
.document-name input{width: 150px; font-size: 12px;}
.document-bar > .icon-button{display: none;}
.sidebar-bottom{padding: 12px;}
}
@media (prefers-reduced-motion: reduce){
*{transition: none !important;}
}
@media (max-width: 480px){
.topbar{gap: 8px; padding: 0px 10px;}
.brand{font-size: 18px;}
.brand-icon{margin-right: 6px;}
.brand-icon .icon{width: 24px; height: 24px;}
.mode-switch button{padding: 6px 5px;}
}
:root[data-theme="dark"]{color-scheme: dark; --canvas: #191c22; --surface: #242831; --surface-raised: #20242c; --field: #191d24; --ink: #e5e8ef; --muted: #acb5c5; --subtle: #8994a7; --border: #363d49; --border-strong: #535e70; --accent: #ed9486; --accent-hover: #c76859; --accent-soft: #45302f; --accent-border: #9d6258; --on-accent: #201b1b; --line: #929cad; --dot: #39414e; --shadow: 0 0 0;}
:root[data-theme="dark"] dialog{background: var(--surface-raised);}
@media (max-width: 1100px){
.member-row{grid-template-columns: minmax(0px, 1fr) minmax(58px, 0.72fr) 22px 19px 20px; gap: 4px;}
}
@media (max-width: 760px){
.class-editor{border-left-width: 8px;}
.class-editor-header{padding-left: 10px; padding-right: 5px;}
.class-editor-header .icon-button{width: 24px;}
.member-row{grid-template-columns: minmax(0px, 1fr) minmax(48px, 0.72fr) 18px 17px 18px; gap: 3px;}
.member-add-button{padding: 7px 9px; font-size: 10px;}
}
@media (hover: none){
.class-hover-action{display: none;}
}
svg.material-icon{fill: currentcolor; stroke: none; stroke-width: 0;}
.sidebar input::placeholder{color: var(--muted); opacity: 1;}
@media (max-width: 760px){
.sidebar-heading{padding: 0px 10px 0px 13px;}
.sidebar-heading h1{font-size: 18px;}
.sidebar-heading-actions{gap: 4px;}
.member-row input{font-size: 13px; padding: 7px 6px;}
.member-row .type-input{font-size: 12px;}
.member-add-button{font-size: 11px;}
}
.class-footer-tools{display: flex; align-items: center; gap: 2px; margin-right: auto;}
.class-footer-tools .icon-button{width: 26px; height: 28px; border: 1px solid transparent; color: var(--subtle);}
.class-footer-tools .icon{width: 18px; height: 18px;}
.class-footer-tools .class-color-button{color: var(--class-color);}
.class-footer-tools .icon-button:hover,.class-footer-tools .icon-button[aria-expanded="true"]{background: var(--surface); border-color: var(--border);}
.class-color-picker{position: fixed; z-index: 65; display: grid; grid-template-columns: repeat(4, 42px); gap: 14px; padding: 18px; background: rgb(37, 45, 59); border: 1px solid rgb(57, 66, 83); border-radius: 7px; box-shadow: 0 8px 24px rgb(var(--shadow) / .18);}
.class-color-picker::before{content: ""; position: absolute; top: -7px; left: calc(var(--pointer-x) - 6px); width: 12px; height: 12px; background: rgb(37, 45, 59); transform: rotate(45deg);}
.class-color-picker.above::before{top: auto; bottom: -7px;}
.palette-swatch{position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0px; border-radius: 8px; background: var(--swatch); border: 2px solid transparent;}
.palette-swatch:hover{background: var(--swatch); filter: brightness(1.1); border-color: rgba(255, 255, 255, 0.65);}
.palette-swatch:focus-visible{outline: rgb(255, 255, 255) solid 2px; outline-offset: 3px;}
.palette-swatch .icon{width: 23px; height: 23px; color: var(--on-accent); background: rgba(0, 0, 0, 0.07); border-radius: 50%;}
@media (max-width: 760px){
.class-footer-tools{gap: 0px;}
.class-footer-tools .icon-button{width: 22px;}
.class-editor-footer{gap: 4px;}
.member-add-button{padding: 6px; font-size: 11px;}
}
.node-name{min-width: 0px; max-width: 100%; flex: 0 1 auto; margin-inline: auto; padding: 4px 6px; cursor: text; border-radius: 3px; touch-action: none;}
.node-name:hover{background: rgba(255, 255, 255, 0.25);}
.node-name-input{width: auto; min-width: 2ch; max-width: 100%; flex: 0 1 auto; margin-inline: auto; border: 1px solid var(--class-color); border-radius: 4px; padding: 4px 6px; background: var(--field); color: var(--class-dark); text-align: center; font-size: 18px; font-weight: 750;}
.class-editor{position: relative;}
.class-editor-header[draggable="true"],.class-editor-header[draggable="true"] .class-name-button{cursor: grab;}
.class-editor.drag-source{opacity: 0.4;}
.class-editor.drop-before::before,.class-editor.drop-after::after{content: ""; position: absolute; left: 0px; right: 0px; height: 3px; background: var(--accent); z-index: 3; pointer-events: none;}
.class-editor.drop-before::before{top: 0px;}
.class-editor.drop-after::after{bottom: 0px;}
.topbar{background: var(--app-color,var(--accent)); color: rgb(255, 255, 255); border-bottom: 1px solid var(--app-hover,var(--accent-hover));}
.brand-icon{color: var(--accent);}
.export-button:hover{background: var(--accent-hover);}
.member-row input,.search-wrap input,.dialog-field input,.dialog-field select{background: var(--field);}
.add-class-button:hover{background: var(--accent-soft); border-color: var(--accent);}
.node-header{background: var(--class-light);}
.node.selected{border-color: var(--class-color); outline: 1.75px solid var(--class-color); box-shadow: 0 5px 20px rgb(var(--shadow) / .1);}
.connections{z-index: 0;}
#nodes{position: relative; z-index: 1;}
.node-member{cursor: pointer;}
.node-member:hover{background: var(--surface); border-radius: 4px;}
.node .node-member.member-selected,.class-editor .member-selected{background: var(--accent-soft); border-radius: 4px;}
.node .node-member.member-selected{box-shadow: 0 0 0 0 var(--accent-soft);}
.class-editor-body [data-member].member-selected{background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft);}
.node-name:hover{background: rgba(255, 255, 255, 0.376);}
.dialog-description,.help-copy{color: var(--muted);}
dialog{background: var(--surface-raised);}
::selection{background: var(--accent-soft); color: var(--ink);}
.topbar .brand,.topbar .top-link{color: rgb(255, 255, 255);}
.topbar .brand > span:nth-child(2){color: var(--app-soft,#ffe2dc);}
.topbar .beta{background: rgba(255, 255, 255, 0.086); border-color: rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255);}
.topbar .top-divider{background: rgba(255, 255, 255, 0.208);}
.topbar .top-link:hover{color: var(--app-soft,#ffe2dc);}
.topbar .mode-switch{background: rgba(0, 0, 0, 0.094); border-color: rgba(255, 255, 255, 0.14);}
.topbar .mode-switch button{color: var(--app-soft,#ffe2dc);}
.topbar .mode-switch button:hover{background: rgba(255, 255, 255, 0.08);}
.topbar .mode-switch button.active{background: rgba(255, 255, 255, 0.137); color: rgb(255, 255, 255);}
.topbar .soon{border-color: rgba(255, 255, 255, 0.27);}
.topbar .export-button{background: rgb(255, 255, 255); color: var(--app-color,var(--accent));}
.topbar .export-button:hover{background: var(--app-soft,#faede9);}
.canvas-footer{position: absolute; right: 12px; bottom: 12px; z-index: 5; width: max-content; max-width: calc(100% - 24px);}
.canvas-toolbar{display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px;}
.toolbar-group{display: flex; align-items: center; gap: 3px; flex-shrink: 0;}
.canvas-toolbar button{height: 34px; min-width: 34px; padding: 0px; border: 1px solid transparent; border-radius: 5px; background: rgb(224, 229, 233); color: rgb(113, 128, 151); box-shadow: rgba(38, 51, 72, 0.03) 0px 1px 2px;}
.canvas-toolbar .icon-button{width: 34px;}
.canvas-toolbar .icon{width: 21px; height: 21px;}
.canvas-toolbar button:hover:not(:disabled){background: rgb(211, 219, 226); color: rgb(70, 89, 116);}
.canvas-toolbar .icon-button.active{background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border);}
.canvas-toolbar button:disabled{opacity: 0.4;}
.toolbar-history,.toolbar-zoom{gap: 0px; border-radius: 5px; overflow: hidden;}
.toolbar-history button,.toolbar-zoom button{border-radius: 0px;}
.toolbar-history button + button,.toolbar-zoom button + button{border-left: 1px solid rgb(203, 211, 220);}
.canvas-toolbar .zoom-value{font-size: 13px; font-weight: 500; min-width: 56px; padding: 0px 9px;}
.canvas-toolbar button:focus-visible{outline-offset: -2px;}
#file-button{font-size: 18px; font-weight: 700; line-height: 24px; padding: 8px 4px; color: var(--app-soft,#ffe2dc);}
.document-save{flex-shrink: 0; white-space: nowrap; padding: 8px 4px; font-size: 18px; font-weight: 700; line-height: 24px; color: var(--accent); background: transparent; border: 0px; border-radius: 0px; box-shadow: none;}
.document-save:hover{background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border); border-radius: 9px;}
.document-bar .document-name{min-width: 0px;}
.document-name > div{min-width: 0px;}
@media (max-width: 760px){
.document-bar{gap: 8px;}
.document-name{flex: 1 1 0%;}
.document-name input{width: 100%; max-width: 150px;}
.document-save{padding: 7px 4px; font-size: 14px;}
}
:root[data-color]{--app-color: #b74638; --app-hover: #963729; --app-soft: #faede9; --app-dark-accent: #ed9486;}
:root[data-color="orange"]{--app-color: #a65315; --app-hover: #82400e; --app-soft: #fff0e1; --app-dark-accent: #f0b27c;}
:root[data-color="yellow"]{--app-color: #806500; --app-hover: #635000; --app-soft: #fff8d6; --app-dark-accent: #f5da49;}
:root[data-color="pink"]{--app-color: #ac386c; --app-hover: #882850; --app-soft: #fce5ee; --app-dark-accent: #f29abd;}
:root[data-color="green"]{--app-color: #347348; --app-hover: #255936; --app-soft: #e7f3ea; --app-dark-accent: #8ace9e;}
:root[data-color="teal"]{--app-color: #247873; --app-hover: #195b57; --app-soft: #e2f3f0; --app-dark-accent: #80cec5;}
:root[data-color="blue"]{--app-color: #3769b0; --app-hover: #28518c; --app-soft: #eaf1fc; --app-dark-accent: #99bdf2;}
:root[data-color="purple"]{--app-color: #8050ad; --app-hover: #653c8c; --app-soft: #f3ebfb; --app-dark-accent: #c5a4eb;}
:root[data-color]:not([data-color="red"]){--accent: var(--app-color); --accent-hover: var(--app-hover); --accent-soft: var(--app-soft); --accent-border: color-mix(in srgb,var(--app-color) 65%,var(--surface-raised));}
:root[data-color][data-theme="dark"]{--accent: var(--app-dark-accent); --accent-hover: color-mix(in srgb,var(--app-dark-accent) 75%,var(--app-color)); --accent-soft: color-mix(in srgb,var(--app-color) 28%,var(--surface-raised)); --accent-border: color-mix(in srgb,var(--app-dark-accent) 60%,var(--surface-raised));}

/* Keep diagram tints and controls subdued while their labels stay readable. */
:root[data-theme="dark"]{--class-color-weight:70%;--class-tint-weight:10%;--class-text-weight:15%;}
:root[data-theme="dark"] .topbar{background:var(--app-color);border-bottom-color:var(--app-hover);}
:root[data-theme="dark"] .topbar .mode-switch{background:var(--field);border-color:var(--border);}
:root[data-theme="dark"] .topbar .mode-switch button{color:var(--muted);}
:root[data-theme="dark"] .topbar .mode-switch button:hover{background:var(--surface);color:var(--ink);}
:root[data-theme="dark"] .topbar .mode-switch button.active{background:var(--accent-soft);color:var(--accent);}
:root[data-theme="dark"] .canvas-toolbar button{background:var(--surface);color:var(--muted);border-color:var(--border);}
:root[data-theme="dark"] .canvas-toolbar button:hover:not(:disabled){background:var(--border);color:var(--ink);}
:root[data-theme="dark"] .canvas-toolbar .icon-button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border);}
:root[data-theme="dark"] .toolbar-history button + button,:root[data-theme="dark"] .toolbar-zoom button + button{border-left-color:var(--border);}
:root[data-theme="dark"] .node-name:hover{background:var(--accent-soft);}
:root[data-theme="dark"] .class-list:has(.class-editor.selected) .class-editor:not(.selected){opacity:1;}

.document-bar > #expand-sidebar{display: inline-flex; flex-shrink: 0;}