/* ---------- toolbar ---------- */
  .toolbar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 12px; background: var(--panel); border-bottom: 1px solid var(--border);
  }
  .toolbar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
  .toolbar .grow { flex: 1; }

  button {
    background: var(--panel2); color: var(--text); border: 1px solid var(--border2);
    border-radius:0; padding: 5px 10px; cursor: pointer;
    font-family: var(--font-condensed); font-size: 12.5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  }
  button:hover { border-color: var(--accent); }
  button.primary { background: var(--accent); border-color: var(--accent); color: var(--field); font-weight: 600; }
  button.primary:hover { filter: brightness(1.08); }
  button.danger:hover { border-color: var(--danger); color: var(--danger); }
  button.ghost { background: none; border-color: transparent; }
  button.ghost:hover { background: var(--panel2); border-color: var(--border); }
  button:disabled { opacity: .4; cursor: default; }
  button .ic { width: 15px; height: 15px; flex: none; }
  .ic { width: 15px; height: 15px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  input[type=text], input[type=number], select {
    background: var(--panel2); color: var(--text); border: 1px solid var(--border);
    border-radius:0; padding: 4px 6px; font: inherit; font-size: 12.5px;
  }
  input[type=text]:focus, input[type=number]:focus, select:focus { outline: 1px solid var(--accent); }
  input[type=number] { width: 72px; }
  label { color: var(--muted); font-size: 11.5px; font-family: var(--font-condensed); letter-spacing: 0.07em; text-transform: uppercase; }

  .cad-work { flex: 1; display: flex; min-height: 0; position: relative; }
  .tab-page { flex: 1; display: flex; min-height: 0; min-width: 0; }
  .tab-page[hidden] { display: none; }

  /* ---------- library sidebar ---------- */
  #sidebar {
    width: 300px; min-width: 200px; background: var(--panel); border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
  }
  #sidebar .bar { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  #sidebar .bar .ttl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-family: var(--font-condensed); }
  #ltList { flex: 1; overflow-y: auto; }
  .lt-item { padding: 7px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .lt-item:hover { background: var(--panel2); }
  .lt-item.selected { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
  .lt-item .lt-name { font-weight: 600; font-size: 12.5px; }
  .lt-item .lt-desc { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lt-item canvas { width: 100%; height: 18px; display: block; margin-top: 3px; }
  #emptyLib { padding: 18px 14px; color: var(--muted); font-size: 12px; }

  #splitter { width: 5px; cursor: col-resize; background: transparent; flex: none; }
  #splitter:hover, #splitter.drag { background: var(--accent); }

  /* ---------- editor ---------- */
  #editor { flex: 1; overflow-y: auto; padding: 14px 18px; min-width: 0; }
  .card {
    background: var(--panel); border: 1px solid var(--border); border-radius:0;
    padding: 12px 14px; margin-bottom: 14px;
  }
  .card h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-family: var(--font-condensed); }
  .card h2::before { content: ''; display: inline-block; width: 3px; height: 12px; background: var(--accent); border-radius:0; flex: none; }
  .card h2 .sub { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: 11.5px; font-family: var(--font-body); }
  .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .row:last-child { margin-bottom: 0; }
  #nameInput { width: 200px; text-transform: uppercase; font-weight: 600; }
  #descInput { flex: 1; min-width: 240px; }
  #previewCanvas { width: 100%; height: 220px; display: block; border-radius:0; background: var(--field); }
  #stripCanvas { width: 100%; height: 92px; display: block; cursor: default; touch-action: none; }
  .hint { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
  .warn { color: var(--warn); font-size: 12px; margin-top: 6px; }
  .warn:empty { display: none; }

  /* segment master/detail */
  #segToolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
  #segToolbar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 2px; }
  #segArea { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  #segList { flex: 1 1 320px; min-width: 280px; border: 1px solid var(--border); border-radius:0; overflow: hidden; }
  .seg-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 9px;
    border-bottom: 1px solid var(--border); cursor: pointer;
  }
  .seg-row:last-child { border-bottom: none; }
  .seg-row:hover { background: var(--panel2); }
  .seg-row.selected { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
  .seg-row .idx { color: var(--muted); font-size: 10.5px; width: 18px; text-align: right; flex: none; }
  .seg-row .summary { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seg-row .summary .mono { font-family: var(--font-mono); }
  .seg-empty { padding: 16px; color: var(--muted); font-size: 12px; text-align: center; }
  .type-badge { display: inline-block; padding: 1px 8px; border-radius:0; font-size: 10.5px; font-weight: 600; flex: none; min-width: 42px; text-align: center; }
  .type-dash  { background: var(--steel-dim); color: var(--steel-light); }
  .type-gap   { background: var(--band); color: var(--muted); }
  .type-dot   { background: var(--success-bg); color: var(--success); }
  .type-text  { background: var(--accent-dim); color: var(--accent-light); }
  .type-shape { background: var(--warn-bg); color: var(--warn); }
  .chip-warn {
    display: inline-flex; align-items: center; gap: 3px; flex: none;
    background: var(--warn-bg); color: var(--warn); border-radius:0; padding: 0 7px; font-size: 10.5px; font-weight: 600;
  }
  #segProps {
    flex: 1 1 300px; min-width: 280px; border: 1px solid var(--border); border-radius:0;
    padding: 12px; background: var(--panel2);
  }
  #segProps .pf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  #segProps .pf label { width: 74px; flex: none; text-align: right; }
  #segProps .pf .mini { width: 72px; }
  #segProps .pf .grow { flex: 1; min-width: 0; }
  #segProps .props-none { color: var(--muted); font-size: 12px; text-align: center; padding: 12px; }
  #segProps .props-warn { color: var(--warn); font-size: 11.5px; margin-top: 4px; display: flex; gap: 8px; align-items: center; }
  #segProps h3 { margin: 0 0 12px; font-size: 12px; display: flex; align-items: center; gap: 8px; }

  code { background: var(--panel2); border: 1px solid var(--border); border-radius:0; padding: 1px 5px; font-size: 12px; font-family: var(--font-mono); color: var(--accent-light); }
  #linPreview {
    background: var(--panel2); border: 1px solid var(--border); border-radius:0;
    padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; white-space: pre; overflow-x: auto;
  }

  /* ---------- shape files tab ---------- */
  #page-shx { flex-direction: column; }
  #shxGridWrap { flex: 1; overflow-y: auto; }
  #shxGrid, #pickGrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px; padding: 12px; align-content: start;
  }
  .shx-card {
    background: var(--panel2); border: 1px solid var(--border); border-radius:0;
    padding: 6px; text-align: center; position: relative;
  }
  .shx-card canvas { width: 100%; height: 72px; display: block; }
  .shx-card .shx-name { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shx-card .shx-num { font-size: 10.5px; color: var(--muted); }
  .shx-card button.ins { position: absolute; top: 4px; right: 4px; padding: 1px 7px; font-size: 11px; display: none; }
  .shx-card:hover button.ins { display: inline-flex; }
  .shx-card button.del { position: absolute; top: 4px; left: 4px; padding: 0 6px; font-size: 12px; line-height: 18px; display: none; }
  .shx-card:hover button.del { display: inline-flex; }
  .shx-card.deleted { opacity: .5; border-style: dashed; }
  .shx-card.deleted canvas { filter: grayscale(1); }
  .shx-card.deleted button.restore { display: inline-flex; position: absolute; top: 4px; left: 4px; padding: 0 7px; font-size: 11px; }
  .shx-card.edited { border-color: var(--accent2); }
  .shx-card .edit-tag { position: absolute; top: 4px; right: 4px; font-size: 9.5px; color: var(--accent2); font-weight: 700; }
  .shx-card.pickable { cursor: pointer; }
  .shx-card.pickable:hover { border-color: var(--accent); background: var(--sel); }
  .shx-empty { padding: 30px; color: var(--muted); grid-column: 1 / -1; text-align: center; line-height: 1.7; }

  /* ---------- status bar ---------- */
  footer#statusBar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 4px 14px; background: var(--panel); border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--muted); min-height: 26px;
  }
  footer#statusBar .st { display: inline-flex; align-items: center; gap: 5px; }
  footer#statusBar .grow { flex: 1; }
  .dirty-dot { width: 8px; height: 8px; border-radius:0; background: var(--warn); display: none; }
  body.dirty .dirty-dot { display: inline-block; }
  #stFlash { color: var(--accent2); font-weight: 600; }

  /* ---------- modals ---------- */
  .overlay {
    position: fixed; inset: 0; background: #0009; display: none;
    align-items: center; justify-content: center; z-index: 50;
  }
  .overlay.open { display: flex; }
  #modalBox {
    background: var(--panel); border: 1px solid var(--border); border-radius:0;
    padding: 18px 20px; max-width: 480px; width: 90%; box-shadow: var(--shadow);
  }
  #modalBox h3 { margin: 0 0 8px; font-size: 14px; }
  #modalBox p { color: var(--muted); font-size: 12.5px; }
  #modalBox ul { max-height: 140px; overflow-y: auto; font-size: 12px; padding-left: 20px; }
  #modalBox .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

  #pickBox {
    background: var(--panel); border: 1px solid var(--border); border-radius:0;
    width: min(820px, 92vw); height: min(620px, 86vh); display: flex; flex-direction: column;
    box-shadow: var(--shadow);
  }
  .pick-head { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .pick-head h3 { margin: 0 6px 0 0; font-size: 14px; }
  #pickHint { background: var(--accent); color: var(--field); border-radius:0; padding: 2px 10px; font-size: 11.5px; font-weight: 600; }
  #pickInfo { color: var(--muted); font-size: 12px; }
  #pickGrid { flex: 1; overflow-y: auto; }
  .grow { flex: 1; }

  /* glyph editor */
  #editBox {
    background: var(--panel); border: 1px solid var(--border); border-radius:0;
    width: min(1080px, 96vw); height: min(760px, 92vh); display: flex; flex-direction: column;
    box-shadow: var(--shadow);
  }
  .edit-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .edit-tools { display: inline-flex; gap: 2px; margin-left: 6px; }
  .edit-tools .et { border-radius:0; }
  .edit-tools .et.active { background: var(--accent); border-color: var(--accent); color: var(--field); }
  .edit-body { flex: 1; display: flex; min-height: 0; }
  #editCanvas { flex: 1; min-width: 0; display: block; background: var(--field); cursor: crosshair; touch-action: none; }
  .edit-side { width: 260px; flex: none; border-left: 1px solid var(--border); padding: 12px; overflow-y: auto; background: var(--panel2); }
  .edit-side .pf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .edit-side .pf label { width: 60px; flex: none; text-align: right; }
  .edit-guide { font-size: 11.5px; color: var(--muted); line-height: 1.6; background: var(--panel); border: 1px solid var(--border); border-radius:0; padding: 8px; margin-top: 6px; }
  .edit-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }

