/* ── Reset & Root ──────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sb:  220px;
  --th:  40px;
  --hh:  48px;
  --sh:  26px;
  --bg0: #1e1e1e;
  --bg1: #252526;
  --bg2: #2d2d30;
  --bgh: #3a3a3a;
  --bga: #094771;
  --t0:  #cccccc;
  --t1:  #8a8a8a;
  --ta:  #569cd6;
  --bd:  #3e3e42;
  --ac:  #007acc;
  --ec:  #f0a830;
  --fu:  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fm:  'Cascadia Code', 'Consolas', 'Monaco', monospace;
}

html, body {
  height: 100%;
  font-family: var(--fu);
  font-size: 13px;
  background: var(--bg0);
  color: var(--t0);
  overflow: hidden;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ── Header ────────────────────────────────────────────────────────────────── */
#hdr {
  height: var(--hh);
  background: var(--bg1);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  flex-shrink: 0;
}

.logo         { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.logo-ic      { width: 30px; height: 30px; background: var(--ac); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; font-weight: 700; }
.hdr-sep      { width: 1px; height: 22px; background: var(--bd); margin: 0 4px; }
.hdr-btn      { padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 5px; color: var(--t1); border: 1px solid transparent; background: none; font-family: var(--fu); }
.hdr-btn:hover { background: var(--bgh); color: var(--t0); }
.hdr-btn.prime        { background: var(--ac); color: #fff; border-color: var(--ac); }
.hdr-btn.prime:hover  { background: #0086e0; }
.ml-auto { margin-left: auto; }

/* ── Workspace ─────────────────────────────────────────────────────────────── */
#ws { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
#sb {
  width: var(--sb);
  background: var(--bg1);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.sb-sec-hdr {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t1);
  cursor: pointer;
  user-select: none;
  border-top: 1px solid var(--bd);
}
.sb-sec-hdr:first-child { border-top: none; }
.sb-sec-hdr:hover       { background: var(--bgh); }

.sb-add { margin-left: auto; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--t1); cursor: pointer; font-size: 18px; line-height: 1; }
.sb-add:hover { background: var(--bga); color: #fff; }

.fl { overflow-y: auto; }

.fi         { display: flex; align-items: center; padding: 3px 8px 3px 14px; cursor: pointer; gap: 5px; user-select: none; }
.fi:hover   { background: var(--bgh); }
.fi.act     { background: var(--bga); }
.fi .ic     { font-size: 12px; flex-shrink: 0; }
.fi .nm     { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.fi .badge  { font-size: 10px; padding: 1px 5px; background: var(--bg2); border-radius: 8px; color: var(--t1); }
.fi .fax    { display: none; gap: 2px; }
.fi:hover .fax { display: flex; }

.fax-btn        { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 2px; cursor: pointer; color: var(--t1); font-size: 11px; }
.fax-btn:hover  { background: rgba(255,255,255,.12); color: #fff; }

.empty-list { padding: 5px 14px; font-size: 11px; color: var(--t1); font-style: italic; }

/* ── Regions panel ─────────────────────────────────────────────────────────── */
#reg-panel  { flex: 1; overflow-y: auto; border-top: 1px solid var(--bd); }

.reg-item       { display: flex; align-items: center; padding: 3px 8px; cursor: pointer; gap: 6px; }
.reg-item:hover { background: var(--bgh); }
.reg-item.act   { background: rgba(240,168,48,.18); border-left: 2px solid var(--ec); }
.reg-dot        { width: 7px; height: 7px; border-radius: 50%; background: var(--ec); flex-shrink: 0; }
.reg-nm         { font-size: 12px; }

/* ── Info panel ────────────────────────────────────────────────────────────── */
#info    { padding: 7px 9px; font-size: 11px; color: var(--t1); background: var(--bg0); border-top: 1px solid var(--bd); }
.inf-row { display: flex; justify-content: space-between; padding: 2px 0; }
.inf-v   { color: var(--t0); }

/* ── Editor area ───────────────────────────────────────────────────────────── */
#ea  { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#etb { height: var(--th); background: var(--bg2); border-bottom: 1px solid var(--bd); display: flex; align-items: center; padding: 0 8px; gap: 4px; flex-shrink: 0; }

.tg     { display: flex; align-items: center; gap: 2px; }
.tg+.tg { margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--bd); }

.tb           { padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; display: flex; align-items: center; gap: 4px; color: var(--t1); white-space: nowrap; border: 1px solid transparent; background: none; font-family: var(--fu); }
.tb:hover     { background: var(--bgh); color: var(--t0); }
.tb.act       { background: var(--bga); color: #fff; border-color: var(--ac); }
.tb.prime     { background: var(--ac); color: #fff; }
.tb.prime:hover { background: #0086e0; }
.tb.warn      { color: #f48771; }
.tb.warn:hover { background: rgba(244,135,113,.1); }
.tb-sp        { flex: 1; }

.mode-tabs { display: flex; background: var(--bg0); border-radius: 4px; padding: 2px; gap: 1px; }
.mt              { padding: 2px 10px; border-radius: 3px; cursor: pointer; font-size: 11px; color: var(--t1); }
.mt.act          { background: var(--bg1); color: var(--t0); }
.mt:hover:not(.act) { color: var(--t0); }

/* ── Editor panels ─────────────────────────────────────────────────────────── */
#ep  { flex: 1; display: flex; overflow: hidden; }

#vp     { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#vp-hdr { padding: 3px 10px; font-size: 11px; color: var(--t1); background: var(--bg1); border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.leg       { display: flex; align-items: center; gap: 4px; font-size: 10px; }
.leg-dot   { width: 10px; height: 10px; border: 2px dashed var(--ec); border-radius: 2px; flex-shrink: 0; }
.leg-dot.locked { border: none; background: rgba(0,0,0,.25); }
#vif { flex: 1; border: none; background: #fff; }

.pdiv        { width: 4px; background: var(--bd); cursor: col-resize; flex-shrink: 0; }
.pdiv:hover  { background: var(--ac); }

#cp     { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#cp-hdr { padding: 3px 10px; font-size: 11px; color: var(--t1); background: var(--bg1); border-bottom: 1px solid var(--bd); flex-shrink: 0; }
#cec    { flex: 1; position: relative; overflow: hidden; display: flex; }
#lns    { background: var(--bg1); color: var(--t1); font-family: var(--fm); font-size: 12px; line-height: 1.5; padding: 8px 8px 8px 10px; text-align: right; user-select: none; border-right: 1px solid var(--bd); min-width: 38px; overflow: hidden; flex-shrink: 0; }
#cta    { flex: 1; background: var(--bg0); color: var(--t0); font-family: var(--fm); font-size: 12px; line-height: 1.5; padding: 8px; border: none; outline: none; resize: none; tab-size: 2; overflow: auto; }

/* ── Empty state ───────────────────────────────────────────────────────────── */
#es     { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--t1); }
.es-ic  { font-size: 52px; opacity: .4; }
.es h3  { font-size: 16px; font-weight: 400; color: var(--t0); }
.es p   { font-size: 12px; }
.es-acts { display: flex; gap: 8px; margin-top: 8px; }

/* ── Status bar ────────────────────────────────────────────────────────────── */
#stb { height: var(--sh); background: var(--ac); display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: rgba(255,255,255,.9); gap: 16px; flex-shrink: 0; }
.si  { display: flex; align-items: center; gap: 4px; }

/* ── Shared buttons ────────────────────────────────────────────────────────── */
.btn  { padding: 5px 12px; border-radius: 3px; cursor: pointer; font-size: 12px; font-family: var(--fu); border: 1px solid transparent; display: inline-flex; align-items: center; gap: 5px; }
.bp            { background: var(--ac);   color: #fff; }
.bp:hover      { background: #0086e0; }
.bs            { background: var(--bg2);  color: var(--t0); border-color: var(--bd); }
.bs:hover      { background: var(--bgh); }
.bd-           { background: #c12a2a;     color: #fff; }
.bd-:hover     { background: #d43; }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
#mo       { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; display: none; align-items: center; justify-content: center; }
#mo.show  { display: flex; }
.mdl      { background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px; padding: 20px; min-width: 340px; max-width: 520px; width: 100%; }
.mdl-t    { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.mdl-b    { margin-bottom: 16px; }
.mdl-f    { display: flex; justify-content: flex-end; gap: 8px; }
.fg       { margin-bottom: 12px; }
.fl-      { display: block; font-size: 11px; color: var(--t1); margin-bottom: 4px; }
.fi-      { width: 100%; padding: 6px 8px; background: var(--bg0); border: 1px solid var(--bd); border-radius: 3px; color: var(--t0); font-family: var(--fu); font-size: 12px; outline: none; }
.fi-:focus { border-color: var(--ac); }
.note     { font-size: 11px; color: var(--t1); padding: 8px; background: var(--bg0); border-radius: 3px; border-left: 2px solid var(--ac); }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
#tc { position: fixed; bottom: 36px; right: 14px; z-index: 2000; display: flex; flex-direction: column; gap: 6px; }
.toast     { padding: 8px 12px; background: var(--bg1); border: 1px solid var(--bd); border-radius: 4px; font-size: 12px; color: var(--t0); box-shadow: 0 4px 14px rgba(0,0,0,.4); display: flex; align-items: center; gap: 8px; max-width: 280px; animation: tslide .18s ease; }
.toast.ok  { border-left: 3px solid #4ec9b0; }
.toast.err { border-left: 3px solid #f48771; }
.toast.inf { border-left: 3px solid var(--ac); }
@keyframes tslide { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Context menu ──────────────────────────────────────────────────────────── */
#ctx            { position: fixed; z-index: 3000; background: var(--bg1); border: 1px solid var(--bd); border-radius: 4px; padding: 4px 0; min-width: 170px; box-shadow: 0 4px 12px rgba(0,0,0,.4); display: none; }
.ctx-item       { padding: 5px 14px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ctx-item:hover { background: var(--bga); color: #fff; }
.ctx-sep        { height: 1px; background: var(--bd); margin: 3px 0; }
.ctx-item.danger       { color: #f48771; }
.ctx-item.danger:hover { background: rgba(244,135,113,.15); }

.hidden { display: none !important; }

/* ── External editor ───────────────────────────────────────────────────────── */
.ext-ed-modal .mdl { max-width: 560px; }
.ee-step     { background: var(--bg0); border: 1px solid var(--bd); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.ee-step-hdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t1); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ee-step-num { width: 16px; height: 16px; border-radius: 50%; background: var(--ac); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ee-status   { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg1); border: 1px solid var(--bd); border-radius: 3px; margin-bottom: 6px; font-size: 11px; }
.ee-status .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-ok      { background: #4ec9b0; }
.dot-no      { background: var(--t1); }
.ee-path     { font-family: var(--fm); font-size: 11px; color: var(--ec); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-box          { display: flex; align-items: center; background: var(--bg0); border: 1px solid var(--bd); border-radius: 3px; padding: 5px 8px; margin-top: 5px; gap: 6px; cursor: pointer; }
.cmd-box:hover    { border-color: var(--ac); }
.cmd-text         { font-family: var(--fm); font-size: 11px; color: var(--ta); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-copy-lbl     { font-size: 10px; color: var(--t1); flex-shrink: 0; border: 1px solid var(--bd); padding: 1px 5px; border-radius: 2px; }
.cmd-box:hover .cmd-copy-lbl { border-color: var(--ac); color: var(--t0); }
.ed-picker    { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ed-card      { border: 1px solid var(--bd); border-radius: 4px; padding: 8px 10px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ed-card:hover { border-color: var(--ac); background: var(--bgh); }
.ed-card.sel   { border-color: var(--ac); background: var(--bga); color: #fff; }
.ed-card .ed-ic  { font-size: 18px; flex-shrink: 0; }
.ed-card .ed-nm  { font-weight: 600; font-size: 11px; }
.ed-card .ed-sub { font-size: 10px; color: var(--t1); }
.ed-card.sel .ed-sub { color: rgba(255,255,255,.7); }
.ed-path-row     { display: flex; gap: 6px; align-items: center; }
.ed-path-row .fi- { flex: 1; }

/* ── API status badge ──────────────────────────────────────────────────────── */
.api-badge         { font-size: 11px; padding: 2px 9px; border-radius: 10px; border: 1px solid; cursor: pointer; font-family: var(--fu); }
.api-badge.online  { color: #4ec9b0; border-color: #4ec9b0; }
.api-badge.offline { color: #f48771; border-color: #f48771; }
.api-badge:hover   { opacity: .8; }

/* ── Folder browser ────────────────────────────────────────────────────────── */
.fb-wrap          { display: flex; flex-direction: column; gap: 6px; }
.fb-bar           { display: flex; gap: 6px; }
.fb-bar .fi-      { flex: 1; font-family: var(--fm); font-size: 11px; }
#fb-list          { height: 230px; overflow-y: auto; border: 1px solid var(--bd); border-radius: 3px; background: var(--bg0); }
.fb-item          { padding: 5px 10px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 7px; color: var(--t0); border-bottom: 1px solid rgba(255,255,255,.04); }
.fb-item:hover    { background: var(--bga); color: #fff; }
.fb-item.up       { color: var(--t1); font-style: italic; }
.fb-sel-row       { margin-top: 4px; }
.fb-sel-path      { font-family: var(--fm); font-size: 11px; background: var(--bg0); border: 1px solid var(--ec); border-radius: 3px; padding: 5px 8px; color: var(--ec); word-break: break-all; }

/* ── Project sidebar ───────────────────────────────────────────────────────── */
#proj-sec        { border-top: none; }
#proj-hdr        { background: var(--bg0); border-bottom: 1px solid var(--bd); }
.proj-label      { display: flex; align-items: center; gap: 5px; font-size: 11px; flex: 1; overflow: hidden; }
.proj-label strong { color: var(--ec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-btns       { display: flex; gap: 2px; flex-shrink: 0; }
.proj-btn        { padding: 2px 6px; font-size: 10px; border-radius: 2px; cursor: pointer; background: var(--bg2); color: var(--t1); border: 1px solid var(--bd); font-family: var(--fu); }
.proj-btn:hover  { background: var(--bga); color: #fff; border-color: var(--ac); }
.proj-btn.prime        { background: var(--ac); color: #fff; border-color: var(--ac); }
.proj-btn.prime:hover  { background: #0086e0; }
#proj-tree       { max-height: 220px; overflow-y: auto; border-bottom: 1px solid var(--bd); }

/* ── File tree ─────────────────────────────────────────────────────────────── */
.tree-dir-hdr         { display: flex; align-items: center; gap: 4px; padding: 3px 0; cursor: pointer; font-size: 11px; color: var(--t0); user-select: none; }
.tree-dir-hdr:hover   { color: #fff; }
.tree-arr             { font-size: 8px; color: var(--t1); width: 10px; flex-shrink: 0; }
.tree-kids            { padding-left: 0; }
.tree-file            { display: flex; align-items: center; gap: 4px; padding: 2px 0; font-size: 11px; color: var(--t1); cursor: default; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-file.linked     { color: var(--t0); cursor: pointer; }
.tree-file.linked:hover { color: var(--ec); }
.tree-file span, .tree-dir-hdr span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Project wizard ────────────────────────────────────────────────────────── */
.pg-checks        { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.pg-check-lbl     { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--bd); border-radius: 3px; cursor: pointer; }
.pg-check-lbl:hover { border-color: var(--ac); background: var(--bgh); }
.pg-check-lbl input { accent-color: var(--ac); }
.wiz-step         { background: var(--bg0); border: 1px solid var(--bd); border-radius: 4px; padding: 10px; margin-bottom: 8px; }
.wiz-step-hdr     { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t1); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.wiz-num          { width: 16px; height: 16px; border-radius: 50%; background: var(--ac); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scan-result      { padding: 8px; background: var(--bg0); border: 1px solid var(--bd); border-radius: 3px; font-size: 11px; margin-top: 6px; }
.scan-row         { display: flex; justify-content: space-between; padding: 2px 0; color: var(--t1); }
.scan-row strong  { color: var(--t0); }

/* ── External editor floating panel ─────────────────────────────────────────── */
#ext-ed-panel {
  position:     fixed;
  bottom:       calc(var(--sh) + 10px);
  right:        14px;
  z-index:      1500;
  width:        270px;
  background:   var(--bg1);
  border:       1px solid var(--bd);
  border-radius: 6px;
  box-shadow:   0 6px 24px rgba(0,0,0,.55);
  overflow:     hidden;
  font-size:    12px;
}

.eed-hdr {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         7px 10px;
  background:      var(--bg2);
  border-bottom:   1px solid var(--bd);
  font-size:       11px;
  font-weight:     600;
  color:           var(--t1);
  gap:             6px;
}
.eed-hdr-left  { display: flex; align-items: center; gap: 6px; flex: 1; overflow: hidden; }
#eed-title     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eed-x         { background: none; border: none; color: var(--t1); cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.eed-x:hover   { color: #f48771; }

.eed-dot        { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.eed-dot-on     { background: #4ec9b0; }
.eed-dot-off    { background: var(--t1); }

.eed-body      { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.eed-file      { font-family: var(--fm); font-size: 11px; color: var(--ec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eed-path-row  { display: flex; align-items: center; gap: 5px; }
.eed-path      { font-family: var(--fm); font-size: 10px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; cursor: default; }
.eed-copy-path { background: none; border: 1px solid var(--bd); border-radius: 2px; color: var(--t1); cursor: pointer; font-size: 10px; padding: 1px 5px; flex-shrink: 0; }
.eed-copy-path:hover { border-color: var(--ac); color: var(--t0); }

.eed-status        { font-size: 11px; padding: 5px 7px; border-radius: 3px; }
.eed-status.idle   { color: var(--t1); background: var(--bg0); }
.eed-status.changed { color: #000; background: var(--ec); font-weight: 600; animation: eed-pulse 1.4s infinite; }
@keyframes eed-pulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }

.eed-btns       { display: flex; flex-direction: column; gap: 5px; }
.eed-apply      { padding: 6px 12px; border-radius: 3px; cursor: pointer; font-size: 12px; font-family: var(--fu); border: 1px solid var(--bd); background: var(--bg2); color: var(--t0); width: 100%; text-align: center; transition: background .15s, color .15s; }
.eed-apply:hover { background: var(--bgh); }
.eed-apply.eed-apply-active  { background: var(--ec); color: #000; border-color: #c87800; font-weight: 600; }
.eed-apply.eed-apply-active:hover { background: #c87800; color: #fff; }
.eed-discard    { padding: 4px 12px; border-radius: 3px; cursor: pointer; font-size: 11px; font-family: var(--fu); border: 1px solid transparent; background: none; color: var(--t1); width: 100%; text-align: center; }
.eed-discard:hover { color: #f48771; background: rgba(244,135,113,.1); }