/* HyperDC Database Manager. Colours come from the hx-* tokens, so both themes follow. Grids scroll inside their own box; the page itself never scrolls sideways. */
#db-app { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
#db-app[hidden] { display: none; }
.db-engine { margin-bottom: 0; }
.db-engine .hx-seg { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.db-engine .hx-seg > button { text-align: center; }

/* Top */
.db-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--hx-surface); border-bottom: 1px solid var(--hx-edge); min-width: 0; }
.db-brand { display: flex; align-items: center; gap: 8px; flex: none; }
.db-brand b { font-size: 0.95rem; font-weight: 600; color: var(--hx-ink); white-space: nowrap; }
.db-mark { height: 28px; width: auto; }
.db-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 0.82rem; color: var(--hx-ink-3); margin-left: 6px; }
.db-who i { color: var(--hx-accent); }
.db-who b { font-weight: 600; color: var(--hx-ink-2); white-space: nowrap; }
.db-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.db-top-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.db-top-tools .db-primary { margin-right: 6px; }
.db-menu-btn { display: none; }

/* Body */
.db-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 0; min-width: 0; }
.db-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: color-mix(in srgb, var(--hx-surface) 55%, transparent); border-right: 1px solid var(--hx-edge); }
.db-side-head { display: flex; align-items: center; gap: 4px; padding: 8px; flex: none; }
.db-find { height: 34px; flex: 1 1 auto; margin: 0; }
.db-tree { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 6px 12px; min-height: 0; }
.db-tree-empty { padding: 20px 12px; color: var(--hx-ink-3); font-size: 0.86rem; text-align: center; }
.db-tree-load { padding: 6px 8px 6px calc(10px + var(--d) * 14px); color: var(--hx-ink-3); font-size: 0.8rem; }
.db-n { position: relative; display: flex; align-items: center; min-width: 0; padding-left: calc(var(--d) * 14px); border-radius: 7px; }
.db-n:hover { background: color-mix(in srgb, var(--hx-accent) 8%, transparent); }
.db-c { flex: none; width: 22px; height: 28px; border: 0; background: none; padding: 0; color: var(--hx-ink-3); font-size: 0.66rem; display: inline-grid; place-items: center; }
button.db-c { cursor: pointer; }
.db-l { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; border: 0; background: none; padding: 0 2px; color: var(--hx-ink-2); font-size: 0.84rem; text-align: left; cursor: pointer; }
.db-l > i { color: var(--hx-accent); font-size: 0.78rem; width: 15px; text-align: center; flex: none; }
.db-l-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-l small { flex: none; margin-left: auto; padding-left: 8px; color: var(--hx-ink-3); font-size: 0.72rem; font-variant-numeric: tabular-nums; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-more { width: 26px; height: 26px; display: none; font-size: 0.8rem; }
.db-n:hover .db-more, .db-n:focus-within .db-more { display: inline-grid; }
@media (hover: none) { .db-more { display: inline-grid; } }
.db-d { display: flex; align-items: baseline; gap: 6px; padding: 2px 8px 2px calc(12px + var(--d) * 14px); font-size: 0.78rem; color: var(--hx-ink-2); min-width: 0; }
.db-d i { font-size: 0.62rem; color: var(--hx-ink-3); flex: none; width: 12px; text-align: center; }
.db-d.pk i { color: var(--hx-warn); }
.db-d span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.db-d small { color: var(--hx-ink-3); font-size: 0.72rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.db-d-head { padding: 6px 8px 1px calc(12px + var(--d) * 14px); font-size: 0.74rem; font-weight: 600; color: var(--hx-ink-3); }
.db-scrim { display: none; }

.db-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.db-tabs { display: flex; align-items: stretch; gap: 1px; overflow-x: auto; overflow-y: hidden; background: color-mix(in srgb, var(--hx-surface) 55%, transparent); border-bottom: 1px solid var(--hx-edge); min-height: 38px; scrollbar-width: none; }
.db-tabs::-webkit-scrollbar { height: 0; }
.db-tab { display: flex; align-items: center; flex: none; max-width: 240px; min-width: 0; border-right: 1px solid var(--hx-edge); color: var(--hx-ink-3); }
.db-tab.on { background: var(--hx-surface); color: var(--hx-ink); box-shadow: inset 0 -2px 0 var(--hx-accent); }
.db-tab-t { display: flex; align-items: center; gap: 7px; min-width: 0; border: 0; background: none; color: inherit; padding: 0 4px 0 12px; height: 38px; font-size: 0.82rem; font-weight: 500; cursor: pointer; }
.db-tab-t i { font-size: 0.76rem; color: var(--hx-accent); flex: none; }
.db-tab-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tab-x { width: 24px; height: 24px; margin-right: 6px; flex: none; border: 0; background: none; color: inherit; border-radius: 6px; font-size: 0.72rem; display: inline-grid; place-items: center; cursor: pointer; }
.db-tab-x:hover { background: color-mix(in srgb, var(--hx-accent) 14%, transparent); color: var(--hx-ink); }
.db-panes { position: relative; min-height: 0; min-width: 0; }
.db-pane { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.db-pane[hidden] { display: none; }
.db-empty { height: 100%; align-content: center; }
.db-empty p { margin: 0; font-size: 0.86rem; }
.db-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* Bars */
.db-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; padding: 6px 10px; background: var(--hx-surface); border-bottom: 1px solid var(--hx-edge); flex: none; min-width: 0; container-type: inline-size; }
.db-bar-fill { flex: 1 1 auto; }
.db-b { padding: 5px 10px; font-size: 0.8rem; border-radius: 8px; gap: 6px; border-color: transparent; background: transparent; color: var(--hx-ink-2); font-weight: 500; }
.db-b:hover { background: color-mix(in srgb, var(--hx-accent) 10%, transparent); color: var(--hx-ink); box-shadow: none; border-color: transparent; }
.db-b i { color: var(--hx-accent); }
.db-b.btn-primary { background: var(--hx-primary-fill); color: var(--hx-on-primary); }
.db-b.btn-primary i { color: inherit; }
.db-b:disabled { opacity: 0.45; }
.db-b.db-danger i { color: var(--hx-bad); }
.db-b.db-primary { background: color-mix(in srgb, var(--hx-accent) 12%, transparent); color: var(--hx-ink); }
.db-pick { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 5px 10px; border: 1px solid var(--hx-edge); border-radius: 8px; background: var(--hx-glass); color: var(--hx-ink); font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.db-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-pick i { flex: none; font-size: 0.62rem; color: var(--hx-ink-3); }
.db-pick i:first-child { font-size: 0.76rem; color: var(--hx-accent); }
.db-pick:hover { border-color: var(--hx-edge-strong); }
.db-pick:disabled { opacity: 0.5; cursor: default; }
@container (max-width: 620px) { .db-b span { display: none; } .db-b.btn-primary span { display: inline; } .db-b { padding: 6px 8px; } }

.db-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 14px; }
.db-load { display: grid; place-items: center; padding: 40px; color: var(--hx-ink-3); }
.db-note { padding: 7px 12px; font-size: 0.82rem; background: color-mix(in srgb, var(--hx-warn) 12%, var(--hx-surface)); color: var(--hx-ink); border-bottom: 1px solid var(--hx-edge); flex: none; }
.db-m-note { font-size: 0.84rem; color: var(--hx-ink-2); margin: 0 0 12px; overflow-wrap: anywhere; }
.db-m-note i { margin-right: 6px; }
.db-m-note.bad { color: var(--hx-bad); }
.db-m-note.warn { color: var(--hx-warn); }
.db-m-note.ok { color: var(--hx-ok); }
.db-m-note ul { margin: 6px 0 0; padding-left: 20px; }
.db-pre { margin: 0; padding: 12px; max-height: 50dvh; overflow: auto; font-family: var(--hx-font-mono); font-size: 0.78rem; line-height: 1.5; color: var(--hx-console-ink); background: var(--hx-console-bg); border: 1px solid var(--hx-edge); border-radius: 10px; white-space: pre; }

/* Filters */
.db-filters { display: grid; gap: 6px; padding: 8px 10px; background: var(--hx-surface); border-bottom: 1px solid var(--hx-edge); flex: none; max-height: 40dvh; overflow-y: auto; }
.db-filters[hidden] { display: none; }
.db-flt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.db-flt .db-pick { max-width: 200px; }
.db-flt input { flex: 1 1 140px; min-width: 100px; max-width: 420px; height: 31px; }
.db-flt-acts { display: flex; flex-wrap: wrap; gap: 4px; }

/* Grid */
.db-grid-box { flex: 1 1 auto; min-height: 0; min-width: 0; }
.db-grid { position: relative; overflow: auto; height: 100%; width: 100%; outline: 0; overscroll-behavior: contain; background: var(--hx-bg); }
.db-t { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; color: var(--hx-ink); }
.db-t th { position: sticky; top: 0; z-index: 2; height: 42px; padding: 3px 8px; background: var(--hx-surface); border-right: 1px solid var(--hx-edge); border-bottom: 1px solid var(--hx-edge-2); font-weight: 600; text-align: left; vertical-align: middle; cursor: pointer; user-select: none; overflow: hidden; }
.db-t th.nosort { cursor: default; }
.db-t th:hover:not(.nosort):not(.db-g-n) { background: color-mix(in srgb, var(--hx-accent) 8%, var(--hx-surface)); }
.db-g-h { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.db-g-h b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.db-g-h i { font-size: 0.64rem; color: var(--hx-accent); flex: none; }
.db-t th small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--hx-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-g-rz { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; touch-action: none; }
.db-g-rz:hover { background: color-mix(in srgb, var(--hx-accent) 40%, transparent); }
.db-t td { height: 30px; max-height: 30px; padding: 0 8px; border-right: 1px solid var(--hx-edge); border-bottom: 1px solid var(--hx-edge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--hx-bg); line-height: 29px; }
.db-t tr:nth-child(even) td { background: color-mix(in srgb, var(--hx-surface) 40%, var(--hx-bg)); }
.db-t tr:hover td { background: color-mix(in srgb, var(--hx-accent) 7%, var(--hx-bg)); }
.db-t tr.sel td { background: color-mix(in srgb, var(--hx-accent) 13%, var(--hx-bg)); }
.db-t td.pick { background: color-mix(in srgb, var(--hx-accent) 24%, var(--hx-bg)) !important; box-shadow: inset 0 0 0 1px var(--hx-accent); }
.db-g-n { position: sticky; left: 0; z-index: 1; text-align: center; color: var(--hx-ink-3); font-size: 0.72rem; padding: 0 !important; font-variant-numeric: tabular-nums; }
.db-t th.db-g-n { z-index: 3; cursor: default; }
.db-t td.db-g-n { background: var(--hx-surface); }
.db-g-c, .db-g-all { border: 0; background: none; padding: 0; width: 28px; height: 28px; color: var(--hx-ink-3); font-size: 0.86rem; cursor: pointer; }
.db-g-c[aria-pressed="true"] { color: var(--hx-accent); }
.db-g-sp td { padding: 0; height: auto; border: 0; background: transparent !important; line-height: 0; }
.db-null { color: var(--hx-ink-3); font-style: italic; font-size: 0.74rem; }
.db-bin { display: inline-flex; align-items: baseline; gap: 5px; color: var(--hx-ink-3); font-family: var(--hx-font-mono); font-size: 0.74rem; }
.db-bin i { color: var(--hx-accent); font-size: 0.7rem; }
.db-cut { color: var(--hx-accent); font-weight: 700; padding-left: 2px; }
.db-g-edit { position: absolute; z-index: 4; display: flex; align-items: stretch; background: var(--hx-surface); box-shadow: 0 0 0 2px var(--hx-accent), var(--hx-shadow-sm); border-radius: 3px; }
.db-g-edit textarea { flex: 1 1 auto; min-width: 0; height: 30px; min-height: 30px; max-height: 120px; resize: both; border: 0; outline: 0; padding: 4px 8px; background: transparent; color: var(--hx-ink); font: inherit; font-size: 0.8rem; line-height: 1.5; white-space: pre; }
.db-g-null { flex: none; border: 0; border-left: 1px solid var(--hx-edge); background: transparent; color: var(--hx-ink-3); font-size: 0.68rem; font-weight: 600; padding: 0 7px; cursor: pointer; }
.db-g-null:hover { color: var(--hx-accent); }
.db-foot { display: flex; align-items: center; gap: 4px; padding: 3px 10px; min-height: 38px; font-size: 0.78rem; color: var(--hx-ink-3); background: var(--hx-surface); border-top: 1px solid var(--hx-edge); flex: none; font-variant-numeric: tabular-nums; min-width: 0; }
.db-foot-t { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-size { border: 0; background: none; color: var(--hx-ink-2); font-size: 0.78rem; padding: 4px 8px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.db-size:hover { background: color-mix(in srgb, var(--hx-accent) 10%, transparent); }

/* Lists and facts */
.db-list-wrap { overflow-x: auto; }
.db-list { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.db-list th { padding: 0; border-bottom: 1px solid var(--hx-edge-2); text-align: left; }
.db-list th button { display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 7px 10px; border: 0; background: none; color: var(--hx-ink-3); font-weight: 600; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.db-list th.r button { justify-content: flex-end; }
.db-list th button i { font-size: 0.62rem; color: var(--hx-accent); }
.db-list td { padding: 7px 10px; border-bottom: 1px solid var(--hx-edge); overflow-wrap: anywhere; }
.db-list .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-list tr.click { cursor: pointer; }
.db-list tr.click:hover td { background: color-mix(in srgb, var(--hx-accent) 8%, transparent); }
.db-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.db-fact { padding: 10px 12px; border: 1px solid var(--hx-edge); border-radius: 12px; background: var(--hx-glass); min-width: 0; }
.db-fact small { display: block; color: var(--hx-ink-3); font-size: 0.74rem; }
.db-fact b { display: block; font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; }
.db-h { margin: 18px 0 6px; font-size: 0.95rem; }

/* Editor */
.ed { position: relative; display: flex; height: 100%; min-height: 0; min-width: 0; background: var(--hx-console-bg); --ed-fs: 13px; }
@media (pointer: coarse) { .ed { --ed-fs: 16px; } }
.ed-gutter { position: relative; flex: none; overflow: hidden; border-right: 1px solid var(--hx-edge); background: color-mix(in srgb, var(--hx-surface) 60%, var(--hx-console-bg)); }
.ed-gutter-in { position: absolute; inset: 8px 0 0 0; }
.ed-n-l { position: absolute; right: 8px; height: 20px; line-height: 20px; font-family: var(--hx-font-mono); font-size: 11.5px; color: var(--hx-ink-3); user-select: none; }
.ed-n-l.bad { color: #fff; background: var(--hx-bad); padding: 0 5px; right: 3px; border-radius: 4px; }
.ed-main { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ed-line { position: absolute; left: 0; right: 0; top: 8px; height: 20px; background: color-mix(in srgb, var(--hx-accent) 7%, transparent); pointer-events: none; }
.ed-hl { position: absolute; left: 0; top: 0; margin: 0; padding: 8px 12px; overflow: visible; background: none; border: 0; font: var(--ed-fs)/20px var(--hx-font-mono); color: var(--hx-console-ink); pointer-events: none; white-space: pre; tab-size: 4; }
.ed-l { position: absolute; left: 12px; margin-top: 8px; height: 20px; white-space: pre; }
.ed-ta { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 8px 12px; border: 0; outline: 0; resize: none; overflow: auto; background: transparent; color: transparent; caret-color: var(--hx-ink); font: var(--ed-fs)/20px var(--hx-font-mono); white-space: pre; tab-size: 4; -webkit-text-fill-color: transparent; }
.ed-ta::selection { background: color-mix(in srgb, var(--hx-accent) 32%, transparent); color: transparent; }
.ed-probe { position: absolute; visibility: hidden; left: 0; top: 0; font: var(--ed-fs)/20px var(--hx-font-mono); white-space: pre; }
.ed-k { color: var(--hx-accent); font-weight: 600; }
.ed-t { color: var(--hx-info); }
.ed-f { color: var(--hx-accent-2); }
.ed-s { color: var(--hx-ok); }
.ed-n { color: var(--hx-warn); }
.ed-c { color: var(--hx-ink-3); font-style: italic; }
.ed-i { color: var(--hx-ink-2); }
.ed-pop { position: absolute; z-index: 20; width: min(300px, 80%); max-height: 216px; overflow-y: auto; padding: 4px; border-radius: 10px; background: var(--hx-surface); border: 1px solid var(--hx-edge); box-shadow: var(--hx-shadow); }
.ed-pop[hidden] { display: none; }
.ed-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--hx-ink); text-align: left; font-family: var(--hx-font-mono); font-size: 0.78rem; cursor: pointer; }
.ed-pop button i { width: 14px; font-size: 0.7rem; color: var(--hx-accent); flex: none; text-align: center; }
.ed-pop button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pop button.on, .ed-pop button:hover { background: color-mix(in srgb, var(--hx-accent) 15%, transparent); }

/* Query tab */
.q-split { --ed: 42%; flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(80px, var(--ed)) 7px minmax(120px, 1fr); }
.q-ed { min-height: 0; min-width: 0; }
.q-grip { cursor: row-resize; background: var(--hx-surface); border-top: 1px solid var(--hx-edge); border-bottom: 1px solid var(--hx-edge); touch-action: none; }
.q-grip:hover { background: color-mix(in srgb, var(--hx-accent) 25%, var(--hx-surface)); }
.q-res { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.q-res-head { display: flex; align-items: center; min-width: 0; background: var(--hx-surface); border-bottom: 1px solid var(--hx-edge); padding-right: 4px; }
.q-res-tabs { display: flex; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.q-res-tabs::-webkit-scrollbar { height: 0; }
.q-res-tabs button { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px; border: 0; background: none; color: var(--hx-ink-3); font-size: 0.8rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.q-res-tabs button i { font-size: 0.72rem; color: var(--hx-accent); }
.q-res-tabs button small { color: var(--hx-ink-3); font-variant-numeric: tabular-nums; }
.q-res-tabs button[aria-selected="true"] { color: var(--hx-ink); box-shadow: inset 0 -2px 0 var(--hx-accent); }
.q-bad, .q-res-tabs button i.q-bad { color: var(--hx-bad); }
.q-ok { color: var(--hx-ok); }
.q-res-body { position: relative; min-height: 0; min-width: 0; }
.q-view { position: absolute; inset: 0; min-width: 0; }
.q-view[hidden] { display: none; }
.q-msg { border: 0; border-radius: 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.q-status { padding: 4px 12px; min-height: 26px; font-size: 0.76rem; color: var(--hx-ink-3); background: var(--hx-surface); border-top: 1px solid var(--hx-edge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-list-m { width: min(720px, 100%); }
.q-find { height: 36px; margin-bottom: 10px; }
.q-items { display: grid; gap: 6px; max-height: 56dvh; overflow-y: auto; }
.q-item { display: grid; gap: 4px; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--hx-edge); border-radius: 10px; background: var(--hx-glass); color: var(--hx-ink); text-align: left; cursor: pointer; }
.q-item:hover { border-color: var(--hx-edge-strong); }
.q-item-top { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 0.82rem; flex-wrap: wrap; }
.q-item-top i:not(.q-ok):not(.q-bad) { color: var(--hx-accent); }
.q-item-top small { color: var(--hx-ink-3); margin-left: auto; }
.q-item code { font-family: var(--hx-font-mono); font-size: 0.74rem; color: var(--hx-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 5.4em; overflow: hidden; display: block; background: none; padding: 0; }
.q-snip { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.q-snip .q-item { flex: 1 1 auto; }

/* Modals */
.db-cell-m, .dz-prev { width: min(820px, 100%); }
.db-cell-ta { min-height: 280px; height: 46dvh; font-family: var(--hx-font-mono); font-size: 0.8rem; white-space: pre; overflow: auto; }
.db-row-m { width: min(720px, 100%); }
.db-form { display: grid; gap: 10px; max-height: 62dvh; overflow-y: auto; padding-right: 4px; }
.db-f { display: grid; gap: 4px; min-width: 0; }
.db-f label { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 0.82rem; min-width: 0; }
.db-f label b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-f label small { color: var(--hx-ink-3); font-size: 0.72rem; flex: none; }
.db-f label i { color: var(--hx-warn); font-size: 0.68rem; }
.db-f-in { display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
.db-f-in textarea { flex: 1 1 auto; min-width: 0; min-height: 36px; resize: vertical; font-size: 0.84rem; }
.db-null-t { flex: none; height: 36px; padding: 0 9px; border: 1px solid var(--hx-edge); border-radius: 9px; background: none; color: var(--hx-ink-3); font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.db-null-t[aria-pressed="true"] { background: color-mix(in srgb, var(--hx-accent) 16%, transparent); color: var(--hx-ink); border-color: var(--hx-edge-strong); }
.db-opts { display: grid; gap: 4px; margin-bottom: 12px; }
.db-opts:empty { display: none; }
.db-drop { display: grid; place-items: center; gap: 4px; padding: 22px 14px; border: 1.5px dashed var(--hx-edge-2); border-radius: 14px; color: var(--hx-ink-2); text-align: center; cursor: pointer; margin-bottom: 12px; }
.db-drop[hidden] { display: none; }
.db-drop i { font-size: 1.6rem; color: var(--hx-accent); }
.db-drop b { font-size: 0.9rem; overflow-wrap: anywhere; }
.db-drop small { color: var(--hx-ink-3); font-size: 0.76rem; }
.db-drop:hover, .db-drop.over { border-color: var(--hx-accent); background: color-mix(in srgb, var(--hx-accent) 6%, transparent); }
.db-prog { margin-bottom: 12px; }
.db-prog[hidden], .db-scan[hidden] { display: none; }
.db-prog-bar { height: 6px; border-radius: 9px; background: var(--hx-track); overflow: hidden; }
.db-prog-bar i { display: block; height: 100%; width: 0; background: var(--hx-accent); transition: width 0.2s; }
.db-prog small { color: var(--hx-ink-3); font-size: 0.76rem; }
.db-scan p { margin: 0 0 8px; font-size: 0.88rem; overflow-wrap: anywhere; }

/* Designer */
.dz-name { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: 0.8rem; color: var(--hx-ink-3); flex: 0 1 340px; }
.dz-name span { flex: none; }
.dz-name input { min-width: 0; }
.dz-tabs { margin: 8px 12px 0; align-self: flex-start; flex: none; }
.dz-tabs > button[aria-selected="true"] { background: var(--hx-glass-2); color: var(--hx-ink); box-shadow: var(--hx-bevel), 0 0 0 1px var(--hx-edge-strong); }
.dz-body { padding-top: 10px; }
.dz-r { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(120px, 0.9fr) 90px minmax(100px, 1fr) auto 32px; align-items: end; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--hx-edge); min-width: 0; }
.dz-r.locked { opacity: 0.65; }
.dz-r2 { grid-template-columns: minmax(130px, 1fr) minmax(130px, 2fr) auto 32px; }
.dz-r3 { grid-template-columns: minmax(120px, 1fr) minmax(90px, 1fr) minmax(100px, 1fr) minmax(90px, 1fr) 118px 118px 32px; }
.dz-c { display: grid; gap: 3px; margin: 0; min-width: 0; font-size: 0.72rem; color: var(--hx-ink-3); }
.dz-c input { height: 31px; min-width: 0; }
.dz-c .db-pick { width: 100%; justify-content: space-between; height: 31px; }
.dz-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 31px; }
.dz-t { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 3px 2px; color: var(--hx-ink-2); font-size: 0.78rem; cursor: pointer; white-space: nowrap; }
.dz-t[aria-checked="true"] i { color: var(--hx-accent); }
.dz-t i { color: var(--hx-ink-3); }
.dz-x i { color: var(--hx-ink-3); }
.dz-add { padding: 10px 0; }
.dz-picks { display: grid; gap: 2px; max-height: 50dvh; overflow-y: auto; margin-bottom: 10px; }
.dz-pick { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--hx-ink); text-align: left; font-size: 0.84rem; cursor: pointer; min-width: 0; }
.dz-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-pick small { margin-left: auto; color: var(--hx-accent); font-weight: 700; }
.dz-pick:hover { background: color-mix(in srgb, var(--hx-accent) 9%, transparent); }
.dz-pick[aria-checked="true"] i { color: var(--hx-accent); }

/* Diagram */
.dg-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; background: var(--hx-bg); }
.dg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; }
.dg:active { cursor: grabbing; }
.dg-note { font-size: 0.76rem; color: var(--hx-ink-3); }
.dg-t { cursor: move; }
.dg-box { fill: var(--hx-surface); stroke: var(--hx-edge-2); }
.dg-head { fill: color-mix(in srgb, var(--hx-accent) 18%, var(--hx-surface)); }
.dg-name { fill: var(--hx-ink); font-size: 13px; font-weight: 600; }
.dg-row { fill: transparent; }
.dg-t:hover .dg-box { stroke: var(--hx-accent); }
.dg-col { fill: var(--hx-ink-2); font-size: 12px; }
.dg-type { fill: var(--hx-ink-3); font-size: 10.5px; font-family: var(--hx-font-mono); }
.dg-key { fill: var(--hx-warn); font-size: 9.5px; font-weight: 700; }
.dg-key.fk { fill: var(--hx-accent); }
.dg-more { fill: var(--hx-ink-3); font-size: 11px; }
.dg-edge { fill: none; stroke: var(--hx-accent); stroke-width: 1.4; opacity: 0.75; }
.dg-dot { fill: var(--hx-accent); }

/* Tablet: the tree becomes a drawer */
@media (max-width: 1023.98px) {
  .db-body { grid-template-columns: minmax(0, 1fr); }
  .db-side { position: fixed; z-index: 1000; left: 0; top: 0; bottom: 0; width: min(320px, 88vw); background: var(--hx-surface); transform: translateX(-102%); transition: transform 0.18s ease; }
  [data-drawer="1"] .db-side { transform: none; box-shadow: var(--hx-shadow); }
  [data-drawer="1"] .db-scrim { display: block; position: fixed; inset: 0; z-index: 999; background: var(--hx-scrim); }
  .db-menu-btn { display: inline-grid; }
  .db-more { display: inline-grid; }
  .dz-r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 767.98px) {
  .db-brand b, .db-who span { display: none; }
  .db-who { margin-left: 0; }
  .db-top { padding: 6px 8px; gap: 6px; }
  .db-top-tools .db-primary span { display: none; }
  .q-split { --ed: 38%; }
  .dz-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dz-r2 { grid-template-columns: minmax(0, 1fr); }
  .dz-r3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dz-flags { grid-column: 1 / -1; }
  .dz-x { justify-self: end; grid-column: 1 / -1; }
  .dz-name { flex: 1 1 100%; }
  .db-list thead { display: none; }
  .db-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 6px 0; border-bottom: 1px solid var(--hx-edge); }
  .db-list td { border: 0; padding: 2px 10px; }
  .db-list td.r { text-align: left; }
}

/* Import and export: every format is a card. */
.hx-modal > .tool-modal { margin: auto; place-self: center; }
.tool-modal.db-files { width: min(680px, 100%); }
.db-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.db-cards[hidden] { display: none; }
.db-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; column-gap: 10px; padding: 9px 11px; border: 1px solid var(--hx-edge); border-radius: 12px; background: var(--hx-glass); color: var(--hx-ink); text-align: left; cursor: pointer; }
.db-card i { grid-row: span 2; font-size: 1.15rem; color: var(--hx-accent); }
.db-card b { font-size: 0.84rem; font-weight: 600; overflow-wrap: anywhere; }
.db-card small { font-size: 0.72rem; color: var(--hx-ink-3); overflow-wrap: anywhere; }
.db-card:hover { border-color: var(--hx-edge-strong); }
.db-card[aria-checked="true"] { border-color: var(--hx-accent); background: color-mix(in srgb, var(--hx-accent) 10%, transparent); }
.db-about { min-height: 2.6em; margin: 0 0 12px; font-size: 0.84rem; color: var(--hx-ink-2); overflow-wrap: anywhere; }
.db-about.warn { color: var(--hx-warn); }
.db-prog-bar.run i { width: 35%; animation: db-prog-run 1.3s ease-in-out infinite; }
@keyframes db-prog-run { from { margin-left: -35%; } to { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .db-prog-bar.run i { animation: none; width: 100%; opacity: 0.5; } }
.db-file-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; font-size: 0.88rem; }
.db-file-line i { color: var(--hx-accent); }
.db-file-line b { min-width: 0; overflow-wrap: anywhere; }
.db-file-line span { color: var(--hx-ink-3); font-size: 0.8rem; }
.db-file-line .btn { margin-left: auto; }
.db-m-note code { overflow-wrap: anywhere; font-size: 0.78rem; }
.db-pick.db-wide { width: 100%; justify-content: space-between; }
.db-rows .tool-field { margin-bottom: 10px; }
.db-map { display: grid; gap: 6px; }
.db-map-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--hx-edge); }
.db-map-row:first-child { border-top: 0; }
.db-map-row > i { color: var(--hx-ink-3); font-size: 0.7rem; }
.db-map-from { min-width: 0; display: grid; }
.db-map-from b, .db-map-from small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-map-from b { font-size: 0.84rem; font-weight: 600; }
.db-map-from small { font-size: 0.72rem; color: var(--hx-ink-3); }
.db-map-to { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.db-map-to .db-wide { grid-column: 1 / -1; }
.db-map-to .hx-field input { min-width: 0; width: 100%; }
.db-map-to .db-pick { max-width: 150px; }
.db-map-to .db-wide { max-width: 100%; }
.db-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 8px; margin-bottom: 12px; }
.db-sources[hidden] { display: none; }
.db-sources .db-drop { margin-bottom: 0; }
.db-sources .db-drop:only-of-type, .db-host-note { grid-column: 1 / -1; }
.db-host-note { margin: 0; font-size: 0.78rem; color: var(--hx-ink-3); overflow-wrap: anywhere; }
.db-host-note i { margin-right: 6px; }
.tool-modal.db-host { width: min(560px, 100%); }
.db-host-path { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; font-size: 0.84rem; color: var(--hx-ink-2); }
.db-host-path span { min-width: 0; overflow-wrap: anywhere; }
.db-host-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: min(52vh, 420px); overflow-y: auto; border: 1px solid var(--hx-edge); border-radius: 12px; }
.db-host-list li + li { border-top: 1px solid var(--hx-edge); }
.db-host-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none; color: var(--hx-ink); font-size: 0.86rem; text-align: left; cursor: pointer; }
.db-host-row:hover, .db-host-row:focus-visible { background: color-mix(in srgb, var(--hx-accent) 8%, transparent); }
.db-host-row i { color: var(--hx-accent); }
.db-host-row span { min-width: 0; overflow-wrap: anywhere; }
.db-host-row small { color: var(--hx-ink-3); font-size: 0.76rem; white-space: nowrap; }
.db-host-empty { padding: 18px 12px; text-align: center; color: var(--hx-ink-3); font-size: 0.84rem; }
@media (max-width: 520px) {
    .db-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .db-map-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .db-map-row > i { display: none; }
}