:root {
  --bg: #101312;
  --panel: #181c1a;
  --panel2: #1f2422;
  --line: #2b322f;
  --text: #e8ebe9;
  --dim: #8a938f;
  --accent: #ea580c;
  --ok: #4ade80;
  --warn: #facc15;
  --err: #f87171;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  gap: 12px;
  user-select: none;
}

header { display: flex; align-items: baseline; gap: 10px; }
h1 { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; }
.ver { color: var(--dim); font-size: 12px; }

.sec-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 6px;
}

/* destinations */
.dests { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dest {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}
.dest .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.on { background: var(--ok); }
.dot.off { background: var(--err); }
.dot.none { background: var(--line); }
.dest .info { flex: 1; min-width: 0; }
.dest .dname { font-weight: 600; font-size: 13px; }
.dest .dpath {
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dest label { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: 12px; cursor: pointer; }

/* dropzone */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: var(--panel);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
}
.dropzone.over { border-color: var(--accent); background: var(--panel2); }
.dz-title { font-size: 15px; font-weight: 600; }
.dz-sub { color: var(--dim); font-size: 12px; margin-top: 4px; }

/* actions */
.actions { display: flex; gap: 8px; }
.btn {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 16px;
  font: 600 13px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.btn:hover { border-color: var(--dim); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.danger:hover { border-color: var(--err); color: var(--err); }

/* jobs */
.jobs { flex: none; }
.job {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  margin-bottom: 6px;
}
.job .jname { font-weight: 600; font-size: 13px; }
.job .jpath { color: var(--dim); font-size: 11px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job .jwhen { color: var(--dim); font-size: 11px; flex: none; }
.empty { color: var(--dim); font-size: 12px; padding: 4px 2px; }

/* log */
.logwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#log {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  background: #0b0e0d;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  font: 12px/1.5 Consolas, "Cascadia Mono", monospace;
  color: var(--dim);
  white-space: pre-wrap;
  user-select: text;
}
#log .ok { color: var(--ok); }
#log .err { color: var(--err); }