body { background: #f4f6f9; }
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card { border-radius: .5rem; }
.stat-card .num { font-size: 1.8rem; font-weight: 700; }

.snag-card { cursor: pointer; touch-action: manipulation; transition: box-shadow .15s, transform .05s; }
.snag-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.snag-card:active { transform: scale(0.99); }

#lineCanvas {
  position: relative;
  width: 100%;
  min-height: 480px;
  background: #fff repeating-linear-gradient(0deg, #eee 0, #eee 1px, transparent 1px, transparent 24px),
              repeating-linear-gradient(90deg, #eee 0, #eee 1px, transparent 1px, transparent 24px);
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  overflow: auto;
}

.line-el {
  position: absolute;
  width: 90px;
  cursor: grab;
  text-align: center;
  user-select: none;
}
.line-el:active { cursor: grabbing; }
.line-el img { width: 64px; height: 64px; display: block; margin: 0 auto; pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.palette-icon img { -webkit-user-drag: none; user-drag: none; }
.line-el .el-label {
  font-size: .72rem;
  background: rgba(255,255,255,.9);
  border-radius: 4px;
  padding: 1px 3px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-el .el-seq {
  position: absolute;
  top: -6px;
  left: -6px;
  background: #0d6efd;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: .7rem;
  line-height: 20px;
  text-align: center;
}
.line-el.has-repairs .el-seq { background: #dc3545; }
.line-el:hover { outline: 2px solid #0d6efd; border-radius: 6px; }

.line-el.branch-el img { width: 48px; height: 48px; }
.line-el.branch-el .el-seq { background: #fd7e14; }

.el-shared {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ffc107;
  color: #212529;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: .65rem;
  line-height: 18px;
  text-align: center;
}

.branch-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.branch-btn {
  width: 100%;
  font-size: .65rem;
  padding: 2px 4px;
  line-height: 1.2;
  border: 1px solid #fd7e14;
  background: #fff3e0;
  color: #fd7e14;
  border-radius: 3px;
  cursor: pointer;
}
.branch-btn:hover { background: #fd7e14; color: #fff; }

.palette-icon { cursor: pointer; text-align: center; padding: .5rem; border: 1px solid #dee2e6; border-radius: .5rem; background: #fff; }
.palette-icon:hover { background: #e7f1ff; border-color: #0d6efd; }
.palette-icon img { width: 40px; height: 40px; }

#lineArrows { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.station-row.active { background: #fff3cd; }