.fragment-placement-bar { position:fixed; z-index:70; bottom:42px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 40px); padding:12px 16px; color:#edf4ff; background:#263347; border:1px solid #8196b0; border-radius:8px; box-shadow:0 4px 20px #0005; font-size:13px; }
.fragment-placement-bar[hidden] { display:none; }
.fragment-placement-bar>strong,.fragment-placement-bar>span { display:block; }
.fragment-placement-bar>span { margin-top:4px; color:#c1d2e8; }
.fragment-placement-bar p { margin:8px 0; }
.fragment-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.fragment-controls label { display:flex; align-items:center; gap:4px; }
.fragment-controls input[data-fragment-size] { width:72px; padding:5px; }
.fragment-controls button,.fragment-replace-dialog button { padding:6px 12px; cursor:pointer; }
.fragment-placement-bar [data-fragment-error] { color:#ffb8ab; max-width:800px; }
.fragment-replace-dialog { position:fixed; inset:auto; margin:0; transform:translateX(-50%); box-sizing:border-box; width:640px; border:1px solid #8196b0; border-radius:7px; padding:8px 12px; background:#fff; color:#202b3b; font-size:13px; line-height:1.35; box-shadow:0 3px 14px #0003; overflow:auto; }
.fragment-replace-dialog[open] { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.fragment-replace-dialog::backdrop { background:transparent; }
.fragment-replace-summary { flex:1 1 180px; min-width:0; }
.fragment-replace-summary strong,.fragment-replace-summary>span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fragment-replace-summary strong { font-size:13px; }
.fragment-replace-name { color:#5e6b7c; font-size:12px; }
.fragment-replace-actions { display:flex; flex-wrap:wrap; gap:6px; }
.fragment-replace-dialog button { padding:5px 10px; font-size:13px; line-height:1.35; }
.fragment-replace-dialog [role=alert] { flex-basis:100%; margin:0; color:#a22318; }
.fragment-replace-dialog [role=alert]:empty { display:none; }
.explorer-entry[draggable=true] { cursor:grab; }
.explorer-entry[draggable=true]:active { cursor:grabbing; }

.fragment-drag-image { position:fixed; left:0; top:0; width:1px; height:1px; pointer-events:none; }
.fragment-box-phantom { position:fixed; z-index:10; display:none; pointer-events:none; overflow:hidden; stroke:#fff; }
.fragment-box-phantom path, .fragment-box-phantom use { fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.fragment-box-phantom use { stroke:#000; stroke-dasharray:6 6; }
.fragment-placement-bar.fragment-box-bar { box-sizing:border-box; display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; width:680px; padding:8px 12px; color:#202b3b; background:#fff; font-size:13px; line-height:1.35; }
.fragment-placement-bar.fragment-box-bar[hidden] { display:none; }
.fragment-box-summary { flex:1 1 210px; min-width:0; }
.fragment-box-summary strong,.fragment-box-summary span { display:block; }
.fragment-box-summary strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fragment-box-summary span { color:#5e6b7c; font-size:12px; }
.fragment-box-bar .fragment-controls { gap:6px; }
.fragment-box-bar button { padding:5px 9px; font-size:13px; }
.fragment-box-bar button[aria-pressed=true] { color:#173a66; background:#dbeaff; border:1px solid #5987bc; border-radius:3px; }
.fragment-box-options { font-size:12px; }
.fragment-box-options summary { cursor:pointer; }
.fragment-box-options[open] { flex-basis:100%; }
.fragment-box-options[open] .fragment-controls { margin-top:6px; }
.fragment-box-bar [data-fragment-error] { flex-basis:100%; color:#a22318; }
.fragment-box-bar [data-fragment-error]:empty { display:none; }

.placement-dimensions { position:fixed; z-index:11; box-sizing:border-box; padding:5px 8px; border:1px solid #8196b0; border-radius:4px; color:#202b3b; background:#fffffff2; box-shadow:0 2px 6px #0003; font:12px/18px Arial,sans-serif; font-variant-numeric:tabular-nums; white-space:normal; pointer-events:none; }
.placement-dimensions[hidden] { display:none; }
.placement-dimensions label { display:flex; align-items:center; gap:6px; height:26px; }
.placement-dimensions label > span:first-child { flex:1; }
.placement-dimensions input { box-sizing:border-box; width:80px; min-width:0; height:23px; padding:2px 4px; border:1px solid transparent; border-radius:3px; background:transparent; color:inherit; font:inherit; text-align:right; }
.placement-dimensions input.is-active { border-color:#8daacb; background:#edf5ff; }
.placement-dimensions input:focus { outline:1px solid #3674b6; }
.placement-dimensions input[aria-invalid=true] { border-color:#d33030; background:#fff0f0; }
.placement-dimensions-hint { color:#5c6879; font-size:10px; line-height:14px; text-align:right; }

.placement-dimensions-axes { display:none; fill:none; stroke:#356e9d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.placement-dimensions-axes text { fill:#24435e; stroke:none; font:600 12px Arial,sans-serif; }
.placement-dimensions--axes { padding:3px 4px 3px 32px; }
.placement-dimensions--axes .placement-dimensions-axes { display:block; position:absolute; left:4px; bottom:4px; width:58px; height:calc(100% - 8px); max-height:72px; }
.placement-dimensions--axes label { justify-content:flex-end; height:22px; gap:3px; }
.placement-dimensions--axes label > span:first-child { flex:none; }
.placement-dimensions--axes input { width:80px; height:22px; }
.placement-dimensions--axes label.is-readonly { height:16px; gap:1px; color:#5c6879; }
.placement-dimensions--axes .is-readonly input { width:6ch; height:16px; padding:0; border:0; }
.placement-dimensions--axes .placement-dimensions-hint { line-height:12px; white-space:nowrap; }
.placement-dimensions input[readonly] { color:#5c6879; }