.bgraph-paper-app{--bgraph-ink:#1769aa;--bgraph-border:#dce4ed;--bgraph-text:#1f2937;--bgraph-muted:#64748b;font-family:inherit;color:var(--bgraph-text);width:100%;max-width:100%;margin:20px auto;box-sizing:border-box}
.bgraph-paper-app *{box-sizing:border-box}
.bgraph-paper-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 18px}
.bgraph-paper-header h2{font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.2;margin:0 0 8px;font-weight:750}
.bgraph-paper-header p{margin:0;color:var(--bgraph-muted);font-size:.97rem}
.bgraph-paper-header-actions{display:flex;gap:8px;flex-shrink:0}
.bgraph-paper-layout{display:grid;grid-template-columns:minmax(245px,310px) minmax(0,1fr);gap:16px;align-items:start}
.bgraph-paper-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.bgraph-panel{border:1px solid var(--bgraph-border);border-radius:12px;background:#fff;padding:16px;box-shadow:0 2px 8px rgba(15,23,42,.035)}
.bgraph-panel h3{font-size:1.02rem;margin:0 0 14px;font-weight:700}
.bgraph-panel label{display:flex;flex-direction:column;gap:7px;font-size:.88rem;font-weight:600;margin:0 0 13px}
.bgraph-panel select,.bgraph-panel input:not([type=checkbox]):not([type=color]):not([type=range]){width:100%;max-width:100%;min-height:39px;border:1px solid #cbd5e1;border-radius:7px;padding:7px 9px;background:#fff;color:#1f2937;font:inherit}
.bgraph-panel input[type=range]{width:100%;accent-color:#1769aa;margin:0}
.bgraph-panel input[type=color]{width:100%;height:35px;padding:3px;border:1px solid #cbd5e1;border-radius:7px;background:#fff}
.bgraph-panel output{float:right;color:#64748b;font-size:.82rem;font-weight:500}
.bgraph-color-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bgraph-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important;margin:10px 0!important}
.bgraph-check input{accent-color:#1769aa;width:16px;height:16px}
.bgraph-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:14px}
.bgraph-tool{border:1px solid #dbe3ec;background:#fff;border-radius:8px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:1.2rem;cursor:pointer;color:#334155;padding:5px}
.bgraph-tool span{font-size:.72rem}
.bgraph-tool:hover,.bgraph-tool.active{border-color:#1769aa;background:#edf6ff;color:#145a91}
.bgraph-help{font-size:.77rem;line-height:1.45;color:#64748b;margin:10px 0 0}
.bgraph-btn{border:1px solid transparent;border-radius:8px;padding:10px 13px;font:inherit;font-size:.86rem;font-weight:650;cursor:pointer;line-height:1.25;transition:background .15s,border-color .15s}
.bgraph-btn-primary{background:#1769aa;color:#fff}.bgraph-btn-primary:hover{background:#12578e}
.bgraph-btn-light{background:#fff;color:#334155;border-color:#cbd5e1}.bgraph-btn-light:hover{background:#f1f5f9}
.bgraph-action-stack{display:flex;flex-direction:column;gap:8px}
.bgraph-workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--bgraph-border);border-bottom:0;border-radius:12px 12px 0 0;background:#f8fafc}
.bgraph-status{font-size:.84rem;font-weight:650;display:flex;align-items:center;gap:7px}.bgraph-status-dot{width:8px;height:8px;border-radius:50%;background:#22a06b}
.bgraph-zoom-controls{display:flex;align-items:center;gap:7px;font-size:.8rem;color:#475569}
.bgraph-icon-btn{min-width:30px;min-height:29px;border:1px solid #d3dce6;background:#fff;border-radius:6px;cursor:pointer;padding:4px 8px;color:#334155}
.bgraph-canvas-wrap{position:relative;width:100%;height:620px;overflow:auto;background:#e9eef4;border:1px solid var(--bgraph-border);padding:12px;touch-action:pan-x pan-y}
.bgraph-paper-canvas{display:block;background:#fff;width:100%;height:100%;min-width:300px;box-shadow:0 2px 10px rgba(15,23,42,.1);touch-action:none;cursor:crosshair}
.bgraph-workspace-footer{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;color:#64748b;font-size:.77rem}
@media(max-width:900px){.bgraph-paper-layout{grid-template-columns:1fr}.bgraph-paper-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.bgraph-paper-sidebar .bgraph-panel:last-child{grid-column:1/-1}.bgraph-canvas-wrap{height:520px}}
@media(max-width:600px){.bgraph-paper-header{flex-direction:column}.bgraph-paper-header-actions{width:100%}.bgraph-paper-header-actions .bgraph-btn{flex:1}.bgraph-paper-sidebar{display:flex}.bgraph-panel{padding:13px}.bgraph-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bgraph-canvas-wrap{height:430px;padding:6px}.bgraph-workspace-toolbar{align-items:flex-start;flex-direction:column}.bgraph-workspace-footer{flex-direction:column;gap:4px}.bgraph-color-row{gap:8px}}
@media print{body *{visibility:hidden!important}.bgraph-paper-app .bgraph-canvas-wrap,.bgraph-paper-app .bgraph-canvas-wrap *{visibility:visible!important}.bgraph-paper-app .bgraph-canvas-wrap{position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible;border:0;padding:0;background:#fff}.bgraph-paper-app .bgraph-paper-canvas{width:100%;height:auto;box-shadow:none}.bgraph-paper-app .bgraph-paper-header,.bgraph-paper-app .bgraph-paper-sidebar,.bgraph-paper-app .bgraph-workspace-toolbar,.bgraph-paper-app .bgraph-workspace-footer{display:none!important}}

/* v1.0.1 layout update: tools above the canvas, export controls below it. */
.bgraph-paper-layout{grid-template-columns:minmax(235px,275px) minmax(0,1fr)}
.bgraph-paper-workspace{display:flex;flex-direction:column;gap:0;min-width:0}
.bgraph-drawing-toolbar-panel{margin-bottom:12px;padding:13px 15px}
.bgraph-panel-heading-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.bgraph-panel-heading-row h3,.bgraph-export-heading h3{margin:0;font-size:1rem}
.bgraph-panel-heading-row p{margin:0;color:#64748b;font-size:.78rem}
.bgraph-drawing-toolbar-content{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bgraph-drawing-toolbar-content .bgraph-tool-grid{display:flex;align-items:center;gap:7px;margin:0;flex-wrap:wrap}
.bgraph-drawing-toolbar-content .bgraph-tool{width:64px;min-height:54px}
.bgraph-drawing-options{display:flex;align-items:center;gap:12px;flex:1;flex-wrap:wrap}
.bgraph-drawing-options>label:not(.bgraph-check){display:flex;flex-direction:row;align-items:center;gap:7px;margin:0;font-size:.8rem;white-space:nowrap}
.bgraph-drawing-options input[type=color]{width:42px;height:32px}
.bgraph-drawing-options select{min-height:34px;border:1px solid #cbd5e1;border-radius:7px;padding:5px;background:#fff;color:#334155}
.bgraph-drawing-options .bgraph-check{margin:0!important;white-space:nowrap;font-size:.8rem}
.bgraph-workspace-toolbar{border-radius:10px 10px 0 0}
.bgraph-canvas-wrap{height:620px}
.bgraph-export-toolbar-panel{margin-top:12px;padding:13px 15px}
.bgraph-export-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.bgraph-export-heading label{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-size:.82rem;font-weight:600}
.bgraph-export-heading select{min-height:34px;min-width:180px;border:1px solid #cbd5e1;border-radius:7px;padding:5px 8px;background:#fff;color:#334155}
.bgraph-export-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bgraph-export-actions .bgraph-btn{white-space:nowrap}
@media(max-width:1100px){.bgraph-paper-layout{grid-template-columns:minmax(220px,250px) minmax(0,1fr)}.bgraph-drawing-toolbar-content{gap:10px}.bgraph-drawing-toolbar-content .bgraph-tool{width:55px}.bgraph-drawing-options{gap:8px}}
@media(max-width:900px){.bgraph-paper-layout{grid-template-columns:1fr}.bgraph-paper-sidebar{display:block}.bgraph-paper-sidebar .bgraph-panel{margin-bottom:12px}.bgraph-paper-sidebar .bgraph-panel:last-child{grid-column:auto}.bgraph-canvas-wrap{height:520px}}
@media(max-width:600px){.bgraph-panel-heading-row{align-items:flex-start;flex-direction:column;gap:4px}.bgraph-drawing-toolbar-content{align-items:flex-start;flex-direction:column}.bgraph-drawing-toolbar-content .bgraph-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.bgraph-drawing-toolbar-content .bgraph-tool{width:auto}.bgraph-drawing-options{width:100%}.bgraph-export-heading{align-items:flex-start;flex-direction:column;gap:8px}.bgraph-export-heading label{align-items:flex-start;flex-direction:column;width:100%}.bgraph-export-heading select{width:100%}.bgraph-export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.bgraph-export-actions .bgraph-btn{white-space:normal;min-height:42px}}

/* v1.0.2 readability update: larger tool labels, section headings and controls. */
.bgraph-paper-app{font-size:16px}
.bgraph-paper-header h2{font-size:clamp(1.65rem,2.7vw,2.15rem)}
.bgraph-paper-header p{font-size:1.05rem;line-height:1.5}
.bgraph-panel h3,.bgraph-panel-heading-row h3,.bgraph-export-heading h3{font-size:1.22rem;font-weight:750;line-height:1.3}
.bgraph-panel label{font-size:1rem;line-height:1.4}
.bgraph-panel output{font-size:.95rem}
.bgraph-panel select,.bgraph-panel input:not([type=checkbox]):not([type=color]):not([type=range]){font-size:1rem;min-height:43px;padding:8px 10px}
.bgraph-panel input[type=color]{height:40px}
.bgraph-check{font-size:.98rem!important;line-height:1.4}
.bgraph-check input{width:18px;height:18px;flex:0 0 auto}
.bgraph-tool{font-size:1.55rem;min-height:64px;gap:5px;padding:7px}
.bgraph-tool span{font-size:.9rem;font-weight:600;line-height:1.2}
.bgraph-drawing-toolbar-content .bgraph-tool{width:72px;min-height:66px}
.bgraph-drawing-options>label:not(.bgraph-check){font-size:.95rem;gap:8px}
.bgraph-drawing-options .bgraph-check{font-size:.95rem!important}
.bgraph-drawing-options select,.bgraph-export-heading select{font-size:.95rem;min-height:40px}
.bgraph-btn{font-size:.98rem;padding:11px 15px;line-height:1.35}
.bgraph-help{font-size:.9rem;line-height:1.55}
.bgraph-panel-heading-row p{font-size:.9rem;line-height:1.45}
.bgraph-export-heading label{font-size:.98rem}
.bgraph-status{font-size:.98rem}
.bgraph-zoom-controls{font-size:.95rem}
.bgraph-icon-btn{font-size:.95rem;min-height:34px;min-width:34px}
.bgraph-workspace-footer{font-size:.9rem;line-height:1.45}
@media(max-width:600px){
  .bgraph-panel h3,.bgraph-panel-heading-row h3,.bgraph-export-heading h3{font-size:1.18rem}
  .bgraph-tool{min-height:62px}
  .bgraph-tool span{font-size:.88rem}
  .bgraph-drawing-toolbar-content .bgraph-tool{width:auto;min-height:62px}
  .bgraph-btn{font-size:.95rem}
}


/* v1.0.3 UI fixes: button spacing, visible hover text, JPG export, and inline paper-size label. */
.bgraph-paper-app .bgraph-tool{padding:9px 8px;min-width:0;overflow:visible;white-space:normal}
.bgraph-paper-app .bgraph-drawing-toolbar-content .bgraph-tool{width:auto;min-width:70px;padding:9px 10px}
.bgraph-paper-app .bgraph-drawing-toolbar-content .bgraph-tool[data-tool="rect"]{min-width:94px;padding-left:12px;padding-right:12px}
.bgraph-paper-app .bgraph-tool span{display:block;max-width:100%;overflow-wrap:normal;word-break:normal;text-align:center}
.bgraph-paper-app .bgraph-btn,
.bgraph-paper-app .bgraph-paper-header-actions .bgraph-btn{color:#334155!important;text-decoration:none!important}
.bgraph-paper-app .bgraph-btn-primary,
.bgraph-paper-app .bgraph-btn-primary:visited{background:#1769aa!important;border-color:#1769aa!important;color:#ffffff!important}
.bgraph-paper-app .bgraph-btn-primary:hover,
.bgraph-paper-app .bgraph-btn-primary:focus-visible,
.bgraph-paper-app .bgraph-btn-primary:active{background:#104f80!important;border-color:#104f80!important;color:#ffffff!important}
.bgraph-paper-app .bgraph-btn-light,
.bgraph-paper-app .bgraph-btn-light:visited{background:#ffffff!important;border-color:#cbd5e1!important;color:#334155!important}
.bgraph-paper-app .bgraph-btn-light:hover,
.bgraph-paper-app .bgraph-btn-light:focus-visible,
.bgraph-paper-app .bgraph-btn-light:active{background:#e8f1fa!important;border-color:#8eabc7!important;color:#172b43!important}
.bgraph-paper-app .bgraph-paper-header-actions .bgraph-btn:hover,
.bgraph-paper-app .bgraph-paper-header-actions .bgraph-btn:focus-visible{background:#e8f1fa!important;color:#172b43!important;border-color:#8eabc7!important}
.bgraph-paper-app .bgraph-export-heading{display:flex;align-items:center;flex-direction:row;gap:16px;flex-wrap:wrap}
.bgraph-paper-app .bgraph-export-heading label{display:flex;align-items:center;flex-direction:row;gap:10px;margin:0;white-space:nowrap;flex:0 0 auto}
.bgraph-paper-app .bgraph-export-heading label select{width:auto;min-width:190px;max-width:100%;flex:0 1 auto}
.bgraph-paper-app .bgraph-export-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bgraph-paper-app .bgraph-export-actions .bgraph-btn{min-height:44px}
@media(max-width:600px){
 .bgraph-paper-app .bgraph-export-heading{align-items:flex-start;flex-direction:column}
 .bgraph-paper-app .bgraph-export-heading label{align-items:center;flex-direction:row;white-space:normal;width:100%;gap:10px}
 .bgraph-paper-app .bgraph-export-heading label select{min-width:0;width:auto;flex:1}
 .bgraph-paper-app .bgraph-export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .bgraph-paper-app .bgraph-export-actions .bgraph-btn{white-space:normal;overflow-wrap:anywhere;padding:10px 9px}
 .bgraph-paper-app .bgraph-drawing-toolbar-content .bgraph-tool[data-tool="rect"]{min-width:0;padding-left:7px;padding-right:7px}
}


/* v1.0.4: keep Ink color and Line width aligned side by side. */
.bgraph-paper-app .bgraph-drawing-options{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:10px 16px;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check){
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
  width:100%;
  white-space:nowrap;
  margin:0;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) input[type="color"]{
  flex:0 0 42px;
  width:42px;
  min-width:42px;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) select{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  max-width:100%;
}
.bgraph-paper-app .bgraph-drawing-options>.bgraph-check{
  grid-column:1 / -1;
  justify-self:start;
  margin:0!important;
}
@media(max-width:600px){
  .bgraph-paper-app .bgraph-drawing-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
  .bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check){gap:6px;font-size:.9rem;}
  .bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) input[type="color"]{flex-basis:36px;width:36px;min-width:36px;}
}

/* v1.0.6: expanded paper presets; quick ink palette removed */
.bgraph-paper-app .bgraph-palette-block{margin:10px 0 2px}
.bgraph-paper-app .bgraph-palette-block>span{display:block;font-size:.9rem;font-weight:650;color:#475569;margin-bottom:8px}
.bgraph-paper-app .bgraph-color-palette{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.bgraph-paper-app .bgraph-color-palette button{appearance:none;display:block;width:27px;height:27px;min-width:27px;padding:0;border-radius:50%;border:2px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #cbd5e1;cursor:pointer}
.bgraph-paper-app .bgraph-color-palette button:hover,.bgraph-paper-app .bgraph-color-palette button:focus-visible{box-shadow:0 0 0 3px #1769aa;outline:0}
.bgraph-paper-app .bgraph-export-heading select{min-width:230px}
@media(max-width:600px){.bgraph-paper-app .bgraph-color-palette{gap:10px}.bgraph-paper-app .bgraph-color-palette button{width:30px;height:30px;min-width:30px}.bgraph-paper-app .bgraph-export-heading select{min-width:0}}


/* v1.0.7: prevent drawing tools and drawing options from colliding or clipping. */
.bgraph-paper-app .bgraph-drawing-toolbar-content{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:14px;
  width:100%;
  min-width:0;
}
.bgraph-paper-app .bgraph-drawing-toolbar-content .bgraph-tool-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  width:100%;
  min-width:0;
}
.bgraph-paper-app .bgraph-drawing-toolbar-content .bgraph-tool{
  width:100%;
  min-width:0;
  padding:9px 6px;
}
.bgraph-paper-app .bgraph-drawing-toolbar-content .bgraph-tool[data-tool="rect"]{
  min-width:0;
  padding-left:6px;
  padding-right:6px;
}
.bgraph-paper-app .bgraph-drawing-options{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:12px 18px;
  width:100%;
  min-width:0;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check){
  min-width:0;
  width:100%;
  white-space:normal;
  gap:8px;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) select{
  width:auto;
  min-width:0;
  flex:1 1 78px;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) input[type="color"]{
  flex:0 0 42px;
}
.bgraph-paper-app .bgraph-drawing-options>.bgraph-check{grid-column:1/-1;}
@media(max-width:700px){
  .bgraph-paper-app .bgraph-drawing-toolbar-content .bgraph-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .bgraph-paper-app .bgraph-drawing-options{grid-template-columns:minmax(0,1fr);}
  .bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check){justify-content:space-between;}
  .bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) select{flex:0 1 55%;}
  .bgraph-paper-app .bgraph-drawing-options>.bgraph-check{grid-column:1;}
}


/* v1.0.8: keep Ink color, Line width, and Snap to grid in one row when space allows. */
.bgraph-paper-app .bgraph-drawing-options{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  align-items:center;
  gap:10px 18px;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check){
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
  width:100%;
  white-space:nowrap;
  margin:0;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) input[type="color"]{
  flex:0 0 38px;
  width:38px;
  min-width:38px;
}
.bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) select{
  flex:1 1 72px;
  width:auto;
  min-width:65px;
  max-width:100%;
}
.bgraph-paper-app .bgraph-drawing-options>.bgraph-check{
  grid-column:auto;
  justify-self:start;
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  white-space:nowrap;
  margin:0!important;
}
@media(max-width:900px){
  .bgraph-paper-app .bgraph-drawing-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px 10px;}
  .bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check){gap:5px;font-size:.9rem;}
  .bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) input[type="color"]{flex-basis:32px;width:32px;min-width:32px;}
  .bgraph-paper-app .bgraph-drawing-options>label:not(.bgraph-check) select{min-width:58px;font-size:.88rem;padding-left:5px;padding-right:4px;}
  .bgraph-paper-app .bgraph-drawing-options>.bgraph-check{font-size:.88rem!important;gap:5px!important;}
}
@media(max-width:560px){
  .bgraph-paper-app .bgraph-drawing-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
  .bgraph-paper-app .bgraph-drawing-options>.bgraph-check{grid-column:1/-1;justify-self:start;}
}


/* v1.0.9: place Canvas & export beneath Grid settings in the left column on desktop;
   stretch the sidebar to the drawing workspace height so its bottom aligns with the canvas tip/footer. */
.bgraph-paper-app .bgraph-paper-layout{align-items:stretch}
.bgraph-paper-app .bgraph-paper-sidebar{height:100%;min-height:100%;gap:14px}
.bgraph-paper-app .bgraph-export-toolbar-panel{margin-top:auto;min-width:0}
.bgraph-paper-app .bgraph-export-heading{align-items:flex-start;flex-direction:column;gap:10px}
.bgraph-paper-app .bgraph-export-heading label{align-items:flex-start;flex-direction:column;width:100%;white-space:normal;gap:6px}
.bgraph-paper-app .bgraph-export-heading label select{width:100%;min-width:0;max-width:100%}
.bgraph-paper-app .bgraph-export-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.bgraph-paper-app .bgraph-export-actions .bgraph-btn{white-space:normal;width:100%;min-width:0}
@media(max-width:900px){
  /* Flatten the sidebar so its export panel can appear after the canvas on tablets and phones. */
  .bgraph-paper-app .bgraph-paper-layout{display:flex;flex-direction:column;align-items:stretch}
  .bgraph-paper-app .bgraph-paper-sidebar{display:contents}
  .bgraph-paper-app .bgraph-paper-sidebar>.bgraph-panel:first-child{order:1}
  .bgraph-paper-app .bgraph-paper-workspace{order:2}
  .bgraph-paper-app .bgraph-paper-sidebar>.bgraph-export-toolbar-panel{order:3;margin-top:12px}
  .bgraph-paper-app .bgraph-export-heading{align-items:center;flex-direction:row;flex-wrap:wrap}
  .bgraph-paper-app .bgraph-export-heading label{align-items:center;flex-direction:row;width:auto;white-space:normal}
  .bgraph-paper-app .bgraph-export-heading label select{width:auto;min-width:180px}
  .bgraph-paper-app .bgraph-export-actions{display:flex;flex-wrap:wrap}
  .bgraph-paper-app .bgraph-export-actions .bgraph-btn{width:auto}
}
@media(max-width:600px){
  .bgraph-paper-app .bgraph-export-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .bgraph-paper-app .bgraph-export-heading label{align-items:center;flex-direction:row;width:100%}
  .bgraph-paper-app .bgraph-export-heading label select{width:auto;min-width:0;flex:1}
  .bgraph-paper-app .bgraph-export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .bgraph-paper-app .bgraph-export-actions .bgraph-btn{width:100%;white-space:normal;overflow-wrap:anywhere}
}

/* Compact export dropdown */
.bgraph-paper-app .bgraph-export-dropdown{position:relative;display:inline-flex;flex:0 0 auto}
.bgraph-paper-app .bgraph-export-toggle{display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;min-height:42px}
.bgraph-paper-app .bgraph-export-menu{position:absolute;z-index:1000;left:0;top:calc(100% + 6px);min-width:210px;padding:6px;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.16)}
.bgraph-paper-app .bgraph-export-menu[hidden]{display:none!important}
.bgraph-paper-app .bgraph-export-menu-item{display:block;width:100%;padding:11px 13px;border:0;border-radius:6px;background:#fff;color:#334155;text-align:left;font:inherit;font-size:.95rem;line-height:1.35;cursor:pointer;white-space:nowrap}
.bgraph-paper-app .bgraph-export-menu-item:hover,.bgraph-paper-app .bgraph-export-menu-item:focus-visible{background:#edf6ff;color:#124f80;outline:none}
@media(max-width:600px){.bgraph-paper-app .bgraph-export-dropdown{width:100%}.bgraph-paper-app .bgraph-export-toggle{width:100%}.bgraph-paper-app .bgraph-export-menu{left:0;right:0;min-width:0}.bgraph-paper-app .bgraph-export-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}


/* v1.1.1: requested canvas toolbar and tip text sizing. */
.bgraph-paper-app .bgraph-status{font-size:1.22rem;line-height:1.35}
.bgraph-paper-app .bgraph-workspace-footer span:first-child{font-size:1rem;line-height:1.5}