.graph-dialog { width:min(1120px,96vw); max-width:96vw; max-height:94dvh; padding:1.4rem; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--ink); overflow:auto; }
.graph-dialog::backdrop { background:rgb(0 0 0 / .65); }
.graph-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.graph-header h2 { margin:0; }
.graph-workspace { display:grid; grid-template-columns:minmax(240px, .8fr) minmax(0,1.65fr); gap:1.5rem; }
.graph-controls,.graph-result { min-width:0; }
.graph-field { display:flex; flex-direction:column; gap:.4rem; font-size:0.945rem; font-weight:600; margin:0 0 .8rem; }
.graph-field textarea,.graph-field input { width:100%; min-width:0; box-sizing:border-box; font:inherit; font-weight:400; }
.graph-field textarea { resize:vertical; font-family:monospace; }
.graph-range { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.graph-controls details { border:1px solid var(--line); border-radius:10px; padding:.8rem; margin-bottom:.8rem; }
.graph-controls summary { cursor:pointer; font-weight:600; }
.graph-controls details[open] summary { margin-bottom:.8rem; }
.graph-check { display:flex; gap:.6rem; align-items:center; font-size:0.945rem; }
.graph-check input { width:auto; }
.graph-plot { width:100%; height:360px; min-width:0; overflow:hidden; }
.graph-status { min-height:1.4em; color:var(--muted); font-size:0.8925rem; margin:.5rem 0; }
.graph-stale { opacity:.4; }
.graph-result > .graph-field { max-width:240px; }
.graph-table { border-collapse:collapse; width:100%; font-size:0.945rem; }
.graph-table td,.graph-table th { padding:.45rem .5rem; text-align:left; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.graph-table td { font-family:monospace; }
.graph-stat { font-size:0.945rem; margin:.6rem 0; overflow-wrap:anywhere; }
.graph-footer { border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem; }
.graph-actions,.graph-presets,.graph-zoom { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.graph-presets { margin:.8rem 0; }
.graph-hint { color:var(--muted); font-size:0.84rem; line-height:1.5; margin:.6rem 0; }
.graph-card { margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--paper); min-width:0; }
.graph-card figcaption { color:var(--ink); font-size:1.2075rem; font-weight:700; }
.graph-card .graph-definition { margin:.2rem 0; font-family:monospace; font-size:0.8925rem; overflow-wrap:anywhere; }
.graph-card .graph-actions { margin:.7rem 0; }
.graph-source-details summary { cursor:pointer; font-size:0.8925rem; }
.graph-source-details pre { max-height:180px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-size:0.7875rem; }
.ql-editor pre.convi-graph-source { font:inherit; font-size:0.9975rem; line-height:1.6; padding:1rem; background:var(--paper); color:var(--ink); border:2px dashed var(--line); border-radius:10px; cursor:pointer; white-space:pre-wrap; }
.ql-editor pre.convi-graph-source:focus { outline:2px solid var(--terra); }
@media(max-width:720px) {
 .graph-dialog { padding:1rem; }
 .graph-workspace { grid-template-columns:minmax(0,1fr); gap:1rem; }
 .graph-card { padding:.55rem; }
 .graph-dialog .graph-plot,.graph-card .graph-plot { height:360px; }
 .graph-card .graph-actions .btn { font-size:0.84rem; }
}

.graph-dialog [hidden] { display:none !important; }
.graph-field input,.graph-field textarea { background:var(--field-bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:.6rem .7rem; }

.graph-header { position:sticky; top:-1.4rem; z-index:5; background:var(--paper); padding:.6rem 0; }
@media(max-width:720px) { .graph-header { top:-1rem; } }

.graph-export { display:block; box-sizing:border-box; width:100%; min-height:130px; padding:.75rem; margin-top:.7rem; background:var(--field-bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; font-family:monospace; }