:root {
  --bg: #1e1e1e; --panel: #2b2b2b; --border: #3c3c3c; --text: #e8e8e8; --muted: #9a9a9a;
  --accent: #3a7bd5; --accent2: #2d5fa8; --danger: #c44;
  --font: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 var(--font); }
#app { display: flex; flex-direction: column; height: 100vh; }
#toolbar {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  background: linear-gradient(#3a3a3a, #2a2a2a); border-bottom: 1px solid #111;
  flex-wrap: wrap;
}
#toolbar .logo { width: 22px; height: 22px; border-radius: 3px; }
.btn-group { display: flex; gap: 2px; padding: 0 6px; border-right: 1px solid var(--border); }
.spacer { flex: 1; }
button {
  background: #3a3a3a; color: var(--text); border: 1px solid #555; border-radius: 3px;
  padding: 4px 8px; cursor: pointer; font: inherit;
}
button:hover { background: #4a4a4a; }
button.active, button:active { background: var(--accent); border-color: var(--accent2); }
#main { flex: 1; display: grid; grid-template-columns: 220px 1fr 300px; min-height: 0; }
aside { background: var(--panel); border-right: 1px solid var(--border); overflow: auto; }
#side { border-right: none; border-left: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pane-title { font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; margin: 4px 0; }
#treeList { list-style: none; margin: 0; padding: 4px 8px; }
#treeList li { padding: 4px 6px; border-radius: 3px; cursor: pointer; }
#treeList li.active, #treeList li:hover { background: #3a4a5a; }
#dropHint { color: var(--muted); padding: 12px; font-size: 12px; }
#viewport { position: relative; background: #111; overflow: hidden; }
#map { width: 100%; height: 100%; display: block; cursor: crosshair; }
#overlay { position: absolute; left: 8px; bottom: 8px; color: #ccc; font-size: 12px; pointer-events: none; text-shadow: 0 0 3px #000; }
#kikuchi, #pf { width: 100%; background: #000; border: 1px solid var(--border); border-radius: 4px; }
.kik-meta { color: var(--muted); font-size: 11px; min-height: 2.5em; }
#statusbar {
  display: flex; gap: 16px; padding: 3px 10px; background: #252525; border-top: 1px solid #111;
  font-size: 12px; color: #ccc; flex-wrap: wrap;
}
#statusbar span { white-space: nowrap; }
#stMsg { flex: 1; min-width: 120px; color: #8ec7ff; }
.dragover #tree, .dragover #viewport { outline: 2px dashed var(--accent); outline-offset: -4px; }

.dropdown{position:relative;display:inline-block}
.dropdown .dd{display:none;position:absolute;top:100%;left:0;background:#2b2b2b;border:1px solid #555;z-index:20;min-width:90px}
.dropdown:hover .dd,.dropdown.open .dd{display:flex;flex-direction:column}
.dropdown .dd button{text-align:left;border:0;border-radius:0}
.maps{max-width:720px;flex-wrap:wrap}
#chartPane{padding:8px;border-top:1px solid var(--border)}

#progWrap { display:flex; }
#progBar { width:140px; height:8px; background:#333; border-radius:4px; overflow:hidden; }
#progFill { height:100%; width:0%; background:linear-gradient(90deg,#3c8,#6cf); transition:width .15s; }
#progPct { font-variant-numeric:tabular-nums; min-width:36px; }
#btnCancel { padding:0 6px; background:#522; color:#fff; border:0; border-radius:3px; cursor:pointer; }
#btnCancel:hover { background:#a33; }