.entity-diagram-panel > .studio-panel-content { display:flex; overflow:hidden; padding:0; }
.entity-diagram-panel > .studio-panel-content[hidden] { display:none; }
.entity-diagram { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; height:100%; color:var(--text, #263449); background:var(--panel, #fff); overflow:hidden; font-family:var(--sans, system-ui, sans-serif); }
.entity-diagram > :not(.entity-diagram-viewport) { flex-shrink:0; }
.entity-diagram-panel.is-maximized .entity-diagram { height:100%; min-height:0; }
.entity-diagram .entity-diagram-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:12px; background:var(--panel, #fff); border-bottom:1px solid var(--line, #d5dce7); }
.entity-diagram .entity-diagram-filters, .entity-diagram .entity-diagram-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.entity-diagram .entity-diagram-filters label { margin:0; }
.entity-diagram input[type="search"], .entity-diagram select { font:inherit; font-size:12px; min-height:34px; margin:0; padding:6px 9px; background:var(--panel, #fff); color:var(--text, #263449); border:1px solid var(--line, #d5dce7); border-radius:6px; max-width:220px; }
.entity-diagram input[type="search"] { width:210px; }
.entity-diagram .entity-diagram-check { display:inline-flex; flex-direction:row; gap:5px; align-items:center; font-size:12px; color:var(--text-dim, #65738a); white-space:nowrap; }
.entity-diagram .entity-diagram-check input { width:14px; height:14px; accent-color:var(--copper, #2764d1); }
.entity-diagram button { border:1px solid var(--line, #d5dce7); border-radius:6px; padding:6px 10px; min-height:34px; font:inherit; font-size:12px; font-weight:600; color:var(--text, #263449); background:var(--panel, #fff); cursor:pointer; white-space:nowrap; }
.entity-diagram button:hover:not(:disabled) { border-color:var(--copper, #2764d1); color:var(--copper, #2764d1); background:var(--panel-2, #f3f6fb); }
.entity-diagram button:disabled { opacity:.45; cursor:not-allowed; }
.entity-diagram button:focus-visible, .entity-diagram input:focus-visible, .entity-diagram select:focus-visible, .entity-diagram [tabindex]:focus-visible { outline:3px solid var(--copper, #2764d1); outline-offset:2px; }
.entity-diagram .entity-diagram-zoom { min-width:42px; text-align:center; font-size:12px; color:var(--text-dim, #65738a); }
.entity-diagram .entity-diagram-summary { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 20px; padding:9px 14px; color:var(--text-dim, #65738a); font-size:11px; border-bottom:1px solid var(--line, #d5dce7); }
.entity-diagram .entity-diagram-warning { padding:8px 14px; font-size:12px; color:var(--text, #263449); border-bottom:1px solid var(--line, #d5dce7); border-left:4px solid var(--bs-warning, #d99819); background:var(--panel-2, #f3f6fb); }
.entity-diagram .entity-diagram-viewport { position:relative; flex:1; min-height:0; overflow:hidden; background-color:var(--ink, #f7f9fc); background-image:radial-gradient(circle, var(--line, #d5dce7) 1px, transparent 1px); background-size:20px 20px; cursor:grab; touch-action:none; isolation:isolate; }
.entity-diagram .entity-diagram-viewport.is-panning { cursor:grabbing; }
.entity-diagram .entity-diagram-world { position:absolute; left:0; top:0; width:1px; height:1px; transform-origin:0 0; }
.entity-diagram .entity-diagram-lines { position:absolute; top:0; left:0; width:1px; height:1px; overflow:visible; pointer-events:none; z-index:0; }
.entity-diagram .entity-diagram-lines marker path { fill:var(--copper, #2764d1); }
.entity-diagram .entity-diagram-connection { fill:none; stroke:var(--text-dim, #65738a); stroke-width:1.6; stroke-linejoin:round; opacity:.65; }
.entity-diagram .entity-diagram-connection.is-selected { stroke:var(--copper, #2764d1); stroke-width:2.5; opacity:1; }
.entity-diagram .entity-diagram-card { position:absolute; left:0; top:0; width:320px; border:1px solid var(--line, #d5dce7); border-radius:9px; background:var(--panel, #fff); box-shadow:0 3px 12px rgb(20 36 60 / 8%); overflow:hidden; cursor:default; z-index:1; }
.entity-diagram .entity-diagram-card.is-selected { border-color:var(--copper, #2764d1); box-shadow:0 0 0 2px var(--copper, #2764d1), 0 6px 20px rgb(20 36 60 / 12%); z-index:2; }
.entity-diagram .entity-diagram-card.is-dragging { cursor:grabbing; z-index:3; }
.entity-diagram .entity-diagram-card-header { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:64px; padding:10px 12px; background:var(--panel-2, #f0f4fa); border-bottom:1px solid var(--line, #d5dce7); cursor:grab; user-select:none; touch-action:none; }
.entity-diagram .entity-diagram-card-header[data-module-accent="0"] { box-shadow:inset 0 3px var(--bs-primary, #2764d1); }
.entity-diagram .entity-diagram-card-header[data-module-accent="1"] { box-shadow:inset 0 3px var(--bs-success, #278257); }
.entity-diagram .entity-diagram-card-header[data-module-accent="2"] { box-shadow:inset 0 3px var(--bs-info, #4289a6); }
.entity-diagram .entity-diagram-card-header[data-module-accent="3"] { box-shadow:inset 0 3px var(--bs-warning, #bc942c); }
.entity-diagram .entity-diagram-card-header[data-module-accent="4"] { box-shadow:inset 0 3px var(--bs-secondary, #6c757d); }
.entity-diagram .entity-diagram-card-header:focus-visible { outline-offset:-3px; }
.entity-diagram .entity-diagram-card-heading { display:flex; flex-direction:column; min-width:0; gap:3px; }
.entity-diagram .entity-diagram-module { font-size:10px; line-height:1.2; letter-spacing:.04em; color:var(--text-dim, #65738a); text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.entity-diagram .entity-diagram-card-heading strong { font-size:14px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.entity-diagram .entity-diagram-edit { font-size:11px; padding:3px 7px; min-height:27px; }
.entity-diagram .entity-diagram-fields { padding:5px 0; }
.entity-diagram .entity-diagram-field { display:flex; align-items:center; gap:7px; height:26px; padding:0 10px; font-size:11px; line-height:1.4; }
.entity-diagram .entity-diagram-field:hover { background:var(--panel-2, #f0f4fa); }
.entity-diagram .entity-diagram-field-keys { display:flex; align-items:center; gap:2px; width:38px; flex-shrink:0; }
.entity-diagram .entity-diagram-key { display:inline-block; font-size:9px; font-weight:700; color:var(--copper, #2764d1); }
.entity-diagram .entity-diagram-fk { color:var(--bs-success, #278257); }
.entity-diagram .entity-diagram-field-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entity-diagram .entity-diagram-field-type { max-width:102px; color:var(--text-dim, #65738a); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entity-diagram .entity-diagram-required { color:var(--copper, #2764d1); }
.entity-diagram .entity-diagram-hidden { padding:6px 12px; border-top:1px solid var(--line, #d5dce7); font-size:10px; color:var(--text-dim, #65738a); }
.entity-diagram .entity-diagram-empty-fields { margin:0; padding:10px 12px; font-size:12px; color:var(--text-dim, #65738a); }
.entity-diagram .entity-diagram-empty { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(90%, 400px); padding:26px; text-align:center; pointer-events:none; color:var(--text-dim, #65738a); }
.entity-diagram .entity-diagram-empty strong { display:block; color:var(--text, #263449); margin-bottom:8px; }
.entity-diagram .entity-diagram-empty p { font-size:13px; margin:0; }
.entity-diagram .entity-diagram-help { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; padding:9px 14px; border-top:1px solid var(--line, #d5dce7); font-size:10px; color:var(--text-dim, #65738a); }
.entity-diagram .entity-diagram-message { margin:0; padding:7px 14px; font-size:12px; background:var(--panel-2, #f0f4fa); }
.entity-diagram .entity-diagram-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; white-space:nowrap; }
@media (max-width:767px) {
    .entity-diagram .entity-diagram-toolbar { padding:9px; gap:9px; }
    .entity-diagram .entity-diagram-filters { width:100%; }
    .entity-diagram input[type="search"] { width:180px; max-width:100%; }
    .entity-diagram .entity-diagram-actions { gap:5px; }
    .entity-diagram button { min-height:38px; }
    .entity-diagram .entity-diagram-help { font-size:10px; }
}