.site-inline-1{position:absolute}
.site-inline-2{width:180px}
.site-inline-3{display:none;}
.site-inline-4{color:var(--muted)}
.site-inline-5{width:180px}
.site-inline-6{color:var(--muted);font-size:12px;}
.site-inline-7{width:1px;height:16px;background:var(--border)}
.site-inline-8{width:100px}
.site-inline-9{color:var(--muted);font-size:12px;}
.site-inline-10{margin-top:6px;}
.site-inline-11{width:64px}
.site-inline-12{color:var(--muted);font-size:12px;}
.site-inline-13{width:130px}
.site-inline-14{padding:4px 14px}
.site-inline-15{white-space:pre-line}
.site-inline-16{margin-top:12px}
.site-inline-17{flex-direction:column;align-items:stretch;gap:8px}
.site-inline-18{color:var(--danger)}
.site-inline-19{display:none}
.site-inline-20{width:1px;background:var(--border)}
.site-inline-21{color:var(--muted);font-size:11.5px}
.site-inline-22{text-transform:uppercase}
.site-inline-23{font-size:11.5px;color:var(--muted);line-height:1.8;margin:6px 0}
.site-inline-24{margin:6px 0}
.site-inline-25{margin-top:10px}
.site-inline-26{width:100%}
.site-inline-27{width:100%;height:60px;display:block;margin-top:6px;background:var(--field);border-radius:0}
.site-inline-28{font-size:11px;color:var(--muted);margin-top:4px}
.site-inline-29{font-size:12px}
.site-inline-30{display:none}
.site-inline-31{display:none}