:root{
  --bg: #f4f6f8;
  --card: #ffffff;
  --border: #d7dde3;
  --text: #17212b;
  --muted: #6b7a88;
  --shadow: 0 1px 10px rgba(0,0,0,.06);

  --row-h: 18px;
  --sidebar-wide: min(520px, 38vw);
  --sidebar-narrow: min(400px, 30vw);
  --plot-sidebar-wide: min(520px, 38vw);
  --plot-sidebar-narrow: min(400px, 30vw);

  /* Logger columns */
  --log-cols: 60px 140px 72px 56px 56px 92px minmax(240px, 1fr);
  --log-minw: 660px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

*{ box-sizing:border-box; }
html, body { height: 100%; margin: 0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

#app{
  height: 100vh;
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.leftTop{ display:flex; align-items:center; gap: 10px; }
.title{ font-weight: 750; letter-spacing: .2px; }

.status{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}
.dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  background: #999;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 10px;
  overflow: hidden;
}

#main{
  flex: 1 1 auto;
  display:flex;
  gap: 10px;
  min-height: 0;
}

/* Sidebar */
.sidebar{
  width: var(--sidebar-wide);
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  transition: width .16s ease;
}

.sidebarReplace{
  width: 50px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 0px;
}

.sidebarReplace.hidden{
  width: 100px;
  padding: 0;
  border: 0;
  margin: 0;
  display: none;
}


#sidebarReplacecard{
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex-grow: 1;
  padding: 6px 6px;
}

.sidebar.hidden{ width: 0; padding: 0; border: 0; margin: 0; }
.sidebar.hidden > *{ display:none; }

.sidebar.narrow{ width: var(--sidebar-narrow); }

