:root {
  --bg: #121418;
  --panel: #1a1d23;
  --panel2: #22262e;
  --line: #2e333d;
  --text: #e6e8ec;
  --muted: #8b93a1;
  --accent: #3d8bfd;
  --accent2: #2f6fd0;
  --danger: #e5534b;
  --warn: #d29922;
  --ok: #3fb950;
  --radius: 8px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; }
h2 { font-size: 14px; margin: 0; font-weight: 600; letter-spacing: .2px; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.mt { margin-top: 18px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: Consolas, ui-monospace, monospace; }
input, select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 7px; font: inherit; min-width: 0; }
input:focus, select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
input[type=number] { font-family: Consolas, ui-monospace, monospace; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; }
label > input:not([type=checkbox]):not([type=radio]), label > select { width: 100%; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); margin: 6px 0; }

.btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: #444b57; background: #2a2f38; }
.btn.small { padding: 3px 9px; font-size: 12px; }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--accent2); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent); }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; }
.btn.danger { color: #ff8a84; }
.btn.wide { width: 100%; justify-content: center; padding: 9px; margin-top: 10px; }
.icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 5px; border-radius: 4px; font-size: 14px; }
.icon-btn:hover { color: var(--text); background: var(--panel2); }

.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--panel);
  border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 16px; margin-right: 10px; }
.brand span { color: var(--accent); }
#projectSelect { min-width: 220px; }
.spacer { flex: 1; }

.layout { flex: 1; display: grid; grid-template-columns: 500px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px; padding: 10px; min-height: 0; }
.layout > .panel.left { grid-row: 1 / span 2; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 0; }
.panel.left { overflow-y: auto; }

/* bottom bar: project, checks, export settings, export, exports side by side */
.bottombar { display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(150px, 1fr) minmax(270px, 350px) minmax(180px, 230px) minmax(190px, 1.2fr);
  gap: 0; padding: 0; max-height: 236px; overflow: hidden; }