.sidebarCard{
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

#connCard{ flex: 1.1 1 0; }
#filesCard{ flex: 0.9 1 0; overflow:auto; }

.sectionTitle{ font-weight: 650; color: var(--text); }

.row{ display:flex; align-items:center; gap: 8px; }
.row.split{ justify-content: space-between; }

.actions{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
.grow{ flex: 1 1 auto; min-width: 120px; }

.btn{
  border: 1px solid var(--border);
  background: #fff;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 650;
  color: var(--text);
}
.btn:hover{ border-color: #c4cdd6; }
.btn:disabled{ opacity: .55; cursor: not-allowed; }
.btn.primary{
  border-color: rgba(42,125,225,.35);
  background: rgba(42,125,225,.08);
}

.inp, select, .num{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  outline: none;
  background: #fff;
}
.num{ width: 140px; }

.grid2{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items:center;
}

.hint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  padding: 4px 0 2px;
}
.hint.small{ font-size: 12px; }

.vlistEmpty{
  color: var(--muted);
  font-size: 13px;
  padding: 24px 16px;
  text-align: center;
  line-height: 1.5;
}

.infoHint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  background: #f0f4f8;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.textarea{
  width: 100%;
  min-height: 80px;
  resize: vertical;
  border: 1px solid var(--border);
  background: #fbfcfd;
  border-radius: var(--radius-md);
  padding: 8px;
  outline: none;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.filedroparea {
  transition: border-color 0.2s, background-color 0.2s;
}

/* Accepted file hover */
.filedroparea.acceptfile {
  border: 2px solid #1e90ff; /* blue border */
  background-color: #e0f0ff; /* light blue background */
}

/* Rejected file hover */
.filedroparea.rejectfile {
  background: repeating-linear-gradient(
    135deg,
    #fff4e0,
    #fff4e0 10px,
    #ffd59f 10px,
    #ffd59f 20px
  );
}

/* Right pane / tabs */
#content{
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  min-height: 0;
}

.tabs{
  display:flex;
  gap: 2px;
  padding: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.tabBtn{
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  border-radius: 6px 6px 0 0;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  position: relative;
  margin-bottom: -2px;
}
.tabBtn:hover{
  color: var(--text);
  background: rgba(0,0,0,.03);
}
.tabBtn.active{
  color: #2a7de1;
  background: var(--card);
  border-bottom-color: var(--card);
  box-shadow: 0 -1px 3px rgba(0,0,0,.05);
}

.tabPane{
  display:none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
}
.tabPane.active{ display:flex; }

/* Virtual list base */
.vlist{
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border);
  background: #fbfcfd;
  border-radius: var(--radius-md);
  overflow: auto;
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
.vlistPad{ width: 1px; opacity: 0; }
.vlistItems{ position: absolute; left: 0; right: 0; top: 0; }

.vrow{
  height: var(--row-h);
  line-height: var(--row-h);
  padding: 0 8px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  cursor: pointer;
}
.vrow:hover{ background: rgba(42,125,225,.04); }
.vrow .muted{ color: var(--muted); }

/* Column logger header (created by JS) */
.vlist.hasHeader{ position: relative; }

.vlistHeader{
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: var(--log-cols);
  min-width: var(--log-minw);
  align-items: start;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: #fbfcfd;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.vlistHeader .hcell{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  line-height: 1.05;
}

.vlistHeader .hTitle{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vlistHeader select.hFilter{
  width: 100%;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.2;
}


.vrow.cols{
  display: grid;
  grid-template-columns: var(--log-cols);
  min-width: var(--log-minw);
  align-items: center;
  padding: 0 8px;        /* override .vrow padding to match header */
}

.vrow.cols .cell{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 0 !important;
}

/* Plot canvas stack */
.plotCanvasStack{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #3E4756;
  overflow: hidden;
}
.plotCanvasStack canvas{
  width: 100%;
  flex: 1 1 0;
  min-height: 80px;
  display: block;
}



/* Plot layout */
.plotLayout{
  display:flex;
  gap: 10px;
  min-height: 0;
  height: 100%;
}
.plotMain{
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  min-height: 0;
}

.plotMenu{
  width: var(--plot-sidebar-wide);
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  transition: width .16s ease;
}
.plotMenu.hidden{ width: 0; padding: 0; border: 0; margin: 0; }
.plotMenu.hidden > *{ display:none; }
.plotMenu.narrow{ width: var(--plot-sidebar-narrow); }

#plotMenuToggle.hidden{
  display: none;
}

.plotCfg{ display:flex; flex-direction: column; gap: 8px; min-height: 0; }
.plotSeriesList{ display:flex; flex-direction: column; gap: 10px; }

.plotGroup{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plotGroupHeader{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.plotGroupHeader .plotGroupTitle{ flex: 1; }
.plotGroupHeader .binaryLbl{
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.plotGroupHeader .binaryLbl input{ margin: 0; }

.seriesRow{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  background: #fff;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.seriesTop{ display:flex; align-items:center; gap: 8px; }
.seriesTop .grow{ flex: 1 1 auto; }
.seriesTop .miniLbl{ color: var(--muted); font-size: 12px; width: 24px; }

.acWrap{ position: relative; width: 100%; }
.acList{
  position:absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 50;
  max-height: 240px;
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 4px;
}
.acItem{
  display:grid;
  grid-template-columns: 72px 64px 48px 1fr;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
.acItem:hover{ background: rgba(0,0,0,.04); }
.acItem .name{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }

/* File tree */
.fileTree{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fbfcfd;
  padding: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
.treeLine{
  display:flex;
  padding: 1px 0;
  line-height: 1.4;
  white-space: pre;
}
.treePrefix{ color: var(--muted); user-select: none; }
.treeName{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

.cell{
  border-radius: 0px;
}

/* Marked up tab: different column layout */
#markupList{
  --log-cols: 60px 100px 72px 56px 56px minmax(320px, 1fr);
  --log-minw: 640px;
}

/* Latest tab: same as marked up */
#latestList{
  --log-cols: 60px 100px 72px 56px 56px 64px minmax(320px, 1fr);
  --log-minw: 720px;
}

/* OD tab */
#odList{
  --log-cols: 72px 92px 72px minmax(180px, 1fr) minmax(200px, 1fr) 72px minmax(200px, 1fr) 72px;
  --log-minw: 980px;
}

/* Type-specific cell (2 rows x N columns, N varies by type) */
.tsGrid{
  display: grid;
  grid-template-columns: repeat(var(--ts-cols), minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 2px;
  align-content: center;
  width: 100%;
  line-height: 1.1;
}
.tsCell{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsLabel{
  font-size: 0.85em;
  opacity: 0.75;
}
.tsValue{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.cell.cnt{ text-align: right; padding-right: 10px; color: var(--muted); }

.msgErr{
  background: #ffd6d6;
}

.msgWarn{
  background: #fff4d4;
}

/* ========= Message Details Panel ========= */
.messageDetails{
  flex: 0 0 auto;
  max-height: 400px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detailsContent{
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.detailsSelector{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.detailsSelector label{
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.detailsSelector .inp{
  width: 100px;
}

.detailsSelector .btnClose{
  margin-left: auto;
  color: var(--muted);
  padding: 4px 10px;
  font-size: 18px;
  line-height: 1;
}

.detailsBody{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 8px;
  max-height: 300px;
  overflow-y: auto;
}

/* Details sections */
.detailSection{
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detailSection .sectionTitle{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Horizontal table-like detail layout (similar to tsGrid) */
.detailTable{
  display: grid;
  grid-template-columns: repeat(var(--dt-cols), minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 4px;
  align-content: center;
  width: 100%;
}

.dtLabel{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtValue{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtValue.error{
  color: #E74C3C;
}

.dtValue.warning{
  color: #F39C12;
}

/* Byte Inspector */
.byteInspector{
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.byteInspectorContainer{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.byteInspectorButtons{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Byte table - horizontal layout with individual byte columns */
.byteTable{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  flex: 1;
  min-width: 0;
}

.btRow{
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 24px;
}

.btCell{
  min-width: 56px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

/* Spanning cells for multi-byte groups */
.btSpan2{ min-width: calc(56px * 2 + 8px); }
.btSpan3{ min-width: calc(56px * 3 + 8px * 2); }
.btSpan4{ min-width: calc(56px * 4 + 8px * 3); }
.btSpan5{ min-width: calc(56px * 5 + 8px * 4); }
.btSpan6{ min-width: calc(56px * 6 + 8px * 5); }
.btSpan7{ min-width: calc(56px * 7 + 8px * 6); }
.btSpan8{ min-width: calc(56px * 8 + 8px * 7); }

.btRow:nth-child(1) .btCell{
  /* Byte numbers */
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.btRow:nth-child(2) .btCell{
  /* Payload hex */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: #f8f9fa;
  border-radius: var(--radius-sm);
}

.btRow:nth-child(3) .btCell{
  /* Dropdown row */
  padding: 2px 4px;
}

.btRow:nth-child(4) .btCell{
  /* Result row */
  font-size: 12px;
  font-weight: 500;
  word-break: break-all;
}

.btSelect{
  font-size: 10px;
  padding: 3px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  width: 100%;
  max-width: 52px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Separators between bytes */
.btSepSplit,
.btSepMerge{
  width: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  user-select: none;
  flex-shrink: 0;
}

/* Split separator (within a group - dashed) */
.btSepSplit::before{
  content: '┊';
  opacity: 0.2;
  transition: all 0.15s;
}

.btSepSplit:hover::before{
  opacity: 0.7;
  color: #f39c12;
}

/* Merge separator (between groups - solid) */
.btSepMerge::before{
  content: '│';
  opacity: 0.4;
  transition: all 0.15s;
}

.btSepMerge:hover::before{
  opacity: 0.9;
  color: #2a7de1;
  font-weight: bold;
}

.interpControls .btn{
  padding: 5px 10px;
  font-size: 12px;
}

/* Error/Warning display */
.errorWarningSection{
  background: #fff4d4;
  border: 1px solid #f39c12;
  border-radius: var(--radius-sm);
  padding: 10px;
}

.errorWarningSection.error{
  background: #ffd6d6;
  border-color: #e74c3c;
}

.errorWarningSection .sectionTitle{
  font-size: 12px;
  margin-bottom: 6px;
}

.errorWarningList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.errorWarningList li{
  font-size: 12px;
  padding-left: 16px;
  position: relative;
}

.errorWarningList li::before{
  content: "•";
  position: absolute;
  left: 4px;
}

/* ========= Project Configuration ========= */
.projectConfig{
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.configSection{
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
}

/* Nodes list */
.nodesList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nodeCard{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nodeCard.disabled{
  opacity: 0.6;
  background: #f8f8f8;
}

.nodeHeader{
  display: flex;
  align-items: center;
  gap: 10px;
}

.nodeHeader input[type="checkbox"]{
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.nodeHeader .nodeId{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  color: #2a7de1;
  min-width: 50px;
}

.nodeHeader .nodeName{
  flex: 1;
  font-weight: 600;
  color: var(--text);
}

.nodeHeader .nodeActions{
  display: flex;
  gap: 6px;
}

.nodeBody{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
  padding-left: 28px;
}

.nodeBody label{
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.nodeBody select,
.nodeBody input{
  font-size: 13px;
}

.edsSelect{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

/* File list (EDS tab) */
.fileList{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.fileItem{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fileItem .fileName{
  color: var(--text);
  font-weight: 600;
}

.fileItem .fileSource{
  color: var(--muted);
  font-size: 11px;
}

/* ========= EDS Editor ========= */
.edsObjectEditor{
  flex: 0 0 auto;
  max-height: 450px;
  border-top: 2px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editorContent{
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 0 8px;
}

.editorGrid{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--bg);
  padding: 12px;
  border-radius: var(--radius-sm);
}

.editorGrid label{
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}

.defaultValueInput{
  display: flex;
  gap: 8px;
  align-items: center;
}

.editorActions{
  display: flex;
  gap: 10px;
  padding: 0 8px;
}

.editorActions .btn{
  flex: 1;
}

/* EDS list columns */
#edsObjectList{
  --log-cols: 70px 70px 70px minmax(200px, 2fr) 100px 100px 100px minmax(120px, 1fr) 100px;
  --log-minw: 1000px;
}

/* ========= PDO Mapping Tool ========= */
.pdoMappingTool{
  flex: 0 0 auto;
  max-height: 500px;
  border-top: 2px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdoToolContent{
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 0 8px;
}

.pdoTypeSelector{
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}

.pdoTypeBtn{
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  border-radius: 6px 6px 0 0;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: -2px;
}

.pdoTypeBtn:hover{
  color: var(--text);
  background: rgba(0,0,0,.03);
}

.pdoTypeBtn.active{
  color: #2a7de1;
  background: var(--card);
  border-bottom-color: var(--card);
  box-shadow: 0 -1px 3px rgba(0,0,0,.05);
}

.pdoListSection{
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdoConfigList{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdoConfigCard{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.15s;
}

.pdoCardHeader{
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s;
}

.pdoCardHeader:hover{
  background: rgba(42,125,225,.04);
}

.pdoCardLeft{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.pdoCardTitle{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 700;
  font-size: 13px;
}

.pdoCardInfo{
  font-size: 11px;
  color: var(--muted);
}

.pdoCardArrow{
  font-size: 16px;
  color: var(--text);
  margin-left: 8px;
  user-select: none;
  width: 24px;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.pdoCardArrow:hover{
  opacity: 1;
}

.pdoCardContent{
  border-top: 1px solid var(--border);
  padding: 8px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdoContentGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pdoConfigSection{
  display: flex;
  flex-direction: column;
}

.pdoMappingsSection{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdoMappingsHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pdoMappingsHeader .sectionTitle{
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.pdoMappingsList{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
}

.pdoMappingItem{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: grid;
  grid-template-columns: 30px 1fr 1fr 100px auto;
  gap: 10px;
  align-items: center;
}

.pdoMappingItem .mappingNum{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 700;
  color: var(--muted);
  font-size: 12px;
}

.pdoMappingItem .mappingBits{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: var(--muted);
}

.pdoCardActions{
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.btnSmall{
  padding: 4px 10px;
  font-size: 12px;
}

.pdoEditor{
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdoEditorHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pdoLengthWarning{
  color: #e74c3c;
  font-size: 12px;
  font-weight: 700;
  background: #ffe0e0;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.pdoEditorGrid{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  align-items: center;
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-sm);
}

.pdoEditorGrid label{
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}

.pdoMappingSection{
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdoMappingList{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdoMappingItem{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: grid;
  grid-template-columns: 30px 1fr 1fr 100px auto;
  gap: 10px;
  align-items: center;
}

.pdoMappingItem .mappingNum{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 700;
  color: var(--muted);
  font-size: 12px;
}

.pdoMappingItem .mappingBits{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: var(--muted);
}

.pdoEditorActions{
  display: flex;
  gap: 10px;
}

.pdoEditorActions .btn{
  flex: 1;
}