.bb-col { padding: 10px 14px; border-left: 1px solid var(--line); overflow-y: auto; min-width: 0; max-height: 236px; }
.bb-col:first-child { border-left: none; }
.bb-col h3 { margin-bottom: 8px; }
.bb-col > label { margin-bottom: 8px; }
.bb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.bb-grid .wide { grid-column: 1 / 3; }
.bb-checks-row { display: flex; flex-wrap: wrap; gap: 0 14px; }
.bb-checks-row .check { margin: 6px 0 0; }
.bb-export .timing { margin-top: 0; }
.bb-export .btn.wide { margin-top: 8px; }
.bb-exports .export:first-of-type { margin-top: 0; }
.center { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.center > .panel { flex: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tools label { flex-direction: row; align-items: center; gap: 4px; }
.tools label > select { width: auto; }
.hint { margin-top: 6px; }
.section { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.section.first { border-top: none; padding-top: 0; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* media */
.dropzone { border: 1px dashed #3a414d; border-radius: 6px; padding: 14px; text-align: center; color: var(--muted);
  font-size: 12px; margin-bottom: 8px; }
.dropzone.over, .playlist.over { border-color: var(--accent); background: rgba(61, 139, 253, .08); }
.media-list { display: flex; flex-direction: column; gap: 6px; }
.media { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: center; padding: 5px;
  border-radius: 6px; background: var(--panel2); cursor: grab; border: 1px solid transparent; }
.media:hover { border-color: var(--line); }
.media img { width: 72px; height: 40px; object-fit: contain; background: #000; border-radius: 3px; }
.media .name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media .meta { font-size: 11px; color: var(--muted); }
.badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: #2d3340; color: var(--muted); }
.badge.video { background: #23324a; color: #8fb8ff; }
.badge.image { background: #2b3a2b; color: #8fd18f; }

/* canvas */
.canvas-wrap { position: relative; width: 100%; background:
  repeating-conic-gradient(#16181d 0 25%, #1b1e24 0 50%) 0 0 / 24px 24px; border: 1px solid var(--line); }
#previewImg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; image-rendering: auto; }
#canvasSvg { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.region rect.body { fill-opacity: .28; stroke-width: 2; cursor: move; vector-effect: non-scaling-stroke; }
.region.sel rect.body { fill-opacity: .4; stroke-width: 3; }
.region.bad rect.body { stroke: var(--danger) !important; stroke-dasharray: 6 4; }
.preview-on .region rect.body { fill-opacity: 0; }
.preview-on .region.sel rect.body { fill-opacity: .12; }
.region text { fill: #fff; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: #000; stroke-width: 3px; }

/* playlists */
.playlist { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: var(--panel2); }
.pl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-head .pl-name { font-weight: 600; width: 160px; }
.pl-head input[type=number] { width: 78px; }
.pl-head .x { color: var(--muted); }
.pl-strip { margin: 10px 0 8px; position: relative; }
.pl-strip svg { width: 100%; display: block; background: #0d0f12; border: 1px solid var(--line); border-radius: 4px; }
.pl-strip rect { cursor: pointer; vector-effect: non-scaling-stroke; }
.pl-strip text { fill: #fff; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: #000; stroke-width: 2px; }
.items { display: flex; flex-direction: column; gap: 4px; min-height: 34px; }
.items .empty { color: var(--muted); font-size: 12px; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; text-align: center; }
.item { display: grid; grid-template-columns: 18px 64px 1fr 120px 70px 24px; gap: 8px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.item.dragging { opacity: .4; }
.item.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.item .handle { cursor: grab; color: var(--muted); text-align: center; }
.item img { width: 64px; height: 36px; object-fit: contain; background: #000; border-radius: 3px; }
.item .name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .warn { color: var(--warn); font-size: 11px; }
.item input { width: 100%; }
.item .secs { font-size: 12px; color: var(--muted); text-align: right; font-family: Consolas, monospace; }
.pl-foot { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.pl-foot .total { margin-left: auto; font-size: 12px; color: var(--muted); }

/* inspector */
.insp-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.insp-title input { font-weight: 600; width: 150px; }
.sub { font-size: 11px; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .6px; }
.region-list { display: flex; flex-direction: column; gap: 3px; }
.region-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 5px; cursor: pointer; font-size: 12px; }
.region-row:hover { background: var(--panel2); }
.region-row.sel { background: #24324a; }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* issues + export */
.issue { font-size: 12px; padding: 5px 8px; border-radius: 5px; margin-bottom: 4px; border-left: 3px solid; background: var(--panel2); }
.issue.error { border-color: var(--danger); }
.issue.warning { border-color: var(--warn); }
.issue.ok { border-color: var(--ok); }
.timing { font-size: 12px; margin-top: 10px; background: var(--panel2); border-radius: 6px; padding: 8px; line-height: 1.6; }
.job, .export { background: var(--panel2); border-radius: 6px; padding: 8px; margin-top: 8px; font-size: 12px; }
.job .bar { height: 6px; background: #0d0f12; border-radius: 3px; overflow: hidden; margin: 6px 0; }
.job .bar div { height: 100%; background: var(--accent); transition: width .4s; }
.job.done .bar div { background: var(--ok); }
.job.error { border-left: 3px solid var(--danger); }
.export .fname { font-family: Consolas, monospace; font-size: 11px; word-break: break-all; }
.export .row-btns { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.vok { color: var(--ok); } .vfail { color: var(--danger); }
details pre { white-space: pre-wrap; font-size: 11px; max-height: 220px; overflow: auto; background: #0d0f12; padding: 6px; border-radius: 4px; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; min-width: 380px; padding: 18px; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog h3 { color: var(--text); font-size: 14px; text-transform: none; letter-spacing: 0; }
dialog .grid2 { margin: 10px 0; }
dialog p { font-size: 12px; color: var(--muted); margin: 6px 0; line-height: 1.5; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #2a2f38; border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 70vw; z-index: 10; }
.toast.show { opacity: 1; }
.toast.err { border-color: var(--danger); }

.sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.crop-box .clip { position: absolute; overflow: hidden; }
.crop-box .clip > img, .crop-box .clip > video { position: absolute; max-width: none; object-fit: fill; display: block; }
.strip-tag { display: inline-block; font-size: 11px; color: #cfe3ff; background: #23324a; border-radius: 4px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }

/* templates + import */
dialog.wide { width: min(880px, 92vw); }
.tpl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; background: var(--panel2); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.tpl .tname { font-weight: 600; }
.tpl .tmeta { font-size: 12px; color: var(--muted); line-height: 1.6; }
.tpl .tacts { display: flex; gap: 6px; align-items: start; flex-wrap: wrap; justify-content: flex-end; }
.tpl svg { width: 220px; background: #0d0f12; border: 1px solid var(--line); border-radius: 4px; display: block; margin-top: 6px; }
.imp-files { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.imp-file { display: grid; grid-template-columns: 20px 64px 1fr auto; gap: 8px; align-items: center; font-size: 12px;
  background: var(--panel2); border-radius: 6px; padding: 4px 8px; }
.imp-file img { width: 64px; height: 30px; object-fit: contain; background: #000; }
.imp-group { background: var(--panel2); border-radius: 8px; padding: 10px; margin: 8px 0; }
.imp-group h4 { margin: 0 0 6px; font-size: 13px; }
.imp-group select { width: 100%; margin: 6px 0; }
.imp-opts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.imp-opts label { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }

.badge.gpu { font-size: 11px; padding: 2px 8px; background: #1f3326; color: #8fd18f; }

/* help video */
dialog.help { width: min(1280px, 94vw); }
dialog.help video { width: 100%; border-radius: 8px; background: #000; display: block; margin-top: 8px; }

/* users */
table.users { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 12px; }
table.users th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.users td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.users td.acts { text-align: right; white-space: nowrap; }
table.users label.check { margin: 0; }
.adduser { grid-template-columns: 1fr 1fr 110px 1fr; }
dialog .actions .spacer { flex: 1; }

/* two panes */
.panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px;
  min-height: 0; overflow-y: auto; }
.timebar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; }
.timebar label { flex-direction: row; align-items: center; gap: 4px; }
.timebar label > select { width: auto; }
.timebar input[type=range] { flex: 1; max-width: 420px; }
.pane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.pane-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pane-head h2 { margin-right: 6px; display: flex; align-items: center; gap: 6px; }
.pane-head input[type=number] { width: 74px; }
.pane-head label.check { margin: 0 0 0 6px; }
.step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent2);
  color: #fff; font-size: 12px; }
.stage { position: relative; overflow: auto; max-height: 46vh; min-height: 24px; background:
  repeating-conic-gradient(#16181d 0 25%, #1b1e24 0 50%) 0 0 / 24px 24px; border: 1px solid var(--line); border-radius: 4px; }
.stage > svg, .stage > img.pv { position: absolute; left: 0; top: 0; display: block; }
.stage > img.pv { display: none; pointer-events: none; }
.stage.preview-on > img.pv { display: block; }
.stage svg { user-select: none; touch-action: none; }
.stage svg text { fill: #fff; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.stage.preview-on .zone-body, .stage.preview-on .reg-body { fill-opacity: 0 !important; }
.zone-body, .reg-body { cursor: move; }
.handle-res { cursor: nwse-resize; fill: #fff; stroke: #000; }
.ref { fill: none; stroke-dasharray: 8 5; pointer-events: none; }
.ref.sel { pointer-events: all; fill: rgba(255, 255, 255, .08); cursor: move; }
.stage.drawing svg { cursor: crosshair; }
.stage.drawing .zone-body { cursor: crosshair; }
.stage.over { outline: 2px dashed var(--accent); }
.bad-rect { stroke: var(--danger) !important; stroke-dasharray: 6 4; }
.btn.on { background: var(--accent2); border-color: var(--accent); color: #fff; }
.pane-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.pane-body .rows { display: flex; flex-direction: column; gap: 3px; }
.row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 5px; cursor: pointer; font-size: 12px; }
.row:hover { background: var(--panel2); }
.row.sel { background: #24324a; }
.row .meta { color: var(--muted); margin-left: auto; text-align: right; font-family: Consolas, monospace; font-size: 11px; }
.insp .insp-title { margin-bottom: 6px; }
.empty-note { color: var(--muted); font-size: 12px; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; }

/* size mismatch */
.warn-tag { display: inline-block; font-size: 11px; font-weight: 600; color: #1a1300; background: var(--warn);
  border-radius: 4px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.item.mismatch, .drow.mismatch { border-color: var(--warn); border-left-width: 4px; }
.mismatch-banner { background: rgba(210, 153, 34, .14); border: 1px solid var(--warn); border-radius: 6px;
  padding: 7px 10px; margin: 0 0 8px; font-size: 12px; line-height: 1.7; }
.mismatch-banner .btn { margin-left: 4px; }

/* left sidebar: preview on top, media | playlist columns below */
.panel.left.side { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.preview-block { flex: none; display: flex; flex-direction: column; gap: 6px; }
.drawer-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drawer-head .swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.drawer-title { flex: 1; min-width: 0; }
.drawer-title b { font-size: 14px; }
.drawer-title .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px;
  border-top: 1px solid var(--line); padding-top: 10px; }
.side-col { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; border-radius: 6px; }
.side-col.over { background: rgba(61, 139, 253, .08); outline: 1px dashed var(--accent); }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.col-head h3 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-head h3 .muted { font-weight: 400; font-size: 11px; }
#mediaPanel .dropzone { padding: 8px; margin: 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.media.tile { position: relative; display: block; padding: 4px; border-radius: 6px; background: var(--panel2); cursor: grab;
  border: 1px solid transparent; min-width: 0; }
.media.tile:hover { border-color: var(--line); }
.media.tile .tthumb { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.media.tile .tthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.media.tile .tthumb .badge { position: absolute; left: 3px; bottom: 3px; font-size: 9.5px; padding: 0 4px; }
.media.tile .name { font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media.tile .meta { font-size: 10px; color: var(--muted); }
.media.tile .tdel { position: absolute; top: 5px; right: 5px; padding: 0 5px; line-height: 16px; background: rgba(0, 0, 0, .6);
  color: #ddd; display: none; }
.media.tile:hover .tdel { display: block; }
.crop-box { position: relative; overflow: hidden; background: #000; border-radius: 4px; outline: 1px solid var(--line); flex: none; }
.crop-box > img, .crop-box > video { position: absolute; max-width: none; object-fit: fill; display: block; }
.crop-box .none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.live-ctrl { display: flex; align-items: center; gap: 4px; margin-top: -2px; min-width: 0; }
.live-ctrl .icon-btn { font-size: 15px; }
#liveInfo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-panel .sub { margin: 4px 0 0; }
.dlist { display: flex; flex-direction: column; gap: 5px; min-height: 48px; flex: none;
  padding: 2px; border-radius: 6px; }
.dlist.over { background: rgba(61, 139, 253, .08); outline: 1px dashed var(--accent); }
.drow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 16px;
  grid-template-areas: "thumb info info rm" "thumb dur time time"; gap: 3px 7px; align-items: center;
  background: var(--panel2); border: 1px solid transparent; border-radius: 6px; padding: 5px; cursor: grab; }
.drow:hover { border-color: var(--line); }
.drow.cur { border-color: var(--accent); background: #1f2a3c; }
.drow.dragging { opacity: .4; }
.drow.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.drow .handle, .drow .num { display: none; }
.drow .thumb { grid-area: thumb; }
.drow .info { grid-area: info; min-width: 0; }
.drow .cname { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .info .muted { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .info .badge { font-size: 9.5px; padding: 0 4px; }
.drow .dur { grid-area: dur; flex-direction: row; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); }
.drow .dur span:first-child { display: none; }
.drow .dur span { white-space: nowrap; }
.dlist .drow .dur > input { width: 50px; padding: 1px 5px; font-size: 11.5px; -moz-appearance: textfield; appearance: textfield; }
.dlist .drow .dur > input::-webkit-inner-spin-button,
.dlist .drow .dur > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.drow .ctime { grid-area: time; font-size: 10px; color: var(--muted); font-family: Consolas, monospace; text-align: right; white-space: nowrap; }
.drow .rm { grid-area: rm; align-self: start; padding: 0 2px; }
.drow .warn-tag, .drow .strip-tag { display: none; }
.drow.mismatch .info .muted::after { content: " · scaled"; color: var(--warn); }
.dlist .empty { color: var(--muted); font-size: 12px; padding: 14px; border: 1px dashed var(--line); border-radius: 6px; text-align: center; }
.dadd { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.dadd select { flex: 1; min-width: 0; max-width: none; }
.dhint { line-height: 1.4; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: none; overflow-y: auto; }
  .layout > .panel.left { grid-row: auto; max-height: none; }
  .bottombar { grid-template-columns: 1fr; max-height: none; }
  .bb-col { border-left: none; border-top: 1px solid var(--line); max-height: none; }
}